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.array,
  28     disabledMinutes: PropTypes.array,
  29     disabledSeconds: PropTypes.array,
  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       disabledHours: null,
  44       disabledMinutes: null,
  45       disabledSeconds: null,
  46       hideDisabledOptions: false,
  47       onChange: noop,
  48       onClear: noop,
  49     };
  50   },
  51
  52   getInitialState() {
  53     return {
  54       value: this.props.value,
  55       selectionRange: [],
  56     };
  57   },
  58
  59   componentWillReceiveProps(nextProps) {
  60     const value = nextProps.value;
  61     if (value) {
  62       this.setState({
  63         value,
  64       });
  65     }
  66   },
  67
  68   onChange(newValue) {
  69     this.setState({ value: newValue });
  70     this.props.onChange(newValue);
  71   },
  72
  73   onClear() {
  74     this.props.onClear();
  75   },
  76
  77   onCurrentSelectPanelChange(currentSelectPanel) {
  78     this.setState({ currentSelectPanel });
  79   },
  80
  81   render() {
  82     const { locale, prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
  83     const value = this.state.value;
  84     const hourOptions = generateOptions(24, disabledHours, hideDisabledOptions);
  85     const minuteOptions = generateOptions(60, disabledMinutes, hideDisabledOptions);
  86     const secondOptions = generateOptions(60, disabledSeconds, hideDisabledOptions);
  87
  88     return (
  89       <div className={`${prefixCls}-inner`}>
  90         <Header
  91           prefixCls={prefixCls}
  92           gregorianCalendarLocale={gregorianCalendarLocale}
  93           locale={locale}
  94           value={value}
  95           currentSelectPanel={this.state.currentSelectPanel}
  96           onEsc={this.props.onEsc}
  97           formatter={formatter}
  98           placeholder={placeholder}
  99           hourOptions={hourOptions}
 100           minuteOptions={minuteOptions}
 101           secondOptions={secondOptions}
 102           disabledHours={disabledHours}
 103           disabledMinutes={disabledMinutes}
 104           disabledSeconds={disabledSeconds}
 105           onChange={this.onChange}
 106           onClear={this.onClear}
 107           allowEmpty={allowEmpty}
 108         />
 109         <Combobox
 110           prefixCls={prefixCls}
 111           value={value}
 112           gregorianCalendarLocale={gregorianCalendarLocale}
 113           formatter={formatter}
 114           onChange={this.onChange}
 115           showHour={showHour}
 116           showSecond={showSecond}
 117           hourOptions={hourOptions}
 118           minuteOptions={minuteOptions}
 119           secondOptions={secondOptions}
 120           disabledHours={disabledHours}
 121           disabledMinutes={disabledMinutes}
 122           disabledSeconds={disabledSeconds}
 123           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
 124         />
 125       </div>
 126     );
 127   },
 128 });
 129
 130 export default Panel;