@shopgate/engage/product/components/Swatches/Swatches.js

Shopgate's ENGAGE library.

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { PRODUCT_SWATCHES } from '@shopgate/pwa-common-commerce/product/constants/Portals';
import { SurroundPortals } from "../../../components";
import { isBeta, useWidgetSettings } from "../../../core";
import { Swatch } from "../Swatch";
import { swatchesClass } from "./style";
import connect from "./connector";
import { jsx as _jsx } from "react/jsx-runtime";
const WIDGET_ID = '@shopgate/engage/product/Swatches';

/**
 * Renders only product swatches from a list of characteristics.
 * @param {Object} props The component props.
 * @returns {JSX}
 */
const Swatches = ({
  productId,
  characteristics
}) => {
  const settings = useWidgetSettings(WIDGET_ID);
  if (!isBeta()) {
    return null;
  }
  if (!characteristics) {
    return null;
  }
  let swatches = characteristics.filter(c => c.swatch === true);
  if (settings.filter && settings.filter.length) {
    swatches = swatches.filter(swatch => settings.filter.includes(swatch.id));
  }
  if (!swatches) {
    return null;
  }
  if (settings.maxItemCount) {
    swatches = swatches.map(swatch => ({
      ...swatch,
      values: swatch.values.slice(0, settings.maxItemCount)
    }));
  }
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: PRODUCT_SWATCHES,
    portalProps: {
      characteristics
    },
    children: /*#__PURE__*/_jsx("div", {
      className: swatchesClass,
      children: swatches.map(swatch => /*#__PURE__*/_jsx(Swatch, {
        swatch: swatch
      }, `${productId}.${swatch.id}`))
    })
  });
};
Swatches.defaultProps = {
  characteristics: null
};
export default connect(/*#__PURE__*/memo(Swatches));