@wix/design-system/dist/cjs/Swatches/Swatches.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
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 _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Swatches/Swatches.jsx",
  _this = void 0;
var MINIMUM_GRID_GAP = 6;

/** Color swatches */
var Swatches = function Swatches(_ref) {
  var _ref$colors = _ref.colors,
    colors = _ref$colors === void 0 ? [] : _ref$colors,
    _ref$onClick = _ref.onClick,
    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
    _ref$selected = _ref.selected,
    selected = _ref$selected === void 0 ? '' : _ref$selected,
    dataHook = _ref.dataHook,
    showClear = _ref.showClear,
    _ref$showClearMessage = _ref.showClearMessage,
    showClearMessage = _ref$showClearMessage === void 0 ? '' : _ref$showClearMessage,
    showAddButton = _ref.showAddButton,
    addButtonMessage = _ref.addButtonMessage,
    addButtonIconSize = _ref.addButtonIconSize,
    onAdd = _ref.onAdd,
    onChange = _ref.onChange,
    onCancel = _ref.onCancel,
    _ref$columns = _ref.columns,
    columns = _ref$columns === void 0 ? 6 : _ref$columns,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? 12 : _ref$gap,
    popoverProps = _ref.popoverProps,
    renderColorPicker = _ref.renderColorPicker;
  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"),
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 40,
      columnNumber: 5
    }
  }, showAddButton && /*#__PURE__*/_react["default"].createElement(_AddColor["default"], {
    tooltip: addButtonMessage,
    iconSize: addButtonIconSize,
    onAdd: onAdd,
    onChange: onChange,
    onCancel: onCancel,
    popoverProps: popoverProps,
    renderColorPicker: renderColorPicker,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 9
    }
  }), showClear && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    dataHook: _constants.dataHooks.emptyTooltip,
    disabled: !showClearMessage,
    appendTo: "window",
    size: "small",
    content: showClearMessage,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(_FillPreview["default"], {
    dataHook: _constants.dataHooks.empty,
    onClick: function onClick() {
      return _onClick('');
    },
    selected: selected === '',
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 11
    }
  })), 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,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 74,
        columnNumber: 9
      }
    });
  }));
};
Swatches.displayName = 'Swatches';
var _default = exports["default"] = Swatches;