X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FTimePicker.jsx;h=d94ed940baffa48ff9868ad9ce659509639e79f6;hb=bf1d1cae92734df73f4c78420294687687951352;hp=2354db8887300e829c4f9effc6a91ae23eb9b5a7;hpb=96d366afb6e5b4821c87af25cfbfbc8a4eccc2d7;p=github%2Ffretlink%2Ftime-picker.git

diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 2354db8..d94ed94 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -1,10 +1,8 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import Trigger from 'rc-trigger';
-import Panel from './module/Panel';
-import placements from './util/placements';
-import CommonMixin from './mixin/CommonMixin';
-import {getFormatter} from './util/index';
-import defaultGregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US';
+import Panel from './Panel';
+import placements from './placements';
+import moment from 'moment';
 
 function noop() {
 }
@@ -16,8 +14,9 @@ function refFn(field, component) {
 const Picker = React.createClass({
   propTypes: {
     prefixCls: PropTypes.string,
-    locale: PropTypes.object,
+    clearText: PropTypes.string,
     value: PropTypes.object,
+    defaultOpenValue: PropTypes.object,
     disabled: PropTypes.bool,
     allowEmpty: PropTypes.bool,
     defaultValue: PropTypes.object,
@@ -27,41 +26,54 @@ const Picker = React.createClass({
     placement: PropTypes.any,
     transitionName: PropTypes.string,
     getPopupContainer: PropTypes.func,
-    gregorianCalendarLocale: PropTypes.object,
     placeholder: PropTypes.string,
-    formatter: PropTypes.any,
+    format: PropTypes.string,
     showHour: PropTypes.bool,
+    showMinute: PropTypes.bool,
+    showSecond: PropTypes.bool,
     style: PropTypes.object,
     className: PropTypes.string,
-    showSecond: PropTypes.bool,
-    hourOptions: PropTypes.array,
-    minuteOptions: PropTypes.array,
-    secondOptions: PropTypes.array,
+    disabledHours: PropTypes.func,
+    disabledMinutes: PropTypes.func,
+    disabledSeconds: PropTypes.func,
+    hideDisabledOptions: PropTypes.bool,
     onChange: PropTypes.func,
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
+    addon: PropTypes.func,
+    name: PropTypes.string,
+    autoComplete: PropTypes.string,
+    use12Hours: PropTypes.bool,
   },
 
-  mixins: [CommonMixin],
-
   getDefaultProps() {
     return {
+      clearText: 'clear',
+      prefixCls: 'rc-time-picker',
       defaultOpen: false,
       style: {},
       className: '',
-      gregorianCalendarLocale: defaultGregorianCalendarLocale,
       align: {},
+      defaultOpenValue: moment(),
       allowEmpty: true,
       showHour: true,
+      showMinute: true,
       showSecond: true,
+      disabledHours: noop,
+      disabledMinutes: noop,
+      disabledSeconds: noop,
+      hideDisabledOptions: false,
       placement: 'bottomLeft',
       onChange: noop,
       onOpen: noop,
       onClose: noop,
+      addon: noop,
+      use12Hours: false,
     };
   },
 
   getInitialState() {
+    this.saveInputRef = refFn.bind(this, 'picker');
     this.savePanelRef = refFn.bind(this, 'panelInstance');
     const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
     return {
@@ -72,13 +84,13 @@ const Picker = React.createClass({
 
   componentWillReceiveProps(nextProps) {
     const { value, open } = nextProps;
-    if (value !== undefined) {
+    if ('value' in nextProps) {
       this.setState({
         value,
       });
     }
     if (open !== undefined) {
-      this.setState({open});
+      this.setState({ open });
     }
   },
 
@@ -97,7 +109,7 @@ const Picker = React.createClass({
 
   onEsc() {
     this.setOpen(false);
-    this.refs.picker.focus();
+    this.focus();
   },
 
   onKeyDown(e) {
@@ -115,91 +127,91 @@ const Picker = React.createClass({
     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;
+  getFormat() {
+    const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
+    if (format) {
+      return format;
     }
-    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);
+
+    if (use12Hours) {
+      const fmtString = ([
+        showHour ? 'h' : '',
+        showMinute ? 'mm' : '',
+        showSecond ? 'ss' : '',
+      ].filter(item => !!item).join(':'));
+
+      return fmtString.concat(' a');
     }
-    return this.normalFormatter;
+
+    return [
+      showHour ? 'HH' : '',
+      showMinute ? 'mm' : '',
+      showSecond ? 'ss' : '',
+    ].filter(item => !!item).join(':');
   },
 
   getPanelElement() {
-    const { prefixCls, defaultValue, locale, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, gregorianCalendarLocale, value } = this.props;
-    let calendarLocale;
-    if (value) {
-      calendarLocale = value.locale;
-    } else if (defaultValue) {
-      calendarLocale = defaultValue.locale;
-    } else {
-      calendarLocale = gregorianCalendarLocale;
-    }
+    const {
+      prefixCls, placeholder, disabledHours,
+      disabledMinutes, disabledSeconds, hideDisabledOptions,
+      allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
+      addon, use12Hours,
+    } = this.props;
     return (
       <Panel
+        clearText={clearText}
         prefixCls={`${prefixCls}-panel`}
         ref={this.savePanelRef}
         value={this.state.value}
         onChange={this.onPanelChange}
-        gregorianCalendarLocale={calendarLocale}
         onClear={this.onPanelClear}
-        defaultValue={defaultValue}
+        defaultOpenValue={defaultOpenValue}
         showHour={showHour}
-        onEsc={this.onEsc}
+        showMinute={showMinute}
         showSecond={showSecond}
-        locale={locale}
+        onEsc={this.onEsc}
         allowEmpty={allowEmpty}
-        formatter={this.getFormatter()}
+        format={this.getFormat()}
         placeholder={placeholder}
-        hourOptions={hourOptions}
-        minuteOptions={minuteOptions}
-        secondOptions={secondOptions}
+        disabledHours={disabledHours}
+        disabledMinutes={disabledMinutes}
+        disabledSeconds={disabledSeconds}
+        hideDisabledOptions={hideDisabledOptions}
+        use12Hours={use12Hours}
+        addon={addon}
       />
     );
   },
 
-  setOpen(open, callback) {
-    const {onOpen, onClose} = this.props;
+  setOpen(open) {
+    const { onOpen, onClose } = this.props;
     if (this.state.open !== open) {
-      this.setState({
-        open,
-      }, callback);
-      const event = {
-        open,
-      };
+      if (!('open' in this.props)) {
+        this.setState({ open });
+      }
       if (open) {
-        onOpen(event);
+        onOpen({ open });
       } else {
-        onClose(event);
+        onClose({ open });
       }
     }
   },
 
+  focus() {
+    this.picker.focus();
+  },
+
   render() {
-    const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, showHour, showSecond, getPopupContainer } = this.props;
+    const {
+      prefixCls, placeholder, placement, align,
+      disabled, transitionName, style, className, showHour,
+      showMinute, showSecond, getPopupContainer, name, autoComplete,
+      use12Hours,
+    } = this.props;
     const { open, value } = this.state;
     let popupClassName;
-    if (!showHour || !showSecond) {
-      popupClassName = `${prefixCls}-panel-narrow}`;
+    if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
+      popupClassName = `${prefixCls}-panel-narrow`;
     }
     return (
       <Trigger
@@ -217,11 +229,17 @@ const Picker = React.createClass({
         onPopupVisibleChange={this.onVisibleChange}
       >
         <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)}/>
+          <input
+            className={`${prefixCls}-input`}
+            ref={this.saveInputRef}
+            type="text"
+            placeholder={placeholder}
+            name={name}
+            readOnly
+            onKeyDown={this.onKeyDown}
+            disabled={disabled} value={value && value.format(this.getFormat()) || ''}
+            autoComplete={autoComplete}
+          />
           <span className={`${prefixCls}-icon`}/>
         </span>
       </Trigger>