@gechiui/block-editor/build-module/components/color-style-selector/index.js

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { ToolbarButton, Dropdown, ToolbarGroup, SVG, Path } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { DOWN } from '@gechiui/keycodes';

const ColorSelectorSVGIcon = () => createElement(SVG, {
  xmlns: "https://www.w3.org/2000/svg",
  viewBox: "0 0 20 20"
}, createElement(Path, {
  d: "M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z"
}));
/**
 * Color Selector Icon component.
 *
 * @param {Object} props           Component properties.
 * @param {Object} props.style     Style object.
 * @param {string} props.className Class name for component.
 *
 * @return {*} React Icon component.
 */


const ColorSelectorIcon = _ref => {
  let {
    style,
    className
  } = _ref;
  return createElement("div", {
    className: "block-library-colors-selector__icon-container"
  }, createElement("div", {
    className: `${className} block-library-colors-selector__state-selection`,
    style: style
  }, createElement(ColorSelectorSVGIcon, null)));
};
/**
 * Renders the Colors Selector Toolbar with the icon button.
 *
 * @param {Object} props                 Component properties.
 * @param {Object} props.TextColor       Text color component that wraps icon.
 * @param {Object} props.BackgroundColor Background color component that wraps icon.
 *
 * @return {*} React toggle button component.
 */


const renderToggleComponent = _ref2 => {
  let {
    TextColor,
    BackgroundColor
  } = _ref2;
  return _ref3 => {
    let {
      onToggle,
      isOpen
    } = _ref3;

    const openOnArrowDown = event => {
      if (!isOpen && event.keyCode === DOWN) {
        event.preventDefault();
        onToggle();
      }
    };

    return createElement(ToolbarGroup, null, createElement(ToolbarButton, {
      className: "components-toolbar__control block-library-colors-selector__toggle",
      label: __('打开颜色选择器'),
      onClick: onToggle,
      onKeyDown: openOnArrowDown,
      icon: createElement(BackgroundColor, null, createElement(TextColor, null, createElement(ColorSelectorIcon, null)))
    }));
  };
};

const BlockColorsStyleSelector = _ref4 => {
  let {
    children,
    ...other
  } = _ref4;
  return createElement(Dropdown, {
    position: "bottom right",
    className: "block-library-colors-selector",
    contentClassName: "block-library-colors-selector__popover",
    renderToggle: renderToggleComponent(other),
    renderContent: () => children
  });
};

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