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

UI components for GeChiUI.

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

/**
 * GeChiUI dependencies
 */
import { useState } from '@gechiui/element';
/**
 * Internal dependencies
 */

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

function ColorOption(_ref) {
  let {
    label,
    value,
    colors,
    disableCustomColors,
    enableAlpha,
    onChange
  } = _ref;
  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, {
    className: "components-color-list-picker__color-picker",
    colors: colors,
    value: value,
    clearable: false,
    onChange: onChange,
    disableCustomColors: disableCustomColors,
    enableAlpha: enableAlpha
  }));
}

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

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