@shopgate/engage/product/components/Swatch/SwatchContent.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);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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}
 */var SwatchContent=function SwatchContent(_ref){var swatch=_ref.swatch,classNames=_ref.classNames,_onClick=_ref.onClick;if(!swatch){return null;}return React.createElement(SurroundPortals,{portalName:PRODUCT_SWATCH,portalProps:{swatch:swatch}},React.createElement("ul",{className:cls(swatchClass,_defineProperty({},classNames.swatch,!!classNames.swatch))},swatch.values.map(function(value){return React.createElement("li",{"aria-hidden":true,key:value.id,onClick:function onClick(){return _onClick(value.id);},className:cls(itemClass,_defineProperty(_defineProperty(_defineProperty({},classNames.item,!!classNames.item),itemSelectedClass,!!value.selected),classNames.itemSelected,!!value.selected)),style:_extends({},value.swatch.color&&{backgroundColor:value.swatch.color},{},value.swatch.imageUrl&&{backgroundImage:"url(".concat(value.swatch.imageUrl,")")})});})));};SwatchContent.defaultProps={classNames:{},swatch:null,onClick:noop};export default memo(SwatchContent);