src/module/Panel.jsx

   1 import React, {PropTypes} from 'react';
   2 import CommonMixin from '../mixin/CommonMixin';
   3 import Header from './Header';
   4 import Combobox from './Combobox';
   5
   6 function noop() {
   7 }
   8
   9 function generateOptions(length, disabledOptions, hideDisabledOptions) {
  10   const arr = [];
  11   for (let value = 0; value < length; value++) {
  12     if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
  13       arr.push(value);
  14     }
  15   }
  16   return arr;
  17 }
  18
  19 const Panel = React.createClass({
  20   propTypes: {
  21     prefixCls: PropTypes.string,
  22     value: PropTypes.object,
  23     locale: PropTypes.object,
  24     placeholder: PropTypes.string,
  25     gregorianCalendarLocale: PropTypes.object,
  26     formatter: PropTypes.object,
  27     disabledHours: PropTypes.func,
  28     disabledMinutes: PropTypes.func,
  29     disabledSeconds: PropTypes.func,
  30     hideDisabledOptions: PropTypes.bool,
  31     onChange: PropTypes.func,
  32     onEsc: PropTypes.func,
  33     allowEmpty: PropTypes.bool,
  34     showHour: PropTypes.bool,
  35     showSecond: PropTypes.bool,
  36     onClear: PropTypes.func,
  37   },
  38
  39   mixins: [CommonMixin],
  40
  41   getDefaultProps() {
  42     return {
  43       onChange: noop,
  44       onClear: noop,
  45     };
  46   },
  47
  48   getInitialState() {
  49     return {
  50       value: this.props.value,
  51       selectionRange: [],
  52     };
  53   },
  54
  55   componentWillReceiveProps(nextProps) {
  56     const value = nextProps.value;
  57     if (value) {
  58       this.setState({
  59         value,
  60       });
  61     }
  62   },
  63
  64   onChange(newValue) {
  65     this.setState({ value: newValue });
  66     this.props.onChange(newValue);
  67   },
  68
  69   onClear() {
  70     this.props.onClear();
  71   },
  72
  73   onCurrentSelectPanelChange(currentSelectPanel) {
  74     this.setState({ currentSelectPanel });
  75   },
  76
  77   render() {
  78     const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
  79     const value = this.state.value;
  80     const disabledHourOptions = disabledHours();
  81     const disabledMinuteOptions = disabledMinutes(value.getHourOfDay());
  82     const disabledSecondOptions = disabledSeconds(value.getHourOfDay(), value.getMinutes());
  83     const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions);
  84     const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions);
  85     const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
  86
  87     return (
  88       <div className={`${prefixCls}-inner`}>
  89         <Header
  90           prefixCls={prefixCls}
  91           gregorianCalendarLocale={gregorianCalendarLocale}
  92           locale={locale}
  93           value={value}
  94           currentSelectPanel={this.state.currentSelectPanel}
  95           onEsc={this.props.onEsc}
  96           formatter={formatter}
  97           placeholder={placeholder}
  98           hourOptions={hourOptions}
  99           minuteOptions={minuteOptions}
 100           secondOptions={secondOptions}
 101           disabledHours={disabledHours}
 102           disabledMinutes={disabledMinutes}
 103           disabledSeconds={disabledSeconds}
 104           onChange={this.onChange}
 105           onClear={this.onClear}
 106           allowEmpty={allowEmpty}
 107         />
 108         <Combobox
 109           prefixCls={prefixCls}
 110           value={value}
 111           gregorianCalendarLocale={gregorianCalendarLocale}
 112           formatter={formatter}
 113           onChange={this.onChange}
 114           showHour={showHour}
 115           showSecond={showSecond}
 116           hourOptions={hourOptions}
 117           minuteOptions={minuteOptions}
 118           secondOptions={secondOptions}
 119           disabledHours={disabledHours}
 120           disabledMinutes={disabledMinutes}
 121           disabledSeconds={disabledSeconds}
 122           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
 123         />
 124       </div>
 125     );
 126   },
 127 });
 128
 129 export default Panel;