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

UI components for WordPress.

import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import Button from '../button';
import ColorPalette from '../color-palette';
import Swatch from '../swatch';

function ColorOption({
  label,
  value,
  colors,
  onChange
}) {
  const [isOpen, setIsOpen] = useState(false);
  return createElement(Fragment, null, createElement(Button, {
    className: "components-color-list-picker__swatch-button",
    icon: createElement(Swatch, {
      fill: value
    }),
    onClick: () => setIsOpen(prev => !prev)
  }, label), isOpen && createElement(ColorPalette, {
    colors: colors,
    value: value,
    clearable: false,
    onChange: onChange
  }));
}

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

export default ColorListPicker;
//# sourceMappingURL=index.js.map