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     };
  52   },
  53
  54   componentWillReceiveProps(nextProps) {
  55     const value = nextProps.value;
  56     if (value) {
  57       this.setState({
  58         value,
  59       });
  60     }
  61   },
  62
  63   onChange(newValue) {
  64     this.setState({ value: newValue });
  65     this.props.onChange(newValue);
  66   },
  67
  68   onClear() {
  69     this.props.onClear();
  70   },
  71
  72   render() {
  73     const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
  74     const value = this.state.value;
  75     return (
  76       <div className={`${prefixCls}-inner`}>
  77         <Header
  78           prefixCls={prefixCls}
  79           gregorianCalendarLocale={gregorianCalendarLocale}
  80           locale={locale}
  81           value={value}
  82           onEsc={this.props.onEsc}
  83           formatter={formatter}
  84           placeholder={placeholder}
  85           hourOptions={hourOptions}
  86           minuteOptions={minuteOptions}
  87           secondOptions={secondOptions}
  88           onChange={this.onChange}
  89           onClear={this.onClear}
  90           allowEmpty={allowEmpty}
  91         />
  92         <Combobox
  93           prefixCls={prefixCls}
  94           value={value}
  95           gregorianCalendarLocale={gregorianCalendarLocale}
  96           formatter={formatter}
  97           onChange={this.onChange}
  98           showHour={showHour}
  99           showSecond={showSecond}
 100           hourOptions={hourOptions}
 101           minuteOptions={minuteOptions}
 102           secondOptions={secondOptions}
 103         />
 104       </div>
 105     );
 106   },
 107 });
 108
 109 export default Panel;