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