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