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