aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--README.md3
-rw-r--r--assets/index/Picker.less7
-rw-r--r--examples/pick-time.js6
-rw-r--r--package.json6
-rw-r--r--src/TimePicker.jsx44
-rw-r--r--src/module/Panel.jsx25
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
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');
15const now = new GregorianCalendar(zhCn); 15const now = new GregorianCalendar(zhCn);
16now.setTime(Date.now()); 16now.setTime(Date.now());
17 17
18function onChange(v) {
19 console.log(v && formatter.format(v));
20}
21
18ReactDom.render( 22ReactDom.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) {
19const Panel = React.createClass({ 19const 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 (