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

Shopgate's ENGAGE library.

import React, { memo } from 'react';
import PropTypes from 'prop-types';
import noop from 'lodash/noop';
import { css } from 'glamor';
import { useWidgetStyles } from "../../../core";
import SwatchContent from "./SwatchContent";
import { jsx as _jsx } from "react/jsx-runtime";
const WIDGET_ID = '@shopgate/engage/product/VariantSwatch';

/**
 * The variant swatch component.
 * @param {Object} props The component props.
 * @returns {JSX}
 */
const VariantSwatch = ({
  swatch,
  onClick
}) => {
  const styles = useWidgetStyles(WIDGET_ID);
  if (!swatch) {
    return null;
  }
  const classNames = {
    swatch: styles && styles.swatch ? css(styles.swatch).toString() : null,
    item: styles && styles.item ? css(styles.item).toString() : null,
    itemSelected: styles && styles.itemSelected ? css(styles.itemSelected).toString() : null
  };
  return /*#__PURE__*/_jsx(SwatchContent, {
    swatch: swatch,
    classNames: classNames,
    onClick: onClick
  });
};
VariantSwatch.defaultProps = {
  swatch: null,
  onClick: noop
};
export default /*#__PURE__*/memo(VariantSwatch);