src/TimePicker.jsx

   1 import React, { PropTypes } from 'react';
   2 import Trigger from 'rc-trigger';
   3 import Panel from './Panel';
   4 import placements from './placements';
   5 import moment from 'moment';
   6
   7 function noop() {
   8 }
   9
  10 function refFn(field, component) {
  11   this[field] = component;
  12 }
  13
  14 const Picker = React.createClass({
  15   propTypes: {
  16     prefixCls: PropTypes.string,
  17     clearText: PropTypes.string,
  18     value: PropTypes.object,
  19     defaultOpenValue: PropTypes.object,
  20     disabled: PropTypes.bool,
  21     allowEmpty: PropTypes.bool,
  22     defaultValue: PropTypes.object,
  23     open: PropTypes.bool,
  24     defaultOpen: PropTypes.bool,
  25     align: PropTypes.object,
  26     placement: PropTypes.any,
  27     transitionName: PropTypes.string,
  28     getPopupContainer: PropTypes.func,
  29     placeholder: PropTypes.string,
  30     format: PropTypes.string,
  31     showHour: PropTypes.bool,
  32     showMinute: PropTypes.bool,
  33     showSecond: PropTypes.bool,
  34     style: PropTypes.object,
  35     className: PropTypes.string,
  36     disabledHours: PropTypes.func,
  37     disabledMinutes: PropTypes.func,
  38     disabledSeconds: PropTypes.func,
  39     hideDisabledOptions: PropTypes.bool,
  40     onChange: PropTypes.func,
  41     onOpen: PropTypes.func,
  42     onClose: PropTypes.func,
  43     addon: PropTypes.func,
  44     name: PropTypes.string,
  45     autoComplete: PropTypes.string,
  46     use12Hours: PropTypes.bool,
  47   },
  48
  49   getDefaultProps() {
  50     return {
  51       clearText: 'clear',
  52       prefixCls: 'rc-time-picker',
  53       defaultOpen: false,
  54       style: {},
  55       className: '',
  56       align: {},
  57       defaultOpenValue: moment(),
  58       allowEmpty: true,
  59       showHour: true,
  60       showMinute: true,
  61       showSecond: true,
  62       disabledHours: noop,
  63       disabledMinutes: noop,
  64       disabledSeconds: noop,
  65       hideDisabledOptions: false,
  66       placement: 'bottomLeft',
  67       onChange: noop,
  68       onOpen: noop,
  69       onClose: noop,
  70       addon: noop,
  71       use12Hours: false,
  72     };
  73   },
  74
  75   getInitialState() {
  76     this.saveInputRef = refFn.bind(this, 'picker');
  77     this.savePanelRef = refFn.bind(this, 'panelInstance');
  78     const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
  79     return {
  80       open,
  81       value,
  82     };
  83   },
  84
  85   componentWillReceiveProps(nextProps) {
  86     const { value, open } = nextProps;
  87     if ('value' in nextProps) {
  88       this.setState({
  89         value,
  90       });
  91     }
  92     if (open !== undefined) {
  93       this.setState({ open });
  94     }
  95   },
  96
  97   onPanelChange(value) {
  98     this.setValue(value);
  99   },
 100
 101   onPanelClear() {
 102     this.setValue(null);
 103     this.setOpen(false);
 104   },
 105
 106   onVisibleChange(open) {
 107     this.setOpen(open);
 108   },
 109
 110   onEsc() {
 111     this.setOpen(false);
 112     this.focus();
 113   },
 114
 115   onKeyDown(e) {
 116     if (e.keyCode === 40) {
 117       this.setOpen(true);
 118     }
 119   },
 120
 121   setValue(value) {
 122     if (!('value' in this.props)) {
 123       this.setState({
 124         value,
 125       });
 126     }
 127     this.props.onChange(value);
 128   },
 129
 130   getFormat() {
 131     const { format, showHour, showMinute, showSecond, use12Hours } = this.props;
 132     if (format) {
 133       return format;
 134     }
 135
 136     if (use12Hours) {
 137       const fmtString = ([
 138         showHour ? 'h' : '',
 139         showMinute ? 'mm' : '',
 140         showSecond ? 'ss' : '',
 141       ].filter(item => !!item).join(':'));
 142
 143       return fmtString.concat(' a');
 144     }
 145
 146     return [
 147       showHour ? 'HH' : '',
 148       showMinute ? 'mm' : '',
 149       showSecond ? 'ss' : '',
 150     ].filter(item => !!item).join(':');
 151   },
 152
 153   getPanelElement() {
 154     const {
 155       prefixCls, placeholder, disabledHours,
 156       disabledMinutes, disabledSeconds, hideDisabledOptions,
 157       allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
 158       addon, use12Hours,
 159     } = this.props;
 160     return (
 161       <Panel
 162         clearText={clearText}
 163         prefixCls={`${prefixCls}-panel`}
 164         ref={this.savePanelRef}
 165         value={this.state.value}
 166         onChange={this.onPanelChange}
 167         onClear={this.onPanelClear}
 168         defaultOpenValue={defaultOpenValue}
 169         showHour={showHour}
 170         showMinute={showMinute}
 171         showSecond={showSecond}
 172         onEsc={this.onEsc}
 173         allowEmpty={allowEmpty}
 174         format={this.getFormat()}
 175         placeholder={placeholder}
 176         disabledHours={disabledHours}
 177         disabledMinutes={disabledMinutes}
 178         disabledSeconds={disabledSeconds}
 179         hideDisabledOptions={hideDisabledOptions}
 180         use12Hours={use12Hours}
 181         addon={addon}
 182       />
 183     );
 184   },
 185
 186   setOpen(open) {
 187     const { onOpen, onClose } = this.props;
 188     if (this.state.open !== open) {
 189       if (!('open' in this.props)) {
 190         this.setState({ open });
 191       }
 192       if (open) {
 193         onOpen({ open });
 194       } else {
 195         onClose({ open });
 196       }
 197     }
 198   },
 199
 200   focus() {
 201     this.picker.focus();
 202   },
 203
 204   render() {
 205     const {
 206       prefixCls, placeholder, placement, align,
 207       disabled, transitionName, style, className, showHour,
 208       showMinute, showSecond, getPopupContainer, name, autoComplete,
 209     } = this.props;
 210     const { open, value } = this.state;
 211     let popupClassName;
 212     if (!showHour || !showMinute || !showSecond) {
 213       popupClassName = `${prefixCls}-panel-narrow`;
 214     }
 215     return (
 216       <Trigger
 217         prefixCls={`${prefixCls}-panel`}
 218         popupClassName={popupClassName}
 219         popup={this.getPanelElement()}
 220         popupAlign={align}
 221         builtinPlacements={placements}
 222         popupPlacement={placement}
 223         action={disabled ? [] : ['click']}
 224         destroyPopupOnHide
 225         getPopupContainer={getPopupContainer}
 226         popupTransitionName={transitionName}
 227         popupVisible={open}
 228         onPopupVisibleChange={this.onVisibleChange}
 229       >
 230         <span className={`${prefixCls} ${className}`} style={style}>
 231           <input
 232             className={`${prefixCls}-input`}
 233             ref={this.saveInputRef}
 234             type="text"
 235             placeholder={placeholder}
 236             name={name}
 237             readOnly
 238             onKeyDown={this.onKeyDown}
 239             disabled={disabled} value={value && value.format(this.getFormat()) || ''}
 240             autoComplete={autoComplete}
 241           />
 242           <span className={`${prefixCls}-icon`}/>
 243         </span>
 244       </Trigger>
 245     );
 246   },
 247 });
 248
 249 export default Picker;