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

Shopgate's ENGAGE library.

function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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";var WIDGET_ID='@shopgate/engage/product/Swatches';/**
 * Renders only product swatches from a list of characteristics.
 * @param {Object} props The component props.
 * @returns {JSX}
 */var Swatches=function Swatches(_ref){var productId=_ref.productId,characteristics=_ref.characteristics;if(!isBeta()){return null;}if(!characteristics){return null;}var settings=useWidgetSettings(WIDGET_ID);var swatches=characteristics.filter(function(c){return c.swatch===true;});if(settings.filter&&settings.filter.length){swatches=swatches.filter(function(swatch){return settings.filter.includes(swatch.id);});}if(!swatches){return null;}if(settings.maxItemCount){swatches=swatches.map(function(swatch){return _extends({},swatch,{values:swatch.values.slice(0,settings.maxItemCount)});});}return React.createElement(SurroundPortals,{portalName:PRODUCT_SWATCHES,portalProps:{characteristics:characteristics}},React.createElement("div",{className:swatchesClass},swatches.map(function(swatch){return React.createElement(Swatch,{key:"".concat(productId,".").concat(swatch.id),swatch:swatch});})));};Swatches.defaultProps={characteristics:null};export default connect(memo(Swatches));