diff options
-rw-r--r-- | HISTORY.md | 8 | ||||
-rw-r--r-- | examples/pick-time.js | 4 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | src/TimePicker.jsx | 24 | ||||
-rw-r--r-- | src/locale/en_US.js | 3 | ||||
-rw-r--r-- | src/locale/zh_CN.js | 3 | ||||
-rw-r--r-- | src/module/Panel.jsx | 16 |
7 files changed, 26 insertions, 34 deletions
@@ -3,6 +3,14 @@ History | |||
3 | 3 | ||
4 | --- | 4 | --- |
5 | 5 | ||
6 | 0.5.0 / 2015-11-18 | ||
7 | ------------------ | ||
8 | |||
9 | `update` clear input content and close select panel when click [x] on select panel. | ||
10 | |||
11 | `new` can custom input className now. | ||
12 | |||
13 | |||
6 | 0.4.0 / 2015-11-18 | 14 | 0.4.0 / 2015-11-18 |
7 | ------------------ | 15 | ------------------ |
8 | 16 | ||
diff --git a/examples/pick-time.js b/examples/pick-time.js index 54548c7..0a54279 100644 --- a/examples/pick-time.js +++ b/examples/pick-time.js | |||
@@ -7,7 +7,7 @@ import GregorianCalendar from 'gregorian-calendar'; | |||
7 | import DateTimeFormat from 'gregorian-calendar-format'; | 7 | import DateTimeFormat from 'gregorian-calendar-format'; |
8 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | 8 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; |
9 | 9 | ||
10 | import TimePicker from 'rc-time-picker/src/TimePicker'; | 10 | import TimePicker from 'rc-time-picker'; |
11 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | 11 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; |
12 | 12 | ||
13 | const formatter = new DateTimeFormat('HH:mm:ss'); | 13 | const formatter = new DateTimeFormat('HH:mm:ss'); |
@@ -16,6 +16,6 @@ const now = new GregorianCalendar(zhCn); | |||
16 | now.setTime(Date.now()); | 16 | now.setTime(Date.now()); |
17 | 17 | ||
18 | ReactDom.render( | 18 | ReactDom.render( |
19 | <TimePicker formatter={formatter} locale={TimePickerLocale} value={now} />, | 19 | <TimePicker formatter={formatter} locale={TimePickerLocale} defaultValue={now} />, |
20 | document.getElementById('__react-content') | 20 | document.getElementById('__react-content') |
21 | ); | 21 | ); |
diff --git a/package.json b/package.json index 4069888..03cd1d9 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.4.0", | 3 | "version": "0.5.0", |
4 | "description": "React TimePicker", | 4 | "description": "React TimePicker", |
5 | "keywords": [ | 5 | "keywords": [ |
6 | "react", | 6 | "react", |
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index eb413cb..78d6de6 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx | |||
@@ -16,10 +16,11 @@ function refFn(field, component) { | |||
16 | const Picker = React.createClass({ | 16 | const Picker = React.createClass({ |
17 | propTypes: { | 17 | propTypes: { |
18 | prefixCls: PropTypes.string, | 18 | prefixCls: PropTypes.string, |
19 | inputClassName: PropTypes.string, | ||
19 | locale: PropTypes.object, | 20 | locale: PropTypes.object, |
20 | children: PropTypes.func, | 21 | children: PropTypes.func, |
21 | disabled: PropTypes.bool, | 22 | disabled: PropTypes.bool, |
22 | value: PropTypes.object, | 23 | defaultValue: PropTypes.object, |
23 | open: PropTypes.bool, | 24 | open: PropTypes.bool, |
24 | align: PropTypes.object, | 25 | align: PropTypes.object, |
25 | placement: PropTypes.any, | 26 | placement: PropTypes.any, |
@@ -54,9 +55,9 @@ const Picker = React.createClass({ | |||
54 | }, | 55 | }, |
55 | 56 | ||
56 | componentWillReceiveProps(nextProps) { | 57 | componentWillReceiveProps(nextProps) { |
57 | const { value, open } = nextProps; | 58 | const { defaultValue, open } = nextProps; |
58 | if (value !== undefined) { | 59 | if (defaultValue !== undefined) { |
59 | this.setState({value}); | 60 | this.setState({value: defaultValue}); |
60 | } | 61 | } |
61 | if (open !== undefined) { | 62 | if (open !== undefined) { |
62 | this.setState({open}); | 63 | this.setState({open}); |
@@ -64,14 +65,17 @@ const Picker = React.createClass({ | |||
64 | }, | 65 | }, |
65 | 66 | ||
66 | onPanelChange(value) { | 67 | onPanelChange(value) { |
67 | const props = this.props; | ||
68 | this.setState({ | 68 | this.setState({ |
69 | value: value, | 69 | value: value, |
70 | }); | 70 | }); |
71 | props.onChange(value); | 71 | this.props.onChange(value); |
72 | }, | 72 | }, |
73 | 73 | ||
74 | onPanelClear() { | 74 | onPanelClear() { |
75 | this.setState({ | ||
76 | value: '', | ||
77 | }); | ||
78 | this.setOpen(false); | ||
75 | }, | 79 | }, |
76 | 80 | ||
77 | onVisibleChange(open) { | 81 | onVisibleChange(open) { |
@@ -84,11 +88,11 @@ const Picker = React.createClass({ | |||
84 | }, | 88 | }, |
85 | 89 | ||
86 | getPanel() { | 90 | getPanel() { |
87 | const { prefixCls, value, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; | 91 | const { prefixCls, defaultValue, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; |
88 | return ( | 92 | return ( |
89 | <Panel | 93 | <Panel |
90 | prefixCls={prefixCls} | 94 | prefixCls={prefixCls} |
91 | defaultValue={value} | 95 | defaultValue={defaultValue} |
92 | locale={locale} | 96 | locale={locale} |
93 | formatter={formatter} | 97 | formatter={formatter} |
94 | placeholder={placeholder} | 98 | placeholder={placeholder} |
@@ -129,7 +133,7 @@ const Picker = React.createClass({ | |||
129 | }, | 133 | }, |
130 | 134 | ||
131 | render() { | 135 | render() { |
132 | const { prefixCls, placeholder, placement, align, disabled, transitionName, children, formatter } = this.props; | 136 | const { prefixCls, placeholder, placement, align, disabled, transitionName, children, formatter, inputClassName } = this.props; |
133 | const { open, value } = this.state; | 137 | const { open, value } = this.state; |
134 | 138 | ||
135 | return ( | 139 | return ( |
@@ -146,7 +150,7 @@ const Picker = React.createClass({ | |||
146 | onPopupVisibleChange={this.onVisibleChange} | 150 | onPopupVisibleChange={this.onVisibleChange} |
147 | > | 151 | > |
148 | <span className={`${prefixCls}-picker`}> | 152 | <span className={`${prefixCls}-picker`}> |
149 | <input ref="picker" type="text" placeholder={placeholder} readOnly disabled={disabled} value={value && formatter.format(value)} /> | 153 | <input className={inputClassName} ref="picker" type="text" placeholder={placeholder} readOnly disabled={disabled} value={value && formatter.format(value)} /> |
150 | <span className={`${prefixCls}-picker-icon`} /> | 154 | <span className={`${prefixCls}-picker-icon`} /> |
151 | </span> | 155 | </span> |
152 | </Trigger> | 156 | </Trigger> |
diff --git a/src/locale/en_US.js b/src/locale/en_US.js index 252d3d2..488725c 100644 --- a/src/locale/en_US.js +++ b/src/locale/en_US.js | |||
@@ -1,9 +1,6 @@ | |||
1 | import enUs from 'gregorian-calendar-format/lib/locale/en_US'; | 1 | import enUs from 'gregorian-calendar-format/lib/locale/en_US'; |
2 | 2 | ||
3 | export default { | 3 | export default { |
4 | placeholderHHmmss: 'HH:MM:SS', | ||
5 | placeholderHHmm: 'HH:MM', | ||
6 | placeholdermmss: 'MM:SS', | ||
7 | clear: 'Clear', | 4 | clear: 'Clear', |
8 | format: enUs, | 5 | format: enUs, |
9 | }; | 6 | }; |
diff --git a/src/locale/zh_CN.js b/src/locale/zh_CN.js index 709cfb4..8e02a08 100644 --- a/src/locale/zh_CN.js +++ b/src/locale/zh_CN.js | |||
@@ -1,9 +1,6 @@ | |||
1 | import zhCn from 'gregorian-calendar-format/lib/locale/zh_CN'; | 1 | import zhCn from 'gregorian-calendar-format/lib/locale/zh_CN'; |
2 | 2 | ||
3 | export default { | 3 | export default { |
4 | placeholderHHmmss: '时:分:秒', | ||
5 | placeholderHHmm: '时:分', | ||
6 | placeholdermmss: '分:秒', | ||
7 | clear: '清除', | 4 | clear: '清除', |
8 | format: zhCn, | 5 | format: zhCn, |
9 | }; | 6 | }; |
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index 4220da8..f041158 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx | |||
@@ -72,20 +72,6 @@ const Panel = React.createClass({ | |||
72 | this.props.onClear(); | 72 | this.props.onClear(); |
73 | }, | 73 | }, |
74 | 74 | ||
75 | getPlaceholder(placeholder) { | ||
76 | if (placeholder) { | ||
77 | return placeholder; | ||
78 | } | ||
79 | |||
80 | const { locale } = this.props; | ||
81 | if (!this.showHour) { | ||
82 | return locale.placeholdermmss; | ||
83 | } else if (!this.showSecond) { | ||
84 | return locale.placeholderHHmm; | ||
85 | } | ||
86 | return locale.placeholderHHmmss; | ||
87 | }, | ||
88 | |||
89 | showHour: true, | 75 | showHour: true, |
90 | showSecond: true, | 76 | showSecond: true, |
91 | 77 | ||
@@ -102,7 +88,7 @@ const Panel = React.createClass({ | |||
102 | locale={locale} | 88 | locale={locale} |
103 | value={value} | 89 | value={value} |
104 | formatter={this.getFormatter()} | 90 | formatter={this.getFormatter()} |
105 | placeholder={this.getPlaceholder(placeholder)} | 91 | placeholder={placeholder} |
106 | hourOptions={hourOptions} | 92 | hourOptions={hourOptions} |
107 | minuteOptions={minuteOptions} | 93 | minuteOptions={minuteOptions} |
108 | secondOptions={secondOptions} | 94 | secondOptions={secondOptions} |