@wordpress/components/build/color-list-picker/index.js

UI components for WordPress.

"use strict";

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

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

var _element = require("@wordpress/element");

var _button = _interopRequireDefault(require("../button"));

var _colorPalette = _interopRequireDefault(require("../color-palette"));

var _swatch = _interopRequireDefault(require("../swatch"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function ColorOption({
  label,
  value,
  colors,
  onChange
}) {
  const [isOpen, setIsOpen] = (0, _element.useState)(false);
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
    className: "components-color-list-picker__swatch-button",
    icon: (0, _element.createElement)(_swatch.default, {
      fill: value
    }),
    onClick: () => setIsOpen(prev => !prev)
  }, label), isOpen && (0, _element.createElement)(_colorPalette.default, {
    colors: colors,
    value: value,
    clearable: false,
    onChange: onChange
  }));
}

function ColorListPicker({
  colors,
  labels,
  value = [],
  onChange
}) {
  return (0, _element.createElement)("div", {
    className: "components-color-list-picker"
  }, labels.map((label, index) => (0, _element.createElement)(ColorOption, {
    key: index,
    label: label,
    value: value[index],
    colors: colors,
    onChange: newColor => {
      const newColors = value.slice();
      newColors[index] = newColor;
      onChange(newColors);
    }
  })));
}

var _default = ColorListPicker;
exports.default = _default;
//# sourceMappingURL=index.js.map