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     value: 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 value = this.props.value;
  47     if (!value) {
  48       value = new GregorianCalendar(zhCn);
  49       value.setTime(Date.now());
  50     }
  51     return {
  52       value,
  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   componentWillReceiveProps(nextProps) {
  67     const value = nextProps.value;
  68     if (value) {
  69       this.setState({
  70         value,
  71       });
  72     }
  73   },
  74
  75   onChange(newValue) {
  76     this.setState({ value: newValue });
  77     this.props.onChange(newValue);
  78   },
  79
  80   onClear() {
  81     this.props.onClear();
  82   },
  83
  84   showHour: true,
  85   showSecond: true,
  86
  87   render() {
  88     const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
  89     const value = this.state.value;
  90     const cls = classnames({ 'narrow': !this.showHour || !this.showSecond });
  91
  92     return (
  93       <div className={`${prefixCls}-panel ${cls}`}>
  94         <Header
  95           prefixCls={prefixCls}
  96           gregorianTimePickerLocale={value.locale}
  97           locale={locale}
  98           value={value}
  99           formatter={this.getFormatter()}
 100           placeholder={placeholder}
 101           hourOptions={hourOptions}
 102           minuteOptions={minuteOptions}
 103           secondOptions={secondOptions}
 104           onChange={this.onChange}
 105           onClear={this.onClear}
 106           showClear
 107         />
 108         <Combobox
 109           prefixCls={prefixCls}
 110           value={value}
 111           formatter={this.getFormatter()}
 112           onChange={this.onChange}
 113           showHour={this.showHour}
 114           showSecond={this.showSecond}
 115           hourOptions={hourOptions}
 116           minuteOptions={minuteOptions}
 117           secondOptions={secondOptions}
 118         />
 119       </div>
 120     );
 121   },
 122 });
 123
 124 export default Panel;