@wordpress/block-editor/build/components/colors-gradients/dropdown.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ColorGradientSettingsDropdown;

var _element = require("@wordpress/element");

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

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

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

var _control = _interopRequireDefault(require("./control"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// When the `ColorGradientSettingsDropdown` controls are being rendered to a
// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
const WithToolsPanelItem = ({
  setting,
  children,
  panelId,
  ...props
}) => {
  const clearValue = () => {
    if (setting.colorValue) {
      setting.onColorChange();
    } else if (setting.gradientValue) {
      setting.onGradientChange();
    }
  };

  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, (0, _extends2.default)({
    hasValue: () => {
      return !!setting.colorValue || !!setting.gradientValue;
    },
    label: setting.label,
    onDeselect: clearValue,
    isShownByDefault: setting.isShownByDefault !== undefined ? setting.isShownByDefault : true
  }, props, {
    className: "block-editor-tools-panel-color-gradient-settings__item",
    panelId: panelId // Pass resetAllFilter if supplied due to rendering via SlotFill
    // into parent ToolsPanel.
    ,
    resetAllFilter: setting.resetAllFilter
  }), children);
};

const LabeledColorIndicator = ({
  colorValue,
  label
}) => (0, _element.createElement)(_components.__experimentalHStack, {
  justify: "flex-start"
}, (0, _element.createElement)(_components.ColorIndicator, {
  className: "block-editor-panel-color-gradient-settings__color-indicator",
  colorValue: colorValue
}), (0, _element.createElement)(_components.FlexItem, {
  className: "block-editor-panel-color-gradient-settings__color-name",
  title: label
}, label)); // Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
// or as a `Button` if it isn't e.g. the controls are being rendered in
// a `ToolsPanel`.


const renderToggle = settings => ({
  onToggle,
  isOpen
}) => {
  const {
    colorValue,
    label
  } = settings;
  const toggleProps = {
    onClick: onToggle,
    className: (0, _classnames.default)('block-editor-panel-color-gradient-settings__dropdown', {
      'is-open': isOpen
    }),
    'aria-expanded': isOpen
  };
  return (0, _element.createElement)(_components.Button, toggleProps, (0, _element.createElement)(LabeledColorIndicator, {
    colorValue: colorValue,
    label: label
  }));
}; // Renders a collection of color controls as dropdowns. Depending upon the
// context in which these dropdowns are being rendered, they may be wrapped
// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
// a regular `Button`.
//
// For more context see: https://github.com/WordPress/gutenberg/pull/40084


function ColorGradientSettingsDropdown({
  colors,
  disableCustomColors,
  disableCustomGradients,
  enableAlpha,
  gradients,
  settings,
  __experimentalIsRenderedInSidebar,
  ...props
}) {
  let popoverProps;

  if (__experimentalIsRenderedInSidebar) {
    popoverProps = {
      placement: 'left-start',
      offset: 36,
      shift: true
    };
  }

  return (0, _element.createElement)(_element.Fragment, null, settings.map((setting, index) => {
    var _setting$gradientValu;

    const controlProps = {
      clearable: false,
      colorValue: setting.colorValue,
      colors,
      disableCustomColors,
      disableCustomGradients,
      enableAlpha,
      gradientValue: setting.gradientValue,
      gradients,
      label: setting.label,
      onColorChange: setting.onColorChange,
      onGradientChange: setting.onGradientChange,
      showTitle: false,
      __experimentalIsRenderedInSidebar,
      ...setting
    };
    const toggleSettings = {
      colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue,
      label: setting.label
    };
    return setting && // If not in an `ItemGroup` wrap the dropdown in a
    // `ToolsPanelItem`
    (0, _element.createElement)(WithToolsPanelItem, (0, _extends2.default)({
      key: index,
      setting: setting
    }, props), (0, _element.createElement)(_components.Dropdown, {
      popoverProps: popoverProps,
      className: "block-editor-tools-panel-color-gradient-settings__dropdown",
      renderToggle: renderToggle(toggleSettings),
      renderContent: () => (0, _element.createElement)(_components.__experimentalDropdownContentWrapper, {
        paddingSize: "none"
      }, (0, _element.createElement)("div", {
        className: "block-editor-panel-color-gradient-settings__dropdown-content"
      }, (0, _element.createElement)(_control.default, controlProps)))
    }));
  }));
}
//# sourceMappingURL=dropdown.js.map