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

Generic block editor.

import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { Button } from '@gechiui/components';
import { useSelect, useDispatch } from '@gechiui/data';
import { __ } from '@gechiui/i18n';
import { chevronRightSmall, Icon } from '@gechiui/icons';
/**
 * Internal dependencies
 */

import BlockTitle from '../block-title';
import { store as blockEditorStore } from '../../store';
/**
 * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
 *
 * @param {Object} props               Component props.
 * @param {string} props.rootLabelText Translated label for the root element of the breadcrumb trail.
 * @return {GCElement}                 Block Breadcrumb.
 */

function BlockBreadcrumb(_ref) {
  let {
    rootLabelText
  } = _ref;
  const {
    selectBlock,
    clearSelectedBlock
  } = useDispatch(blockEditorStore);
  const {
    clientId,
    parents,
    hasSelection
  } = useSelect(select => {
    const {
      getSelectionStart,
      getSelectedBlockClientId,
      getBlockParents
    } = select(blockEditorStore);
    const selectedBlockClientId = getSelectedBlockClientId();
    return {
      parents: getBlockParents(selectedBlockClientId),
      clientId: selectedBlockClientId,
      hasSelection: !!getSelectionStart().clientId
    };
  }, []);

  const rootLabel = rootLabelText || __('文档');
  /*
   * Disable reason: The `list` ARIA role is redundant but
   * Safari+VoiceOver won't announce the list otherwise.
   */

  /* eslint-disable jsx-a11y/no-redundant-roles */


  return createElement("ul", {
    className: "block-editor-block-breadcrumb",
    role: "list",
    "aria-label": __('区块导航标记')
  }, createElement("li", {
    className: !hasSelection ? 'block-editor-block-breadcrumb__current' : undefined,
    "aria-current": !hasSelection ? 'true' : undefined
  }, hasSelection && createElement(Button, {
    className: "block-editor-block-breadcrumb__button",
    variant: "tertiary",
    onClick: clearSelectedBlock
  }, rootLabel), !hasSelection && rootLabel, !!clientId && createElement(Icon, {
    icon: chevronRightSmall,
    className: "block-editor-block-breadcrumb__separator"
  })), parents.map(parentClientId => createElement("li", {
    key: parentClientId
  }, createElement(Button, {
    className: "block-editor-block-breadcrumb__button",
    variant: "tertiary",
    onClick: () => selectBlock(parentClientId)
  }, createElement(BlockTitle, {
    clientId: parentClientId
  })), createElement(Icon, {
    icon: chevronRightSmall,
    className: "block-editor-block-breadcrumb__separator"
  }))), !!clientId && createElement("li", {
    className: "block-editor-block-breadcrumb__current",
    "aria-current": "true"
  }, createElement(BlockTitle, {
    clientId: clientId
  })))
  /* eslint-enable jsx-a11y/no-redundant-roles */
  ;
}

export default BlockBreadcrumb;
//# sourceMappingURL=index.js.map