remove TimePanel and merge it to TimePicker

diff --git a/HISTORY.md b/HISTORY.md
index 676fc17f146616d91239020aef09b8776bd09595..28516bcfb929c1a3d53ff5c3f4c99d7088dfc917 100644 (file)
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -3,6 +3,11 @@ History
 
 ---
 
+0.3.0 / 2015-11-17
+------------------
+
+`update` remove TimePanel and merge it to TimePicker.
+
 0.2.0 / 2015-11-16
 ------------------
 

diff --git a/README.md b/README.md
index 998fe4e2de84bae38832c0f639affb0b7ac2dba6..c6e8e1c98d401887e1e426c79654e16c09789745 100644 (file)
--- a/README.md
+++ b/README.md
@@ -23,32 +23,23 @@ ReactDOM.render(<TimePicker />, container);
 API
 ---
 
-### TimePanel
+### TimePicker
 
 | Name          | Type                       | Default                                       | Description                                   |
 |---------------|----------------------------|-----------------------------------------------|-----------------------------------------------|
 | prefixCls     | String                     |                                               | prefixCls of this component                   |
 | locale        | Object                     | import from 'rc-time-picker/lib/locale/en_US' |                                               |
-| defaultValue  | GregorianCalendar          | null                                          | defaultValue like input's defaultValue        |
+| disabled      | Boolean                    | false                                         | whether picker is disabled                    |
+| open          | Boolean                    | false                                         | current open state of picker. controlled prop |
+| value         | GregorianCalendar          | null                                          | current value like input's value              |
 | placeholder   | String                     | ''                                            | time input's placeholder                      |
 | formatter     | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss                    |                                               |
 | hourOptions   | Array<String>              | hour options                                  |                                               |
 | minuteOptions | Array<String>              | minute options                                |                                               |
 | secondOptions | Array<String>              | second options                                |                                               |
-| onChange      | Function                   | null                                          | called when input or select a different value |
-
-### TimePicker
-
-| Name      | Type                    | Default | Description                                   |
-|-----------|-------------------------|---------|-----------------------------------------------|
-| prefixCls | String                  |         | prefixCls of this component                   |
-| panel     | TimePanel React Element |         |                                               |
-| disabled  | Boolean                 | false   | whether picker is disabled                    |
-| open      | Boolean                 | false   | current open state of picker. controlled prop |
-| value     | GregorianCalendar       | null    | current value like input's value              |
-| onChange  | Function                | null    | called when select a different value          |
-| onOpen    | Function                | null    | called when open picker                       |
-| onClose   | Function                | null    | called when close picker                      |
+| onChange      | Function                   | null                                          | called when select a different value          |
+| onOpen        | Function                   | null                                          | called when open picker                       |
+| onClose       | Function                   | null                                          | called when close picker                      |
 
 License
 -------

diff --git a/examples/pick-time.js b/examples/pick-time.js
index 8c6b82688e4cff7112eed38e0ac23a0bd8593df7..54548c715faedccdc235a25ab39d2d23681d183c 100644 (file)
--- a/examples/pick-time.js
+++ b/examples/pick-time.js
@@ -8,7 +8,6 @@ import DateTimeFormat from 'gregorian-calendar-format';
 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
 
 import TimePicker from 'rc-time-picker/src/TimePicker';
-import TimePanel from 'rc-time-picker/src/TimePanel';
 import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
 
 const formatter = new DateTimeFormat('HH:mm:ss');
@@ -16,22 +15,7 @@ const formatter = new DateTimeFormat('HH:mm:ss');
 const now = new GregorianCalendar(zhCn);
 now.setTime(Date.now());
 
-const timePanel = (
-  <TimePanel
-    defaultValue={now}
-    locale={TimePickerLocale}
-    formatter={formatter}
-    minuteOptions={[0, 30]}
-  />
-);
-
 ReactDom.render(
-  <TimePicker panel={timePanel} value={now}>
-    {
-      ({value}) => {
-        return <input type="text" placeholder="请选择时间" readOnly value={value && formatter.format(value)} />;
-      }
-    }
-  </TimePicker>,
+  <TimePicker formatter={formatter} locale={TimePickerLocale} value={now} />,
   document.getElementById('__react-content')
 );

diff --git a/package.json b/package.json
index 483c3d9b897d3462ed7273d7592b3e339bdf5047..520005e4653f96aafeda138eb9e2d55c87714d52 100644 (file)
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-time-picker",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React TimePicker",
   "keywords": [
     "react",

diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 6bb97a1c0a71c3d27da9dda8ac1c57b1ba2b473c..27a793e60370bdde9cdd4eadb7ef034eca2632ab 100644 (file)
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import Trigger from 'rc-trigger';
 import {createChainedFunction} from 'rc-util';
+import Panel from 'rc-time-picker/src/module/Panel';
 import placements from './util/placements';
 import CommonMixin from './mixin/CommonMixin';
 
@@ -15,7 +16,7 @@ function refFn(field, component) {
 const Picker = React.createClass({
   propTypes: {
     prefixCls: PropTypes.string,
-    panel: PropTypes.element,
+    locale: PropTypes.object,
     children: PropTypes.func,
     disabled: PropTypes.bool,
     value: PropTypes.object,
@@ -23,6 +24,11 @@ const Picker = React.createClass({
     align: PropTypes.object,
     placement: PropTypes.any,
     transitionName: PropTypes.string,
+    placeholder: PropTypes.string,
+    formatter: PropTypes.object,
+    hourOptions: PropTypes.array,
+    minuteOptions: PropTypes.array,
+    secondOptions: PropTypes.array,
     onChange: PropTypes.func,
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
@@ -66,19 +72,35 @@ const Picker = React.createClass({
   },
 
   onPanelClear() {
-    this.setOpen(false, this.focus);
+    this.setOpen(false);
   },
 
   onVisibleChange(open) {
     this.setOpen(open, () => {
       if (open) {
+        ReactDOM.findDOMNode(this.refs.picker).blur();
         ReactDOM.findDOMNode(this.panelInstance).focus();
       }
     });
   },
 
+  getPanel() {
+    const { value, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
+    return (
+      <Panel
+        defaultValue={value}
+        locale={locale}
+        formatter={formatter}
+        placeholder={placeholder}
+        hourOptions={hourOptions}
+        minuteOptions={minuteOptions}
+        secondOptions={secondOptions}
+      />
+    );
+  },
+
   getPanelElement() {
-    const panel = this.props.panel;
+    const panel = this.getPanel();
     const extraProps = {
       ref: this.savePanelRef,
       defaultValue: this.state.value || panel.props.defaultValue,
@@ -106,16 +128,10 @@ const Picker = React.createClass({
     }
   },
 
-  focus() {
-    if (!this.state.open) {
-      ReactDOM.findDOMNode(this).focus();
-    }
-  },
-
   render() {
-    const state = this.state;
-    const props = this.props;
-    const { prefixCls, placement, align, disabled, transitionName, children } = props;
+    const { prefixCls, placement, align, disabled, transitionName, children, formatter } = this.props;
+    const { open, value } = this.state;
+
     return (
       <Trigger
         prefixCls={prefixCls}
@@ -126,11 +142,11 @@ const Picker = React.createClass({
         action={disabled ? [] : ['click']}
         destroyPopupOnHide
         popupTransitionName={transitionName}
-        popupVisible={state.open}
+        popupVisible={open}
         onPopupVisibleChange={this.onVisibleChange}
       >
         <span className={`${prefixCls}-picker`}>
-          {children(state, props)}
+          <input ref="picker" type="text" placeholder="请选择时间" readOnly disabled={disabled} value={value && formatter.format(value)} />
         </span>
       </Trigger>
     );

diff --git a/src/TimePanel.jsx b/src/module/Panel.jsx
similarity index 83%
rename from src/TimePanel.jsx
rename to src/module/Panel.jsx
index 110ca1ec2c63c4f424b50279affc6cc0a464bc1a..4220da86f72a232749f9e9eb56f2dc430748f9dd 100644 (file)
--- a/src/TimePanel.jsx
+++ b/src/module/Panel.jsx
@@ -1,8 +1,11 @@
 import React, {PropTypes} from 'react';
 import classnames from 'classnames';
-import CommonMixin from './mixin/CommonMixin';
-import Header from './module/Header';
-import Combobox from './module/Combobox';
+import GregorianCalendar from 'gregorian-calendar';
+import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
+
+import CommonMixin from '../mixin/CommonMixin';
+import Header from './Header';
+import Combobox from './Combobox';
 
 function noop() {
 }
@@ -13,7 +16,7 @@ function generateOptions(length) {
   });
 }
 
-const TimePanel = React.createClass({
+const Panel = React.createClass({
   propTypes: {
     prefixCls: PropTypes.string,
     defaultValue: PropTypes.object,
@@ -40,8 +43,13 @@ const TimePanel = React.createClass({
   },
 
   getInitialState() {
+    let defaultValue = this.props.defaultValue;
+    if (!defaultValue) {
+      defaultValue = new GregorianCalendar(zhCn);
+      defaultValue.setTime(Date.now());
+    }
     return {
-      value: this.props.defaultValue,
+      value: defaultValue,
     };
   },
 
@@ -90,7 +98,7 @@ const TimePanel = React.createClass({
       <div className={`${prefixCls}-panel ${cls}`}>
         <Header
           prefixCls={prefixCls}
-          gregorianTimePickerLocale={defaultValue.locale}
+          gregorianTimePickerLocale={value.locale}
           locale={locale}
           value={value}
           formatter={this.getFormatter()}
@@ -118,4 +126,4 @@ const TimePanel = React.createClass({
   },
 });
 
-export default TimePanel;
+export default Panel;