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) {
  10   const arr = [];
  11   for (let i = 0; i < length; i++) {
  12     arr.push(i);
  13   }
  14   return arr;
  15 }
  16
  17 const Panel = React.createClass({
  18   propTypes: {
  19     prefixCls: PropTypes.string,
  20     value: PropTypes.object,
  21     locale: PropTypes.object,
  22     placeholder: PropTypes.string,
  23     gregorianCalendarLocale: PropTypes.object,
  24     formatter: PropTypes.object,
  25     hourOptions: PropTypes.array,
  26     minuteOptions: PropTypes.array,
  27     secondOptions: PropTypes.array,
  28     onChange: PropTypes.func,
  29     onEsc: PropTypes.func,
  30     allowEmpty: PropTypes.bool,
  31     showHour: PropTypes.bool,
  32     showSecond: PropTypes.bool,
  33     onClear: PropTypes.func,
  34   },
  35
  36   mixins: [CommonMixin],
  37
  38   getDefaultProps() {
  39     return {
  40       hourOptions: generateOptions(24),
  41       minuteOptions: generateOptions(60),
  42       secondOptions: generateOptions(60),
  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, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
  79     const value = this.state.value;
  80     return (
  81       <div className={`${prefixCls}-inner`}>
  82         <Header
  83           prefixCls={prefixCls}
  84           gregorianCalendarLocale={gregorianCalendarLocale}
  85           locale={locale}
  86           value={value}
  87           currentSelectPanel={this.state.currentSelectPanel}
  88           onEsc={this.props.onEsc}
  89           formatter={formatter}
  90           placeholder={placeholder}
  91           hourOptions={hourOptions}
  92           minuteOptions={minuteOptions}
  93           secondOptions={secondOptions}
  94           onChange={this.onChange}
  95           onClear={this.onClear}
  96           allowEmpty={allowEmpty}
  97         />
  98         <Combobox
  99           prefixCls={prefixCls}
 100           value={value}
 101           gregorianCalendarLocale={gregorianCalendarLocale}
 102           formatter={formatter}
 103           onChange={this.onChange}
 104           showHour={showHour}
 105           showSecond={showSecond}
 106           hourOptions={hourOptions}
 107           minuteOptions={minuteOptions}
 108           secondOptions={secondOptions}
 109           onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
 110         />
 111       </div>
 112     );
 113   },
 114 });
 115
 116 export default Panel;