psmattas/resolver
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Resolved] Change date picker package

Browse Source
This commit is contained in:
Qolzam
2018-03-05 15:06:39 +07:00
parent f98263d33a
commit 45c4eb7f9a
12 changed files with 149 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -33,7 +33,6 @@
"lodash": "^4.17.4",
"material-ui": "^1.0.0-beta.34",
"material-ui-icons": "^1.0.0-beta.17",
"material-ui-pickers": "^1.0.0-beta.15.1",
"moment": "^2.18.1",
"morgan": "^1.8.1",
"node-sass-chokidar": "0.0.3",
@@ -43,6 +42,7 @@
"react": "^16.2.0",
"react-addons-test-utils": "^15.6.2",
"react-avatar-editor": "^10.3.0",
"react-day-picker": "^7.0.7",
"react-dom": "^16.2.0",
"react-event-listener": "^0.5.1",
"react-infinite-scroller": "^1.1.2",

102
src/components/editProfile/EditProfileComponent.tsx
View File

@@ -4,6 +4,12 @@ import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { getTranslate, getActiveLanguage } from 'react-localize-redux'
import moment from 'moment/moment'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import 'react-day-picker/lib/style.css'
import MomentLocaleUtils, {
formatDate,
parseDate,
} from 'react-day-picker/moment'
import { grey } from 'material-ui/colors'
import IconButton from 'material-ui/IconButton'
@@ -26,13 +32,13 @@ import TextField from 'material-ui/TextField'
import Input, { InputLabel } from 'material-ui/Input'
import { FormControl, FormHelperText } from 'material-ui/Form'
import { withStyles } from 'material-ui/styles'
import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers'
// - Import app components
import ImgCover from 'components/imgCover'
import UserAvatarComponent from 'components/userAvatar'
import ImageGallery from 'components/imageGallery'
import AppDialogTitle from 'layouts/dialogTitle'
import AppInput from 'layouts/appInput'
// - Import API
import FileAPI from 'api/FileAPI'
@@ -87,6 +93,10 @@ const styles = (theme: any) => ({
},
bottomTextSpace: {
marginBottom: 15
},
dayPicker: {
width: '100%',
padding: '13px 0px 8px'
}
})
@@ -195,7 +205,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
/**
* Default birth day
*/
defaultBirthday: (props.info && props.info.birthday) ? moment.unix(props.info!.birthday!).toDate() : new Date(),
defaultBirthday: (props.info && props.info.birthday) ? moment.unix(props.info!.birthday!).toDate() : '',
/**
* Seleted birth day
*/
@@ -283,8 +293,8 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
* @memberof EditProfile
*/
handleUpdate = () => {
const { fullNameInput, tagLineInput, avatar, banner, selectedBirthday, companyName, webUrl, twitterId} = this.state
const {info} = this.props
const { fullNameInput, tagLineInput, avatar, banner, selectedBirthday, companyName, webUrl, twitterId } = this.state
const { info } = this.props
if (this.state.fullNameInput.trim() === '') {
this.setState({
@@ -346,9 +356,8 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
/**
* Handle birthday date changed
*/
handleBirthdayDateChange = (date: moment.Moment) => {
console.trace('changed', date)
this.setState({ selectedBirthday: date.unix() })
handleBirthdayDateChange = (date: any) => {
this.setState({ selectedBirthday: moment(date).unix() })
}
componentDidMount() {
@@ -361,8 +370,8 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
*/
render() {
const { classes, translate } = this.props
const {defaultBirthday, webUrl, twitterId, companyName} = this.state
const { classes, translate, currentLanguage } = this.props
const { defaultBirthday, webUrl, twitterId, companyName } = this.state
const iconButtonElement = (
<IconButton style={this.state.isSmall ? this.styles.iconButtonSmall : this.styles.iconButton}>
<MoreVertIcon style={{ ...(this.state.isSmall ? this.styles.iconButtonSmall : this.styles.iconButton), color: grey[400] }} viewBox='10 0 24 24' />
@@ -430,8 +439,8 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
<Input id='fullNameInput'
onChange={this.handleInputChange}
name='fullNameInput'
value={this.state.fullNameInput}
/>
value={this.state.fullNameInput}
/>
<FormHelperText id='fullNameInputError'>{this.state.fullNameInputError}</FormHelperText>
</FormControl>
</div>
@@ -441,50 +450,58 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
<Input id='tagLineInput'
onChange={this.handleInputChange}
name='tagLineInput'
value={this.state.tagLineInput}
/>
value={this.state.tagLineInput}
/>
<FormHelperText id='tagLineInputError'>{this.state.fullNameInputError}</FormHelperText>
</FormControl>
</div>
<div className={classes.box}>
<TextField
className={classes.bottomTextSpace}
onChange={this.handleInputChange}
name='companyName'
value={companyName}
label={translate!('profile.companyName')}
fullWidth
/>
<TextField
className={classes.bottomTextSpace}
onChange={this.handleInputChange}
name='companyName'
value={companyName}
label={translate!('profile.companyName')}
fullWidth
/>
</div>
<div className={classes.box}>
<TextField
className={classes.bottomTextSpace}
onChange={this.handleInputChange}
name='twitterId'
value={twitterId}
label={translate!('profile.twitterId')}
fullWidth
/>
<TextField
className={classes.bottomTextSpace}
onChange={this.handleInputChange}
name='twitterId'
value={twitterId}
label={translate!('profile.twitterId')}
fullWidth
/>
</div>
<div className={classes.box}>
<TextField
className={classes.bottomTextSpace}
onChange={this.handleInputChange}
name='webUrl'
value={webUrl}
label={translate!('profile.webUrl')}
fullWidth
/>
<TextField
className={classes.bottomTextSpace}
onChange={this.handleInputChange}
name='webUrl'
value={webUrl}
label={translate!('profile.webUrl')}
fullWidth
/>
</div>
<div className={classes.box}>
<DatePicker
<DayPickerInput
classNames={{ container: classes.dayPicker, overlay: '' }}
value={defaultBirthday}
onChange={this.handleBirthdayDateChange}
label={translate!('profile.birthday')}
fullWidth
onDayChange={this.handleBirthdayDateChange}
formatDate={formatDate}
parseDate={parseDate}
component={AppInput}
format='LL'
placeholder={`${moment().format('LL')}`}
dayPickerProps={{
locale: currentLanguage,
localeUtils: MomentLocaleUtils,
}}
/>
</div>
<br/>
<br />
</Paper>
<div className={classes.bottomPaperSpace}></div>
@@ -547,6 +564,7 @@ const mapDispatchToProps = (dispatch: any, ownProps: IEditProfileComponentProps)
*/
const mapStateToProps = (state: any, ownProps: IEditProfileComponentProps) => {
return {
currentLanguage: getActiveLanguage(state.locale).code,
translate: getTranslate(state.locale),
open: state.user.openEditProfile,
info: state.user.info[state.authorize.uid],

5
src/components/editProfile/IEditProfileComponentProps.ts
View File

@@ -65,4 +65,9 @@ export interface IEditProfileComponentProps {
* Translate to locale string
*/
translate?: (state: any) => any
/**
* Current locale language
*/
currentLanguage?: string
}

2
src/components/editProfile/IEditProfileComponentState.ts
View File

@@ -68,7 +68,7 @@ export interface IEditProfileComponentState {
/**
* Default birth day
*/
defaultBirthday: Date
defaultBirthday: any
/**
* Seleted birth day

5
src/components/profileHeader/IProfileHeaderComponentProps.ts
View File

@@ -63,6 +63,11 @@ export interface IProfileHeaderComponentProps {
*/
userId: string
/**
* Whether edit profile is open
*/
editProfileOpen?: boolean
/**
* Translate to locale string
*/

7
src/components/profileHeader/ProfileHeaderComponent.tsx
View File

@@ -117,7 +117,7 @@ export class ProfileHeaderComponent extends Component<IProfileHeaderComponentPro
* @return {react element} return the DOM which rendered by component
*/
render () {
const {translate, isAuthedUser} = this.props
const {translate, isAuthedUser, editProfileOpen} = this.props
const styles = {
avatar: {
border: '2px solid rgb(255, 255, 255)'
@@ -207,7 +207,7 @@ export class ProfileHeaderComponent extends Component<IProfileHeaderComponentPro
</div>) : ''}
</div>
</div>
{isAuthedUser ? (<EditProfile
{isAuthedUser && editProfileOpen ? (<EditProfile
avatar={this.props.avatar}
banner={this.props.banner}
fullName={this.props.fullName}
@@ -238,7 +238,8 @@ const mapDispatchToProps = (dispatch: any, ownProps: IProfileHeaderComponentProp
const mapStateToProps = (state: any, ownProps: IProfileHeaderComponentProps) => {
return {
translate: getTranslate(state.locale)
translate: getTranslate(state.locale),
editProfileOpen: state.user.openEditProfile
}
}

54
src/layouts/appInput/AppInputComponent.tsx Executable file
View File

@@ -0,0 +1,54 @@
// - Import react components
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { grey } from 'material-ui/colors'
import SvgClose from 'material-ui-icons/Close'
import Button from 'material-ui/Button'
import Divider from 'material-ui/Divider'
import { IAppInputComponentProps } from './IAppInputComponentProps'
import { IAppInputComponentState } from './IAppInputComponentState'
import { TextField } from 'material-ui'
/**
* Create component class
*/
export default class AppInputComponent extends Component<IAppInputComponentProps, IAppInputComponentState> {
/**
* Fields
*/
input: any
/**
* Component constructor
* @param {object} props is an object properties of component
*/
constructor(props: IAppInputComponentProps) {
super(props)
// Defaul state
this.state = {
}
// Binding functions to `this`
}
focus = () => {
this.input.focus()
}
/**
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
*/
render() {
return (
<TextField
inputRef={el => (this.input = el)}
fullWidth
{...this.props}
/>
)
}
}

3
src/layouts/appInput/IAppInputComponentProps.ts Executable file
View File

@@ -0,0 +1,3 @@
export interface IAppInputComponentProps {
}

3
src/layouts/appInput/IAppInputComponentState.ts Executable file
View File

@@ -0,0 +1,3 @@
export interface IAppInputComponentState {
}

2
src/layouts/appInput/index.ts Executable file
View File

@@ -0,0 +1,2 @@
import AppInputComponent from './AppInputComponent'
export default AppInputComponent

2
src/typings/react-day-picker.d.ts vendored Normal file
View File

@@ -0,0 +1,2 @@
declare module 'react-day-picker/DayPickerInput'
declare module 'react-day-picker/moment'

30
yarn.lock
View File

@@ -2076,7 +2076,7 @@ es6-set@~0.1.5:
es6-symbol "3.1.1"
event-emitter "~0.3.5"
es6-symbol@3.1.1, es6-symbol@^3.1.0, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
dependencies:
@@ -4426,13 +4426,6 @@ material-ui-icons@^1.0.0-beta.17:
dependencies:
recompose "^0.26.0"
material-ui-pickers@^1.0.0-beta.15.1:
version "1.0.0-beta.15.1"
resolved "https://registry.yarnpkg.com/material-ui-pickers/-/material-ui-pickers-1.0.0-beta.15.1.tgz#37f29e8e26a1b5fbc8a183a61fe1d8f9e830d47c"
dependencies:
moment-range "^3.0.3"
react-text-mask "^5.0.2"
material-ui@^1.0.0-beta.34:
version "1.0.0-beta.34"
resolved "https://registry.yarnpkg.com/material-ui/-/material-ui-1.0.0-beta.34.tgz#bea328d3d34df7ab8bf01c936d08adee11195b80"
@@ -4667,12 +4660,6 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
dependencies:
minimist "0.0.8"
moment-range@^3.0.3:
version "3.1.1"
resolved "https://registry.yarnpkg.com/moment-range/-/moment-range-3.1.1.tgz#5c52cf9fab29db9dd9bcd86d37e52b04a7a7271a"
dependencies:
es6-symbol "^3.1.0"
moment@^2.18.1:
version "2.20.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
@@ -5884,7 +5871,7 @@ promzard@^0.3.0:
dependencies:
read "1"
prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0:
prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
@@ -6091,6 +6078,13 @@ react-avatar-editor@^10.3.0:
dependencies:
prop-types "^15.5.8"
react-day-picker@^7.0.7:
version "7.0.7"
resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.0.7.tgz#4af30404ebb19125ff5f9f2d62e6204b4e68f119"
dependencies:
object-assign "^4.1.1"
prop-types "^15.6.0"
react-dev-utils@4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.1.tgz#9f2763e7bafa1a1b9c52254d2a479deec280f111"
@@ -6289,12 +6283,6 @@ react-tap-event-plugin@^3.0.2:
dependencies:
fbjs "^0.8.6"
react-text-mask@^5.0.2:
version "5.1.0"
resolved "https://registry.yarnpkg.com/react-text-mask/-/react-text-mask-5.1.0.tgz#490aa519aae73398d491edd675c821dc947b764b"
dependencies:
prop-types "^15.5.6"
react-transition-group@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"