@deephaven/components 0.5.2-beta.0 → 0.6.1-demo.10

package/dist/CustomTimeSelect.js

@@ -1,29 +1,7 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { Component } from 'react';
@@ -31,8 +9,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { vsCheck, dhSort } from '@deephaven/icons';
 import { TimeUtils } from '@deephaven/utils';
 import classNames from 'classnames';
-import TimeInput from './TimeInput';
-import DropdownMenu from './menu-actions/DropdownMenu';
+import TimeInput from "./TimeInput.js";
+import DropdownMenu from "./menu-actions/DropdownMenu.js";
 import "./CustomTimeSelect.css";
 import "./context-actions/ContextActions.css";
 var CUSTOM_OPTION = -1;
@@ -43,584 +21,574 @@ var MENU_NAVIGATION_DIRECTION;
   MENU_NAVIGATION_DIRECTION["DOWN"] = "DOWN";
 })(MENU_NAVIGATION_DIRECTION || (MENU_NAVIGATION_DIRECTION = {}));
 
-var CustomTimeSelect = /*#__PURE__*/function (_Component) {
-  _inherits(CustomTimeSelect, _Component);
-
-  var _super = _createSuper(CustomTimeSelect);
-
-  function CustomTimeSelect(props) {
-    var _this;
-
-    _classCallCheck(this, CustomTimeSelect);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "csContainer", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "menuContainer", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "button", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "input", void 0);
-
-    var value = props.value,
-        valueToTime = props.valueToTime;
-    _this.toggleMenu = _this.toggleMenu.bind(_assertThisInitialized(_this));
-    _this.handleMenuKeyDown = _this.handleMenuKeyDown.bind(_assertThisInitialized(_this));
-    _this.closeMenu = _this.closeMenu.bind(_assertThisInitialized(_this));
-    _this.handleOptionClick = _this.handleOptionClick.bind(_assertThisInitialized(_this));
-    _this.handleOptionFocus = _this.handleOptionFocus.bind(_assertThisInitialized(_this));
-    _this.handleMenuOpened = _this.handleMenuOpened.bind(_assertThisInitialized(_this));
-    _this.handleMenuExited = _this.handleMenuExited.bind(_assertThisInitialized(_this));
-    _this.handleCustomInput = _this.handleCustomInput.bind(_assertThisInitialized(_this));
-    _this.csContainer = /*#__PURE__*/React.createRef();
-    _this.menuContainer = /*#__PURE__*/React.createRef();
-    _this.button = /*#__PURE__*/React.createRef();
-    _this.input = /*#__PURE__*/React.createRef();
-    _this.state = {
+class CustomTimeSelect extends Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "csContainer", void 0);
+
+    _defineProperty(this, "menuContainer", void 0);
+
+    _defineProperty(this, "button", void 0);
+
+    _defineProperty(this, "input", void 0);
+
+    var {
+      value,
+      valueToTime
+    } = props;
+    this.toggleMenu = this.toggleMenu.bind(this);
+    this.handleMenuKeyDown = this.handleMenuKeyDown.bind(this);
+    this.closeMenu = this.closeMenu.bind(this);
+    this.handleOptionClick = this.handleOptionClick.bind(this);
+    this.handleOptionFocus = this.handleOptionFocus.bind(this);
+    this.handleMenuOpened = this.handleMenuOpened.bind(this);
+    this.handleMenuExited = this.handleMenuExited.bind(this);
+    this.handleCustomInput = this.handleCustomInput.bind(this);
+    this.csContainer = /*#__PURE__*/React.createRef();
+    this.menuContainer = /*#__PURE__*/React.createRef();
+    this.button = /*#__PURE__*/React.createRef();
+    this.input = /*#__PURE__*/React.createRef();
+    this.state = {
       keyboardOptionIndex: 0,
       menuIsOpen: false,
       inputWidth: 100,
       customTime: valueToTime(value),
       inputFocused: false
     };
-    return _this;
   }
 
-  _createClass(CustomTimeSelect, [{
-    key: "getSelectedText",
-    value: function getSelectedText() {
-      var _this$props = this.props,
-          options = _this$props.options,
-          value = _this$props.value,
-          placeholder = _this$props.placeholder;
-      var customTime = this.state.customTime;
-
-      if (value === null) {
-        return placeholder;
-      }
-
-      for (var i = 0; i < options.length; i += 1) {
-        var option = options[i];
+  getSelectedText() {
+    var {
+      options,
+      value,
+      placeholder
+    } = this.props;
+    var {
+      customTime
+    } = this.state;
+
+    if (value === null) {
+      return placeholder;
+    }
 
-        if (option.value === value) {
-          return option.title;
-        }
-      }
+    for (var i = 0; i < options.length; i += 1) {
+      var option = options[i];
 
-      return TimeUtils.formatTime(customTime);
-    }
-  }, {
-    key: "setInputWidth",
-    value: function setInputWidth() {
-      if (this.csContainer.current) {
-        this.setState({
-          inputWidth: this.csContainer.current.getBoundingClientRect().width
-        });
+      if (option.value === value) {
+        return option.title;
       }
     }
-  }, {
-    key: "focus",
-    value: function focus() {
-      var _this$button$current;
 
-      (_this$button$current = this.button.current) === null || _this$button$current === void 0 ? void 0 : _this$button$current.focus();
-    }
-  }, {
-    key: "updateInputValue",
-    value: function updateInputValue(value) {
-      var onChange = this.props.onChange;
-      onChange(value);
-    }
-  }, {
-    key: "handleResize",
-    value: function handleResize() {
-      this.setInputWidth();
+    return TimeUtils.formatTime(customTime);
+  }
+
+  setInputWidth() {
+    if (this.csContainer.current) {
+      this.setState({
+        inputWidth: this.csContainer.current.getBoundingClientRect().width
+      });
     }
-  }, {
-    key: "handleMenuKeyDown",
-    value: function handleMenuKeyDown(event) {
-      var _this$button$current2;
-
-      var _this$state = this.state,
-          keyboardOptionIndex = _this$state.keyboardOptionIndex,
-          inputFocused = _this$state.inputFocused;
-      var options = this.props.options;
-
-      switch (event.key) {
-        case 'Enter':
-        case ' ':
-          // Space Bar
-          if (inputFocused) {
-            this.updateFromCustom();
-          } else {
-            this.updateInputValue(options[keyboardOptionIndex].value);
-          }
-
-          this.closeMenu();
-          (_this$button$current2 = this.button.current) === null || _this$button$current2 === void 0 ? void 0 : _this$button$current2.focus();
-          event.stopPropagation();
-          event.preventDefault();
-          break;
+  }
 
-        case 'Tab':
-          if (event.shiftKey) {
-            this.handleMenuNavigation(CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP);
-          } else {
-            this.handleMenuNavigation(CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN);
-          }
+  focus() {
+    var _this$button$current;
 
-          event.stopPropagation();
-          event.preventDefault();
-          break;
+    (_this$button$current = this.button.current) === null || _this$button$current === void 0 ? void 0 : _this$button$current.focus();
+  }
 
-        case 'ArrowUp':
-          this.handleMenuNavigation(CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP);
-          event.stopPropagation();
-          event.preventDefault();
-          break;
+  updateInputValue(value) {
+    var {
+      onChange
+    } = this.props;
+    onChange(value);
+  }
+
+  handleResize() {
+    this.setInputWidth();
+  }
+
+  handleMenuKeyDown(event) {
+    var _this$button$current2;
+
+    var {
+      keyboardOptionIndex,
+      inputFocused
+    } = this.state;
+    var {
+      options
+    } = this.props;
+
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        // Space Bar
+        if (inputFocused) {
+          this.updateFromCustom();
+        } else {
+          this.updateInputValue(options[keyboardOptionIndex].value);
+        }
 
-        case 'ArrowDown':
+        this.closeMenu();
+        (_this$button$current2 = this.button.current) === null || _this$button$current2 === void 0 ? void 0 : _this$button$current2.focus();
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+
+      case 'Tab':
+        if (event.shiftKey) {
+          this.handleMenuNavigation(CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP);
+        } else {
           this.handleMenuNavigation(CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN);
-          event.stopPropagation();
-          event.preventDefault();
-          break;
+        }
 
-        case 'Escape':
-          this.closeMenu();
-          break;
+        event.stopPropagation();
+        event.preventDefault();
+        break;
 
-        default:
-          break;
-      }
+      case 'ArrowUp':
+        this.handleMenuNavigation(CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP);
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        this.handleMenuNavigation(CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN);
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+
+      case 'Escape':
+        this.closeMenu();
+        break;
+
+      default:
+        break;
     }
-  }, {
-    key: "handleMenuNavigation",
-    value: function handleMenuNavigation(direction) {
-      var _this$state2 = this.state,
-          keyboardOptionIndex = _this$state2.keyboardOptionIndex,
-          inputFocused = _this$state2.inputFocused;
-      var options = this.props.options;
-      var menuOptionsLength = options.length;
-      var newKeyboardOptionIndex = keyboardOptionIndex;
-
-      switch (direction) {
-        case CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP:
-          if (!inputFocused && keyboardOptionIndex === 0) {
-            this.focusInput();
-            break;
-          } else if (inputFocused) {
-            this.focusOption(keyboardOptionIndex);
-          }
-
-          if (keyboardOptionIndex > 0 && !inputFocused) {
-            newKeyboardOptionIndex = (newKeyboardOptionIndex - 1) % menuOptionsLength;
-            this.setState({
-              keyboardOptionIndex: newKeyboardOptionIndex
-            });
-          } else if (keyboardOptionIndex === 0) {
-            newKeyboardOptionIndex = menuOptionsLength - 1;
-            this.setState({
-              keyboardOptionIndex: newKeyboardOptionIndex
-            });
-          }
-
-          this.scrollOptionIntoView(newKeyboardOptionIndex);
-          break;
+  }
 
-        case CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN:
-          if (!inputFocused && keyboardOptionIndex === menuOptionsLength - 1) {
-            this.focusInput();
-            break;
-          } else if (inputFocused) {
-            this.focusOption(keyboardOptionIndex);
-          }
-
-          if (keyboardOptionIndex < menuOptionsLength && !(inputFocused && keyboardOptionIndex === 0)) {
-            newKeyboardOptionIndex = (newKeyboardOptionIndex + 1) % menuOptionsLength;
-            this.setState({
-              keyboardOptionIndex: newKeyboardOptionIndex
-            });
-          }
-
-          this.scrollOptionIntoView(newKeyboardOptionIndex);
+  handleMenuNavigation(direction) {
+    var {
+      keyboardOptionIndex,
+      inputFocused
+    } = this.state;
+    var {
+      options
+    } = this.props;
+    var menuOptionsLength = options.length;
+    var newKeyboardOptionIndex = keyboardOptionIndex;
+
+    switch (direction) {
+      case CustomTimeSelect.MENU_NAVIGATION_DIRECTION.UP:
+        if (!inputFocused && keyboardOptionIndex === 0) {
+          this.focusInput();
           break;
+        } else if (inputFocused) {
+          this.focusOption(keyboardOptionIndex);
+        }
+
+        if (keyboardOptionIndex > 0 && !inputFocused) {
+          newKeyboardOptionIndex = (newKeyboardOptionIndex - 1) % menuOptionsLength;
+          this.setState({
+            keyboardOptionIndex: newKeyboardOptionIndex
+          });
+        } else if (keyboardOptionIndex === 0) {
+          newKeyboardOptionIndex = menuOptionsLength - 1;
+          this.setState({
+            keyboardOptionIndex: newKeyboardOptionIndex
+          });
+        }
 
-        default:
+        this.scrollOptionIntoView(newKeyboardOptionIndex);
+        break;
+
+      case CustomTimeSelect.MENU_NAVIGATION_DIRECTION.DOWN:
+        if (!inputFocused && keyboardOptionIndex === menuOptionsLength - 1) {
+          this.focusInput();
           break;
-      }
-    }
-  }, {
-    key: "handleOptionClick",
-    value: function handleOptionClick(event) {
-      var optionIndex = Number(event.currentTarget.value);
-      var _this$props2 = this.props,
-          options = _this$props2.options,
-          timeToValue = _this$props2.timeToValue;
-      var customTime = this.state.customTime;
-
-      if (optionIndex === CUSTOM_OPTION) {
-        var update = timeToValue(customTime);
-        this.updateAndClose(update);
-      } else {
-        this.updateAndClose(options[optionIndex].value);
-      }
-    }
-  }, {
-    key: "updateAndClose",
-    value: function updateAndClose(update) {
-      var _this$button$current3;
+        } else if (inputFocused) {
+          this.focusOption(keyboardOptionIndex);
+        }
 
-      this.updateInputValue(update);
-      this.closeMenu();
-      (_this$button$current3 = this.button.current) === null || _this$button$current3 === void 0 ? void 0 : _this$button$current3.focus();
+        if (keyboardOptionIndex < menuOptionsLength && !(inputFocused && keyboardOptionIndex === 0)) {
+          newKeyboardOptionIndex = (newKeyboardOptionIndex + 1) % menuOptionsLength;
+          this.setState({
+            keyboardOptionIndex: newKeyboardOptionIndex
+          });
+        }
+
+        this.scrollOptionIntoView(newKeyboardOptionIndex);
+        break;
+
+      default:
+        break;
     }
-  }, {
-    key: "handleOptionFocus",
-    value: function handleOptionFocus(event) {
-      this.setState({
-        keyboardOptionIndex: Number(event.target.value)
-      });
+  }
+
+  handleOptionClick(event) {
+    var optionIndex = Number(event.currentTarget.value);
+    var {
+      options,
+      timeToValue
+    } = this.props;
+    var {
+      customTime
+    } = this.state;
+
+    if (optionIndex === CUSTOM_OPTION) {
+      var update = timeToValue(customTime);
+      this.updateAndClose(update);
+    } else {
+      this.updateAndClose(options[optionIndex].value);
     }
-  }, {
-    key: "handleMenuOpened",
-    value: function handleMenuOpened() {
-      var _this$menuContainer$c;
-
-      var _this$props3 = this.props,
-          options = _this$props3.options,
-          value = _this$props3.value;
-      var keyboardOptionIndex = this.state.keyboardOptionIndex;
-      this.scrollOptionIntoView(keyboardOptionIndex);
-      var activeOption = (_this$menuContainer$c = this.menuContainer.current) === null || _this$menuContainer$c === void 0 ? void 0 : _this$menuContainer$c.querySelector('.cs-option-btn.keyboard-active');
-
-      if (activeOption instanceof HTMLElement) {
-        activeOption.focus();
-      }
+  }
 
-      if (value === null) {
-        return;
-      }
+  updateAndClose(update) {
+    var _this$button$current3;
 
-      var valueIndex = options.map(function (option) {
-        return option.value;
-      }).indexOf(value);
+    this.updateInputValue(update);
+    this.closeMenu();
+    (_this$button$current3 = this.button.current) === null || _this$button$current3 === void 0 ? void 0 : _this$button$current3.focus();
+  }
 
-      if (valueIndex < 0) {
-        // The custom option should be selected
-        this.focusInput();
-      }
-    }
-  }, {
-    key: "focusInput",
-    value: function focusInput() {
-      var _this$input$current;
+  handleOptionFocus(event) {
+    this.setState({
+      keyboardOptionIndex: Number(event.target.value)
+    });
+  }
 
-      (_this$input$current = this.input.current) === null || _this$input$current === void 0 ? void 0 : _this$input$current.focus();
+  handleMenuOpened() {
+    var _this$menuContainer$c;
+
+    var {
+      options,
+      value
+    } = this.props;
+    var {
+      keyboardOptionIndex
+    } = this.state;
+    this.scrollOptionIntoView(keyboardOptionIndex);
+    var activeOption = (_this$menuContainer$c = this.menuContainer.current) === null || _this$menuContainer$c === void 0 ? void 0 : _this$menuContainer$c.querySelector('.cs-option-btn.keyboard-active');
+
+    if (activeOption instanceof HTMLElement) {
+      activeOption.focus();
     }
-  }, {
-    key: "focusOption",
-    value: function focusOption(index) {
-      var _this$menuContainer$c2;
 
-      var options = (_this$menuContainer$c2 = this.menuContainer.current) === null || _this$menuContainer$c2 === void 0 ? void 0 : _this$menuContainer$c2.querySelector('.cs-options');
+    if (value === null) {
+      return;
+    }
 
-      if (options && options.children) {
-        var option = options.children.item(index);
+    var valueIndex = options.map(option => option.value).indexOf(value);
 
-        if (option instanceof HTMLElement) {
-          option.focus();
-        }
-      }
+    if (valueIndex < 0) {
+      // The custom option should be selected
+      this.focusInput();
     }
-  }, {
-    key: "handleMenuExited",
-    value: function handleMenuExited() {
-      var menuIsOpen = this.state.menuIsOpen;
-
-      if (menuIsOpen) {
-        this.setState({
-          menuIsOpen: false,
-          keyboardOptionIndex: 0
-        });
+  }
+
+  focusInput() {
+    var _this$input$current;
+
+    (_this$input$current = this.input.current) === null || _this$input$current === void 0 ? void 0 : _this$input$current.focus();
+  }
+
+  focusOption(index) {
+    var _this$menuContainer$c2;
+
+    var options = (_this$menuContainer$c2 = this.menuContainer.current) === null || _this$menuContainer$c2 === void 0 ? void 0 : _this$menuContainer$c2.querySelector('.cs-options');
+
+    if (options && options.children) {
+      var option = options.children.item(index);
+
+      if (option instanceof HTMLElement) {
+        option.focus();
       }
     }
-  }, {
-    key: "handleCustomInput",
-    value: function handleCustomInput(value) {
-      var timeToValue = this.props.timeToValue;
-      var update = timeToValue(value);
-      this.updateInputValue(update);
+  }
+
+  handleMenuExited() {
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (menuIsOpen) {
       this.setState({
-        customTime: value
+        menuIsOpen: false,
+        keyboardOptionIndex: 0
       });
     }
-  }, {
-    key: "updateFromCustom",
-    value: function updateFromCustom() {
-      var timeToValue = this.props.timeToValue;
-      var customTime = this.state.customTime;
-      var update = timeToValue(customTime);
-      this.updateInputValue(update);
-    }
-  }, {
-    key: "toggleMenu",
-    value: function toggleMenu(event) {
-      var menuIsOpen = this.state.menuIsOpen;
+  }
 
-      if (menuIsOpen) {
-        this.closeMenu();
-      } else {
-        this.openMenu();
-      }
+  handleCustomInput(value) {
+    var {
+      timeToValue
+    } = this.props;
+    var update = timeToValue(value);
+    this.updateInputValue(update);
+    this.setState({
+      customTime: value
+    });
+  }
 
-      event.stopPropagation();
+  updateFromCustom() {
+    var {
+      timeToValue
+    } = this.props;
+    var {
+      customTime
+    } = this.state;
+    var update = timeToValue(customTime);
+    this.updateInputValue(update);
+  }
+
+  toggleMenu(event) {
+    var {
+      menuIsOpen
+    } = this.state;
+
+    if (menuIsOpen) {
+      this.closeMenu();
+    } else {
+      this.openMenu();
     }
-  }, {
-    key: "openMenu",
-    value: function openMenu() {
-      this.updateKeyboardIndex();
-      this.setInputWidth();
-      this.setState({
-        menuIsOpen: true
-      });
+
+    event.stopPropagation();
+  }
+
+  openMenu() {
+    this.updateKeyboardIndex();
+    this.setInputWidth();
+    this.setState({
+      menuIsOpen: true
+    });
+  }
+
+  closeMenu() {
+    var focusButton = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    this.setState({
+      menuIsOpen: false
+    });
+
+    if (focusButton) {
+      var _this$button$current4;
+
+      (_this$button$current4 = this.button.current) === null || _this$button$current4 === void 0 ? void 0 : _this$button$current4.focus();
     }
-  }, {
-    key: "closeMenu",
-    value: function closeMenu() {
-      var focusButton = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      this.setState({
-        menuIsOpen: false
-      });
+  }
 
-      if (focusButton) {
-        var _this$button$current4;
+  updateKeyboardIndex() {
+    var {
+      options,
+      value
+    } = this.props;
 
-        (_this$button$current4 = this.button.current) === null || _this$button$current4 === void 0 ? void 0 : _this$button$current4.focus();
-      }
+    if (value === null) {
+      return;
     }
-  }, {
-    key: "updateKeyboardIndex",
-    value: function updateKeyboardIndex() {
-      var _this$props4 = this.props,
-          options = _this$props4.options,
-          value = _this$props4.value;
-
-      if (value === null) {
-        return;
-      }
 
-      var valueIndex = options.map(function (option) {
-        return option.value;
-      }).indexOf(value);
+    var valueIndex = options.map(option => option.value).indexOf(value);
 
-      if (valueIndex > 0) {
-        this.setState({
-          keyboardOptionIndex: valueIndex
-        });
-      }
+    if (valueIndex > 0) {
+      this.setState({
+        keyboardOptionIndex: valueIndex
+      });
     }
-  }, {
-    key: "scrollOptionIntoView",
-    value: function scrollOptionIntoView(index) {
-      var _this$menuContainer$c3;
+  }
 
-      var options = (_this$menuContainer$c3 = this.menuContainer.current) === null || _this$menuContainer$c3 === void 0 ? void 0 : _this$menuContainer$c3.querySelector('.cs-options');
+  scrollOptionIntoView(index) {
+    var _this$menuContainer$c3;
 
-      if (options && options.children) {
-        var activeOption = options.children.item(index);
+    var options = (_this$menuContainer$c3 = this.menuContainer.current) === null || _this$menuContainer$c3 === void 0 ? void 0 : _this$menuContainer$c3.querySelector('.cs-options');
 
-        if (activeOption instanceof HTMLElement && activeOption.offsetTop > CustomTimeSelect.DROP_DOWN_MENU_HEIGHT) {
-          options.scrollTop = activeOption.offsetTop - CustomTimeSelect.DROP_DOWN_MENU_HEIGHT;
-        } else if (activeOption instanceof HTMLElement && activeOption.offsetTop < 0 || index === 0) {
-          options.scrollTop = 0;
-        }
+    if (options && options.children) {
+      var activeOption = options.children.item(index);
+
+      if (activeOption instanceof HTMLElement && activeOption.offsetTop > CustomTimeSelect.DROP_DOWN_MENU_HEIGHT) {
+        options.scrollTop = activeOption.offsetTop - CustomTimeSelect.DROP_DOWN_MENU_HEIGHT;
+      } else if (activeOption instanceof HTMLElement && activeOption.offsetTop < 0 || index === 0) {
+        options.scrollTop = 0;
       }
     }
-  }, {
-    key: "renderMenuElement",
-    value: function renderMenuElement() {
-      var inputWidth = this.state.inputWidth;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "cs-menu-container",
-        ref: this.menuContainer,
-        role: "presentation",
-        onKeyDown: this.handleMenuKeyDown,
-        onClick: function onClick(event) {
-          event.stopPropagation();
-        },
-        style: {
-          width: inputWidth
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "cs-options-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "cs-options"
-      }, this.renderOptions())));
-    }
-  }, {
-    key: "renderOptions",
-    value: function renderOptions() {
-      var _this2 = this;
-
-      var _this$props5 = this.props,
-          options = _this$props5.options,
-          value = _this$props5.value,
-          icon = _this$props5.icon,
-          customText = _this$props5.customText;
-      var _this$state3 = this.state,
-          keyboardOptionIndex = _this$state3.keyboardOptionIndex,
-          customTime = _this$state3.customTime,
-          inputFocused = _this$state3.inputFocused;
-      var matchFound = false;
-      var optionArray = [];
-
-      for (var index = 0; index < options.length; index += 1) {
-        var option = options[index];
-        var key = "option-".concat(index, "-").concat(option.value);
-        matchFound = matchFound || option.value === value;
-        optionArray.push( /*#__PURE__*/React.createElement("button", {
-          key: key,
-          type: "button",
-          value: index,
-          className: classNames('cs-option-btn', {
-            'keyboard-active': keyboardOptionIndex === index && !inputFocused
-          }),
-          onClick: this.handleOptionClick,
-          onFocus: this.handleOptionFocus
-        }, option.value === value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-          icon: icon,
-          className: "mr-2"
-        }), option.value !== value && /*#__PURE__*/React.createElement("span", {
-          className: "mr-4"
-        }), option.title));
+  }
+
+  renderMenuElement() {
+    var {
+      inputWidth
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cs-menu-container",
+      ref: this.menuContainer,
+      role: "presentation",
+      onKeyDown: this.handleMenuKeyDown,
+      onClick: event => {
+        event.stopPropagation();
+      },
+      style: {
+        width: inputWidth
       }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cs-options-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cs-options"
+    }, this.renderOptions())));
+  }
 
-      optionArray.push( /*#__PURE__*/React.createElement("hr", {
-        className: "cs-divider",
-        key: "option-divider"
-      }));
+  renderOptions() {
+    var {
+      options,
+      value,
+      icon,
+      customText
+    } = this.props;
+    var {
+      keyboardOptionIndex,
+      customTime,
+      inputFocused
+    } = this.state;
+    var matchFound = false;
+    var optionArray = [];
+
+    for (var index = 0; index < options.length; index += 1) {
+      var option = options[index];
+      var key = "option-".concat(index, "-").concat(option.value);
+      matchFound = matchFound || option.value === value;
       optionArray.push( /*#__PURE__*/React.createElement("button", {
-        key: "option-custom-label",
+        key: key,
         type: "button",
-        value: CUSTOM_OPTION,
+        value: index,
         className: classNames('cs-option-btn', {
-          'keyboard-active': inputFocused
+          'keyboard-active': keyboardOptionIndex === index && !inputFocused
         }),
         onClick: this.handleOptionClick,
         onFocus: this.handleOptionFocus
-      }, !matchFound && value !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      }, option.value === value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: icon,
         className: "mr-2"
-      }) : /*#__PURE__*/React.createElement("span", {
+      }), option.value !== value && /*#__PURE__*/React.createElement("span", {
         className: "mr-4"
-      }), customText));
-      optionArray.push( /*#__PURE__*/React.createElement("div", {
-        key: "cs-custom-container",
-        className: "cs-custom-container"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "mr-2"
-      }), /*#__PURE__*/React.createElement(TimeInput, {
-        key: "option-input",
-        ref: this.input,
-        onChange: this.handleCustomInput,
-        value: customTime,
-        onFocus: function onFocus() {
-          return _this2.setState({
-            inputFocused: true
-          });
-        },
-        onBlur: function onBlur() {
-          return _this2.setState({
-            inputFocused: false
-          });
-        }
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "ml-2"
-      })));
-      optionArray.push( /*#__PURE__*/React.createElement("hr", {
-        key: "option-end",
-        className: "mb-2"
-      }));
-      return optionArray;
+      }), option.title));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props6 = this.props,
-          disabled = _this$props6.disabled,
-          invalid = _this$props6.invalid,
-          value = _this$props6.value;
-      var menuIsOpen = this.state.menuIsOpen;
-      var popperOptions = this.props.popperOptions;
-      popperOptions = _objectSpread({
-        placement: 'bottom-end',
-        modifiers: {
-          preventOverflow: {
-            enabled: false
-          }
-        }
-      }, popperOptions);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "input-group cs-container context-menu",
-        ref: this.csContainer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames('input-group-append cs-dropdown', {
-          'cs-dropdown-invalid': invalid
-        })
-      }, /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: classNames('btn cs-btn form-control', {
-          'cs-btn-invalid': invalid
-        }),
-        ref: this.button,
-        onClick: this.toggleMenu,
-        disabled: disabled
-      }, /*#__PURE__*/React.createElement("span", {
-        className: classNames({
-          'text-muted': value === null
-        })
-      }, this.getSelectedText()), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-        icon: dhSort,
-        className: "cs-caret"
-      })), /*#__PURE__*/React.createElement(DropdownMenu, {
-        isShown: menuIsOpen,
-        actions: {
-          menuElement: this.renderMenuElement()
-        },
-        popperOptions: popperOptions,
-        popperClassName: "CustomTimeSelect",
-        onMenuOpened: this.handleMenuOpened,
-        onMenuClosed: this.handleMenuExited,
-        menuStyle: {
-          maxWidth: '100rem'
+
+    optionArray.push( /*#__PURE__*/React.createElement("hr", {
+      className: "cs-divider",
+      key: "option-divider"
+    }));
+    optionArray.push( /*#__PURE__*/React.createElement("button", {
+      key: "option-custom-label",
+      type: "button",
+      value: CUSTOM_OPTION,
+      className: classNames('cs-option-btn', {
+        'keyboard-active': inputFocused
+      }),
+      onClick: this.handleOptionClick,
+      onFocus: this.handleOptionFocus
+    }, !matchFound && value !== null ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: icon,
+      className: "mr-2"
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "mr-4"
+    }), customText));
+    optionArray.push( /*#__PURE__*/React.createElement("div", {
+      key: "cs-custom-container",
+      className: "cs-custom-container"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "mr-2"
+    }), /*#__PURE__*/React.createElement(TimeInput, {
+      key: "option-input",
+      ref: this.input,
+      onChange: this.handleCustomInput,
+      value: customTime,
+      onFocus: () => this.setState({
+        inputFocused: true
+      }),
+      onBlur: () => this.setState({
+        inputFocused: false
+      })
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "ml-2"
+    })));
+    optionArray.push( /*#__PURE__*/React.createElement("hr", {
+      key: "option-end",
+      className: "mb-2"
+    }));
+    return optionArray;
+  }
+
+  render() {
+    var {
+      disabled,
+      invalid,
+      value
+    } = this.props;
+    var {
+      menuIsOpen
+    } = this.state;
+    var {
+      popperOptions
+    } = this.props;
+    popperOptions = _objectSpread({
+      placement: 'bottom-end',
+      modifiers: {
+        preventOverflow: {
+          enabled: false
         }
-      }))));
-    }
-  }]);
+      }
+    }, popperOptions);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "input-group cs-container context-menu",
+      ref: this.csContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames('input-group-append cs-dropdown', {
+        'cs-dropdown-invalid': invalid
+      })
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames('btn cs-btn form-control', {
+        'cs-btn-invalid': invalid
+      }),
+      ref: this.button,
+      onClick: this.toggleMenu,
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classNames({
+        'text-muted': value === null
+      })
+    }, this.getSelectedText()), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: dhSort,
+      className: "cs-caret"
+    })), /*#__PURE__*/React.createElement(DropdownMenu, {
+      isShown: menuIsOpen,
+      actions: {
+        menuElement: this.renderMenuElement()
+      },
+      popperOptions: popperOptions,
+      popperClassName: "CustomTimeSelect",
+      onMenuOpened: this.handleMenuOpened,
+      onMenuClosed: this.handleMenuExited,
+      menuStyle: {
+        maxWidth: '100rem'
+      }
+    }))));
+  }
 
-  return CustomTimeSelect;
-}(Component);
+}
 
 _defineProperty(CustomTimeSelect, "MENU_NAVIGATION_DIRECTION", MENU_NAVIGATION_DIRECTION);
 
 _defineProperty(CustomTimeSelect, "DROP_DOWN_MENU_HEIGHT", 125);
 
 _defineProperty(CustomTimeSelect, "defaultProps", {
-  onChange: function onChange() {// no-op
+  onChange() {// no-op
   },
+
   value: null,
   disabled: false,
   popperOptions: {},
   icon: vsCheck,
   customText: 'Custom',
   placeholder: 'Select a time',
-  valueToTime: function valueToTime(value) {
-    return value === null ? 0 : Math.round(value / 1000);
-  },
-  timeToValue: function timeToValue(time) {
-    return time * 1000;
-  },
+  valueToTime: value => value === null ? 0 : Math.round(value / 1000),
+  timeToValue: time => time * 1000,
   invalid: false
 });