src/module/Panel.jsx

   1 import React, {PropTypes} from 'react';
   2 import classnames from 'classnames';
   3 import GregorianCalendar from 'gregorian-calendar';
   4 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
   5
   6 import CommonMixin from '../mixin/CommonMixin';
   7 import Header from './Header';
   8 import Combobox from './Combobox';
   9
  10 function noop() {
  11 }
  12
  13 function generateOptions(length) {
  14   return Array.apply(null, {length: length}).map((item, index) => {
  15     return index;
  16   });
  17 }
  18
  19 const Panel = React.createClass({
  20   propTypes: {
  21     prefixCls: PropTypes.string,
  22     defaultValue: PropTypes.object,
  23     locale: PropTypes.object,
  24     placeholder: PropTypes.string,
  25     formatter: PropTypes.object,
  26     hourOptions: PropTypes.array,
  27     minuteOptions: PropTypes.array,
  28     secondOptions: PropTypes.array,
  29     onChange: PropTypes.func,
  30     onClear: PropTypes.func,
  31   },
  32
  33   mixins: [CommonMixin],
  34
  35   getDefaultProps() {
  36     return {
  37       hourOptions: generateOptions(24),
  38       minuteOptions: generateOptions(60),
  39       secondOptions: generateOptions(60),
  40       onChange: noop,
  41       onClear: noop,
  42     };
  43   },
  44
  45   getInitialState() {
  46     let defaultValue = this.props.defaultValue;
  47     if (!defaultValue) {
  48       defaultValue = new GregorianCalendar(zhCn);
  49       defaultValue.setTime(Date.now());
  50     }
  51     return {
  52       value: defaultValue,
  53     };
  54   },
  55
  56   componentWillMount() {
  57     const formatter = this.props.formatter;
  58     const pattern = formatter.originalPattern;
  59     if (pattern === 'HH:mm') {
  60       this.showSecond = false;
  61     } else if (pattern === 'mm:ss') {
  62       this.showHour = false;
  63     }
  64   },
  65
  66   onChange(newValue) {
  67     this.setState({ value: newValue });
  68     this.props.onChange(newValue);
  69   },
  70
  71   onClear() {
  72     this.props.onClear();
  73   },
  74
  75   showHour: true,
  76   showSecond: true,
  77
  78   render() {
  79     const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
  80     const value = this.state.value || defaultValue;
  81     const cls = classnames({ 'narrow': !this.showHour || !this.showSecond });
  82
  83     return (
  84       <div className={`${prefixCls}-panel ${cls}`}>
  85         <Header
  86           prefixCls={prefixCls}
  87           gregorianTimePickerLocale={value.locale}
  88           locale={locale}
  89           value={value}
  90           formatter={this.getFormatter()}
  91           placeholder={placeholder}
  92           hourOptions={hourOptions}
  93           minuteOptions={minuteOptions}
  94           secondOptions={secondOptions}
  95           onChange={this.onChange}
  96           onClear={this.onClear}
  97           showClear
  98         />
  99         <Combobox
 100           prefixCls={prefixCls}
 101           value={value}
 102           formatter={this.getFormatter()}
 103           onChange={this.onChange}
 104           showHour={this.showHour}
 105           showSecond={this.showSecond}
 106           hourOptions={hourOptions}
 107           minuteOptions={minuteOptions}
 108           secondOptions={secondOptions}
 109         />
 110       </div>
 111     );
 112   },
 113 });
 114
 115 export default Panel;