@shopgate/engage/product/components/Characteristics/Characteristic/index.js

Shopgate's ENGAGE library.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Transition from 'react-transition-group/Transition';
import { ResponsiveContainer, ArrowDropIcon } from '@shopgate/engage/components';
import Sheet from "./components/Sheet";
import styles from "./style";
import transition from "../transition";

/**
 * A single characteristic.
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
let Characteristic = /*#__PURE__*/function (_PureComponent) {
  /**
   * @param {Object} props The component props
   */
  function Characteristic(props) {
    var _this;
    _this = _PureComponent.call(this, props) || this;
    /**
     * @param {string} defaultLabel The default button label.
     * @return {string}
     */
    _this.getButtonLabel = defaultLabel => {
      if (!_this.props.selected) {
        return defaultLabel;
      }
      const value = _this.props.values.find(val => val.id === _this.props.selected);
      return value.label;
    };
    /**
     * @param {Object} event The event object.
     */
    _this.handleButtonClick = event => {
      event.preventDefault();
      if (_this.props.disabled) {
        return;
      }
      _this.setState({
        sheet: true
      });
    };
    /**
     * @param {string} valueId The ID of the selected value.
     */
    _this.handleItemSelection = valueId => {
      _this.props.select({
        id: _this.props.id,
        value: valueId
      });
      _this.closeSheet();
    };
    _this.closeSheet = () => {
      _this.setState({
        sheet: false
      });
    };
    _this.sheetDidClose = () => {
      if (_this.props.charRef && _this.props.charRef.current) {
        // Focus the element that triggered the CharacteristicsSheet after it closes
        _this.props.charRef.current.focus();
      }
    };
    _this.removeHighlight = () => {
      _this.setState({
        highlight: false
      });
    };
    /**
     * Renders the transition contents.
     * @param {string} state The current transition state.
     * @returns {JSX}
     */
    _this.transitionRenderer = state => {
      const {
        __
      } = _this.context.i18n();
      const {
        disabled,
        selected,
        charRef,
        label
      } = _this.props;
      const translatedLabel = __('product.pick_an_attribute', [label]);
      const buttonLabel = _this.getButtonLabel(translatedLabel);
      const classes = classNames(styles.button, {
        [styles.buttonDisabled]: disabled
      }, 'theme__product__characteristic');
      return /*#__PURE__*/_jsxs("div", {
        role: "button",
        "aria-disabled": disabled,
        "aria-haspopup": !disabled,
        tabIndex: 0,
        className: classes,
        onClick: _this.handleButtonClick,
        onKeyDown: () => {},
        ref: charRef,
        style: transition[state],
        "data-test-id": label,
        children: [selected && /*#__PURE__*/_jsx("div", {
          className: `${styles.label} theme__product__characteristic__label`,
          children: label
        }), /*#__PURE__*/_jsx("div", {
          className: `${styles.selection} theme__product__characteristic__selection`,
          ...(selected && {
            'data-selected': true
          }),
          children: buttonLabel
        }), /*#__PURE__*/_jsx(ResponsiveContainer, {
          breakpoint: ">xs",
          webOnly: true,
          children: /*#__PURE__*/_jsx("div", {
            className: styles.arrow,
            children: /*#__PURE__*/_jsx(ArrowDropIcon, {})
          })
        })]
      });
    };
    _this.state = {
      highlight: false,
      sheet: false
    };
    return _this;
  }

  /**
   * @param {Object} nextProps The next component props.
   */
  _inheritsLoose(Characteristic, _PureComponent);
  var _proto = Characteristic.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      highlight: nextProps.highlight
    });
  };
  /**
   * @return {JSX}
   */
  _proto.render = function render() {
    const {
      __
    } = this.context.i18n();
    const {
      id,
      selected,
      values,
      charRef
    } = this.props;
    const displayLabel = this.props.label;
    const translatedLabel = __('product.pick_an_attribute', [displayLabel]);
    return /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Transition, {
        in: this.state.highlight,
        timeout: 500,
        onEntered: this.removeHighlight,
        children: this.transitionRenderer
      }), /*#__PURE__*/_jsx(Sheet, {
        charId: id,
        contextRef: charRef,
        items: values,
        label: translatedLabel,
        onClose: this.closeSheet,
        onDidClose: this.sheetDidClose,
        onSelect: this.handleItemSelection,
        open: this.state.sheet,
        selectedValue: selected
      })]
    });
  };
  return Characteristic;
}(PureComponent);
Characteristic.contextTypes = {
  i18n: PropTypes.func
};
Characteristic.defaultProps = {
  selected: null
};
export default Characteristic;