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

UI components for GeChiUI.

"use strict";

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

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

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

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

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

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

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function ColorOption(_ref) {
  let {
    label,
    value,
    colors,
    disableCustomColors,
    enableAlpha,
    onChange
  } = _ref;
  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, {
    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 (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,
    disableCustomColors: disableCustomColors,
    enableAlpha: enableAlpha,
    onChange: newColor => {
      const newColors = value.slice();
      newColors[index] = newColor;
      onChange(newColors);
    }
  })));
}

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