@shopgate/engage/product/components/Swatch/SwatchContent.js

Shopgate's ENGAGE library.

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import noop from 'lodash/noop';
import cls from 'classnames';
import { PRODUCT_SWATCH } from '@shopgate/pwa-common-commerce/product/constants/Portals';
import { SurroundPortals } from "../../../components";
import { swatchClass, itemClass, itemSelectedClass } from "./style";

/**
 * The swatch content component.
 * @param {Object} props The component props.
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const SwatchContent = ({
  swatch,
  classNames,
  onClick
}) => {
  if (!swatch) {
    return null;
  }
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: PRODUCT_SWATCH,
    portalProps: {
      swatch
    },
    children: /*#__PURE__*/_jsx("ul", {
      className: cls(swatchClass, {
        [classNames.swatch]: !!classNames.swatch
      }),
      children: swatch.values.map(value => /*#__PURE__*/_jsx("li", {
        "aria-hidden": true,
        onClick: () => onClick(value.id),
        className: cls(itemClass, {
          [classNames.item]: !!classNames.item,
          [itemSelectedClass]: !!value.selected,
          [classNames.itemSelected]: !!value.selected
        }),
        style: {
          ...(value.swatch.color && {
            backgroundColor: value.swatch.color
          }),
          ...(value.swatch.imageUrl && {
            backgroundImage: `url(${value.swatch.imageUrl})`
          })
        }
      }, value.id))
    })
  });
};
SwatchContent.defaultProps = {
  classNames: {},
  swatch: null,
  onClick: noop
};
export default /*#__PURE__*/memo(SwatchContent);