wix-style-react/src/Swatches/Swatches.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';

import AddColor from './AddColor';
import Tooltip from '../Tooltip';
import parseColor from 'color';

import { Layout } from '../Layout';

import FillPreview from '../FillPreview';

import { dataHooks } from './constants';

const MINIMUM_GRID_GAP = 6;

/** Color swatches */
const Swatches = props => {
  const {
    colors,
    onClick,
    selected,
    dataHook,
    showClear,
    showClearMessage,
    showAddButton,
    addButtonMessage,
    addButtonIconSize,
    onAdd,
    onChange,
    onCancel,
    columns,
    gap,
  } = props;

  const hexColors = colors.map(color => {
    const maybeColor = parseColor(color);
    return maybeColor ? maybeColor.hex() : color;
  });

  const uniqueColors = Array.from(new Set(hexColors));

  return (
    <Layout
      dataHook={dataHook}
      cols={columns}
      gap={`${Math.max(MINIMUM_GRID_GAP, gap)}px`}
    >
      {showAddButton && (
        <AddColor
          tooltip={addButtonMessage}
          iconSize={addButtonIconSize}
          onAdd={onAdd}
          onChange={onChange}
          onCancel={onCancel}
        />
      )}

      {showClear && (
        <Tooltip
          dataHook={dataHooks.emptyTooltip}
          disabled={!showClearMessage}
          appendTo="window"
          size="small"
          content={showClearMessage}
        >
          <FillPreview
            dataHook={dataHooks.empty}
            onClick={() => onClick('')}
            selected={selected === ''}
          />
        </Tooltip>
      )}

      {uniqueColors.map((color, index) => (
        <FillPreview
          dataHook={dataHooks.swatch}
          key={`${color}-${index}`}
          fill={color}
          onClick={() => onClick(color)}
          selected={selected === color}
        />
      ))}
    </Layout>
  );
};

Swatches.propTypes = {
  /** Defines an array of colors to be shown as swatches. */
  colors: PropTypes.array,

  /** Specifies which color from the list is in a selected state. */
  selected: PropTypes.string,

  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** Defines a callback function for  user click on a swatch. Returns color HEX string representation. */
  onClick: PropTypes.func,

  /** Size of swatches */
  size: PropTypes.oneOf(['small', 'medium']),

  /** Specifies whether to display a ‘No color’ option as a first item on a list or not. */
  showClear: PropTypes.bool,

  /** Defines a message to display on ‘No color’ option hover. `showClear` must be set to true. */
  showClearMessage: PropTypes.node,

  /** Defines a callback function for ‘Add’ button click. Returns color HEX string representation once user selects a color to be added. */
  onAdd: PropTypes.func,

  /** Defines a callback function for color change. Returns color HEX string representation. */
  onChange: PropTypes.func,

  /** Defines a callback function for color picker popover ‘Cancel’ action (user closes it without picking color). */
  onCancel: PropTypes.func,

  /** Specifies whether New color’ button is displayed or not. Add button opens up a color picker. */
  showAddButton: PropTypes.bool,

  /** Specifies a message to display on ‘Add’ button hover. If not provided, the tooltip won’t be displayed. */
  addButtonMessage: PropTypes.string,

  /** Controls the size of a plus icon inside of the add button. */
  addButtonIconSize: PropTypes.oneOf(['small', 'medium']),

  /** Specifies a number of columns in a single row. Default value is 6. */
  columns: PropTypes.number,

  /** Specifies a gap between swatches in pixels. Default value is 12px. */
  gap: PropTypes.number,
};

Swatches.defaultProps = {
  colors: [],
  onClick: () => {},
  selected: '',
  showClearMessage: '',
  columns: 6,
  gap: 12,
};

export default Swatches;