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

UI components for GeChiUI.

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

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports

/**
 * GeChiUI dependencies
 */
import { check, reset, moreVertical, plus } from '@gechiui/icons';
import { __, _x, sprintf } from '@gechiui/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';

const noop = () => {};

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

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

  return createElement(MenuGroup, null, items.map(_ref2 => {
    let [label, hasValue] = _ref2;
    const icon = hasValue ? reset : check;
    const itemLabel = hasValue ? sprintf( // translators: %s: The name of the control being reset e.g. "Padding".
    __('重置%s'), label) : undefined;
    return createElement(MenuItem, {
      key: label,
      icon: icon,
      isSelected: true,
      disabled: !hasValue,
      label: itemLabel,
      onClick: () => {
        toggleItem(label);
        onClose();
      },
      role: "menuitemcheckbox"
    }, label);
  }));
};

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

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

  return createElement(MenuGroup, null, 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".
    __('隐藏并重置%s'), label) : sprintf( // translators: %s: The name of the control to display e.g. "Padding".
    __('显示%s'), label);
    return createElement(MenuItem, {
      key: label,
      icon: isSelected && check,
      isSelected: isSelected,
      label: itemLabel,
      onClick: () => {
        toggleItem(label);
        onClose();
      },
      role: "menuitemcheckbox"
    }, label);
  }));
};

const ToolsPanelHeader = (props, forwardedRef) => {
  const {
    areAllOptionalControlsHidden,
    dropdownMenuClassName,
    hasMenuItems,
    headingClassName,
    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 = areAllOptionalControlsHidden ? _x('View and add options', 'Button label to reveal tool panel options') : _x('View options', 'Button label to reveal tool panel options');
  return createElement(HStack, _extends({}, headerProps, {
    ref: forwardedRef
  }), createElement(Heading, {
    level: 2,
    className: headingClassName
  }, labelText), hasMenuItems && createElement(DropdownMenu, {
    icon: dropDownMenuIcon,
    label: dropDownMenuLabelText,
    menuProps: {
      className: dropdownMenuClassName
    },
    toggleProps: {
      isSmall: true
    }
  }, _ref5 => {
    let {
      onClose = noop
    } = _ref5;
    return createElement(Fragment, null, createElement(DefaultControlsGroup, {
      items: defaultItems,
      onClose: onClose,
      toggleItem: toggleItem
    }), createElement(OptionalControlsGroup, {
      items: optionalItems,
      onClose: onClose,
      toggleItem: toggleItem
    }), createElement(MenuGroup, null, createElement(MenuItem, {
      variant: 'tertiary',
      onClick: () => {
        resetAll();
        onClose();
      }
    }, __('重置全部'))));
  }));
};

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