X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FCombobox.jsx;h=1eed4d295e90efabb1400cb869ec19aa8db4f87f;hb=1630cc0d1942d079a80705cd000a48df9a58b355;hp=d2c934c5388d30168db3e882c9e8f35957cb7bc5;hpb=dd2f6abda00cea99ec0a24e3f162fabeba7ac176;p=github%2Ffretlink%2Ftime-picker.git diff --git a/src/Combobox.jsx b/src/Combobox.jsx index d2c934c..1eed4d2 100644 --- a/src/Combobox.jsx +++ b/src/Combobox.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import Select from './Select'; const formatOption = (option, disabledOptions) => { @@ -18,8 +19,8 @@ const formatOption = (option, disabledOptions) => { }; }; -const Combobox = React.createClass({ - propTypes: { +class Combobox extends Component { + static propTypes = { format: PropTypes.string, defaultOpenValue: PropTypes.object, prefixCls: PropTypes.string, @@ -36,9 +37,9 @@ const Combobox = React.createClass({ disabledSeconds: PropTypes.func, onCurrentSelectPanelChange: PropTypes.func, use12Hours: PropTypes.bool, - }, + }; - onItemChange(type, itemValue) { + onItemChange = (type, itemValue) => { const { onChange, defaultOpenValue, use12Hours } = this.props; const value = (this.props.value || defaultOpenValue).clone(); @@ -55,16 +56,14 @@ const Combobox = React.createClass({ } else if (type === 'minute') { value.minute(+itemValue); } else if (type === 'ampm') { + const ampm = itemValue.toUpperCase(); if (use12Hours) { - if (itemValue === 'PM' && value.hour() <= 12) { - value.hour(value.hour() + 12); + if (ampm === 'PM' && value.hour() < 12) { + value.hour((value.hour() % 12) + 12); } - if (itemValue === 'AM') { - if (!value.hour()) { - value.hour(12); - } else - if (value.hour() > 12) { + if (ampm === 'AM') { + if (value.hour() >= 12) { value.hour(value.hour() - 12); } } @@ -73,11 +72,11 @@ const Combobox = React.createClass({ value.second(+itemValue); } onChange(value); - }, + } - onEnterSelectPanel(range) { + onEnterSelectPanel = (range) => { this.props.onCurrentSelectPanelChange(range); - }, + } getHourSelect(hour) { const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props; @@ -105,7 +104,7 @@ const Combobox = React.createClass({ onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} /> ); - }, + } getMinuteSelect(minute) { const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props; @@ -125,7 +124,7 @@ const Combobox = React.createClass({ onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} /> ); - }, + } getSecondSelect(second) { const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props; @@ -145,14 +144,18 @@ const Combobox = React.createClass({ onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')} /> ); - }, + } getAMPMSelect() { - const { prefixCls, use12Hours } = this.props; + const { prefixCls, use12Hours, format } = this.props; if (!use12Hours) { return null; } - const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }]; + + const AMPMOptions = ['am', 'pm'] // If format has A char, then we should uppercase AM/PM + .map(c => format.match(/\sA/) ? c.toUpperCase() : c) + .map(c => ({ value: c })); + const selected = this.isAM() ? 0 : 1; return ( @@ -165,12 +168,12 @@ const Combobox = React.createClass({ onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')} /> ); - }, + } isAM() { - const { value } = this.props; + const value = (this.props.value || this.props.defaultOpenValue); return value.hour() >= 0 && value.hour() < 12; - }, + } render() { const { prefixCls, defaultOpenValue } = this.props; @@ -183,7 +186,7 @@ const Combobox = React.createClass({ {this.getAMPMSelect(value.hour())} ); - }, -}); + } +} export default Combobox;