src/TimePicker.jsx

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