add header and select test case

[github/fretlink/time-picker.git] / src / module / Panel.jsx

diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx
index 4220da86f72a232749f9e9eb56f2dc430748f9dd..2c2f5544333c606631cb723e9b9596f3a1954fa7 100644 (file)
--- a/src/module/Panel.jsx
+++ b/src/module/Panel.jsx
@@ -1,8 +1,4 @@
 import React, {PropTypes} from 'react';
-import classnames from 'classnames';
-import GregorianCalendar from 'gregorian-calendar';
-import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
-
 import CommonMixin from '../mixin/CommonMixin';
 import Header from './Header';
 import Combobox from './Combobox';
@@ -11,22 +7,29 @@ function noop() {
 }
 
 function generateOptions(length) {
-  return Array.apply(null, {length: length}).map((item, index) => {
-    return index;
-  });
+  const arr = [];
+  for (let i = 0; i < length; i++) {
+    arr.push(i);
+  }
+  return arr;
 }
 
 const Panel = React.createClass({
   propTypes: {
     prefixCls: PropTypes.string,
-    defaultValue: PropTypes.object,
+    value: PropTypes.object,
     locale: PropTypes.object,
     placeholder: PropTypes.string,
+    gregorianCalendarLocale: PropTypes.object,
     formatter: PropTypes.object,
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
     secondOptions: PropTypes.array,
     onChange: PropTypes.func,
+    onEsc: PropTypes.func,
+    allowEmpty: PropTypes.bool,
+    showHour: PropTypes.bool,
+    showSecond: PropTypes.bool,
     onClear: PropTypes.func,
   },
 
@@ -43,23 +46,17 @@ const Panel = React.createClass({
   },
 
   getInitialState() {
-    let defaultValue = this.props.defaultValue;
-    if (!defaultValue) {
-      defaultValue = new GregorianCalendar(zhCn);
-      defaultValue.setTime(Date.now());
-    }
     return {
-      value: defaultValue,
+      value: this.props.value,
     };
   },
 
-  componentWillMount() {
-    const formatter = this.props.formatter;
-    const pattern = formatter.originalPattern;
-    if (pattern === 'HH:mm') {
-      this.showSecond = false;
-    } else if (pattern === 'mm:ss') {
-      this.showHour = false;
+  componentWillReceiveProps(nextProps) {
+    const value = nextProps.value;
+    if (value) {
+      this.setState({
+        value,
+      });
     }
   },
 
@@ -72,51 +69,34 @@ const Panel = React.createClass({
     this.props.onClear();
   },
 
-  getPlaceholder(placeholder) {
-    if (placeholder) {
-      return placeholder;
-    }
-
-    const { locale } = this.props;
-    if (!this.showHour) {
-      return locale.placeholdermmss;
-    } else if (!this.showSecond) {
-      return locale.placeholderHHmm;
-    }
-    return locale.placeholderHHmmss;
-  },
-
-  showHour: true,
-  showSecond: true,
-
   render() {
-    const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
-    const value = this.state.value || defaultValue;
-    const cls = classnames({ 'narrow': !this.showHour || !this.showSecond });
-
+    const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
+    const value = this.state.value;
     return (
-      <div className={`${prefixCls}-panel ${cls}`}>
+      <div className={`${prefixCls}-inner`}>
         <Header
           prefixCls={prefixCls}
-          gregorianTimePickerLocale={value.locale}
+          gregorianCalendarLocale={gregorianCalendarLocale}
           locale={locale}
           value={value}
-          formatter={this.getFormatter()}
-          placeholder={this.getPlaceholder(placeholder)}
+          onEsc={this.props.onEsc}
+          formatter={formatter}
+          placeholder={placeholder}
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}
           onChange={this.onChange}
           onClear={this.onClear}
-          showClear
+          allowEmpty={allowEmpty}
         />
         <Combobox
           prefixCls={prefixCls}
           value={value}
-          formatter={this.getFormatter()}
+          gregorianCalendarLocale={gregorianCalendarLocale}
+          formatter={formatter}
           onChange={this.onChange}
-          showHour={this.showHour}
-          showSecond={this.showSecond}
+          showHour={showHour}
+          showSecond={showSecond}
           hourOptions={hourOptions}
           minuteOptions={minuteOptions}
           secondOptions={secondOptions}