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