From 45c4eb7f9a857300ea428e70d341d94fd090dca8 Mon Sep 17 00:00:00 2001 From: Qolzam Date: Mon, 5 Mar 2018 15:06:39 +0700 Subject: [PATCH] [Resolved] Change date picker package --- package.json | 2 +- .../editProfile/EditProfileComponent.tsx | 102 ++++++++++-------- .../editProfile/IEditProfileComponentProps.ts | 5 + .../editProfile/IEditProfileComponentState.ts | 2 +- .../IProfileHeaderComponentProps.ts | 5 + .../profileHeader/ProfileHeaderComponent.tsx | 7 +- src/layouts/appInput/AppInputComponent.tsx | 54 ++++++++++ .../appInput/IAppInputComponentProps.ts | 3 + .../appInput/IAppInputComponentState.ts | 3 + src/layouts/appInput/index.ts | 2 + src/typings/react-day-picker.d.ts | 2 + yarn.lock | 30 ++---- 12 files changed, 149 insertions(+), 68 deletions(-) create mode 100755 src/layouts/appInput/AppInputComponent.tsx create mode 100755 src/layouts/appInput/IAppInputComponentProps.ts create mode 100755 src/layouts/appInput/IAppInputComponentState.ts create mode 100755 src/layouts/appInput/index.ts create mode 100644 src/typings/react-day-picker.d.ts diff --git a/package.json b/package.json index 27c1cbe..4949fbd 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/editProfile/EditProfileComponent.tsx b/src/components/editProfile/EditProfileComponent.tsx index 243f309..3874971 100644 --- a/src/components/editProfile/EditProfileComponent.tsx +++ b/src/components/editProfile/EditProfileComponent.tsx @@ -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 { - 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 { - 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 @@ -430,8 +439,8 @@ export class EditProfileComponent extends Component + value={this.state.fullNameInput} + /> {this.state.fullNameInputError} @@ -441,50 +450,58 @@ export class EditProfileComponent extends Component + value={this.state.tagLineInput} + /> {this.state.fullNameInputError}
- +
- +
- +
-
-
+
@@ -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], diff --git a/src/components/editProfile/IEditProfileComponentProps.ts b/src/components/editProfile/IEditProfileComponentProps.ts index 278ca7d..1b3cd57 100644 --- a/src/components/editProfile/IEditProfileComponentProps.ts +++ b/src/components/editProfile/IEditProfileComponentProps.ts @@ -65,4 +65,9 @@ export interface IEditProfileComponentProps { * Translate to locale string */ translate?: (state: any) => any + + /** + * Current locale language + */ + currentLanguage?: string } diff --git a/src/components/editProfile/IEditProfileComponentState.ts b/src/components/editProfile/IEditProfileComponentState.ts index b477878..070eaf7 100644 --- a/src/components/editProfile/IEditProfileComponentState.ts +++ b/src/components/editProfile/IEditProfileComponentState.ts @@ -68,7 +68,7 @@ export interface IEditProfileComponentState { /** * Default birth day */ - defaultBirthday: Date + defaultBirthday: any /** * Seleted birth day diff --git a/src/components/profileHeader/IProfileHeaderComponentProps.ts b/src/components/profileHeader/IProfileHeaderComponentProps.ts index 7b5fce9..b6a9a5f 100644 --- a/src/components/profileHeader/IProfileHeaderComponentProps.ts +++ b/src/components/profileHeader/IProfileHeaderComponentProps.ts @@ -63,6 +63,11 @@ export interface IProfileHeaderComponentProps { */ userId: string + /** + * Whether edit profile is open + */ + editProfileOpen?: boolean + /** * Translate to locale string */ diff --git a/src/components/profileHeader/ProfileHeaderComponent.tsx b/src/components/profileHeader/ProfileHeaderComponent.tsx index 6be3eae..83fbe9f 100644 --- a/src/components/profileHeader/ProfileHeaderComponent.tsx +++ b/src/components/profileHeader/ProfileHeaderComponent.tsx @@ -117,7 +117,7 @@ export class ProfileHeaderComponent extends Component) : ''} - {isAuthedUser ? ( { return { - translate: getTranslate(state.locale) + translate: getTranslate(state.locale), + editProfileOpen: state.user.openEditProfile } } diff --git a/src/layouts/appInput/AppInputComponent.tsx b/src/layouts/appInput/AppInputComponent.tsx new file mode 100755 index 0000000..6693dc6 --- /dev/null +++ b/src/layouts/appInput/AppInputComponent.tsx @@ -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 { + + /** + * 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 ( + (this.input = el)} + fullWidth + {...this.props} + /> + ) + } +} diff --git a/src/layouts/appInput/IAppInputComponentProps.ts b/src/layouts/appInput/IAppInputComponentProps.ts new file mode 100755 index 0000000..e0201ff --- /dev/null +++ b/src/layouts/appInput/IAppInputComponentProps.ts @@ -0,0 +1,3 @@ +export interface IAppInputComponentProps { + +} diff --git a/src/layouts/appInput/IAppInputComponentState.ts b/src/layouts/appInput/IAppInputComponentState.ts new file mode 100755 index 0000000..abcd061 --- /dev/null +++ b/src/layouts/appInput/IAppInputComponentState.ts @@ -0,0 +1,3 @@ +export interface IAppInputComponentState { + +} diff --git a/src/layouts/appInput/index.ts b/src/layouts/appInput/index.ts new file mode 100755 index 0000000..94ef9c8 --- /dev/null +++ b/src/layouts/appInput/index.ts @@ -0,0 +1,2 @@ +import AppInputComponent from './AppInputComponent' +export default AppInputComponent diff --git a/src/typings/react-day-picker.d.ts b/src/typings/react-day-picker.d.ts new file mode 100644 index 0000000..345ec6d --- /dev/null +++ b/src/typings/react-day-picker.d.ts @@ -0,0 +1,2 @@ +declare module 'react-day-picker/DayPickerInput' +declare module 'react-day-picker/moment' \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9188a5b..b1f94c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"