@elliemae/ds-time-picker 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/DSTimePicker.js

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+var reactDesc = require('react-desc');
+var moment = require('moment');
+var TimePickerImpl = require('./TimePickerImpl.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+const DSTimePicker = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    className = '',
+    disabled = false,
+    value = '',
+    format,
+    style = {},
+    onChange = () => null,
+    onOpen = () => null,
+    isOpen = undefined,
+    clearable = false,
+    hasHeader = true,
+    hasHeaderDisplay = false,
+    'aria-label': ariaLabel,
+    zIndex = 'auto',
+    placement = 'bottom',
+    disabledTimes,
+    minutesInterval = 1
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(TimePickerImpl, {
+    ref: innerRef,
+    "aria-label": ariaLabel,
+    className: className,
+    clearable: clearable,
+    containerProps: containerProps,
+    disabled: disabled,
+    format: format,
+    hasHeader: hasHeader,
+    hasHeaderDisplay: hasHeaderDisplay,
+    isOpen: isOpen,
+    onChange: onChange,
+    onOpen: onOpen,
+    placement: placement,
+    style: style,
+    value: value,
+    zIndex: zIndex,
+    minutesInterval: minutesInterval,
+    disabledTimes: disabledTimes
+  });
+};
+
+DSTimePicker.defaultProps = {
+  format: 'hh:mm:ss A'
+};
+const props = {
+  /** a11y label */
+  'aria-label': reactDesc.PropTypes.string.description('a11y label'),
+
+  /** inject props to time picker wrapper */
+  containerProps: reactDesc.PropTypes.object.description('inject props to time picker wrapper'),
+
+  /** Whether the time picker is disabled or not */
+  disabled: reactDesc.PropTypes.bool.description('Whether the time picker is disabled or not'),
+
+  /** Time picker value */
+  value: reactDesc.PropTypes.instanceOf(moment__default["default"]).description('Time picker value'),
+
+  /** Time format (hh:mm:ss, H:m:s) */
+  format: reactDesc.PropTypes.string.description('Time format (hh:mm:ss, H:m:s)'),
+
+  /** toggle header style */
+  hasHeader: reactDesc.PropTypes.bool.description('toggle header style'),
+
+  /** toggle header display */
+  hasHeaderDisplay: reactDesc.PropTypes.bool.description('toggle header display'),
+
+  /** Handler when time picker value changes */
+  onChange: reactDesc.PropTypes.func.description('Handler when time picker value changes'),
+
+  /** Handler when the time picker menu opens */
+  onOpen: reactDesc.PropTypes.func.description('Handler when the time picker menu opens'),
+
+  /** Whether the time picker menu is opened or not */
+  isOpen: reactDesc.PropTypes.bool.description('Whether the time picker menu is opened or not'),
+
+  /** ref for time picker input */
+  innerRef: reactDesc.PropTypes.func.description('ref for time picker input'),
+
+  /** Enable to clear the time picker value */
+  clearable: reactDesc.PropTypes.bool.description('Enable to clear the time picker value'),
+
+  /** class for time picker */
+  className: reactDesc.PropTypes.string.description('class for time picker'),
+
+  /** style object */
+  style: reactDesc.PropTypes.object.description('style object'),
+
+  /** z index for menu */
+  zIndex: reactDesc.PropTypes.number.description('z index for menu'),
+
+  /** DSPopper placement */
+  placement: reactDesc.PropTypes.string.description('DSPopper placement'),
+
+  /** disabled time */
+  disabledTimes: reactDesc.PropTypes.object.description('disabled time'),
+
+  /** steps for the picker */
+  minutesInterval: reactDesc.PropTypes.number.description('steps for the picker')
+};
+const DSTimePickerWithSchema = reactDesc.describe(DSTimePicker);
+DSTimePickerWithSchema.propTypes = props;
+
+exports.DSTimePicker = DSTimePicker;
+exports.DSTimePickerWithSchema = DSTimePickerWithSchema;
+exports["default"] = DSTimePicker;

package/cjs/DSTimePickerMenu.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var styled = require('styled-components');
+var TimePickerMenu = require('./TimePickerMenu.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DSTimePickerMenuWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1lnruj5-0"
+})(["display:flex;height:18.6rem;"]);
+
+function DSTimePickerMenu(props) {
+  return /*#__PURE__*/_jsx__default["default"](DSTimePickerMenuWrapper, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(TimePickerMenu.TimePickerMenu, _objectSpread({}, props)));
+}
+
+exports.DSTimePickerMenu = DSTimePickerMenu;
+exports["default"] = DSTimePickerMenu;

package/cjs/PickerPanel.js

@@ -0,0 +1,402 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var lodash = require('lodash');
+var dsClassnames = require('@elliemae/ds-classnames');
+var memoizeOne = require('memoize-one');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var moveElementOnScroll = require('./moveElementOnScroll.js');
+var utils = require('./utils.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _SelectedCircle, _ChevronSmallUp, _ChevronSmallDown;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = 'time-picker-panel';
+const Container = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    scrolling
+  } = _ref;
+  return {
+    scrolling
+  };
+});
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
+const PickerItemListContainer = dsClassnames.aggregatedClasses('div')(blockName, 'item-list-container');
+const PickerItemList = dsClassnames.aggregatedClasses('div')(blockName, 'item-list');
+const PickerHeader = dsClassnames.aggregatedClasses('div')(blockName, 'header');
+const PickerItemContainer = dsClassnames.aggregatedClasses('div')(blockName, 'item', _ref2 => {
+  let {
+    selected,
+    disabled
+  } = _ref2;
+  return {
+    selected,
+    disabled
+  };
+});
+const PickerSelectedOptionSelected = dsClassnames.aggregatedClasses('div')(blockName, 'selected-container');
+const SelectedCircle = dsClassnames.aggregatedClasses('div')(blockName, 'selected-circle');
+const ArrowButtonContainer = dsClassnames.aggregatedClasses('div')(blockName, 'arrow-container');
+
+const getOptionIndex = function (options, selectedOption) {
+  let valueProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
+  const index = options.findIndex(option => option[valueProperty] === selectedOption);
+  return utils.validateIndex(index, options);
+};
+
+const arrowProps = {
+  buttonType: 'text',
+  fluidHeight: true,
+  fluidWidth: true,
+  size: 's'
+};
+class PickerPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.computeContainerTranslation = memoizeOne__default["default"](index => {
+      const {
+        options,
+        valueProperty
+      } = this.props;
+      const {
+        selectedOption,
+        scrolling
+      } = this.state;
+      const selectedOptionIndex = index || getOptionIndex(options, selectedOption, valueProperty);
+      const listYPosition = this.minYListPosition - selectedOptionIndex * this.optionHeight;
+      if (this.scrollHandler && !scrolling) this.scrollHandler.updatePosition(listYPosition);
+      return listYPosition;
+    });
+
+    this.renderHeader = () => {
+      const {
+        header
+      } = this.props;
+      return /*#__PURE__*/_jsx__default["default"](PickerHeader, {}, void 0, header);
+    };
+
+    this.pickerListContainerRef = /*#__PURE__*/React__default["default"].createRef();
+    this.pickerListRef = /*#__PURE__*/React__default["default"].createRef();
+    this.pickerItemRef = /*#__PURE__*/React__default["default"].createRef();
+    this.selectedOptionRef = /*#__PURE__*/React__default["default"].createRef();
+    this.state = {
+      selectedOption: props.selected,
+      activeIndex: 0,
+      // eslint-disable-next-line react/no-unused-state
+      prevProps: {}
+    };
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleStepMoveUp = this.handleStepMoveUp.bind(this);
+    this.handleStepMoveDown = this.handleStepMoveDown.bind(this);
+  }
+
+  componentDidMount() {
+    this.computeSizes();
+    const pickerListContainerEl = this.pickerListContainerRef.current;
+    const pickerListEl = this.pickerListRef.current;
+    this.scrollHandler = new moveElementOnScroll.MoveElementOnScroll(pickerListEl, {
+      container: pickerListContainerEl,
+      min: -this.minYListPosition,
+      max: this.maxYListPosition,
+      onUpdate: (pos, delta) => {
+        const {
+          options
+        } = this.props;
+        const index = options.length - -Math.floor((pos - this.maxYListPosition) / this.optionHeight) + (delta > 0 ? 1 : -1);
+        this.moveTo(index, true);
+      },
+      onEndScroll: () => {
+        this.setState({
+          scrolling: false
+        });
+      }
+    });
+    this.computeContainerTranslation();
+  }
+
+  componentWillUnmount() {
+    this.scrollHandler.unsubscribe();
+  }
+
+  static getDerivedStateFromProps(nextProps, _ref3) {
+    let {
+      prevProps
+    } = _ref3;
+    const {
+      selected,
+      valueProperty,
+      options
+    } = nextProps;
+
+    if (selected !== prevProps.selected) {
+      return {
+        selectedOption: selected,
+        activeIndex: getOptionIndex(options, selected, valueProperty),
+        prevProps: nextProps
+      };
+    }
+
+    return null;
+  }
+
+  getOptionValue(option) {
+    const {
+      valueProperty
+    } = this.props;
+    return option[valueProperty];
+  }
+
+  getOptionLabel(option) {
+    const {
+      labelProperty
+    } = this.props;
+    return option[labelProperty];
+  }
+
+  computeSizes() {
+    const {
+      options,
+      numberItemsOnScreen
+    } = this.props;
+    const {
+      offsetHeight: optionHeight
+    } = this.pickerItemRef.current;
+    this.optionHeight = optionHeight;
+    this.listHeight = this.optionHeight * numberItemsOnScreen;
+    this.minYListPosition = this.listHeight / 2 - this.optionHeight / 2;
+    this.maxYListPosition = this.optionHeight * (options.length - Math.ceil(numberItemsOnScreen / 2));
+  }
+
+  handleOptionSelect(optionValue, index, scrolling) {
+    const {
+      onChange
+    } = this.props;
+    this.setState(state => _objectSpread(_objectSpread({}, state), {}, {
+      scrolling,
+      selectedOption: optionValue,
+      activeIndex: index
+    }), () => {
+      onChange(optionValue, index);
+    });
+  } // TODO: this needs a refactor from de FocusGroup
+  // eslint-disable-next-line max-statements
+
+
+  handleKeyDown(e) {
+    const {
+      activeIndex
+    } = this.state;
+    const {
+      options
+    } = this.props;
+    const [firstColumn, ...restColumns] = document.getElementsByClassName('em-ds-time-picker-panel');
+    const [lastColumn] = restColumns.slice(-1);
+    const [prev] = document.getElementsByClassName('DayPickerNavigation_button');
+    const focusedElement = document.activeElement;
+
+    switch (e.key) {
+      case 'Home':
+        this.moveTo(0);
+        break;
+
+      case 'End':
+        this.moveTo(options.length - 1);
+        break;
+
+      case 'ArrowUp':
+        this.moveTo(activeIndex - 1);
+        break;
+
+      case 'ArrowDown':
+        this.moveTo(activeIndex + 1);
+        break;
+
+      case 'Tab':
+        {
+          e.preventDefault(); // If it is DateTimePicker, move focus to prev arrow element
+
+          if (prev && focusedElement === lastColumn) {
+            prev.focus();
+          } else if (focusedElement === lastColumn) {
+            firstColumn.focus();
+          } else {
+            const position = lodash.findIndex(restColumns, focusedElement);
+            restColumns[position + 1].focus();
+          }
+
+          break;
+        }
+    }
+  }
+
+  moveTo(index, scrolling) {
+    const {
+      options
+    } = this.props;
+    const {
+      selectedOption
+    } = this.state;
+    const validIndex = utils.validateIndex(index, options);
+    const option = options[validIndex];
+    const optionValue = this.getOptionValue(option);
+
+    if (selectedOption !== optionValue && option.disabled !== true) {
+      this.handleOptionSelect(optionValue, validIndex, scrolling);
+    } // TO-DO: if date disabled, add nextValidOption selection
+
+  }
+
+  handleStepMoveUp() {
+    const {
+      activeIndex
+    } = this.state;
+    const {
+      arrowStep,
+      options
+    } = this.props;
+    const supposedPos = activeIndex - arrowStep;
+    const nextPos = supposedPos >= 0 ? supposedPos : activeIndex - 1;
+    const nextValidOption = options.find(op => !op.disabled);
+    this.moveTo(nextPos, true, nextValidOption);
+  }
+
+  handleStepMoveDown() {
+    const {
+      activeIndex
+    } = this.state;
+    const {
+      arrowStep,
+      options
+    } = this.props;
+    const supposedPos = activeIndex + arrowStep;
+    const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;
+    this.moveTo(nextPos);
+  }
+
+  render() {
+    const {
+      options,
+      hasHeader,
+      type,
+      time,
+      meridiem,
+      disabledTimes
+    } = this.props;
+    const {
+      selectedOption,
+      activeIndex,
+      scrolling
+    } = this.state;
+    const listYPosition = this.computeContainerTranslation(activeIndex);
+    return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, hasHeader && this.renderHeader(), /*#__PURE__*/_jsx__default["default"](Container, {
+      classProps: {
+        scrolling
+      },
+      onKeyDown: this.handleKeyDown,
+      tabIndex: 0
+    }, void 0, /*#__PURE__*/_jsx__default["default"](PickerSelectedOptionSelected, {
+      innerRef: this.selectedOptionRef
+    }, void 0, _SelectedCircle || (_SelectedCircle = /*#__PURE__*/_jsx__default["default"](SelectedCircle, {}))), /*#__PURE__*/_jsx__default["default"](ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, arrowProps), {}, {
+      "aria-label": "Chevron Up",
+      "data-testid": "".concat(type, "-chevron-up"),
+      disabled: activeIndex <= 0,
+      icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})),
+      onClick: this.handleStepMoveUp,
+      tabIndex: -1
+    }))), /*#__PURE__*/_jsx__default["default"](PickerItemListContainer, {
+      innerRef: this.pickerListContainerRef,
+      style: {
+        height: this.listHeight
+      }
+    }, void 0, /*#__PURE__*/_jsx__default["default"](PickerItemList, {
+      "data-testid": "".concat(type, "-list"),
+      innerRef: this.pickerListRef,
+      style: {
+        transform: "translateY(".concat(listYPosition, "px)")
+      }
+    }, void 0, options.map((option, index) => {
+      const value = this.getOptionValue(option);
+      const label = this.getOptionLabel(option);
+      let valueFormatted;
+      if (meridiem === 'AM') valueFormatted = value;else if (meridiem === 'PM' && value === 12) valueFormatted = value;else if (meridiem === 'PM') valueFormatted = value + 12;
+      let disabled = false;
+
+      if (disabledTimes) {
+        const {
+          from,
+          to
+        } = disabledTimes;
+
+        if (type === 'hour' && valueFormatted >= (from === null || from === void 0 ? void 0 : from.hour) && valueFormatted < (to === null || to === void 0 ? void 0 : to.hour) || type === 'minutes' && value >= (from === null || from === void 0 ? void 0 : from.min) && value < (to === null || to === void 0 ? void 0 : to.min)) {
+          disabled = true;
+        }
+
+        if (type === 'minutes' && ((time === null || time === void 0 ? void 0 : time.hour()) > (to === null || to === void 0 ? void 0 : to.hour) || (time === null || time === void 0 ? void 0 : time.hour()) < (from === null || from === void 0 ? void 0 : from.hour))) {
+          disabled = false;
+        }
+
+        if (label === 'am' && (from === null || from === void 0 ? void 0 : from.hour) == 0 && (to === null || to === void 0 ? void 0 : to.hour) >= 12) {
+          disabled = true;
+        }
+
+        if (label === 'pm' && (to === null || to === void 0 ? void 0 : to.hour) == 24) {
+          disabled = true;
+        }
+      }
+
+      option.disabled = disabled;
+      return /*#__PURE__*/_jsx__default["default"](PickerItemContainer, {
+        classProps: {
+          selected: selectedOption ? value === selectedOption : index === 0,
+          disabled
+        },
+        innerRef: this.pickerItemRef,
+        onClick: () => {
+          if (!disabled) this.handleOptionSelect(value, index);
+        }
+      }, value, label);
+    }))), /*#__PURE__*/_jsx__default["default"](ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, arrowProps), {}, {
+      "aria-label": "Chevron Down",
+      "data-testid": "".concat(type, "-chevron-down"),
+      disabled: activeIndex >= options.length - 1,
+      icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
+      onClick: this.handleStepMoveDown,
+      tabIndex: -1
+    })))));
+  }
+
+}
+PickerPanel.defaultProps = {
+  valueProperty: 'value',
+  labelProperty: 'label',
+  numberItemsOnScreen: 5,
+  // this number should be impair
+  options: [],
+  arrowStep: 1
+};
+
+module.exports = PickerPanel;

package/cjs/TimePickerDropdown.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var DSPopper = require('@elliemae/ds-popper');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
+
+var _RecentDocuments;
+
+const TimePickerDropdown = _ref => {
+  let {
+    disabled = false,
+    onClick,
+    onOpen,
+    isOpen,
+    menu,
+    zIndex,
+    blockName,
+    placement
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+    blockName: blockName,
+    placement: placement,
+    contentComponent: menu,
+    isOpen: isOpen,
+    onOpen: onOpen,
+    modifiers: {
+      preventOverflow: {
+        enabled: true,
+        padding: 0,
+        boundariesElement: 'window'
+      }
+    },
+    showArrow: false,
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "secondary",
+      disabled: disabled,
+      icon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx__default["default"](dsIcons.RecentDocuments, {})),
+      iconSize: "s",
+      onClick: onClick
+    }),
+    zIndex: zIndex
+  });
+};
+
+module.exports = TimePickerDropdown;