X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FTimePicker.jsx;h=86faa714e09af9a9ab1b64cfcd127987db3f4106;hb=04de55f8a50f58575ccda435ba62edfca1d4a5e4;hp=f0a3316c1b2d86d7264c06d044623e20c0b21e59;hpb=15bb18d90f02d146141cdde45a5a2b5a6a575202;p=github%2Ffretlink%2Ftime-picker.git

diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index f0a3316..86faa71 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -1,10 +1,9 @@
-import React, {PropTypes} from 'react';
-import ReactDOM from 'react-dom';
+import React, { PropTypes } from 'react';
 import Trigger from 'rc-trigger';
-import {createChainedFunction} from 'rc-util';
 import Panel from './module/Panel';
 import placements from './util/placements';
 import CommonMixin from './mixin/CommonMixin';
+import { getFormatter } from './util/index';
 
 function noop() {
 }
@@ -17,18 +16,26 @@ const Picker = React.createClass({
   propTypes: {
     prefixCls: PropTypes.string,
     locale: PropTypes.object,
-    children: PropTypes.func,
-    disabled: PropTypes.bool,
     value: PropTypes.object,
+    disabled: PropTypes.bool,
+    allowEmpty: PropTypes.bool,
+    defaultValue: PropTypes.object,
     open: PropTypes.bool,
+    defaultOpen: PropTypes.bool,
     align: PropTypes.object,
     placement: PropTypes.any,
     transitionName: PropTypes.string,
+    getPopupContainer: PropTypes.func,
     placeholder: PropTypes.string,
-    formatter: PropTypes.object,
-    hourOptions: PropTypes.array,
-    minuteOptions: PropTypes.array,
-    secondOptions: PropTypes.array,
+    formatter: PropTypes.any,
+    showHour: PropTypes.bool,
+    style: PropTypes.object,
+    className: PropTypes.string,
+    showSecond: PropTypes.bool,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
@@ -38,8 +45,18 @@ const Picker = React.createClass({
 
   getDefaultProps() {
     return {
-      open: false,
+      prefixCls: 'rc-time-picker',
+      defaultOpen: false,
+      style: {},
+      className: '',
       align: {},
+      allowEmpty: true,
+      showHour: true,
+      showSecond: true,
+      disabledHours: noop,
+      disabledMinutes: noop,
+      disabledSeconds: noop,
+      hideDisabledOptions: false,
       placement: 'bottomLeft',
       onChange: noop,
       onOpen: noop,
@@ -49,77 +66,125 @@ const Picker = React.createClass({
 
   getInitialState() {
     this.savePanelRef = refFn.bind(this, 'panelInstance');
-    const { open, value } = this.props;
-    return { open, value };
+    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
+    return {
+      open,
+      value,
+    };
   },
 
   componentWillReceiveProps(nextProps) {
     const { value, open } = nextProps;
-    if (value !== undefined) {
-      this.setState({value});
+    if ('value' in nextProps) {
+      this.setState({
+        value,
+      });
     }
     if (open !== undefined) {
-      this.setState({open});
+      this.setState({ open });
     }
   },
 
   onPanelChange(value) {
-    const props = this.props;
-    this.setState({
-      value: value,
-    });
-    props.onChange(value);
+    this.setValue(value);
   },
 
   onPanelClear() {
+    this.setValue(null);
     this.setOpen(false);
   },
 
   onVisibleChange(open) {
-    this.setOpen(open, () => {
-      if (open) {
-        ReactDOM.findDOMNode(this.refs.picker).blur();
-        ReactDOM.findDOMNode(this.panelInstance).focus();
+    this.setOpen(open);
+  },
+
+  onEsc() {
+    this.setOpen(false);
+    this.refs.picker.focus();
+  },
+
+  onKeyDown(e) {
+    if (e.keyCode === 40) {
+      this.setOpen(true);
+    }
+  },
+
+  setValue(value) {
+    if (!('value' in this.props)) {
+      this.setState({
+        value,
+      });
+    }
+    this.props.onChange(value);
+  },
+
+  getFormatter() {
+    const formatter = this.props.formatter;
+    const locale = this.props.locale;
+    if (formatter) {
+      if (formatter === this.lastFormatter) {
+        return this.normalFormatter;
+      }
+      this.normalFormatter = getFormatter(formatter, locale);
+      this.lastFormatter = formatter;
+      return this.normalFormatter;
+    }
+    if (!this.props.showSecond) {
+      if (!this.notShowSecondFormatter) {
+        this.notShowSecondFormatter = getFormatter('HH:mm', locale);
       }
-    });
+      return this.notShowSecondFormatter;
+    }
+    if (!this.props.showHour) {
+      if (!this.notShowHourFormatter) {
+        this.notShowHourFormatter = getFormatter('mm:ss', locale);
+      }
+      return this.notShowHourFormatter;
+    }
+    if (!this.normalFormatter) {
+      this.normalFormatter = getFormatter('HH:mm:ss', locale);
+    }
+    return this.normalFormatter;
   },
 
-  getPanel() {
-    const { prefixCls, value, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
+  getPanelElement() {
+    const {
+      prefixCls, defaultValue, locale, placeholder, disabledHours,
+      disabledMinutes, disabledSeconds, hideDisabledOptions,
+      allowEmpty, showHour, showSecond,
+    } = this.props;
     return (
       <Panel
-        prefixCls={prefixCls}
-        defaultValue={value}
+        prefixCls={`${prefixCls}-panel`}
+        ref={this.savePanelRef}
+        value={this.state.value}
+        onChange={this.onPanelChange}
+        gregorianCalendarLocale={locale.calendar}
+        onClear={this.onPanelClear}
+        defaultValue={defaultValue}
+        showHour={showHour}
+        onEsc={this.onEsc}
+        showSecond={showSecond}
         locale={locale}
-        formatter={formatter}
+        allowEmpty={allowEmpty}
+        formatter={this.getFormatter()}
         placeholder={placeholder}
-        hourOptions={hourOptions}
-        minuteOptions={minuteOptions}
-        secondOptions={secondOptions}
+        disabledHours={disabledHours}
+        disabledMinutes={disabledMinutes}
+        disabledSeconds={disabledSeconds}
+        hideDisabledOptions={hideDisabledOptions}
       />
     );
   },
 
-  getPanelElement() {
-    const panel = this.getPanel();
-    const extraProps = {
-      ref: this.savePanelRef,
-      defaultValue: this.state.value || panel.props.defaultValue,
-      onChange: createChainedFunction(panel.props.onChange, this.onPanelChange),
-      onClear: createChainedFunction(panel.props.onClear, this.onPanelClear),
-    };
-
-    return React.cloneElement(panel, extraProps);
-  },
-
   setOpen(open, callback) {
-    const {onOpen, onClose} = this.props;
+    const { onOpen, onClose } = this.props;
     if (this.state.open !== open) {
       this.setState({
-        open: open,
+        open,
       }, callback);
       const event = {
-        open: open,
+        open,
       };
       if (open) {
         onOpen(event);
@@ -130,25 +195,36 @@ const Picker = React.createClass({
   },
 
   render() {
-    const { prefixCls, placement, align, disabled, transitionName, children, formatter } = this.props;
+    const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, showHour, showSecond, getPopupContainer } = this.props;
     const { open, value } = this.state;
-
+    let popupClassName;
+    if (!showHour || !showSecond) {
+      popupClassName = `${prefixCls}-panel-narrow`;
+    }
     return (
       <Trigger
-        prefixCls={prefixCls}
+        prefixCls={`${prefixCls}-panel`}
+        popupClassName={popupClassName}
         popup={this.getPanelElement()}
         popupAlign={align}
         builtinPlacements={placements}
         popupPlacement={placement}
         action={disabled ? [] : ['click']}
         destroyPopupOnHide
+        getPopupContainer={getPopupContainer}
         popupTransitionName={transitionName}
         popupVisible={open}
         onPopupVisibleChange={this.onVisibleChange}
       >
-        <span className={`${prefixCls}-picker`}>
-          <input ref="picker" type="text" placeholder="请选择时间" readOnly disabled={disabled} value={value && formatter.format(value)} />
-          <span className={`${prefixCls}-picker-icon`} />
+        <span className={`${prefixCls} ${className}`} style={style}>
+          <input
+            className={`${prefixCls}-input`}
+            ref="picker" type="text" placeholder={placeholder}
+            readOnly
+            onKeyDown={this.onKeyDown}
+            disabled={disabled} value={value && this.getFormatter().format(value) || ''}
+          />
+          <span className={`${prefixCls}-icon`}/>
         </span>
       </Trigger>
     );