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