4 files changed, 80 insertions, 56 deletions

diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx
index afce675..3dfd321 100644
--- a/src/module/Combobox.jsx
+++ b/src/module/Combobox.jsx
@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react';
 import Select from './Select';
+import GregorianCalendar from 'gregorian-calendar';
 
 const formatOption = (option) => {
   if (option < 10) {
@@ -15,6 +16,7 @@ const Combobox = React.createClass({
     value: PropTypes.object,
     onChange: PropTypes.func,
     showHour: PropTypes.bool,
+    gregorianCalendarLocale: PropTypes.object,
     showSecond: PropTypes.bool,
     hourOptions: PropTypes.array,
     minuteOptions: PropTypes.array,
@@ -22,7 +24,13 @@ const Combobox = React.createClass({
   },
 
   onItemChange(type, itemValue) {
-    const { value, onChange } = this.props;
+    const { onChange } = this.props;
+    let value = this.props.value;
+    if (value) {
+      value = value.clone();
+    } else {
+      value = this.getNow().clone();
+    }
     if (type === 'hour') {
       value.setHourOfDay(itemValue);
     } else if (type === 'minute') {
@@ -78,9 +86,19 @@ const Combobox = React.createClass({
     );
   },
 
-  render() {
-    const { prefixCls, value } = this.props;
+  getNow() {
+    if (this.showNow) {
+      return this.showNow;
+    }
+    const value = new GregorianCalendar(this.props.gregorianCalendarLocale);
+    value.setTime(Date.now());
+    this.showNow = value;
+    return value;
+  },
 
+  render() {
+    const { prefixCls } = this.props;
+    const value = this.props.value || this.getNow();
     return (
       <div className={`${prefixCls}-combobox`}>
         {this.getHourSelect(value.getHourOfDay())}
diff --git a/src/module/Header.jsx b/src/module/Header.jsx
index b65fd25..962328c 100644
--- a/src/module/Header.jsx
+++ b/src/module/Header.jsx
@@ -4,7 +4,7 @@ const Header = React.createClass({
   propTypes: {
     formatter: PropTypes.object,
     prefixCls: PropTypes.string,
-    gregorianTimePickerLocale: PropTypes.object,
+    gregorianCalendarLocale: PropTypes.object,
     locale: PropTypes.object,
     disabledDate: PropTypes.func,
     placeholder: PropTypes.string,
@@ -14,7 +14,8 @@ const Header = React.createClass({
     secondOptions: PropTypes.array,
     onChange: PropTypes.func,
     onClear: PropTypes.func,
-    showClear: PropTypes.bool,
+    onEsc: PropTypes.func,
+    allowEmpty: PropTypes.bool,
   },
 
   getInitialState() {
@@ -25,6 +26,12 @@ const Header = React.createClass({
     };
   },
 
+  componentDidMount() {
+    this.timer = setTimeout(() => {
+      this.refs.input.focus();
+    }, 0);
+  },
+
   componentWillReceiveProps(nextProps) {
     const value = nextProps.value;
     this.setState({
@@ -33,19 +40,23 @@ const Header = React.createClass({
     });
   },
 
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  },
+
   onInputChange(event) {
     const str = event.target.value;
     this.setState({
       str,
     });
     let value = null;
-    const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
+    const {formatter, gregorianCalendarLocale, hourOptions, minuteOptions, secondOptions, onChange, allowEmpty} = this.props;
 
     if (str) {
       const originalValue = this.props.value;
       try {
         value = formatter.parse(str, {
-          locale: gregorianTimePickerLocale,
+          locale: gregorianCalendarLocale,
           obeyCount: true,
         });
       } catch (ex) {
@@ -84,8 +95,13 @@ const Header = React.createClass({
         });
         return;
       }
-    } else {
+    } else if (allowEmpty) {
       onChange(null);
+    } else {
+      this.setState({
+        invalid: true,
+      });
+      return;
     }
 
     this.setState({
@@ -93,24 +109,34 @@ const Header = React.createClass({
     });
   },
 
+  onKeyDown(e) {
+    if (e.keyCode === 27) {
+      this.props.onEsc();
+    }
+  },
+
   onClear() {
     this.setState({str: ''});
     this.props.onClear();
   },
 
   getClearButton() {
-    const { locale, prefixCls, showClear } = this.props;
-    if (!showClear) {
+    const { locale, prefixCls, allowEmpty } = this.props;
+    if (!allowEmpty) {
       return null;
     }
-    return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear} />;
+    return <a className={`${prefixCls}-clear-btn`} role="button" title={locale.clear} onMouseDown={this.onClear}/>;
   },
 
   getInput() {
     const { prefixCls, placeholder } = this.props;
     const { invalid, str } = this.state;
     const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
-    return <input className={`${prefixCls}-input  ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />;
+    return (<input className={`${prefixCls}-input  ${invalidClass}`}
+                   ref="input"
+                   onKeyDown={this.onKeyDown}
+                   value={str}
+                   placeholder={placeholder} onChange={this.onInputChange}/>);
   },
 
   render() {
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx
index e372774..b91c6fe 100644
--- 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';
@@ -22,11 +18,16 @@ const Panel = React.createClass({
     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,26 +44,11 @@ const Panel = React.createClass({
   },
 
   getInitialState() {
-    let value = this.props.value;
-    if (!value) {
-      value = new GregorianCalendar(zhCn);
-      value.setTime(Date.now());
-    }
     return {
-      value,
+      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) {
@@ -81,37 +67,34 @@ const Panel = React.createClass({
     this.props.onClear();
   },
 
-  showHour: true,
-  showSecond: true,
-
   render() {
-    const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
+    const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props;
     const value = this.state.value;
-    const cls = classnames({ 'narrow': !this.showHour || !this.showSecond });
-
     return (
-      <div className={`${prefixCls}-panel-inner ${cls}`}>
+      <div className={`${prefixCls}-inner`}>
         <Header
           prefixCls={prefixCls}
-          gregorianTimePickerLocale={value.locale}
+          gregorianCalendarLocale={gregorianCalendarLocale}
           locale={locale}
           value={value}
-          formatter={this.getFormatter()}
+          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}
diff --git a/src/module/Select.jsx b/src/module/Select.jsx
index 2b69623..be4c025 100644
--- a/src/module/Select.jsx
+++ b/src/module/Select.jsx
@@ -22,6 +22,7 @@ const Select = React.createClass({
   propTypes: {
     prefixCls: PropTypes.string,
     options: PropTypes.array,
+    gregorianCalendarLocale: PropTypes.object,
     selectedIndex: PropTypes.number,
     type: PropTypes.string,
     onSelect: PropTypes.func,
@@ -37,23 +38,19 @@ const Select = React.createClass({
     this.scrollToSelected(200);
   },
 
-  onSelect(event) {
-    // do nothing when select selected option
-    if (event.target.getAttribute('class') === 'selected') {
-      return;
-    }
-    // change combobox selection
+  onSelect(value) {
     const { onSelect, type } = this.props;
-    const value = parseInt(event.target.innerHTML, 10);
     onSelect(type, value);
   },
 
   getOptions() {
-    const { options, selectedIndex } = this.props;
+    const { options, selectedIndex, prefixCls } = this.props;
     return options.map((item, index) => {
-      const cls = classnames({ selected: selectedIndex === index});
-      const ref = selectedIndex === index ? 'selected' : null;
-      return <li ref={ref} className={cls} key={index} onClick={this.onSelect}>{item}</li>;
+      const selected = selectedIndex === index;
+      const cls = classnames({
+        [`${prefixCls}-select-option-selected`]: selected,
+      });
+      return <li className={cls} key={index} onClick={this.onSelect.bind(this, +item)}>{item}</li>;
     });
   },