src/TimePicker.jsx

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