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

Shopgate's ENGAGE library.

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

/**
 * A single characteristic swatch type.
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
let Swatch = /*#__PURE__*/function (_PureComponent) {
  /**
   * @param {Object} props The component props
   */
  function Swatch(props) {
    var _this;
    _this = _PureComponent.call(this, props) || this;
    /**
     * @param {string} charLabel The default button label.
     * @return {string}
     */
    _this.getLabel = charLabel => {
      if (!_this.props.selected) {
        return charLabel;
      }
      const value = _this.props.values.find(val => val.id === _this.props.selected);
      return `${charLabel} - ${value.label}`;
    };
    /**
     * @param {string} valueId The ID of the selected value.
     */
    _this.handleItemSelection = valueId => {
      _this.props.select({
        id: _this.props.id,
        value: valueId
      });
    };
    _this.removeHighlight = () => {
      _this.setState({
        highlight: false
      });
    };
    _this.state = {
      highlight: false
    };
    return _this;
  }

  /**
   * @param {Object} nextProps The next component props.
   */
  _inheritsLoose(Swatch, _PureComponent);
  var _proto = Swatch.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      highlight: nextProps.highlight
    });
  };
  /**
   * @return {JSX}
   */
  _proto.render = function render() {
    const {
      id,
      disabled,
      charRef,
      label,
      values
    } = this.props;
    const swatch = {
      id,
      label,
      values
    };
    return /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Transition, {
        in: this.state.highlight,
        timeout: 500,
        onEntered: this.removeHighlight,
        children: state => /*#__PURE__*/_jsx("div", {
          "aria-hidden": true,
          className: classNames(styles.label, {
            [styles.labelDisabled]: disabled
          }),
          ref: charRef,
          style: transition[state],
          "data-test-id": label,
          children: this.getLabel(label)
        })
      }), /*#__PURE__*/_jsx("div", {
        className: styles.items,
        children: /*#__PURE__*/_jsx(VariantSwatch, {
          swatch: swatch,
          onClick: this.handleItemSelection
        })
      })]
    });
  };
  return Swatch;
}(PureComponent);
Swatch.defaultProps = {
  selected: null
};
export default Swatch;