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

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { Dropdown, Button, MenuItemsChoice, SVG, Path, NavigableMenu } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { useSelect, useDispatch } from '@gechiui/data';
import { forwardRef } from '@gechiui/element';
import { Icon, edit as editIcon } from '@gechiui/icons';
/**
 * Internal dependencies
 */

import { store as blockEditorStore } from '../../store';
const selectIcon = createElement(SVG, {
  xmlns: "http://www.w3.org/2000/svg",
  width: "24",
  height: "24",
  viewBox: "0 0 24 24"
}, createElement(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 = useSelect(select => select(blockEditorStore).isNavigationMode(), []);
  const {
    setNavigationMode
  } = useDispatch(blockEditorStore);

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

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

export default forwardRef(ToolSelector);
//# sourceMappingURL=index.js.map