X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=src%2FTimePicker.jsx;h=7659bc721d6630efe74339ecd211171202daad72;hb=c50a40056d80c52f328566d51cc49cbcdc5f0a95;hp=ec3eda07573f10bf9b765d0d4306c0b43c91763d;hpb=0c382382d862d0ef864fb4f4cbfd177d38327cf3;p=github%2Ffretlink%2Ftime-picker.git

diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index ec3eda0..7659bc7 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Trigger from 'rc-trigger';
 import Panel from './Panel';
 import placements from './placements';
@@ -11,12 +12,13 @@ function refFn(field, component) {
   this[field] = component;
 }
 
-const Picker = React.createClass({
-  propTypes: {
+export default class Picker extends Component {
+  static propTypes = {
     prefixCls: PropTypes.string,
     clearText: PropTypes.string,
     value: PropTypes.object,
     defaultOpenValue: PropTypes.object,
+    inputReadOnly: PropTypes.bool,
     disabled: PropTypes.bool,
     allowEmpty: PropTypes.bool,
     defaultValue: PropTypes.object,
@@ -33,6 +35,7 @@ const Picker = React.createClass({
     showSecond: PropTypes.bool,
     style: PropTypes.object,
     className: PropTypes.string,
+    popupClassName: PropTypes.string,
     disabledHours: PropTypes.func,
     disabledMinutes: PropTypes.func,
     disabledSeconds: PropTypes.func,
@@ -40,42 +43,60 @@ const Picker = React.createClass({
     onChange: PropTypes.func,
     onOpen: PropTypes.func,
     onClose: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
     addon: PropTypes.func,
-  },
-
-  getDefaultProps() {
-    return {
-      clearText: 'clear',
-      prefixCls: 'rc-time-picker',
-      defaultOpen: false,
-      style: {},
-      className: '',
-      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,
-    };
-  },
+    name: PropTypes.string,
+    autoComplete: PropTypes.string,
+    use12Hours: PropTypes.bool,
+    hourStep: PropTypes.number,
+    minuteStep: PropTypes.number,
+    secondStep: PropTypes.number,
+    focusOnOpen: PropTypes.bool,
+    onKeyDown: PropTypes.func,
+    autoFocus: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    clearText: 'clear',
+    prefixCls: 'rc-time-picker',
+    defaultOpen: false,
+    inputReadOnly: false,
+    style: {},
+    className: '',
+    popupClassName: '',
+    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,
+    onFocus: noop,
+    onBlur: noop,
+    addon: noop,
+    use12Hours: false,
+    focusOnOpen: false,
+    onKeyDown: noop,
+  };
 
-  getInitialState() {
+  constructor(props) {
+    super(props);
+    this.saveInputRef = refFn.bind(this, 'picker');
     this.savePanelRef = refFn.bind(this, 'panelInstance');
-    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
-    return {
+    const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = props;
+    this.state = {
       open,
       value,
     };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     const { value, open } = nextProps;
@@ -87,31 +108,31 @@ const Picker = React.createClass({
     if (open !== undefined) {
       this.setState({ open });
     }
-  },
+  }
 
-  onPanelChange(value) {
+  onPanelChange = (value) => {
     this.setValue(value);
-  },
+  }
 
-  onPanelClear() {
+  onPanelClear = () => {
     this.setValue(null);
     this.setOpen(false);
-  },
+  }
 
-  onVisibleChange(open) {
+  onVisibleChange = (open) => {
     this.setOpen(open);
-  },
+  }
 
-  onEsc() {
+  onEsc = () => {
     this.setOpen(false);
-    this.refs.picker.focus();
-  },
+    this.focus();
+  }
 
-  onKeyDown(e) {
+  onKeyDown = (e) => {
     if (e.keyCode === 40) {
       this.setOpen(true);
     }
-  },
+  }
 
   setValue(value) {
     if (!('value' in this.props)) {
@@ -120,26 +141,37 @@ const Picker = React.createClass({
       });
     }
     this.props.onChange(value);
-  },
+  }
 
   getFormat() {
-    const { format, showHour, showMinute, showSecond } = this.props;
+    const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
     if (format) {
       return format;
     }
+
+    if (use12Hours) {
+      const fmtString = ([
+        showHour ? 'h' : '',
+        showMinute ? 'mm' : '',
+        showSecond ? 'ss' : '',
+      ].filter(item => !!item).join(':'));
+
+      return fmtString.concat(' a');
+    }
+
     return [
       showHour ? 'HH' : '',
       showMinute ? 'mm' : '',
       showSecond ? 'ss' : '',
     ].filter(item => !!item).join(':');
-  },
+  }
 
   getPanelElement() {
     const {
       prefixCls, placeholder, disabledHours,
-      disabledMinutes, disabledSeconds, hideDisabledOptions,
+      disabledMinutes, disabledSeconds, hideDisabledOptions, inputReadOnly,
       allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
-      addon,
+      addon, use12Hours, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep,
     } = this.props;
     return (
       <Panel
@@ -147,6 +179,7 @@ const Picker = React.createClass({
         prefixCls={`${prefixCls}-panel`}
         ref={this.savePanelRef}
         value={this.state.value}
+        inputReadOnly={inputReadOnly}
         onChange={this.onPanelChange}
         onClear={this.onPanelClear}
         defaultOpenValue={defaultOpenValue}
@@ -161,39 +194,71 @@ const Picker = React.createClass({
         disabledMinutes={disabledMinutes}
         disabledSeconds={disabledSeconds}
         hideDisabledOptions={hideDisabledOptions}
+        use12Hours={use12Hours}
+        hourStep={hourStep}
+        minuteStep={minuteStep}
+        secondStep={secondStep}
         addon={addon}
+        focusOnOpen={focusOnOpen}
+        onKeyDown={onKeyDown}
       />
     );
-  },
+  }
 
-  setOpen(open, callback) {
+  getPopupClassName() {
+    const { showHour, showMinute, showSecond, use12Hours, prefixCls } = this.props;
+    let popupClassName = this.props.popupClassName;
+    // Keep it for old compatibility
+    if ((!showHour || !showMinute || !showSecond) && !use12Hours) {
+      popupClassName += ` ${prefixCls}-panel-narrow`;
+    }
+    let selectColumnCount = 0;
+    if (showHour) {
+      selectColumnCount += 1;
+    }
+    if (showMinute) {
+      selectColumnCount += 1;
+    }
+    if (showSecond) {
+      selectColumnCount += 1;
+    }
+    if (use12Hours) {
+      selectColumnCount += 1;
+    }
+    popupClassName += ` ${prefixCls}-panel-column-${selectColumnCount}`;
+    return popupClassName;
+  }
+
+  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();
+  }
+
+  blur() {
+    this.picker.blur();
+  }
 
   render() {
     const {
       prefixCls, placeholder, placement, align,
-      disabled, transitionName, style, className, showHour,
-      showMinute, showSecond, getPopupContainer,
+      disabled, transitionName, style, className, getPopupContainer, name, autoComplete,
+      onFocus, onBlur, autoFocus,
     } = this.props;
     const { open, value } = this.state;
-    let popupClassName;
-    if (!showHour || !showMinute || !showSecond) {
-      popupClassName = `${prefixCls}-panel-narrow`;
-    }
+    const popupClassName = this.getPopupClassName();
     return (
       <Trigger
         prefixCls={`${prefixCls}-panel`}
@@ -212,16 +277,22 @@ const Picker = React.createClass({
         <span className={`${prefixCls} ${className}`} style={style}>
           <input
             className={`${prefixCls}-input`}
-            ref="picker" type="text" placeholder={placeholder}
-            readOnly
+            ref={this.saveInputRef}
+            type="text"
+            placeholder={placeholder}
+            name={name}
             onKeyDown={this.onKeyDown}
-            disabled={disabled} value={value && value.format(this.getFormat()) || ''}
+            disabled={disabled}
+            value={value && value.format(this.getFormat()) || ''}
+            autoComplete={autoComplete}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            autoFocus={autoFocus}
+            onChange={noop}
           />
           <span className={`${prefixCls}-icon`}/>
         </span>
       </Trigger>
     );
-  },
-});
-
-export default Picker;
+  }
+}