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

UI components for WordPress.

"use strict";

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

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

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

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

var _a11y = require("@wordpress/a11y");

var _icons = require("@wordpress/icons");

var _i18n = require("@wordpress/i18n");

var _dropdownMenu = _interopRequireDefault(require("../../dropdown-menu"));

var _menuGroup = _interopRequireDefault(require("../../menu-group"));

var _menuItem = _interopRequireDefault(require("../../menu-item"));

var _hStack = require("../../h-stack");

var _heading = require("../../heading");

var _hook = require("./hook");

var _context = require("../../ui/context");

var _styles = require("../styles");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const DefaultControlsGroup = _ref => {
  let {
    itemClassName,
    items,
    toggleItem
  } = _ref;

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

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

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

    return (0, _element.createElement)(_menuItem.default, {
      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 (0, _element.createElement)(_menuGroup.default, {
    label: (0, _i18n.__)('Tools')
  }, items.map(_ref4 => {
    let [label, isSelected] = _ref4;
    const itemLabel = isSelected ? (0, _i18n.sprintf)( // translators: %s: The name of the control being hidden and reset e.g. "Padding".
    (0, _i18n.__)('Hide and reset %s'), label) : (0, _i18n.sprintf)( // translators: %s: The name of the control to display e.g. "Padding".
    (0, _i18n.__)('Show %s'), label);
    return (0, _element.createElement)(_menuItem.default, {
      key: label,
      icon: isSelected && _icons.check,
      isSelected: isSelected,
      label: itemLabel,
      onClick: () => {
        if (isSelected) {
          (0, _a11y.speak)((0, _i18n.sprintf)( // translators: %s: The name of the control being reset e.g. "Padding".
          (0, _i18n.__)('%s hidden and reset to default'), label), 'assertive');
        } else {
          (0, _a11y.speak)((0, _i18n.sprintf)( // translators: %s: The name of the control being reset e.g. "Padding".
          (0, _i18n.__)('%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
  } = (0, _hook.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 ? _icons.plus : _icons.moreVertical;
  const dropDownMenuLabelText = (0, _i18n.sprintf)( // translators: %s: The name of the tool e.g. "Color" or "Typography".
  (0, _i18n._x)('%s options', 'Button label to reveal tool panel options'), labelText);
  const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? (0, _i18n.__)('All options are currently hidden') : undefined;
  const canResetAll = [...defaultItems, ...optionalItems].some(_ref5 => {
    let [, isSelected] = _ref5;
    return isSelected;
  });
  return (0, _element.createElement)(_hStack.HStack, (0, _extends2.default)({}, headerProps, {
    ref: forwardedRef
  }), (0, _element.createElement)(_heading.Heading, {
    level: headingLevel,
    className: headingClassName
  }, labelText), hasMenuItems && (0, _element.createElement)(_dropdownMenu.default, {
    icon: dropDownMenuIcon,
    label: dropDownMenuLabelText,
    menuProps: {
      className: dropdownMenuClassName
    },
    toggleProps: {
      isSmall: true,
      describedBy: dropdownMenuDescriptionText
    }
  }, () => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(DefaultControlsGroup, {
    items: defaultItems,
    toggleItem: toggleItem,
    itemClassName: defaultControlsItemClassName
  }), (0, _element.createElement)(OptionalControlsGroup, {
    items: optionalItems,
    toggleItem: toggleItem
  }), (0, _element.createElement)(_menuGroup.default, null, (0, _element.createElement)(_menuItem.default, {
    "aria-disabled": !canResetAll,
    variant: 'tertiary',
    onClick: () => {
      if (canResetAll) {
        resetAll();
        (0, _a11y.speak)((0, _i18n.__)('All options reset'), 'assertive');
      }
    }
  }, (0, _i18n.__)('Reset all'))))));
};

const ConnectedToolsPanelHeader = (0, _context.contextConnect)(ToolsPanelHeader, 'ToolsPanelHeader');
var _default = ConnectedToolsPanelHeader;
exports.default = _default;
//# sourceMappingURL=component.js.map