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

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'