src/TimePicker.jsx

   1 import React, { PropTypes } from 'react';
   2 import Trigger from 'rc-trigger';
   3 import Panel from './Panel';
   4 import placements from './placements';
   5 import moment from 'moment';
   6
   7 function noop() {
   8 }
   9
  10 function refFn(field, component) {
  11   this[field] = component;
  12 }
  13
  14 const Picker = React.createClass({
  15   propTypes: {
  16     prefixCls: PropTypes.string,
  17     clearText: PropTypes.string,
  18     value: PropTypes.object,
  19     defaultOpenValue: PropTypes.object,
  20     disabled: PropTypes.bool,
  21     allowEmpty: PropTypes.bool,
  22     defaultValue: PropTypes.object,
  23     open: PropTypes.bool,
  24     defaultOpen: PropTypes.bool,
  25     align: PropTypes.object,
  26     placement: PropTypes.any,
  27     transitionName: PropTypes.string,
  28     getPopupContainer: PropTypes.func,
  29     placeholder: PropTypes.string,
  30     format: PropTypes.string,
  31     showHour: PropTypes.bool,
  32     showMinute: PropTypes.bool,
  33     showSecond: PropTypes.bool,
  34     style: PropTypes.object,
  35     className: PropTypes.string,
  36     disabledHours: PropTypes.func,
  37     disabledMinutes: PropTypes.func,
  38     disabledSeconds: PropTypes.func,
  39     hideDisabledOptions: PropTypes.bool,
  40     onChange: PropTypes.func,
  41     onOpen: PropTypes.func,
  42     onClose: PropTypes.func,
  43     addon: PropTypes.func,
  44     name: PropTypes.string,
  45     autoComplete: PropTypes.string,
  46   },
  47
  48   getDefaultProps() {
  49     return {
  50       clearText: 'clear',
  51       prefixCls: 'rc-time-picker',
  52       defaultOpen: false,
  53       style: {},
  54       className: '',
  55       align: {},
  56       defaultOpenValue: moment(),
  57       allowEmpty: true,
  58       showHour: true,
  59       showMinute: true,
  60       showSecond: true,
  61       disabledHours: noop,
  62       disabledMinutes: noop,
  63       disabledSeconds: noop,
  64       hideDisabledOptions: false,
  65       placement: 'bottomLeft',
  66       onChange: noop,
  67       onOpen: noop,
  68       onClose: noop,
  69       addon: noop,
  70     };
  71   },
  72
  73   getInitialState() {
  74     this.saveInputRef = refFn.bind(this, 'picker');
  75     this.savePanelRef = refFn.bind(this, 'panelInstance');
  76     const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
  77     return {
  78       open,
  79       value,
  80     };
  81   },
  82
  83   componentWillReceiveProps(nextProps) {
  84     const { value, open } = nextProps;
  85     if ('value' in nextProps) {
  86       this.setState({
  87         value,
  88       });
  89     }
  90     if (open !== undefined) {
  91       this.setState({ open });
  92     }
  93   },
  94
  95   onPanelChange(value) {
  96     this.setValue(value);
  97   },
  98
  99   onPanelClear() {
 100     this.setValue(null);
 101     this.setOpen(false);
 102   },
 103
 104   onVisibleChange(open) {
 105     this.setOpen(open);
 106   },
 107
 108   onEsc() {
 109     this.setOpen(false);
 110     this.focus();
 111   },
 112
 113   onKeyDown(e) {
 114     if (e.keyCode === 40) {
 115       this.setOpen(true);
 116     }
 117   },
 118
 119   setValue(value) {
 120     if (!('value' in this.props)) {
 121       this.setState({
 122         value,
 123       });
 124     }
 125     this.props.onChange(value);
 126   },
 127
 128   getFormat() {
 129     const { format, showHour, showMinute, showSecond } = this.props;
 130     if (format) {
 131       return format;
 132     }
 133     return [
 134       showHour ? 'HH' : '',
 135       showMinute ? 'mm' : '',
 136       showSecond ? 'ss' : '',
 137     ].filter(item => !!item).join(':');
 138   },
 139
 140   getPanelElement() {
 141     const {
 142       prefixCls, placeholder, disabledHours,
 143       disabledMinutes, disabledSeconds, hideDisabledOptions,
 144       allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
 145       addon,
 146     } = this.props;
 147     return (
 148       <Panel
 149         clearText={clearText}
 150         prefixCls={`${prefixCls}-panel`}
 151         ref={this.savePanelRef}
 152         value={this.state.value}
 153         onChange={this.onPanelChange}
 154         onClear={this.onPanelClear}
 155         defaultOpenValue={defaultOpenValue}
 156         showHour={showHour}
 157         showMinute={showMinute}
 158         showSecond={showSecond}
 159         onEsc={this.onEsc}
 160         allowEmpty={allowEmpty}
 161         format={this.getFormat()}
 162         placeholder={placeholder}
 163         disabledHours={disabledHours}
 164         disabledMinutes={disabledMinutes}
 165         disabledSeconds={disabledSeconds}
 166         hideDisabledOptions={hideDisabledOptions}
 167         addon={addon}
 168       />
 169     );
 170   },
 171
 172   setOpen(open, callback) {
 173     const { onOpen, onClose } = this.props;
 174     if (this.state.open !== open) {
 175       this.setState({
 176         open,
 177       }, callback);
 178       const event = {
 179         open,
 180       };
 181       if (open) {
 182         onOpen(event);
 183       } else {
 184         onClose(event);
 185       }
 186     }
 187   },
 188
 189   focus() {
 190     this.picker.focus();
 191   },
 192
 193   render() {
 194     const {
 195       prefixCls, placeholder, placement, align,
 196       disabled, transitionName, style, className, showHour,
 197       showMinute, showSecond, getPopupContainer, name, autoComplete,
 198     } = this.props;
 199     const { open, value } = this.state;
 200     let popupClassName;
 201     if (!showHour || !showMinute || !showSecond) {
 202       popupClassName = `${prefixCls}-panel-narrow`;
 203     }
 204     return (
 205       <Trigger
 206         prefixCls={`${prefixCls}-panel`}
 207         popupClassName={popupClassName}
 208         popup={this.getPanelElement()}
 209         popupAlign={align}
 210         builtinPlacements={placements}
 211         popupPlacement={placement}
 212         action={disabled ? [] : ['click']}
 213         destroyPopupOnHide
 214         getPopupContainer={getPopupContainer}
 215         popupTransitionName={transitionName}
 216         popupVisible={open}
 217         onPopupVisibleChange={this.onVisibleChange}
 218       >
 219         <span className={`${prefixCls} ${className}`} style={style}>
 220           <input
 221             className={`${prefixCls}-input`}
 222             ref={this.saveInputRef}
 223             type="text"
 224             placeholder={placeholder}
 225             name={name}
 226             readOnly
 227             onKeyDown={this.onKeyDown}
 228             disabled={disabled} value={value && value.format(this.getFormat()) || ''}
 229             autoComplete={autoComplete}
 230           />
 231           <span className={`${prefixCls}-icon`}/>
 232         </span>
 233       </Trigger>
 234     );
 235   },
 236 });
 237
 238 export default Picker;