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

Generic block editor.

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

var _components = require("@gechiui/components");

var _i18n = require("@gechiui/i18n");

var _useSetting = _interopRequireDefault(require("../use-setting"));

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
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 && (!(0, _lodash.isEmpty)(colors) || !disableCustomColors);
  const canChooseAGradient = onGradientChange && (!(0, _lodash.isEmpty)(gradients) || !disableCustomGradients);
  const [currentTab, setCurrentTab] = (0, _element.useState)(gradientValue ? 'gradient' : !!canChooseAColor && 'color');

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

  return (0, _element.createElement)(_components.BaseControl, {
    className: (0, _classnames.default)('block-editor-color-gradient-control', className)
  }, (0, _element.createElement)("fieldset", null, (0, _element.createElement)(_components.__experimentalVStack, {
    spacing: 1
  }, showTitle && (0, _element.createElement)("legend", null, (0, _element.createElement)("div", {
    className: "block-editor-color-gradient-control__color-indicator"
  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, null, label))), canChooseAColor && canChooseAGradient && (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
    value: currentTab,
    onChange: setCurrentTab,
    label: (0, _i18n.__)('选择颜色类型'),
    hideLabelFromVision: true,
    isBlock: true
  }, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
    value: "color",
    label: (0, _i18n.__)('纯色')
  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
    value: "gradient",
    label: (0, _i18n.__)('渐变色')
  })), (currentTab === 'color' || !canChooseAGradient) && (0, _element.createElement)(_components.ColorPalette, {
    value: colorValue,
    onChange: canChooseAGradient ? newColor => {
      onColorChange(newColor);
      onGradientChange();
    } : onColorChange,
    colors,
    disableCustomColors,
    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
    clearable: clearable,
    enableAlpha: enableAlpha
  }), (currentTab === 'gradient' || !canChooseAColor) && (0, _element.createElement)(_components.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 = (0, _useSetting.default)('color.palette');
  colorGradientSettings.gradients = (0, _useSetting.default)('color.gradients');
  colorGradientSettings.disableCustomColors = !(0, _useSetting.default)('color.custom');
  colorGradientSettings.disableCustomGradients = !(0, _useSetting.default)('color.customGradient');
  return (0, _element.createElement)(ColorGradientControlInner, (0, _extends2.default)({}, colorGradientSettings, props));
}

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

  return (0, _element.createElement)(ColorGradientControlSelect, props);
}

var _default = ColorGradientControl;
exports.default = _default;
//# sourceMappingURL=control.js.map