@wordpress/components/build-module/tools-panel/tools-panel-header/component.js

UI components for WordPress.

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
import { speak } from '@wordpress/a11y';
import { check, moreVertical, plus } from '@wordpress/icons';
import { __, _x, sprintf } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import DropdownMenu from '../../dropdown-menu';
import MenuGroup from '../../menu-group';
import MenuItem from '../../menu-item';
import { HStack } from '../../h-stack';
import { Heading } from '../../heading';
import { useToolsPanelHeader } from './hook';
import { contextConnect } from '../../ui/context';
import { ResetLabel } from '../styles';

const DefaultControlsGroup = _ref => {
  let {
    itemClassName,
    items,
    toggleItem
  } = _ref;

  if (!items.length) {
    return null;
  }

  const resetSuffix = createElement(ResetLabel, {
    "aria-hidden": true
  }, __('Reset'));
  return createElement(MenuGroup, {
    label: __('Defaults')
  }, items.map(_ref2 => {
    let [label, hasValue] = _ref2;

    if (hasValue) {
      return createElement(MenuItem, {
        key: label,
        className: itemClassName,
        role: "menuitem",
        label: sprintf( // translators: %s: The name of the control being reset e.g. "Padding".
        __('Reset %s'), label),
        onClick: () => {
          toggleItem(label);
          speak(sprintf( // translators: %s: The name of the control being reset e.g. "Padding".
          __('%s reset to default'), label), 'assertive');
        },
        suffix: resetSuffix
      }, label);
    }

    return createElement(MenuItem, {
      key: label,
      className: itemClassName,
      role: "menuitemcheckbox",
      isSelected: true,
      "aria-disabled": true
    }, label);
  }));
};

const OptionalControlsGroup = _ref3 => {
  let {
    items,
    toggleItem
  } = _ref3;

  if (!items.length) {
    return null;
  }

  return createElement(MenuGroup, {
    label: __('Tools')
  }, items.map(_ref4 => {
    let [label, isSelected] = _ref4;
    const itemLabel = isSelected ? sprintf( // translators: %s: The name of the control being hidden and reset e.g. "Padding".
    __('Hide and reset %s'), label) : sprintf( // translators: %s: The name of the control to display e.g. "Padding".
    __('Show %s'), label);
    return createElement(MenuItem, {
      key: label,
      icon: isSelected && check,
      isSelected: isSelected,
      label: itemLabel,
      onClick: () => {
        if (isSelected) {
          speak(sprintf( // translators: %s: The name of the control being reset e.g. "Padding".
          __('%s hidden and reset to default'), label), 'assertive');
        } else {
          speak(sprintf( // translators: %s: The name of the control being reset e.g. "Padding".
          __('%s is now visible'), label), 'assertive');
        }

        toggleItem(label);
      },
      role: "menuitemcheckbox"
    }, label);
  }));
};

const ToolsPanelHeader = (props, forwardedRef) => {
  const {
    areAllOptionalControlsHidden,
    defaultControlsItemClassName,
    dropdownMenuClassName,
    hasMenuItems,
    headingClassName,
    headingLevel = 2,
    label: labelText,
    menuItems,
    resetAll,
    toggleItem,
    ...headerProps
  } = useToolsPanelHeader(props);

  if (!labelText) {
    return null;
  }

  const defaultItems = Object.entries((menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) || {});
  const optionalItems = Object.entries((menuItems === null || menuItems === void 0 ? void 0 : menuItems.optional) || {});
  const dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;
  const dropDownMenuLabelText = sprintf( // translators: %s: The name of the tool e.g. "Color" or "Typography".
  _x('%s options', 'Button label to reveal tool panel options'), labelText);
  const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? __('All options are currently hidden') : undefined;
  const canResetAll = [...defaultItems, ...optionalItems].some(_ref5 => {
    let [, isSelected] = _ref5;
    return isSelected;
  });
  return createElement(HStack, _extends({}, headerProps, {
    ref: forwardedRef
  }), createElement(Heading, {
    level: headingLevel,
    className: headingClassName
  }, labelText), hasMenuItems && createElement(DropdownMenu, {
    icon: dropDownMenuIcon,
    label: dropDownMenuLabelText,
    menuProps: {
      className: dropdownMenuClassName
    },
    toggleProps: {
      isSmall: true,
      describedBy: dropdownMenuDescriptionText
    }
  }, () => createElement(Fragment, null, createElement(DefaultControlsGroup, {
    items: defaultItems,
    toggleItem: toggleItem,
    itemClassName: defaultControlsItemClassName
  }), createElement(OptionalControlsGroup, {
    items: optionalItems,
    toggleItem: toggleItem
  }), createElement(MenuGroup, null, createElement(MenuItem, {
    "aria-disabled": !canResetAll,
    variant: 'tertiary',
    onClick: () => {
      if (canResetAll) {
        resetAll();
        speak(__('All options reset'), 'assertive');
      }
    }
  }, __('Reset all'))))));
};

const ConnectedToolsPanelHeader = contextConnect(ToolsPanelHeader, 'ToolsPanelHeader');
export default ConnectedToolsPanelHeader;
//# sourceMappingURL=component.js.map