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

Generic block editor.

/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { Button, ColorIndicator, Dropdown, FlexItem, __experimentalDropdownContentWrapper as DropdownContentWrapper, __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
import { useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { reset as resetIcon } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import ColorGradientControl from './control';

// When the `ColorGradientSettingsDropdown` controls are being rendered to a
// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const WithToolsPanelItem = ({
  setting,
  children,
  panelId,
  ...props
}) => {
  const clearValue = () => {
    if (setting.colorValue) {
      setting.onColorChange();
    } else if (setting.gradientValue) {
      setting.onGradientChange();
    }
  };
  return /*#__PURE__*/_jsx(ToolsPanelItem, {
    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: children
  });
};
const LabeledColorIndicator = ({
  colorValue,
  label
}) => /*#__PURE__*/_jsxs(HStack, {
  justify: "flex-start",
  children: [/*#__PURE__*/_jsx(ColorIndicator, {
    className: "block-editor-panel-color-gradient-settings__color-indicator",
    colorValue: colorValue
  }), /*#__PURE__*/_jsx(FlexItem, {
    className: "block-editor-panel-color-gradient-settings__color-name",
    title: label,
    children: 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 {
    clearable,
    colorValue,
    gradientValue,
    onColorChange,
    onGradientChange,
    label
  } = settings;
  const colorButtonRef = useRef(undefined);
  const toggleProps = {
    onClick: onToggle,
    className: clsx('block-editor-panel-color-gradient-settings__dropdown', {
      'is-open': isOpen
    }),
    'aria-expanded': isOpen,
    ref: colorButtonRef
  };
  const clearValue = () => {
    if (colorValue) {
      onColorChange();
    } else if (gradientValue) {
      onGradientChange();
    }
  };
  const value = colorValue !== null && colorValue !== void 0 ? colorValue : gradientValue;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Button, {
      __next40pxDefaultSize: true,
      ...toggleProps,
      children: /*#__PURE__*/_jsx(LabeledColorIndicator, {
        colorValue: value,
        label: label
      })
    }), clearable && value && /*#__PURE__*/_jsx(Button, {
      __next40pxDefaultSize: true,
      label: __('Reset'),
      className: "block-editor-panel-color-gradient-settings__reset",
      size: "small",
      icon: resetIcon,
      onClick: () => {
        clearValue();
        if (isOpen) {
          onToggle();
        }
        // Return focus to parent button
        colorButtonRef.current?.focus();
      }
    })]
  });
};

// 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
export default function ColorGradientSettingsDropdown({
  colors,
  disableCustomColors,
  disableCustomGradients,
  enableAlpha,
  gradients,
  settings,
  __experimentalIsRenderedInSidebar,
  ...props
}) {
  let popoverProps;
  if (__experimentalIsRenderedInSidebar) {
    popoverProps = {
      placement: 'left-start',
      offset: 36,
      shift: true
    };
  }
  return /*#__PURE__*/_jsx(_Fragment, {
    children: settings.map((setting, index) => {
      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 = {
        clearable: setting.clearable,
        label: setting.label,
        colorValue: setting.colorValue,
        gradientValue: setting.gradientValue,
        onColorChange: setting.onColorChange,
        onGradientChange: setting.onGradientChange
      };
      return setting &&
      /*#__PURE__*/
      // If not in an `ItemGroup` wrap the dropdown in a
      // `ToolsPanelItem`
      _jsx(WithToolsPanelItem, {
        setting: setting,
        ...props,
        children: /*#__PURE__*/_jsx(Dropdown, {
          popoverProps: popoverProps,
          className: "block-editor-tools-panel-color-gradient-settings__dropdown",
          renderToggle: renderToggle(toggleSettings),
          renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {
            paddingSize: "none",
            children: /*#__PURE__*/_jsx("div", {
              className: "block-editor-panel-color-gradient-settings__dropdown-content",
              children: /*#__PURE__*/_jsx(ColorGradientControl, {
                ...controlProps
              })
            })
          })
        })
      }, index);
    })
  });
}
//# sourceMappingURL=dropdown.js.map