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