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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _AddColor = _interopRequireDefault(require("./AddColor"));

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var _color = _interopRequireDefault(require("color"));

var _Layout = require("../Layout");

var _FillPreview = _interopRequireDefault(require("../FillPreview"));

var _constants = require("./constants");

var MINIMUM_GRID_GAP = 6;
/** Color swatches */

var Swatches = function Swatches(props) {
  var colors = props.colors,
      _onClick = props.onClick,
      selected = props.selected,
      dataHook = props.dataHook,
      showClear = props.showClear,
      showClearMessage = props.showClearMessage,
      showAddButton = props.showAddButton,
      addButtonMessage = props.addButtonMessage,
      addButtonIconSize = props.addButtonIconSize,
      onAdd = props.onAdd,
      onChange = props.onChange,
      onCancel = props.onCancel,
      columns = props.columns,
      gap = props.gap;
  var hexColors = colors.map(function (color) {
    var maybeColor = (0, _color["default"])(color);
    return maybeColor ? maybeColor.hex() : color;
  });
  var uniqueColors = Array.from(new Set(hexColors));
  return /*#__PURE__*/_react["default"].createElement(_Layout.Layout, {
    dataHook: dataHook,
    cols: columns,
    gap: "".concat(Math.max(MINIMUM_GRID_GAP, gap), "px")
  }, showAddButton && /*#__PURE__*/_react["default"].createElement(_AddColor["default"], {
    tooltip: addButtonMessage,
    iconSize: addButtonIconSize,
    onAdd: onAdd,
    onChange: onChange,
    onCancel: onCancel
  }), showClear && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    dataHook: _constants.dataHooks.emptyTooltip,
    disabled: !showClearMessage,
    appendTo: "window",
    size: "small",
    content: showClearMessage
  }, /*#__PURE__*/_react["default"].createElement(_FillPreview["default"], {
    dataHook: _constants.dataHooks.empty,
    onClick: function onClick() {
      return _onClick('');
    },
    selected: selected === ''
  })), uniqueColors.map(function (color, index) {
    return /*#__PURE__*/_react["default"].createElement(_FillPreview["default"], {
      dataHook: _constants.dataHooks.swatch,
      key: "".concat(color, "-").concat(index),
      fill: color,
      onClick: function onClick() {
        return _onClick(color);
      },
      selected: selected === color
    });
  }));
};

Swatches.propTypes = {
  /** Defines an array of colors to be shown as swatches. */
  colors: _propTypes["default"].array,

  /** Specifies which color from the list is in a selected state. */
  selected: _propTypes["default"].string,

  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes["default"].string,

  /** Defines a callback function for  user click on a swatch. Returns color HEX string representation. */
  onClick: _propTypes["default"].func,

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

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

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

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

  /** Defines a callback function for color change. Returns color HEX string representation. */
  onChange: _propTypes["default"].func,

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

  /** Specifies whether New color’ button is displayed or not. Add button opens up a color picker. */
  showAddButton: _propTypes["default"].bool,

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

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

  /** Specifies a number of columns in a single row. Default value is 6. */
  columns: _propTypes["default"].number,

  /** Specifies a gap between swatches in pixels. Default value is 12px. */
  gap: _propTypes["default"].number
};
Swatches.defaultProps = {
  colors: [],
  onClick: function onClick() {},
  selected: '',
  showClearMessage: '',
  columns: 6,
  gap: 12
};
var _default = Swatches;
exports["default"] = _default;