@elliemae/ds-time-picker 2.3.1 → 3.0.0-alpha.3

package/esm/DSTimePicker.js

@@ -1,111 +0,0 @@
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import moment from 'moment';
-import TimePickerImpl from './TimePickerImpl.js';
-import { jsx } from 'react/jsx-runtime';
-
-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__*/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': PropTypes.string.description('a11y label'),
-
-  /** inject props to time picker wrapper */
-  containerProps: PropTypes.object.description('inject props to time picker wrapper'),
-
-  /** Whether the time picker is disabled or not */
-  disabled: PropTypes.bool.description('Whether the time picker is disabled or not'),
-
-  /** Time picker value */
-  value: PropTypes.instanceOf(moment).description('Time picker value'),
-
-  /** Time format (hh:mm:ss, H:m:s) */
-  format: PropTypes.string.description('Time format (hh:mm:ss, H:m:s)'),
-
-  /** toggle header style */
-  hasHeader: PropTypes.bool.description('toggle header style'),
-
-  /** toggle header display */
-  hasHeaderDisplay: PropTypes.bool.description('toggle header display'),
-
-  /** Handler when time picker value changes */
-  onChange: PropTypes.func.description('Handler when time picker value changes'),
-
-  /** Handler when the time picker menu opens */
-  onOpen: PropTypes.func.description('Handler when the time picker menu opens'),
-
-  /** Whether the time picker menu is opened or not */
-  isOpen: PropTypes.bool.description('Whether the time picker menu is opened or not'),
-
-  /** ref for time picker input */
-  innerRef: PropTypes.func.description('ref for time picker input'),
-
-  /** Enable to clear the time picker value */
-  clearable: PropTypes.bool.description('Enable to clear the time picker value'),
-
-  /** class for time picker */
-  className: PropTypes.string.description('class for time picker'),
-
-  /** style object */
-  style: PropTypes.object.description('style object'),
-
-  /** z index for menu */
-  zIndex: PropTypes.number.description('z index for menu'),
-
-  /** DSPopper placement */
-  placement: PropTypes.string.description('DSPopper placement'),
-
-  /** disabled time */
-  disabledTimes: PropTypes.object.description('disabled time'),
-
-  /** steps for the picker */
-  minutesInterval: PropTypes.number.description('steps for the picker')
-};
-const DSTimePickerWithSchema = describe(DSTimePicker);
-DSTimePickerWithSchema.propTypes = props;
-
-export { DSTimePicker, DSTimePickerWithSchema, DSTimePicker as default };

package/esm/DSTimePickerMenu.js

@@ -1,24 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'react';
-import styled from 'styled-components';
-import { TimePickerMenu } from './TimePickerMenu.js';
-import { jsx } from 'react/jsx-runtime';
-
-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(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.div.withConfig({
-  componentId: "sc-1lnruj5-0"
-})(["display:flex;height:18.6rem;"]);
-
-function DSTimePickerMenu(props) {
-  return /*#__PURE__*/_jsx(DSTimePickerMenuWrapper, {}, void 0, /*#__PURE__*/jsx(TimePickerMenu, _objectSpread({}, props)));
-}
-
-export { DSTimePickerMenu, DSTimePickerMenu as default };

package/esm/PickerPanel.js

@@ -1,392 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.find.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.find.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import React, { Component } from 'react';
-import { findIndex } from 'lodash';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import memoizeOne from 'memoize-one';
-import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
-import DSButton from '@elliemae/ds-button';
-import { MoveElementOnScroll } from './moveElementOnScroll.js';
-import { validateIndex } from './utils.js';
-import { jsx } from 'react/jsx-runtime';
-
-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(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 = aggregatedClasses('div')(blockName, null, _ref => {
-  let {
-    scrolling
-  } = _ref;
-  return {
-    scrolling
-  };
-});
-const Wrapper = aggregatedClasses('div')(blockName, 'wrapper');
-const PickerItemListContainer = aggregatedClasses('div')(blockName, 'item-list-container');
-const PickerItemList = aggregatedClasses('div')(blockName, 'item-list');
-const PickerHeader = aggregatedClasses('div')(blockName, 'header');
-const PickerItemContainer = aggregatedClasses('div')(blockName, 'item', _ref2 => {
-  let {
-    selected,
-    disabled
-  } = _ref2;
-  return {
-    selected,
-    disabled
-  };
-});
-const PickerSelectedOptionSelected = aggregatedClasses('div')(blockName, 'selected-container');
-const SelectedCircle = aggregatedClasses('div')(blockName, 'selected-circle');
-const ArrowButtonContainer = 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 validateIndex(index, options);
-};
-
-const arrowProps = {
-  buttonType: 'text',
-  fluidHeight: true,
-  fluidWidth: true,
-  size: 's'
-};
-class PickerPanel extends Component {
-  constructor(props) {
-    super(props);
-    this.computeContainerTranslation = memoizeOne(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(PickerHeader, {}, void 0, header);
-    };
-
-    this.pickerListContainerRef = /*#__PURE__*/React.createRef();
-    this.pickerListRef = /*#__PURE__*/React.createRef();
-    this.pickerItemRef = /*#__PURE__*/React.createRef();
-    this.selectedOptionRef = /*#__PURE__*/React.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(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 = findIndex(restColumns, focusedElement);
-            restColumns[position + 1].focus();
-          }
-
-          break;
-        }
-    }
-  }
-
-  moveTo(index, scrolling) {
-    const {
-      options
-    } = this.props;
-    const {
-      selectedOption
-    } = this.state;
-    const validIndex = 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(Wrapper, {}, void 0, hasHeader && this.renderHeader(), /*#__PURE__*/_jsx(Container, {
-      classProps: {
-        scrolling
-      },
-      onKeyDown: this.handleKeyDown,
-      tabIndex: 0
-    }, void 0, /*#__PURE__*/_jsx(PickerSelectedOptionSelected, {
-      innerRef: this.selectedOptionRef
-    }, void 0, _SelectedCircle || (_SelectedCircle = /*#__PURE__*/_jsx(SelectedCircle, {}))), /*#__PURE__*/_jsx(ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({}, arrowProps), {}, {
-      "aria-label": "Chevron Up",
-      "data-testid": "".concat(type, "-chevron-up"),
-      disabled: activeIndex <= 0,
-      icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
-      onClick: this.handleStepMoveUp,
-      tabIndex: -1
-    }))), /*#__PURE__*/_jsx(PickerItemListContainer, {
-      innerRef: this.pickerListContainerRef,
-      style: {
-        height: this.listHeight
-      }
-    }, void 0, /*#__PURE__*/_jsx(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(PickerItemContainer, {
-        classProps: {
-          selected: selectedOption ? value === selectedOption : index === 0,
-          disabled
-        },
-        innerRef: this.pickerItemRef,
-        onClick: () => {
-          if (!disabled) this.handleOptionSelect(value, index);
-        }
-      }, value, label);
-    }))), /*#__PURE__*/_jsx(ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({}, arrowProps), {}, {
-      "aria-label": "Chevron Down",
-      "data-testid": "".concat(type, "-chevron-down"),
-      disabled: activeIndex >= options.length - 1,
-      icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
-      onClick: this.handleStepMoveDown,
-      tabIndex: -1
-    })))));
-  }
-
-}
-PickerPanel.defaultProps = {
-  valueProperty: 'value',
-  labelProperty: 'label',
-  numberItemsOnScreen: 5,
-  // this number should be impair
-  options: [],
-  arrowStep: 1
-};
-
-export { PickerPanel as default };

package/esm/TimePickerDropdown.js

@@ -1,45 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { RecentDocuments } from '@elliemae/ds-icons';
-import DSButton from '@elliemae/ds-button';
-import DSPopper from '@elliemae/ds-popper';
-
-var _RecentDocuments;
-
-const TimePickerDropdown = _ref => {
-  let {
-    disabled = false,
-    onClick,
-    onOpen,
-    isOpen,
-    menu,
-    zIndex,
-    blockName,
-    placement
-  } = _ref;
-  return /*#__PURE__*/_jsx(DSPopper, {
-    blockName: blockName,
-    placement: placement,
-    contentComponent: menu,
-    isOpen: isOpen,
-    onOpen: onOpen,
-    modifiers: {
-      preventOverflow: {
-        enabled: true,
-        padding: 0,
-        boundariesElement: 'window'
-      }
-    },
-    showArrow: false,
-    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
-      buttonType: "secondary",
-      disabled: disabled,
-      icon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {})),
-      iconSize: "s",
-      onClick: onClick
-    }),
-    zIndex: zIndex
-  });
-};
-
-export { TimePickerDropdown as default };