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