From 95699887ac75de5dff6bd25278289e31e4745482 Mon Sep 17 00:00:00 2001 From: Antony Shaleynikov Date: Wed, 1 Mar 2017 23:58:06 +0300 Subject: Added 12hours display support --- src/Combobox.jsx | 78 +++++++++++++++++++++++++++++++++++++++++++++++++----- src/Panel.jsx | 5 +++- src/Select.jsx | 2 +- src/TimePicker.jsx | 5 +++- 4 files changed, 80 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/Combobox.jsx b/src/Combobox.jsx index 013617c..e31b7fd 100644 --- a/src/Combobox.jsx +++ b/src/Combobox.jsx @@ -35,17 +35,42 @@ const Combobox = React.createClass({ disabledMinutes: PropTypes.func, disabledSeconds: PropTypes.func, onCurrentSelectPanelChange: PropTypes.func, + show12Hours: PropTypes.bool, }, onItemChange(type, itemValue) { - const { onChange, defaultOpenValue } = this.props; + const { onChange, defaultOpenValue, show12Hours } = this.props; const value = (this.props.value || defaultOpenValue).clone(); + if (type === 'hour') { - value.hour(itemValue); + if (show12Hours) { + if (value.hour() > 12 || !value.hour()) { + value.hour(+itemValue + 12); + } else { + value.hour(+itemValue); + } + } else { + value.hour(+itemValue); + } } else if (type === 'minute') { - value.minute(itemValue); + value.minute(+itemValue); + } else if (type === 'ampm') { + if (show12Hours) { + if (itemValue === 'PM' && value.hour() <= 12) { + value.hour(value.hour() + 12); + } + + if (itemValue === 'AM') { + if (!value.hour()) { + value.hour(12); + } else + if (value.hour() > 12) { + value.hour(value.hour() - 12); + } + } + } } else { - value.second(itemValue); + value.second(+itemValue); } onChange(value); }, @@ -55,17 +80,34 @@ const Combobox = React.createClass({ }, getHourSelect(hour) { - const { prefixCls, hourOptions, disabledHours, showHour } = this.props; + const { prefixCls, hourOptions, disabledHours, showHour, show12Hours } = this.props; if (!showHour) { return null; } const disabledOptions = disabledHours(); + let hourAdj; + if (show12Hours) { + if (hour > 12) { + hourAdj = hour - 12; + } else { + hourAdj = hour || 12; + } + } else { + hourAdj = hour; + } + + let hourOptionsAdj; + if (show12Hours) { + hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0); + } else { + hourOptionsAdj = hourOptions; + } return ( + ); + }, + render() { const { prefixCls, defaultOpenValue } = this.props; const value = this.props.value || defaultOpenValue; @@ -121,6 +184,7 @@ const Combobox = React.createClass({ {this.getHourSelect(value.hour())} {this.getMinuteSelect(value.minute())} {this.getSecondSelect(value.second())} + {this.getAMPMSelect(value.hour())} ); }, diff --git a/src/Panel.jsx b/src/Panel.jsx index fddea1c..d02bd01 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -37,6 +37,7 @@ const Panel = React.createClass({ showMinute: PropTypes.bool, showSecond: PropTypes.bool, onClear: PropTypes.func, + show12Hours: PropTypes.bool, addon: PropTypes.func, }, @@ -49,6 +50,7 @@ const Panel = React.createClass({ disabledMinutes: noop, disabledSeconds: noop, defaultOpenValue: moment(), + show12Hours: false, addon: noop, }; }, @@ -90,7 +92,7 @@ const Panel = React.createClass({ const { prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, - format, defaultOpenValue, clearText, onEsc, addon, + format, defaultOpenValue, clearText, onEsc, addon, show12Hours, } = this.props; const { value, currentSelectPanel, @@ -140,6 +142,7 @@ const Panel = React.createClass({ disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} + show12Hours={show12Hours} /> {addon(this)} diff --git a/src/Select.jsx b/src/Select.jsx index 238a776..5733b1a 100644 --- a/src/Select.jsx +++ b/src/Select.jsx @@ -58,7 +58,7 @@ const Select = React.createClass({ }); let onclick = null; if (!item.disabled) { - onclick = this.onSelect.bind(this, +item.value); + onclick = this.onSelect.bind(this, item.value); } return (
  • ); -- cgit v1.2.3 From dd275f7df354e218d170ddbcc1eadff1427db76b Mon Sep 17 00:00:00 2001 From: Antony Shaleynikov Date: Thu, 2 Mar 2017 11:02:45 +0300 Subject: show12Hours prop was renamed to use12Hours --- src/Combobox.jsx | 18 +++++++++--------- src/Panel.jsx | 8 ++++---- src/TimePicker.jsx | 8 ++++---- 3 files changed, 17 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/Combobox.jsx b/src/Combobox.jsx index e31b7fd..339764c 100644 --- a/src/Combobox.jsx +++ b/src/Combobox.jsx @@ -35,15 +35,15 @@ const Combobox = React.createClass({ disabledMinutes: PropTypes.func, disabledSeconds: PropTypes.func, onCurrentSelectPanelChange: PropTypes.func, - show12Hours: PropTypes.bool, + use12Hours: PropTypes.bool, }, onItemChange(type, itemValue) { - const { onChange, defaultOpenValue, show12Hours } = this.props; + const { onChange, defaultOpenValue, use12Hours } = this.props; const value = (this.props.value || defaultOpenValue).clone(); if (type === 'hour') { - if (show12Hours) { + if (use12Hours) { if (value.hour() > 12 || !value.hour()) { value.hour(+itemValue + 12); } else { @@ -55,7 +55,7 @@ const Combobox = React.createClass({ } else if (type === 'minute') { value.minute(+itemValue); } else if (type === 'ampm') { - if (show12Hours) { + if (use12Hours) { if (itemValue === 'PM' && value.hour() <= 12) { value.hour(value.hour() + 12); } @@ -80,13 +80,13 @@ const Combobox = React.createClass({ }, getHourSelect(hour) { - const { prefixCls, hourOptions, disabledHours, showHour, show12Hours } = this.props; + const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props; if (!showHour) { return null; } const disabledOptions = disabledHours(); let hourAdj; - if (show12Hours) { + if (use12Hours) { if (hour > 12) { hourAdj = hour - 12; } else { @@ -97,7 +97,7 @@ const Combobox = React.createClass({ } let hourOptionsAdj; - if (show12Hours) { + if (use12Hours) { hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0); } else { hourOptionsAdj = hourOptions; @@ -156,8 +156,8 @@ const Combobox = React.createClass({ }, getAMPMSelect() { - const { prefixCls, show12Hours, defaultOpenValue } = this.props; - if (!show12Hours) { + const { prefixCls, use12Hours, defaultOpenValue } = this.props; + if (!use12Hours) { return null; } const value = this.props.value || defaultOpenValue; diff --git a/src/Panel.jsx b/src/Panel.jsx index d02bd01..df128ff 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -37,7 +37,7 @@ const Panel = React.createClass({ showMinute: PropTypes.bool, showSecond: PropTypes.bool, onClear: PropTypes.func, - show12Hours: PropTypes.bool, + use12Hours: PropTypes.bool, addon: PropTypes.func, }, @@ -50,7 +50,7 @@ const Panel = React.createClass({ disabledMinutes: noop, disabledSeconds: noop, defaultOpenValue: moment(), - show12Hours: false, + use12Hours: false, addon: noop, }; }, @@ -92,7 +92,7 @@ const Panel = React.createClass({ const { prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, - format, defaultOpenValue, clearText, onEsc, addon, show12Hours, + format, defaultOpenValue, clearText, onEsc, addon, use12Hours, } = this.props; const { value, currentSelectPanel, @@ -142,7 +142,7 @@ const Panel = React.createClass({ disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} - show12Hours={show12Hours} + use12Hours={use12Hours} /> {addon(this)} diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index f73d2b1..6b76223 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -43,7 +43,7 @@ const Picker = React.createClass({ addon: PropTypes.func, name: PropTypes.string, autoComplete: PropTypes.string, - show12Hours: PropTypes.bool, + use12Hours: PropTypes.bool, }, getDefaultProps() { @@ -68,7 +68,7 @@ const Picker = React.createClass({ onOpen: noop, onClose: noop, addon: noop, - show12Hours: false, + use12Hours: false, }; }, @@ -144,7 +144,7 @@ const Picker = React.createClass({ prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, - addon, show12Hours, + addon, use12Hours, } = this.props; return ( ); -- cgit v1.2.3 From dd2f6abda00cea99ec0a24e3f162fabeba7ac176 Mon Sep 17 00:00:00 2001 From: Antony Shaleynikov Date: Thu, 2 Mar 2017 15:42:05 +0300 Subject: Updated 12 hours example, added default format for 12 hours mode, updated tests --- src/Combobox.jsx | 32 ++++++++++++++------------------ src/TimePicker.jsx | 13 ++++++++++++- 2 files changed, 26 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/Combobox.jsx b/src/Combobox.jsx index 339764c..d2c934c 100644 --- a/src/Combobox.jsx +++ b/src/Combobox.jsx @@ -44,10 +44,10 @@ const Combobox = React.createClass({ if (type === 'hour') { if (use12Hours) { - if (value.hour() > 12 || !value.hour()) { - value.hour(+itemValue + 12); + if (this.isAM()) { + value.hour(+itemValue % 12); } else { - value.hour(+itemValue); + value.hour((+itemValue % 12) + 12); } } else { value.hour(+itemValue); @@ -85,22 +85,14 @@ const Combobox = React.createClass({ return null; } const disabledOptions = disabledHours(); - let hourAdj; - if (use12Hours) { - if (hour > 12) { - hourAdj = hour - 12; - } else { - hourAdj = hour || 12; - } - } else { - hourAdj = hour; - } - let hourOptionsAdj; + let hourAdj; if (use12Hours) { - hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0); + hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0)); + hourAdj = (hour % 12) || 12; } else { hourOptionsAdj = hourOptions; + hourAdj = hour; } return ( @@ -156,13 +148,12 @@ const Combobox = React.createClass({ }, getAMPMSelect() { - const { prefixCls, use12Hours, defaultOpenValue } = this.props; + const { prefixCls, use12Hours } = this.props; if (!use12Hours) { return null; } - const value = this.props.value || defaultOpenValue; const AMPMOptions = [{ value: 'AM' }, { value: 'PM' }]; - const selected = (!value.hour() || value.hour() > 12) ? 1 : 0; + const selected = this.isAM() ? 0 : 1; return (