@gechiui/block-editor/build/components/tool-selector/index.js

Generic block editor.

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

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

var _data = require("@gechiui/data");

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

var _store = require("../../store");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const selectIcon = (0, _element.createElement)(_components.SVG, {
  xmlns: "http://www.w3.org/2000/svg",
  width: "24",
  height: "24",
  viewBox: "0 0 24 24"
}, (0, _element.createElement)(_components.Path, {
  d: "M9.4 20.5L5.2 3.8l14.6 9-2 .3c-.2 0-.4.1-.7.1-.9.2-1.6.3-2.2.5-.8.3-1.4.5-1.8.8-.4.3-.8.8-1.3 1.5-.4.5-.8 1.2-1.2 2l-.3.6-.9 1.9zM7.6 7.1l2.4 9.3c.2-.4.5-.8.7-1.1.6-.8 1.1-1.4 1.6-1.8.5-.4 1.3-.8 2.2-1.1l1.2-.3-8.1-5z"
}));

function ToolSelector(props, ref) {
  const isNavigationTool = (0, _data.useSelect)(select => select(_store.store).isNavigationMode(), []);
  const {
    setNavigationMode
  } = (0, _data.useDispatch)(_store.store);

  const onSwitchMode = mode => {
    setNavigationMode(mode === 'edit' ? false : true);
  };

  return (0, _element.createElement)(_components.Dropdown, {
    renderToggle: _ref => {
      let {
        isOpen,
        onToggle
      } = _ref;
      return (0, _element.createElement)(_components.Button, (0, _extends2.default)({}, props, {
        ref: ref,
        icon: isNavigationTool ? selectIcon : _icons.edit,
        "aria-expanded": isOpen,
        "aria-haspopup": "true",
        onClick: onToggle
        /* translators: button label text should, if possible, be under 16 characters. */
        ,
        label: (0, _i18n.__)('工具')
      }));
    },
    position: "bottom right",
    renderContent: () => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.NavigableMenu, {
      role: "menu",
      "aria-label": (0, _i18n.__)('工具')
    }, (0, _element.createElement)(_components.MenuItemsChoice, {
      value: isNavigationTool ? 'select' : 'edit',
      onSelect: onSwitchMode,
      choices: [{
        value: 'edit',
        label: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_icons.Icon, {
          icon: _icons.edit
        }), (0, _i18n.__)('编辑'))
      }, {
        value: 'select',
        label: (0, _element.createElement)(_element.Fragment, null, selectIcon, (0, _i18n.__)('选择'))
      }]
    })), (0, _element.createElement)("div", {
      className: "block-editor-tool-selector__help"
    }, (0, _i18n.__)('工具为选择、导航和编辑区块提供了不同的交互方式。通过按 Escape 和 Enter 键在选择/编辑之间进行切换。')))
  });
}

var _default = (0, _element.forwardRef)(ToolSelector);

exports.default = _default;
//# sourceMappingURL=index.js.map