@gechiui/block-editor/build-module/components/colors-gradients/control.js

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
import { every, isEmpty } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { useState } from '@gechiui/element';
import { BaseControl, __experimentalVStack as VStack, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, ColorPalette, GradientPicker } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import useSetting from '../use-setting';
const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];

function ColorGradientControlInner(_ref) {
  let {
    colors,
    gradients,
    disableCustomColors,
    disableCustomGradients,
    __experimentalHasMultipleOrigins,
    __experimentalIsRenderedInSidebar,
    className,
    label,
    onColorChange,
    onGradientChange,
    colorValue,
    gradientValue,
    clearable,
    showTitle = true,
    enableAlpha
  } = _ref;
  const canChooseAColor = onColorChange && (!isEmpty(colors) || !disableCustomColors);
  const canChooseAGradient = onGradientChange && (!isEmpty(gradients) || !disableCustomGradients);
  const [currentTab, setCurrentTab] = useState(gradientValue ? 'gradient' : !!canChooseAColor && 'color');

  if (!canChooseAColor && !canChooseAGradient) {
    return null;
  }

  return createElement(BaseControl, {
    className: classnames('block-editor-color-gradient-control', className)
  }, createElement("fieldset", null, createElement(VStack, {
    spacing: 1
  }, showTitle && createElement("legend", null, createElement("div", {
    className: "block-editor-color-gradient-control__color-indicator"
  }, createElement(BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && createElement(ToggleGroupControl, {
    value: currentTab,
    onChange: setCurrentTab,
    label: __('选择颜色类型'),
    hideLabelFromVision: true,
    isBlock: true
  }, createElement(ToggleGroupControlOption, {
    value: "color",
    label: __('纯色')
  }), createElement(ToggleGroupControlOption, {
    value: "gradient",
    label: __('渐变色')
  })), (currentTab === 'color' || !canChooseAGradient) && createElement(ColorPalette, {
    value: colorValue,
    onChange: canChooseAGradient ? newColor => {
      onColorChange(newColor);
      onGradientChange();
    } : onColorChange,
    colors,
    disableCustomColors,
    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
    clearable: clearable,
    enableAlpha: enableAlpha
  }), (currentTab === 'gradient' || !canChooseAColor) && createElement(GradientPicker, {
    value: gradientValue,
    onChange: canChooseAColor ? newGradient => {
      onGradientChange(newGradient);
      onColorChange();
    } : onGradientChange,
    gradients,
    disableCustomGradients,
    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
    clearable: clearable
  }))));
}

function ColorGradientControlSelect(props) {
  const colorGradientSettings = {};
  colorGradientSettings.colors = useSetting('color.palette');
  colorGradientSettings.gradients = useSetting('color.gradients');
  colorGradientSettings.disableCustomColors = !useSetting('color.custom');
  colorGradientSettings.disableCustomGradients = !useSetting('color.customGradient');
  return createElement(ColorGradientControlInner, _extends({}, colorGradientSettings, props));
}

function ColorGradientControl(props) {
  if (every(colorsAndGradientKeys, key => props.hasOwnProperty(key))) {
    return createElement(ColorGradientControlInner, props);
  }

  return createElement(ColorGradientControlSelect, props);
}

export default ColorGradientControl;
//# sourceMappingURL=control.js.map