From 9f9f39e4fb8073f6f31d545c746e4c3b7ad651da Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 19 Nov 2015 19:57:17 +0800 Subject: [PATCH] fix value --- README.md | 3 ++- assets/index/Picker.less | 7 +------ examples/pick-time.js | 6 +++++- package.json | 6 ++---- src/TimePicker.jsx | 44 ++++++++++++++++++++++++---------------- src/module/Panel.jsx | 25 +++++++++++++++-------- 6 files changed, 53 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 1ab1239..1c16244 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,8 @@ API | locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | | disabled | Boolean | false | whether picker is disabled | | open | Boolean | false | current open state of picker. controlled prop | -| defaultValue | GregorianCalendar | null | current value like input's value | +| defaultValue | GregorianCalendar | null | default initial value | +| value | GregorianCalendar | null | current value | | placeholder | String | '' | time input's placeholder | | formatter | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss | | | hourOptions | Array | hour options | | diff --git a/assets/index/Picker.less b/assets/index/Picker.less index 507121f..c8de18a 100644 --- a/assets/index/Picker.less +++ b/assets/index/Picker.less @@ -1,4 +1,4 @@ -.@{prefixClass}-picker-container { +.@{prefixClass}-container { z-index: 1070; position: absolute; @@ -26,8 +26,3 @@ animation-name: antSlideUpOut; } } - -.@{prefixClass} { - &-picker { - } -} diff --git a/examples/pick-time.js b/examples/pick-time.js index 0a54279..d5e3715 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js @@ -15,7 +15,11 @@ const formatter = new DateTimeFormat('HH:mm:ss'); const now = new GregorianCalendar(zhCn); now.setTime(Date.now()); +function onChange(v) { + console.log(v && formatter.format(v)); +} + ReactDom.render( - , + , document.getElementById('__react-content') ); diff --git a/package.json b/package.json index 230903f..8ecd8af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "0.5.6", + "version": "0.6.0", "description": "React TimePicker", "keywords": [ "react", @@ -39,8 +39,7 @@ "karma": "rc-tools run karma", "saucelabs": "rc-tools run saucelabs", "browser-test": "rc-tools run browser-test", - "browser-test-cover": "rc-tools run browser-test-cover", - "validate": "npm ls" + "browser-test-cover": "rc-tools run browser-test-cover" }, "devDependencies": { "async": "~0.9.0", @@ -61,7 +60,6 @@ "classnames": "~2.2.0", "gregorian-calendar": "4.x", "gregorian-calendar-format": "4.x", - "object-assign": "4.x", "rc-trigger": "1.x", "rc-util": "2.x" } diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index 98a1754..f0b580c 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -18,6 +18,7 @@ const Picker = React.createClass({ prefixCls: PropTypes.string, inputClassName: PropTypes.string, locale: PropTypes.object, + value: PropTypes.object, children: PropTypes.func, disabled: PropTypes.bool, defaultValue: PropTypes.object, @@ -50,17 +51,19 @@ const Picker = React.createClass({ getInitialState() { this.savePanelRef = refFn.bind(this, 'panelInstance'); - const { open, defaultValue } = this.props; + const { open, defaultValue, value } = this.props; return { open: open, - value: defaultValue, + value: value || defaultValue, }; }, componentWillReceiveProps(nextProps) { - const { defaultValue, open } = nextProps; - if (defaultValue !== undefined) { - this.setState({value: defaultValue}); + const { value, open } = nextProps; + if (value !== undefined) { + this.setState({ + value, + }); } if (open !== undefined) { this.setState({open}); @@ -68,16 +71,11 @@ const Picker = React.createClass({ }, onPanelChange(value) { - this.setState({ - value: value, - }); - this.props.onChange(value); + this.setValue(value); }, onPanelClear() { - this.setState({ - value: '', - }); + this.setValue(''); this.setOpen(false); }, @@ -90,6 +88,15 @@ const Picker = React.createClass({ }); }, + setValue(value) { + if (!('value' in this.props)) { + this.setState({ + value, + }); + } + this.props.onChange(value); + }, + getPanel() { const { prefixCls, defaultValue, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; return ( @@ -110,7 +117,7 @@ const Picker = React.createClass({ const panel = this.getPanel(); const extraProps = { ref: this.savePanelRef, - defaultValue: this.state.value || panel.props.defaultValue, + value: this.state.value, onChange: createChainedFunction(panel.props.onChange, this.onPanelChange), onClear: createChainedFunction(panel.props.onClear, this.onPanelClear), }; @@ -136,12 +143,12 @@ const Picker = React.createClass({ }, render() { - const { prefixCls, placeholder, placement, align, disabled, transitionName, children, formatter, inputClassName } = this.props; + const { prefixCls, placeholder, placement, align, disabled, transitionName, formatter, inputClassName } = this.props; const { open, value } = this.state; return ( - - - + + + ); diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index f041158..d5e1521 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx @@ -19,7 +19,7 @@ function generateOptions(length) { const Panel = React.createClass({ propTypes: { prefixCls: PropTypes.string, - defaultValue: PropTypes.object, + value: PropTypes.object, locale: PropTypes.object, placeholder: PropTypes.string, formatter: PropTypes.object, @@ -43,13 +43,13 @@ const Panel = React.createClass({ }, getInitialState() { - let defaultValue = this.props.defaultValue; - if (!defaultValue) { - defaultValue = new GregorianCalendar(zhCn); - defaultValue.setTime(Date.now()); + let value = this.props.value; + if (!value) { + value = new GregorianCalendar(zhCn); + value.setTime(Date.now()); } return { - value: defaultValue, + value, }; }, @@ -63,6 +63,15 @@ const Panel = React.createClass({ } }, + componentWillReceiveProps(nextProps) { + const value = nextProps.value; + if (value) { + this.setState({ + value, + }); + } + }, + onChange(newValue) { this.setState({ value: newValue }); this.props.onChange(newValue); @@ -76,8 +85,8 @@ const Panel = React.createClass({ showSecond: true, render() { - const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; - const value = this.state.value || defaultValue; + const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; + const value = this.state.value; const cls = classnames({ 'narrow': !this.showHour || !this.showSecond }); return ( -- 2.41.0