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

Generic block editor.

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

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

import { __experimentalSpacer as Spacer, ColorIndicator, PanelBody } from '@gechiui/components';
import { sprintf, __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import ColorGradientSettingsDropdown from './dropdown';
import { getColorObjectByColorValue } from '../colors';
import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
import useSetting from '../use-setting';
import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients'; // 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 = __('（%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 = __('（%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 = getColorObjectByColorValue(availableColors || colors, colorValue);
      ariaLabel = sprintf(colorIndicatorAriaLabel, label.toLowerCase(), colorObject && colorObject.name || colorValue);
    } else {
      const gradientObject = __experimentalGetGradientObjectByGradientValue(availableGradients || gradients, colorValue);

      ariaLabel = sprintf(gradientIndicatorAriaLabel, label.toLowerCase(), gradientObject && gradientObject.name || gradientValue);
    }

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

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

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

  const titleElement = createElement("span", {
    className: "block-editor-panel-color-gradient-settings__panel-title"
  }, title, createElement(Indicators, {
    colors: colors,
    gradients: gradients,
    settings: settings
  }));
  return createElement(PanelBody, _extends({
    className: classnames('block-editor-panel-color-gradient-settings', className),
    title: showTitle ? titleElement : undefined
  }, props), createElement(ColorGradientSettingsDropdown, {
    settings: settings,
    colors,
    gradients,
    disableCustomColors,
    disableCustomGradients,
    __experimentalHasMultipleOrigins,
    __experimentalIsRenderedInSidebar,
    enableAlpha
  }), !!children && createElement(Fragment, null, createElement(Spacer, {
    marginY: 4
  }), " ", children));
};

const PanelColorGradientSettingsSingleSelect = props => {
  const colorGradientSettings = useCommonSingleMultipleSelects();
  colorGradientSettings.colors = useSetting('color.palette');
  colorGradientSettings.gradients = useSetting('color.gradients');
  return createElement(PanelColorGradientSettingsInner, _extends({}, colorGradientSettings, props));
};

const PanelColorGradientSettingsMultipleSelect = props => {
  const colorGradientSettings = useMultipleOriginColorsAndGradients();
  return createElement(PanelColorGradientSettingsInner, _extends({}, colorGradientSettings, props));
};

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

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

  return createElement(PanelColorGradientSettingsSingleSelect, props);
};

export default PanelColorGradientSettings;
//# sourceMappingURL=panel-color-gradient-settings.js.map