@wordpress/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("@wordpress/element");

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

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

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
const TAB_COLOR = {
  name: 'color',
  title: 'Solid',
  value: 'color'
};
const TAB_GRADIENT = {
  name: 'gradient',
  title: 'Gradient',
  value: 'gradient'
};
const TABS_SETTINGS = [TAB_COLOR, TAB_GRADIENT];

function ColorGradientControlInner({
  colors,
  gradients,
  disableCustomColors,
  disableCustomGradients,
  __experimentalIsRenderedInSidebar,
  className,
  label,
  onColorChange,
  onGradientChange,
  colorValue,
  gradientValue,
  clearable,
  showTitle = true,
  enableAlpha,
  headingLevel
}) {
  const canChooseAColor = onColorChange && (colors && colors.length > 0 || !disableCustomColors);
  const canChooseAGradient = onGradientChange && (gradients && gradients.length > 0 || !disableCustomGradients);

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

  const tabPanels = {
    [TAB_COLOR.value]: (0, _element.createElement)(_components.ColorPalette, {
      value: colorValue,
      onChange: canChooseAGradient ? newColor => {
        onColorChange(newColor);
        onGradientChange();
      } : onColorChange,
      colors,
      disableCustomColors,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      clearable: clearable,
      enableAlpha: enableAlpha,
      headingLevel: headingLevel
    }),
    [TAB_GRADIENT.value]: (0, _element.createElement)(_components.GradientPicker, {
      __nextHasNoMargin: true,
      value: gradientValue,
      onChange: canChooseAColor ? newGradient => {
        onGradientChange(newGradient);
        onColorChange();
      } : onGradientChange,
      gradients,
      disableCustomGradients,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      clearable: clearable,
      headingLevel: headingLevel
    })
  };

  const renderPanelType = type => (0, _element.createElement)("div", {
    className: "block-editor-color-gradient-control__panel"
  }, tabPanels[type]);

  return (0, _element.createElement)(_components.BaseControl, {
    __nextHasNoMarginBottom: true,
    className: (0, _classnames.default)('block-editor-color-gradient-control', className)
  }, (0, _element.createElement)("fieldset", {
    className: "block-editor-color-gradient-control__fieldset"
  }, (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.TabPanel, {
    className: "block-editor-color-gradient-control__tabs",
    tabs: TABS_SETTINGS,
    initialTabName: gradientValue ? TAB_GRADIENT.value : !!canChooseAColor && TAB_COLOR.value
  }, tab => renderPanelType(tab.value)), !canChooseAGradient && renderPanelType(TAB_COLOR.value), !canChooseAColor && renderPanelType(TAB_GRADIENT.value))));
}

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 (colorsAndGradientKeys.every(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