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       prefixCls: 'rc-time-picker',
  49       defaultOpen: false,
  50       style: {},
  51       className: '',
  52       align: {},
  53       allowEmpty: true,
  54       showHour: true,
  55       showSecond: true,
  56       disabledHours: noop,
  57       disabledMinutes: noop,
  58       disabledSeconds: noop,
  59       hideDisabledOptions: false,
  60       placement: 'bottomLeft',
  61       onChange: noop,
  62       onOpen: noop,
  63       onClose: noop,
  64     };
  65   },
  66
  67   getInitialState() {
  68     this.savePanelRef = refFn.bind(this, 'panelInstance');
  69     const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
  70     return {
  71       open,
  72       value,
  73     };
  74   },
  75
  76   componentWillReceiveProps(nextProps) {
  77     const { value, open } = nextProps;
  78     if ('value' in nextProps) {
  79       this.setState({
  80         value,
  81       });
  82     }
  83     if (open !== undefined) {
  84       this.setState({ open });
  85     }
  86   },
  87
  88   onPanelChange(value) {
  89     this.setValue(value);
  90   },
  91
  92   onPanelClear() {
  93     this.setValue(null);
  94     this.setOpen(false);
  95   },
  96
  97   onVisibleChange(open) {
  98     this.setOpen(open);
  99   },
 100
 101   onEsc() {
 102     this.setOpen(false);
 103     this.refs.picker.focus();
 104   },
 105
 106   onKeyDown(e) {
 107     if (e.keyCode === 40) {
 108       this.setOpen(true);
 109     }
 110   },
 111
 112   setValue(value) {
 113     if (!('value' in this.props)) {
 114       this.setState({
 115         value,
 116       });
 117     }
 118     this.props.onChange(value);
 119   },
 120
 121   getFormatter() {
 122     const formatter = this.props.formatter;
 123     const locale = this.props.locale;
 124     if (formatter) {
 125       if (formatter === this.lastFormatter) {
 126         return this.normalFormatter;
 127       }
 128       this.normalFormatter = getFormatter(formatter, locale);
 129       this.lastFormatter = formatter;
 130       return this.normalFormatter;
 131     }
 132     if (!this.props.showSecond) {
 133       if (!this.notShowSecondFormatter) {
 134         this.notShowSecondFormatter = getFormatter('HH:mm', locale);
 135       }
 136       return this.notShowSecondFormatter;
 137     }
 138     if (!this.props.showHour) {
 139       if (!this.notShowHourFormatter) {
 140         this.notShowHourFormatter = getFormatter('mm:ss', locale);
 141       }
 142       return this.notShowHourFormatter;
 143     }
 144     if (!this.normalFormatter) {
 145       this.normalFormatter = getFormatter('HH:mm:ss', locale);
 146     }
 147     return this.normalFormatter;
 148   },
 149
 150   getPanelElement() {
 151     const {
 152       prefixCls, defaultValue, locale, placeholder, disabledHours,
 153       disabledMinutes, disabledSeconds, hideDisabledOptions,
 154       allowEmpty, showHour, showSecond,
 155     } = this.props;
 156     return (
 157       <Panel
 158         prefixCls={`${prefixCls}-panel`}
 159         ref={this.savePanelRef}
 160         value={this.state.value}
 161         onChange={this.onPanelChange}
 162         gregorianCalendarLocale={locale.calendar}
 163         onClear={this.onPanelClear}
 164         defaultValue={defaultValue}
 165         showHour={showHour}
 166         onEsc={this.onEsc}
 167         showSecond={showSecond}
 168         locale={locale}
 169         allowEmpty={allowEmpty}
 170         formatter={this.getFormatter()}
 171         placeholder={placeholder}
 172         disabledHours={disabledHours}
 173         disabledMinutes={disabledMinutes}
 174         disabledSeconds={disabledSeconds}
 175         hideDisabledOptions={hideDisabledOptions}
 176       />
 177     );
 178   },
 179
 180   setOpen(open, callback) {
 181     const { onOpen, onClose } = this.props;
 182     if (this.state.open !== open) {
 183       this.setState({
 184         open,
 185       }, callback);
 186       const event = {
 187         open,
 188       };
 189       if (open) {
 190         onOpen(event);
 191       } else {
 192         onClose(event);
 193       }
 194     }
 195   },
 196
 197   render() {
 198     const { prefixCls, placeholder, placement, align, disabled, transitionName, style, className, showHour, showSecond, getPopupContainer } = this.props;
 199     const { open, value } = this.state;
 200     let popupClassName;
 201     if (!showHour || !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="picker" type="text" placeholder={placeholder}
 223             readOnly
 224             onKeyDown={this.onKeyDown}
 225             disabled={disabled} value={value && this.getFormatter().format(value) || ''}
 226           />
 227           <span className={`${prefixCls}-icon`}/>
 228         </span>
 229       </Trigger>
 230     );
 231   },
 232 });
 233
 234 export default Picker;