fix value

diff --git a/README.md b/README.md
index 1ab1239a9f1717e835a31c7f66a89e115072cc1f..1c16244a75f49c864ac72af06404e5ab94d1c599 100644 (file)
--- 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<String>              | hour options                                  |                                                                                            |

diff --git a/assets/index/Picker.less b/assets/index/Picker.less
index 507121f121137415b3ce297bde9d4e3d476ac830..c8de18a584eca7d6e85d3c0b0534017e1b5d3714 100644 (file)
--- 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 0a5427965a4172cd2dc14670188f62a5e9ee5380..d5e3715df906121fe9e416dc1b3b89b8ed2cfbc0 100644 (file)
--- 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(
-  <TimePicker formatter={formatter} locale={TimePickerLocale} defaultValue={now} />,
+  <TimePicker formatter={formatter} locale={TimePickerLocale} defaultValue={now} onChange={onChange}/>,
   document.getElementById('__react-content')
 );

diff --git a/package.json b/package.json
index 230903f5d1f171190a478a9e392dfd1d9b1b0b65..8ecd8af3794196814428cf3ca31694afbf668dbc 100644 (file)
--- 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 98a175480feb2c4850eeeb3f22329185a5a32fcc..f0b580c2dbf1d169c74ce17e1e4cf20bbc936e50 100644 (file)
--- 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 (
       <Trigger
-        prefixCls={`${prefixCls}-picker-container`}
+        prefixCls={`${prefixCls}-container`}
         popup={this.getPanelElement()}
         popupAlign={align}
         builtinPlacements={placements}
@@ -152,9 +159,10 @@ const Picker = React.createClass({
         popupVisible={open}
         onPopupVisibleChange={this.onVisibleChange}
       >
-        <span className={`${prefixCls}-picker`}>
-          <input className={inputClassName} ref="picker" type="text" placeholder={placeholder} readOnly disabled={disabled} value={value && formatter.format(value)} />
-          <span className={`${prefixCls}-picker-icon`} />
+        <span className={`${prefixCls}`}>
+          <input className={inputClassName} ref="picker" type="text" placeholder={placeholder} readOnly
+                 disabled={disabled} value={value && formatter.format(value)}/>
+          <span className={`${prefixCls}-icon`}/>
         </span>
       </Trigger>
     );

diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx
index f04115823a9a914fe878847034fd07125ba14f54..d5e15217e909ae0ed0e5d2fc9bb11c2371cb42af 100644 (file)
--- 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 (