@gechiui/block-editor/build/components/colors-gradients/panel-color-gradient-settings.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.PanelColorGradientSettingsInner = 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 _dropdown = _interopRequireDefault(require("./dropdown"));

var _colors = require("../colors");

var _gradients = require("../gradients");

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

var _useCommonSingleMultipleSelects = _interopRequireDefault(require("./use-common-single-multiple-selects"));

var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("./use-multiple-origin-colors-and-gradients"));

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
const colorIndicatorAriaLabel = (0, _i18n.__)('（%s：颜色%s）'); // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)

const gradientIndicatorAriaLabel = (0, _i18n.__)('（%s：渐变色%s）');
const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];

const Indicators = _ref => {
  let {
    colors,
    gradients,
    settings
  } = _ref;
  return settings.map((_ref2, index) => {
    let {
      colorValue,
      gradientValue,
      label,
      colors: availableColors,
      gradients: availableGradients
    } = _ref2;

    if (!colorValue && !gradientValue) {
      return null;
    }

    let ariaLabel;

    if (colorValue) {
      const colorObject = (0, _colors.getColorObjectByColorValue)(availableColors || colors, colorValue);
      ariaLabel = (0, _i18n.sprintf)(colorIndicatorAriaLabel, label.toLowerCase(), colorObject && colorObject.name || colorValue);
    } else {
      const gradientObject = (0, _gradients.__experimentalGetGradientObjectByGradientValue)(availableGradients || gradients, colorValue);
      ariaLabel = (0, _i18n.sprintf)(gradientIndicatorAriaLabel, label.toLowerCase(), gradientObject && gradientObject.name || gradientValue);
    }

    return (0, _element.createElement)(_components.ColorIndicator, {
      key: index,
      colorValue: colorValue || gradientValue,
      "aria-label": ariaLabel
    });
  });
};

const PanelColorGradientSettingsInner = _ref3 => {
  let {
    className,
    colors,
    gradients,
    disableCustomColors,
    disableCustomGradients,
    children,
    settings,
    title,
    showTitle = true,
    __experimentalHasMultipleOrigins,
    __experimentalIsRenderedInSidebar,
    enableAlpha,
    ...props
  } = _ref3;

  if ((0, _lodash.isEmpty)(colors) && (0, _lodash.isEmpty)(gradients) && disableCustomColors && disableCustomGradients && (0, _lodash.every)(settings, setting => (0, _lodash.isEmpty)(setting.colors) && (0, _lodash.isEmpty)(setting.gradients) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
    return null;
  }

  const titleElement = (0, _element.createElement)("span", {
    className: "block-editor-panel-color-gradient-settings__panel-title"
  }, title, (0, _element.createElement)(Indicators, {
    colors: colors,
    gradients: gradients,
    settings: settings
  }));
  return (0, _element.createElement)(_components.PanelBody, (0, _extends2.default)({
    className: (0, _classnames.default)('block-editor-panel-color-gradient-settings', className),
    title: showTitle ? titleElement : undefined
  }, props), (0, _element.createElement)(_dropdown.default, {
    settings: settings,
    colors,
    gradients,
    disableCustomColors,
    disableCustomGradients,
    __experimentalHasMultipleOrigins,
    __experimentalIsRenderedInSidebar,
    enableAlpha
  }), !!children && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
    marginY: 4
  }), " ", children));
};

exports.PanelColorGradientSettingsInner = PanelColorGradientSettingsInner;

const PanelColorGradientSettingsSingleSelect = props => {
  const colorGradientSettings = (0, _useCommonSingleMultipleSelects.default)();
  colorGradientSettings.colors = (0, _useSetting.default)('color.palette');
  colorGradientSettings.gradients = (0, _useSetting.default)('color.gradients');
  return (0, _element.createElement)(PanelColorGradientSettingsInner, (0, _extends2.default)({}, colorGradientSettings, props));
};

const PanelColorGradientSettingsMultipleSelect = props => {
  const colorGradientSettings = (0, _useMultipleOriginColorsAndGradients.default)();
  return (0, _element.createElement)(PanelColorGradientSettingsInner, (0, _extends2.default)({}, colorGradientSettings, props));
};

const PanelColorGradientSettings = props => {
  if ((0, _lodash.every)(colorsAndGradientKeys, key => props.hasOwnProperty(key))) {
    return (0, _element.createElement)(PanelColorGradientSettingsInner, props);
  }

  if (props.__experimentalHasMultipleOrigins) {
    return (0, _element.createElement)(PanelColorGradientSettingsMultipleSelect, props);
  }

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

var _default = PanelColorGradientSettings;
exports.default = _default;
//# sourceMappingURL=panel-color-gradient-settings.js.map