diff options
author | yiminghe <yiminghe@gmail.com> | 2015-11-19 19:57:17 +0800 |
---|---|---|
committer | yiminghe <yiminghe@gmail.com> | 2015-11-19 19:57:17 +0800 |
commit | 9f9f39e4fb8073f6f31d545c746e4c3b7ad651da (patch) | |
tree | a147168a4caf5ff263a6ab339d3ab6f140ee06da | |
parent | 11b97949da16fc090400a753189baf10f29c111f (diff) | |
download | time-picker-0.6.0.tar.gz time-picker-0.6.0.tar.zst time-picker-0.6.0.zip |
fix value0.6.0
-rw-r--r-- | README.md | 3 | ||||
-rw-r--r-- | assets/index/Picker.less | 7 | ||||
-rw-r--r-- | examples/pick-time.js | 6 | ||||
-rw-r--r-- | package.json | 6 | ||||
-rw-r--r-- | src/TimePicker.jsx | 44 | ||||
-rw-r--r-- | src/module/Panel.jsx | 25 |
6 files changed, 53 insertions, 38 deletions
@@ -30,7 +30,8 @@ API | |||
30 | | locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | | 30 | | locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | |
31 | | disabled | Boolean | false | whether picker is disabled | | 31 | | disabled | Boolean | false | whether picker is disabled | |
32 | | open | Boolean | false | current open state of picker. controlled prop | | 32 | | open | Boolean | false | current open state of picker. controlled prop | |
33 | | defaultValue | GregorianCalendar | null | current value like input's value | | 33 | | defaultValue | GregorianCalendar | null | default initial value | |
34 | | value | GregorianCalendar | null | current value | | ||
34 | | placeholder | String | '' | time input's placeholder | | 35 | | placeholder | String | '' | time input's placeholder | |
35 | | formatter | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss | | | 36 | | formatter | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss | | |
36 | | hourOptions | Array<String> | hour options | | | 37 | | hourOptions | Array<String> | 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 @@ | |||
1 | .@{prefixClass}-picker-container { | 1 | .@{prefixClass}-container { |
2 | z-index: 1070; | 2 | z-index: 1070; |
3 | position: absolute; | 3 | position: absolute; |
4 | 4 | ||
@@ -26,8 +26,3 @@ | |||
26 | animation-name: antSlideUpOut; | 26 | animation-name: antSlideUpOut; |
27 | } | 27 | } |
28 | } | 28 | } |
29 | |||
30 | .@{prefixClass} { | ||
31 | &-picker { | ||
32 | } | ||
33 | } | ||
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'); | |||
15 | const now = new GregorianCalendar(zhCn); | 15 | const now = new GregorianCalendar(zhCn); |
16 | now.setTime(Date.now()); | 16 | now.setTime(Date.now()); |
17 | 17 | ||
18 | function onChange(v) { | ||
19 | console.log(v && formatter.format(v)); | ||
20 | } | ||
21 | |||
18 | ReactDom.render( | 22 | ReactDom.render( |
19 | <TimePicker formatter={formatter} locale={TimePickerLocale} defaultValue={now} />, | 23 | <TimePicker formatter={formatter} locale={TimePickerLocale} defaultValue={now} onChange={onChange}/>, |
20 | document.getElementById('__react-content') | 24 | document.getElementById('__react-content') |
21 | ); | 25 | ); |
diff --git a/package.json b/package.json index 230903f..8ecd8af 100644 --- a/package.json +++ b/package.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "rc-time-picker", | 2 | "name": "rc-time-picker", |
3 | "version": "0.5.6", | 3 | "version": "0.6.0", |
4 | "description": "React TimePicker", | 4 | "description": "React TimePicker", |
5 | "keywords": [ | 5 | "keywords": [ |
6 | "react", | 6 | "react", |
@@ -39,8 +39,7 @@ | |||
39 | "karma": "rc-tools run karma", | 39 | "karma": "rc-tools run karma", |
40 | "saucelabs": "rc-tools run saucelabs", | 40 | "saucelabs": "rc-tools run saucelabs", |
41 | "browser-test": "rc-tools run browser-test", | 41 | "browser-test": "rc-tools run browser-test", |
42 | "browser-test-cover": "rc-tools run browser-test-cover", | 42 | "browser-test-cover": "rc-tools run browser-test-cover" |
43 | "validate": "npm ls" | ||
44 | }, | 43 | }, |
45 | "devDependencies": { | 44 | "devDependencies": { |
46 | "async": "~0.9.0", | 45 | "async": "~0.9.0", |
@@ -61,7 +60,6 @@ | |||
61 | "classnames": "~2.2.0", | 60 | "classnames": "~2.2.0", |
62 | "gregorian-calendar": "4.x", | 61 | "gregorian-calendar": "4.x", |
63 | "gregorian-calendar-format": "4.x", | 62 | "gregorian-calendar-format": "4.x", |
64 | "object-assign": "4.x", | ||
65 | "rc-trigger": "1.x", | 63 | "rc-trigger": "1.x", |
66 | "rc-util": "2.x" | 64 | "rc-util": "2.x" |
67 | } | 65 | } |
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({ | |||
18 | prefixCls: PropTypes.string, | 18 | prefixCls: PropTypes.string, |
19 | inputClassName: PropTypes.string, | 19 | inputClassName: PropTypes.string, |
20 | locale: PropTypes.object, | 20 | locale: PropTypes.object, |
21 | value: PropTypes.object, | ||
21 | children: PropTypes.func, | 22 | children: PropTypes.func, |
22 | disabled: PropTypes.bool, | 23 | disabled: PropTypes.bool, |
23 | defaultValue: PropTypes.object, | 24 | defaultValue: PropTypes.object, |
@@ -50,17 +51,19 @@ const Picker = React.createClass({ | |||
50 | 51 | ||
51 | getInitialState() { | 52 | getInitialState() { |
52 | this.savePanelRef = refFn.bind(this, 'panelInstance'); | 53 | this.savePanelRef = refFn.bind(this, 'panelInstance'); |
53 | const { open, defaultValue } = this.props; | 54 | const { open, defaultValue, value } = this.props; |
54 | return { | 55 | return { |
55 | open: open, | 56 | open: open, |
56 | value: defaultValue, | 57 | value: value || defaultValue, |
57 | }; | 58 | }; |
58 | }, | 59 | }, |
59 | 60 | ||
60 | componentWillReceiveProps(nextProps) { | 61 | componentWillReceiveProps(nextProps) { |
61 | const { defaultValue, open } = nextProps; | 62 | const { value, open } = nextProps; |
62 | if (defaultValue !== undefined) { | 63 | if (value !== undefined) { |
63 | this.setState({value: defaultValue}); | 64 | this.setState({ |
65 | value, | ||
66 | }); | ||
64 | } | 67 | } |
65 | if (open !== undefined) { | 68 | if (open !== undefined) { |
66 | this.setState({open}); | 69 | this.setState({open}); |
@@ -68,16 +71,11 @@ const Picker = React.createClass({ | |||
68 | }, | 71 | }, |
69 | 72 | ||
70 | onPanelChange(value) { | 73 | onPanelChange(value) { |
71 | this.setState({ | 74 | this.setValue(value); |
72 | value: value, | ||
73 | }); | ||
74 | this.props.onChange(value); | ||
75 | }, | 75 | }, |
76 | 76 | ||
77 | onPanelClear() { | 77 | onPanelClear() { |
78 | this.setState({ | 78 | this.setValue(''); |
79 | value: '', | ||
80 | }); | ||
81 | this.setOpen(false); | 79 | this.setOpen(false); |
82 | }, | 80 | }, |
83 | 81 | ||
@@ -90,6 +88,15 @@ const Picker = React.createClass({ | |||
90 | }); | 88 | }); |
91 | }, | 89 | }, |
92 | 90 | ||
91 | setValue(value) { | ||
92 | if (!('value' in this.props)) { | ||
93 | this.setState({ | ||
94 | value, | ||
95 | }); | ||
96 | } | ||
97 | this.props.onChange(value); | ||
98 | }, | ||
99 | |||
93 | getPanel() { | 100 | getPanel() { |
94 | const { prefixCls, defaultValue, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; | 101 | const { prefixCls, defaultValue, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; |
95 | return ( | 102 | return ( |
@@ -110,7 +117,7 @@ const Picker = React.createClass({ | |||
110 | const panel = this.getPanel(); | 117 | const panel = this.getPanel(); |
111 | const extraProps = { | 118 | const extraProps = { |
112 | ref: this.savePanelRef, | 119 | ref: this.savePanelRef, |
113 | defaultValue: this.state.value || panel.props.defaultValue, | 120 | value: this.state.value, |
114 | onChange: createChainedFunction(panel.props.onChange, this.onPanelChange), | 121 | onChange: createChainedFunction(panel.props.onChange, this.onPanelChange), |
115 | onClear: createChainedFunction(panel.props.onClear, this.onPanelClear), | 122 | onClear: createChainedFunction(panel.props.onClear, this.onPanelClear), |
116 | }; | 123 | }; |
@@ -136,12 +143,12 @@ const Picker = React.createClass({ | |||
136 | }, | 143 | }, |
137 | 144 | ||
138 | render() { | 145 | render() { |
139 | const { prefixCls, placeholder, placement, align, disabled, transitionName, children, formatter, inputClassName } = this.props; | 146 | const { prefixCls, placeholder, placement, align, disabled, transitionName, formatter, inputClassName } = this.props; |
140 | const { open, value } = this.state; | 147 | const { open, value } = this.state; |
141 | 148 | ||
142 | return ( | 149 | return ( |
143 | <Trigger | 150 | <Trigger |
144 | prefixCls={`${prefixCls}-picker-container`} | 151 | prefixCls={`${prefixCls}-container`} |
145 | popup={this.getPanelElement()} | 152 | popup={this.getPanelElement()} |
146 | popupAlign={align} | 153 | popupAlign={align} |
147 | builtinPlacements={placements} | 154 | builtinPlacements={placements} |
@@ -152,9 +159,10 @@ const Picker = React.createClass({ | |||
152 | popupVisible={open} | 159 | popupVisible={open} |
153 | onPopupVisibleChange={this.onVisibleChange} | 160 | onPopupVisibleChange={this.onVisibleChange} |
154 | > | 161 | > |
155 | <span className={`${prefixCls}-picker`}> | 162 | <span className={`${prefixCls}`}> |
156 | <input className={inputClassName} ref="picker" type="text" placeholder={placeholder} readOnly disabled={disabled} value={value && formatter.format(value)} /> | 163 | <input className={inputClassName} ref="picker" type="text" placeholder={placeholder} readOnly |
157 | <span className={`${prefixCls}-picker-icon`} /> | 164 | disabled={disabled} value={value && formatter.format(value)}/> |
165 | <span className={`${prefixCls}-icon`}/> | ||
158 | </span> | 166 | </span> |
159 | </Trigger> | 167 | </Trigger> |
160 | ); | 168 | ); |
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) { | |||
19 | const Panel = React.createClass({ | 19 | const Panel = React.createClass({ |
20 | propTypes: { | 20 | propTypes: { |
21 | prefixCls: PropTypes.string, | 21 | prefixCls: PropTypes.string, |
22 | defaultValue: PropTypes.object, | 22 | value: PropTypes.object, |
23 | locale: PropTypes.object, | 23 | locale: PropTypes.object, |
24 | placeholder: PropTypes.string, | 24 | placeholder: PropTypes.string, |
25 | formatter: PropTypes.object, | 25 | formatter: PropTypes.object, |
@@ -43,13 +43,13 @@ const Panel = React.createClass({ | |||
43 | }, | 43 | }, |
44 | 44 | ||
45 | getInitialState() { | 45 | getInitialState() { |
46 | let defaultValue = this.props.defaultValue; | 46 | let value = this.props.value; |
47 | if (!defaultValue) { | 47 | if (!value) { |
48 | defaultValue = new GregorianCalendar(zhCn); | 48 | value = new GregorianCalendar(zhCn); |
49 | defaultValue.setTime(Date.now()); | 49 | value.setTime(Date.now()); |
50 | } | 50 | } |
51 | return { | 51 | return { |
52 | value: defaultValue, | 52 | value, |
53 | }; | 53 | }; |
54 | }, | 54 | }, |
55 | 55 | ||
@@ -63,6 +63,15 @@ const Panel = React.createClass({ | |||
63 | } | 63 | } |
64 | }, | 64 | }, |
65 | 65 | ||
66 | componentWillReceiveProps(nextProps) { | ||
67 | const value = nextProps.value; | ||
68 | if (value) { | ||
69 | this.setState({ | ||
70 | value, | ||
71 | }); | ||
72 | } | ||
73 | }, | ||
74 | |||
66 | onChange(newValue) { | 75 | onChange(newValue) { |
67 | this.setState({ value: newValue }); | 76 | this.setState({ value: newValue }); |
68 | this.props.onChange(newValue); | 77 | this.props.onChange(newValue); |
@@ -76,8 +85,8 @@ const Panel = React.createClass({ | |||
76 | showSecond: true, | 85 | showSecond: true, |
77 | 86 | ||
78 | render() { | 87 | render() { |
79 | const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; | 88 | const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; |
80 | const value = this.state.value || defaultValue; | 89 | const value = this.state.value; |
81 | const cls = classnames({ 'narrow': !this.showHour || !this.showSecond }); | 90 | const cls = classnames({ 'narrow': !this.showHour || !this.showSecond }); |
82 | 91 | ||
83 | return ( | 92 | return ( |