X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FCombobox.jsx;h=18fd54c317c1fe64384dfe5406e9063c35b6d297;hb=f30361fe767d300312c3d1467a60462d9f7da059;hp=339764cba1e7530927937e6c8945f1ac3d5c3d7d;hpb=dd275f7df354e218d170ddbcc1eadff1427db76b;p=github%2Ffretlink%2Ftime-picker.git

diff --git a/src/Combobox.jsx b/src/Combobox.jsx
index 339764c..18fd54c 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,18 +37,18 @@ 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();
 
     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);
@@ -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,34 +72,30 @@ 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;
     if (!showHour) {
       return null;
     }
-    const disabledOptions = disabledHours();
+    let disabledOptions = disabledHours();
+    let hourOptionsAdj;
     let hourAdj;
     if (use12Hours) {
-      if (hour > 12) {
-        hourAdj = hour - 12;
-      } else {
-        hourAdj = hour || 12;
-      }
-    } else {
-      hourAdj = hour;
-    }
+      hourOptionsAdj = [12].concat(hourOptions.filter(h => h < 12 && h > 0));
+      hourAdj = (hour % 12) || 12;
 
-    let hourOptionsAdj;
-    if (use12Hours) {
-      hourOptionsAdj = hourOptions.filter(h => h <= 12 && h > 0);
+      if (!this.isAM() && Array.isArray(disabledOptions)) {
+        disabledOptions = disabledOptions.map(h => h - 12);
+      }
     } else {
       hourOptionsAdj = hourOptions;
+      hourAdj = hour;
     }
 
     return (
@@ -113,7 +108,7 @@ const Combobox = React.createClass({
         onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')}
       />
     );
-  },
+  }
 
   getMinuteSelect(minute) {
     const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
@@ -133,7 +128,7 @@ const Combobox = React.createClass({
         onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')}
       />
     );
-  },
+  }
 
   getSecondSelect(second) {
     const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props;
@@ -153,16 +148,19 @@ const Combobox = React.createClass({
         onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')}
       />
     );
-  },
+  }
 
   getAMPMSelect() {
-    const { prefixCls, use12Hours, defaultOpenValue } = this.props;
+    const { prefixCls, use12Hours, format } = 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 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 (
       <Select
@@ -174,7 +172,12 @@ const Combobox = React.createClass({
         onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')}
       />
     );
-  },
+  }
+
+  isAM() {
+    const value = (this.props.value || this.props.defaultOpenValue);
+    return value.hour() >= 0 && value.hour() < 12;
+  }
 
   render() {
     const { prefixCls, defaultOpenValue } = this.props;
@@ -187,7 +190,7 @@ const Combobox = React.createClass({
         {this.getAMPMSelect(value.hour())}
       </div>
     );
-  },
-});
+  }
+}
 
 export default Combobox;