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   return Array.apply(null, {length: length}).map((item, index) => {
  11     return index;
  12   });
  13 }
  14
  15 const Panel = React.createClass({
  16   propTypes: {
  17     prefixCls: PropTypes.string,
  18     value: PropTypes.object,
  19     locale: PropTypes.object,
  20     placeholder: PropTypes.string,
  21     gregorianCalendarLocale: PropTypes.object,
  22     formatter: PropTypes.object,
  23     hourOptions: PropTypes.array,
  24     minuteOptions: PropTypes.array,
  25     secondOptions: PropTypes.array,
  26     onChange: PropTypes.func,
  27     onEsc: PropTypes.func,
  28     allowEmpty: PropTypes.bool,
  29     showHour: PropTypes.bool,
  30     showSecond: PropTypes.bool,
  31     onClear: PropTypes.func,
  32   },
  33
  34   mixins: [CommonMixin],
  35
  36   getDefaultProps() {
  37     return {
  38       hourOptions: generateOptions(24),
  39       minuteOptions: generateOptions(60),
  40       secondOptions: generateOptions(60),
  41       onChange: noop,
  42       onClear: noop,
  43     };
  44   },
  45
  46   getInitialState() {
  47     return {
  48       value: this.props.value,
  49     };
  50   },
  51
  52   componentWillReceiveProps(nextProps) {
  53     const value = nextProps.value;
  54     if (value) {
  55       this.setState({
  56         value,
  57       });
  58     }
  59   },
  60
  61   onChange(newValue) {
  62     this.setState({ value: newValue });
  63     this.props.onChange(newValue);
  64   },
  65
  66   onClear() {
  67     this.props.onClear();
  68   },
  69
  70   render() {
  71     const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
  72     const value = this.state.value;
  73     return (
  74       <div className={`${prefixCls}-inner`}>
  75         <Header
  76           prefixCls={prefixCls}
  77           gregorianCalendarLocale={gregorianCalendarLocale}
  78           locale={locale}
  79           value={value}
  80           onEsc={this.props.onEsc}
  81           formatter={formatter}
  82           placeholder={placeholder}
  83           hourOptions={hourOptions}
  84           minuteOptions={minuteOptions}
  85           secondOptions={secondOptions}
  86           onChange={this.onChange}
  87           onClear={this.onClear}
  88           allowEmpty={allowEmpty}
  89         />
  90         <Combobox
  91           prefixCls={prefixCls}
  92           value={value}
  93           gregorianCalendarLocale={gregorianCalendarLocale}
  94           formatter={formatter}
  95           onChange={this.onChange}
  96           showHour={showHour}
  97           showSecond={showSecond}
  98           hourOptions={hourOptions}
  99           minuteOptions={minuteOptions}
 100           secondOptions={secondOptions}
 101         />
 102       </div>
 103     );
 104   },
 105 });
 106
 107 export default Panel;