@shopgate/engage/components/PickerUtilize/index.js

Shopgate's ENGAGE library.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SheetList, Picker as BasePicker, Sheet } from '@shopgate/engage/components';
import { ViewContext } from '@shopgate/engage/components/View';
import Button from "./components/Button";
import styles from "./style";

/**
 * The template version of the Picker component.
 * @param {Object} props The same component props as in the base Picker component.
 */
import { jsx as _jsx } from "react/jsx-runtime";
let PickerUtilize = /*#__PURE__*/function (_Component) {
  /**
   * Constructor
   * @param {Object} props Props of the component
   */
  function PickerUtilize(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    /**
     * Focuses the picker button for screen readers.
     */
    _this.onDidOpen = () => {
      _this.props.setViewAriaHidden(true);
      if (_this.firstSelectableItemRef.current) {
        _this.firstSelectableItemRef.current.focus();
      }
    };
    /**
     * Focuses the first selectable item for screen readers.
     */
    _this.onClose = () => {
      _this.props.setViewAriaHidden(false);
      if (_this.pickerRef.current) {
        _this.pickerRef.current.focus();
      }
    };
    _this.modalComponent = sheetProps => /*#__PURE__*/_jsx(Sheet, {
      ..._this.props.sheetProps,
      ...sheetProps,
      title: _this.props.label,
      onDidOpen: _this.onDidOpen
    });
    _this.pickerRef = /*#__PURE__*/React.createRef();
    _this.firstSelectableItemRef = /*#__PURE__*/React.createRef();
    _this.listComponent = prps => /*#__PURE__*/_jsx(SheetList, {
      children: prps.items.map((item, index) => /*#__PURE__*/_jsx(SheetList.Item, {
        title: item.label,
        onClick: () => {
          setTimeout(() => {
            prps.onSelect(item.value);
            prps.onClose();
          }, _this.props.clickDelay);
        },
        isDisabled: item.disabled,
        isSelected: index === prps.selectedIndex,
        rightComponent: item.rightComponent,
        testId: item.label,
        ref: index === prps.selectedIndex ? _this.firstSelectableItemRef : null
      }, item.value))
    });
    return _this;
  }
  _inheritsLoose(PickerUtilize, _Component);
  var _proto = PickerUtilize.prototype;
  /**
   * Render
   * @returns {JSX}
   */
  _proto.render = function render() {
    const {
      hasButton,
      sheetProps: ignore,
      ...restProps
    } = this.props;
    return /*#__PURE__*/_jsx(BasePicker, {
      ...restProps,
      className: `${hasButton ? styles : ''} engage__picker-utilize`,
      modalComponent: this.modalComponent,
      buttonProps: this.props.buttonProps,
      buttonComponent: this.props.buttonComponent || Button,
      listComponent: this.listComponent,
      onClose: this.onClose,
      ref: this.pickerRef
    });
  };
  return PickerUtilize;
}(Component);
PickerUtilize.defaultProps = {
  buttonComponent: null,
  buttonProps: {},
  /**
   * Time in ms that delays picker interaction in order
   * to let animations complete first.
   */
  clickDelay: 150,
  hasButton: true,
  sheetProps: {}
};
export default props => /*#__PURE__*/_jsx(ViewContext.Consumer, {
  children: ({
    setAriaHidden
  }) => /*#__PURE__*/_jsx(PickerUtilize, {
    ...props,
    setViewAriaHidden: setAriaHidden
  })
});