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