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 /src | |
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
Diffstat (limited to 'src')
-rw-r--r-- | src/TimePicker.jsx | 44 | ||||
-rw-r--r-- | src/module/Panel.jsx | 25 |
2 files changed, 43 insertions, 26 deletions
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 ( |