@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 _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _useSettings = require("../use-settings");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  Tabs
} = (0, _lockUnlock.unlock)(_components.privateApis);
const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
const TAB_IDS = {
  color: 'color',
  gradient: '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_IDS.color]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorPalette, {
      value: colorValue,
      onChange: canChooseAGradient ? newColor => {
        onColorChange(newColor);
        onGradientChange();
      } : onColorChange,
      colors,
      disableCustomColors,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      clearable: clearable,
      enableAlpha: enableAlpha,
      headingLevel: headingLevel
    }),
    [TAB_IDS.gradient]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GradientPicker, {
      value: gradientValue,
      onChange: canChooseAColor ? newGradient => {
        onGradientChange(newGradient);
        onColorChange();
      } : onGradientChange,
      gradients,
      disableCustomGradients,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      clearable: clearable,
      headingLevel: headingLevel
    })
  };
  const renderPanelType = type => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "block-editor-color-gradient-control__panel",
    children: tabPanels[type]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
    __nextHasNoMarginBottom: true,
    className: (0, _clsx.default)('block-editor-color-gradient-control', className),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
      className: "block-editor-color-gradient-control__fieldset",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: 1,
        children: [showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: "block-editor-color-gradient-control__color-indicator",
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
              children: label
            })
          })
        }), canChooseAColor && canChooseAGradient && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, {
            defaultTabId: gradientValue ? TAB_IDS.gradient : !!canChooseAColor && TAB_IDS.color,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs.TabList, {
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
                tabId: TAB_IDS.color,
                children: (0, _i18n.__)('Color')
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.Tab, {
                tabId: TAB_IDS.gradient,
                children: (0, _i18n.__)('Gradient')
              })]
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
              tabId: TAB_IDS.color,
              className: "block-editor-color-gradient-control__panel",
              focusable: false,
              children: tabPanels.color
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs.TabPanel, {
              tabId: TAB_IDS.gradient,
              className: "block-editor-color-gradient-control__panel",
              focusable: false,
              children: tabPanels.gradient
            })]
          })
        }), !canChooseAGradient && renderPanelType(TAB_IDS.color), !canChooseAColor && renderPanelType(TAB_IDS.gradient)]
      })
    })
  });
}
function ColorGradientControlSelect(props) {
  const [colors, gradients, customColors, customGradients] = (0, _useSettings.useSettings)('color.palette', 'color.gradients', 'color.custom', 'color.customGradient');
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorGradientControlInner, {
    colors: colors,
    gradients: gradients,
    disableCustomColors: !customColors,
    disableCustomGradients: !customGradients,
    ...props
  });
}
function ColorGradientControl(props) {
  if (colorsAndGradientKeys.every(key => props.hasOwnProperty(key))) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorGradientControlInner, {
      ...props
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorGradientControlSelect, {
    ...props
  });
}
var _default = exports.default = ColorGradientControl;
//# sourceMappingURL=control.js.map