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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = 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 _PopoverCommon = require("../common/PropTypes/PopoverCommon");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Swatches/Swatches.js";
var MINIMUM_GRID_GAP = 6;

/** Color swatches */
var Swatches = _ref => {
  var {
    colors = [],
    onClick: _onClick = () => {},
    selected = '',
    dataHook,
    showClear,
    showClearMessage = '',
    showAddButton,
    addButtonMessage,
    addButtonIconSize,
    onAdd,
    onChange,
    onCancel,
    columns = 6,
    gap = 12,
    popoverProps
  } = _ref;
  var hexColors = colors.map(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"),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 43,
      columnNumber: 5
    }
  }, showAddButton && /*#__PURE__*/_react.default.createElement(_AddColor.default, {
    tooltip: addButtonMessage,
    iconSize: addButtonIconSize,
    onAdd: onAdd,
    onChange: onChange,
    onCancel: onCancel,
    popoverProps: popoverProps,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 49,
      columnNumber: 9
    }
  }), showClear && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
    dataHook: _constants.dataHooks.emptyTooltip,
    disabled: !showClearMessage,
    appendTo: "window",
    size: "small",
    content: showClearMessage,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_FillPreview.default, {
    dataHook: _constants.dataHooks.empty,
    onClick: () => _onClick(''),
    selected: selected === '',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67,
      columnNumber: 11
    }
  })), uniqueColors.map((color, index) => /*#__PURE__*/_react.default.createElement(_FillPreview.default, {
    dataHook: _constants.dataHooks.swatch,
    key: "".concat(color, "-").concat(index),
    fill: color,
    onClick: () => _onClick(color),
    selected: selected === color,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 9
    }
  })));
};
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,
  /** Props that get passed to New color popover. */
  popoverProps: _propTypes.default.shape(_PopoverCommon.PopoverCommonProps)
};
var _default = exports.default = Swatches;
//# sourceMappingURL=Swatches.js.map