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