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

UI components for GeChiUI.

"use strict";

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

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

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

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

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

var _i18n = require("@gechiui/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");

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

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const noop = () => {};

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

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

  return (0, _element.createElement)(_menuGroup.default, null, items.map(_ref2 => {
    let [label, hasValue] = _ref2;
    const icon = hasValue ? _icons.reset : _icons.check;
    const itemLabel = hasValue ? (0, _i18n.sprintf)( // translators: %s: The name of the control being reset e.g. "Padding".
    (0, _i18n.__)('重置%s'), label) : undefined;
    return (0, _element.createElement)(_menuItem.default, {
      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 (0, _element.createElement)(_menuGroup.default, null, 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.__)('隐藏并重置%s'), label) : (0, _i18n.sprintf)( // translators: %s: The name of the control to display e.g. "Padding".
    (0, _i18n.__)('显示%s'), label);
    return (0, _element.createElement)(_menuItem.default, {
      key: label,
      icon: isSelected && _icons.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
  } = (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 = areAllOptionalControlsHidden ? (0, _i18n._x)('View and add options', 'Button label to reveal tool panel options') : (0, _i18n._x)('View options', 'Button label to reveal tool panel options');
  return (0, _element.createElement)(_hStack.HStack, (0, _extends2.default)({}, headerProps, {
    ref: forwardedRef
  }), (0, _element.createElement)(_heading.Heading, {
    level: 2,
    className: headingClassName
  }, labelText), hasMenuItems && (0, _element.createElement)(_dropdownMenu.default, {
    icon: dropDownMenuIcon,
    label: dropDownMenuLabelText,
    menuProps: {
      className: dropdownMenuClassName
    },
    toggleProps: {
      isSmall: true
    }
  }, _ref5 => {
    let {
      onClose = noop
    } = _ref5;
    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(DefaultControlsGroup, {
      items: defaultItems,
      onClose: onClose,
      toggleItem: toggleItem
    }), (0, _element.createElement)(OptionalControlsGroup, {
      items: optionalItems,
      onClose: onClose,
      toggleItem: toggleItem
    }), (0, _element.createElement)(_menuGroup.default, null, (0, _element.createElement)(_menuItem.default, {
      variant: 'tertiary',
      onClick: () => {
        resetAll();
        onClose();
      }
    }, (0, _i18n.__)('重置全部'))));
  }));
};

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