aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/module/Combobox.jsx
blob: a017ec91ce4c73ad278a7267c2c04e840557119d (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, {PropTypes} from 'react';
import Select from './Select';
import GregorianCalendar from 'gregorian-calendar';

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,
    gregorianCalendarLocale: PropTypes.object,
    showSecond: PropTypes.bool,
    hourOptions: PropTypes.array,
    minuteOptions: PropTypes.array,
    secondOptions: PropTypes.array,
    onCurrentSelectPanelChange: PropTypes.func,
  },

  onItemChange(type, itemValue) {
    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') {
      value.setMinutes(itemValue);
    } else {
      value.setSeconds(itemValue);
    }
    onChange(value);
  },

  onEnterSelectPanel(range) {
    this.props.onCurrentSelectPanelChange(range);
  },

  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}
        onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
      />
    );
  },

  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}
        onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
      />
    );
  },

  getSecondSelect(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}
        onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
      />
    );
  },

  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())}
        {this.getMinuteSelect(value.getMinutes())}
        {this.getSecondSelect(value.getSeconds())}
      </div>
    );
  },
});

export default Combobox;