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