3 files changed, 322 insertions, 0 deletions

diff --git a/src/module/Combobox.jsx b/src/module/Combobox.jsx
new file mode 100644
index 0000000..e6fe5ed
--- /dev/null
+++ b/src/module/Combobox.jsx
@@ -0,0 +1,95 @@
+import React, {PropTypes} from 'react';
+import Select from './Select';
+
+const formatOption = (option) => {
+  if (option < 10) {
+    return `0${option}`;
+  }
+  return `${option}`;
+};
+
+const Combobox = React.createClass({
+  propTypes: {
+    formatter: PropTypes.object,
+    prefixCls: PropTypes.string,
+    value: PropTypes.object,
+    onChange: PropTypes.func,
+    showHour: PropTypes.bool,
+    showSecond: PropTypes.bool,
+    hourOptions: PropTypes.array,
+    minuteOptions: PropTypes.array,
+    secondOptions: PropTypes.array,
+  },
+
+  onItemChange(type, itemValue) {
+    const { value, onChange } = this.props;
+    let index = 4;
+    if (type === 'minute') {
+      index = 5;
+    } else if (type === 'second') {
+      index = 6;
+    }
+    value.fields[index] = itemValue;
+    onChange(value);
+  },
+
+  getHourSelect(hour) {
+    const { prefixCls, hourOptions, showHour } = this.props;
+    if (!showHour) {
+      return null;
+    }
+    return (
+      <Select
+        prefixCls={prefixCls}
+        options={hourOptions.map(option => formatOption(option))}
+        selectedIndex={hourOptions.indexOf(hour)}
+        type="hour"
+        onSelect={this.onItemChange}
+      />
+    );
+  },
+
+  getMinuteSelect(minute) {
+    const { prefixCls, minuteOptions } = this.props;
+    return (
+      <Select
+        prefixCls={prefixCls}
+        options={minuteOptions.map(option => formatOption(option))}
+        selectedIndex={minuteOptions.indexOf(minute)}
+        type="minute"
+        onSelect={this.onItemChange}
+      />
+    );
+  },
+
+  getSectionSelect(second) {
+    const { prefixCls, secondOptions, showSecond } = this.props;
+    if (!showSecond) {
+      return null;
+    }
+    return (
+      <Select
+        prefixCls={prefixCls}
+        options={secondOptions.map(option => formatOption(option))}
+        selectedIndex={secondOptions.indexOf(second)}
+        type="second"
+        onSelect={this.onItemChange}
+      />
+    );
+  },
+
+  render() {
+    const { prefixCls, value } = this.props;
+    const timeFields = value.fields;
+
+    return (
+      <div className={`${prefixCls}-combobox`}>
+        {this.getHourSelect(timeFields[4])}
+        {this.getMinuteSelect(timeFields[5])}
+        {this.getSectionSelect(timeFields[6])}
+      </div>
+    );
+  },
+});
+
+export default Combobox;
diff --git a/src/module/Header.jsx b/src/module/Header.jsx
new file mode 100644
index 0000000..f7e443f
--- /dev/null
+++ b/src/module/Header.jsx
@@ -0,0 +1,139 @@
+import React, {PropTypes} from 'react';
+
+const Header = React.createClass({
+  propTypes: {
+    formatter: PropTypes.object,
+    prefixCls: PropTypes.string,
+    gregorianTimepickerLocale: PropTypes.object,
+    locale: PropTypes.object,
+    disabledDate: PropTypes.func,
+    placeholder: PropTypes.string,
+    value: PropTypes.object,
+    hourOptions: PropTypes.array,
+    minuteOptions: PropTypes.array,
+    secondOptions: PropTypes.array,
+    onChange: PropTypes.func,
+    onClear: PropTypes.func,
+    showClear: PropTypes.bool,
+  },
+
+  getInitialState() {
+    const value = this.props.value;
+    return {
+      str: value && this.props.formatter.format(value) || '',
+      invalid: false,
+    };
+  },
+
+  componentWillReceiveProps(nextProps) {
+    const value = this.formatValue(nextProps.value);
+    this.setState({
+      str: value && nextProps.formatter.format(value) || '',
+      invalid: false,
+    });
+  },
+
+  onInputChange(event) {
+    const str = event.target.value;
+    this.setState({
+      str,
+    });
+    let value = null;
+    const {formatter, gregorianTimepickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props;
+
+    if (str) {
+      const originalValue = this.props.value;
+      try {
+        value = formatter.parse(str, {
+          locale: gregorianTimepickerLocale,
+          obeyCount: true,
+        });
+        value = this.formatValue(value);
+      } catch (ex) {
+        this.setState({
+          invalid: true,
+        });
+        return;
+      }
+
+      if (value) {
+        if (
+          hourOptions.indexOf(value.fields[4]) < 0 ||
+          minuteOptions.indexOf(value.fields[5]) < 0 ||
+          secondOptions.indexOf(value.fields[6]) < 0
+        ) {
+          this.setState({
+            invalid: true,
+          });
+          return;
+        }
+
+        if (originalValue && value) {
+          if (
+            originalValue.fields[4] !== value.fields[4] ||
+            originalValue.fields[5] !== value.fields[5] ||
+            originalValue.fields[6] !== value.fields[6]
+          ) {
+            onChange(value);
+          }
+        } else if (originalValue !== value) {
+          onChange(value);
+        }
+      } else {
+        this.setState({
+          invalid: true,
+        });
+        return;
+      }
+    } else {
+      onChange(null);
+    }
+
+    this.setState({
+      invalid: false,
+    });
+  },
+
+  onClear() {
+    this.setState({str: ''});
+    this.props.onClear();
+  },
+
+  getClearButton() {
+    const { locale, prefixCls, showClear } = this.props;
+    if (!showClear) {
+      return null;
+    }
+    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} />;
+  },
+
+  formatValue(value) {
+    const newValue = this.props.value.clone();
+    if (!value) {
+      return newValue;
+    }
+    newValue.fields[4] = value.fields[4];
+    newValue.fields[5] = value.fields[5];
+    newValue.fields[6] = value.fields[6];
+    return newValue;
+  },
+
+  render() {
+    const { prefixCls } = this.props;
+    return (
+      <div className={`${prefixCls}-input-wrap`}>
+        {this.getInput()}
+        {this.getClearButton()}
+      </div>
+    );
+  },
+});
+
+export default Header;
diff --git a/src/module/Select.jsx b/src/module/Select.jsx
new file mode 100644
index 0000000..2b69623
--- /dev/null
+++ b/src/module/Select.jsx
@@ -0,0 +1,88 @@
+import React, {PropTypes} from 'react';
+import ReactDom from 'react-dom';
+import classnames from 'classnames';
+
+const scrollTo = (element, to, duration) => {
+  // jump to target if duration zero
+  if (duration <= 0) {
+    element.scrollTop = to;
+    return;
+  }
+  const difference = to - element.scrollTop;
+  const perTick = difference / duration * 10;
+
+  setTimeout(() => {
+    element.scrollTop = element.scrollTop + perTick;
+    if (element.scrollTop === to) return;
+    scrollTo(element, to, duration - 10);
+  }, 10);
+};
+
+const Select = React.createClass({
+  propTypes: {
+    prefixCls: PropTypes.string,
+    options: PropTypes.array,
+    selectedIndex: PropTypes.number,
+    type: PropTypes.string,
+    onSelect: PropTypes.func,
+  },
+
+  componentDidMount() {
+    // jump to selected option
+    this.scrollToSelected(0);
+  },
+
+  componentDidUpdate() {
+    // smooth scroll to selected option
+    this.scrollToSelected(200);
+  },
+
+  onSelect(event) {
+    // do nothing when select selected option
+    if (event.target.getAttribute('class') === 'selected') {
+      return;
+    }
+    // change combobox selection
+    const { onSelect, type } = this.props;
+    const value = parseInt(event.target.innerHTML, 10);
+    onSelect(type, value);
+  },
+
+  getOptions() {
+    const { options, selectedIndex } = 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>;
+    });
+  },
+
+  scrollToSelected(duration) {
+    // move to selected item
+    const select = ReactDom.findDOMNode(this);
+    const list = ReactDom.findDOMNode(this.refs.list);
+    let index = this.props.selectedIndex - 2;
+    if (index < 0) {
+      index = 0;
+    }
+    const topOption = list.children[index];
+    const to = topOption.offsetTop - select.offsetTop;
+    scrollTo(select, to, duration);
+  },
+
+  render() {
+    if (this.props.options.length === 0) {
+      return null;
+    }
+
+    const { prefixCls } = this.props;
+
+    return (
+      <div className={`${prefixCls}-select`}>
+        <ul ref="list">{this.getOptions()}</ul>
+      </div>
+    );
+  },
+});
+
+export default Select;