@gechiui/block-editor/build-module/components/inserter/menu.js

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { useState, useCallback, useMemo } from '@gechiui/element';
import { VisuallyHidden, SearchControl } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { useSelect } from '@gechiui/data';
/**
 * Internal dependencies
 */

import Tips from './tips';
import InserterPreviewPanel from './preview-panel';
import BlockTypesTab from './block-types-tab';
import BlockPatternsTabs from './block-patterns-tab';
import ReusableBlocksTab from './reusable-blocks-tab';
import InserterSearchResults from './search-results';
import useInsertionPoint from './hooks/use-insertion-point';
import InserterTabs from './tabs';
import { store as blockEditorStore } from '../../store';

function InserterMenu(_ref) {
  let {
    rootClientId,
    clientId,
    isAppender,
    __experimentalInsertionIndex,
    onSelect,
    showInserterHelpPanel,
    showMostUsedBlocks,
    __experimentalFilterValue = '',
    shouldFocusBlock = true
  } = _ref;
  const [filterValue, setFilterValue] = useState(__experimentalFilterValue);
  const [hoveredItem, setHoveredItem] = useState(null);
  const [selectedPatternCategory, setSelectedPatternCategory] = useState(null);
  const [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint] = useInsertionPoint({
    rootClientId,
    clientId,
    isAppender,
    insertionIndex: __experimentalInsertionIndex,
    shouldFocusBlock
  });
  const {
    showPatterns,
    hasReusableBlocks
  } = useSelect(select => {
    var _getSettings$__experi;

    const {
      __experimentalGetAllowedPatterns,
      getSettings
    } = select(blockEditorStore);
    return {
      showPatterns: !!__experimentalGetAllowedPatterns(destinationRootClientId).length,
      hasReusableBlocks: !!((_getSettings$__experi = getSettings().__experimentalReusableBlocks) !== null && _getSettings$__experi !== void 0 && _getSettings$__experi.length)
    };
  }, [destinationRootClientId]);
  const onInsert = useCallback((blocks, meta, shouldForceFocusBlock) => {
    onInsertBlocks(blocks, meta, shouldForceFocusBlock);
    onSelect();
  }, [onInsertBlocks, onSelect]);
  const onInsertPattern = useCallback((blocks, patternName) => {
    onInsertBlocks(blocks, {
      patternName
    });
    onSelect();
  }, [onInsertBlocks, onSelect]);
  const onHover = useCallback(item => {
    onToggleInsertionPoint(!!item);
    setHoveredItem(item);
  }, [onToggleInsertionPoint, setHoveredItem]);
  const onClickPatternCategory = useCallback(patternCategory => {
    setSelectedPatternCategory(patternCategory);
  }, [setSelectedPatternCategory]);
  const blocksTab = useMemo(() => createElement(Fragment, null, createElement("div", {
    className: "block-editor-inserter__block-list"
  }, createElement(BlockTypesTab, {
    rootClientId: destinationRootClientId,
    onInsert: onInsert,
    onHover: onHover,
    showMostUsedBlocks: showMostUsedBlocks
  })), showInserterHelpPanel && createElement("div", {
    className: "block-editor-inserter__tips"
  }, createElement(VisuallyHidden, {
    as: "h2"
  }, __('使用区块编辑器的提示')), createElement(Tips, null))), [destinationRootClientId, onInsert, onHover, filterValue, showMostUsedBlocks, showInserterHelpPanel]);
  const patternsTab = useMemo(() => createElement(BlockPatternsTabs, {
    rootClientId: destinationRootClientId,
    onInsert: onInsertPattern,
    onClickCategory: onClickPatternCategory,
    selectedCategory: selectedPatternCategory
  }), [destinationRootClientId, onInsertPattern, onClickPatternCategory, selectedPatternCategory]);
  const reusableBlocksTab = useMemo(() => createElement(ReusableBlocksTab, {
    rootClientId: destinationRootClientId,
    onInsert: onInsert,
    onHover: onHover
  }), [destinationRootClientId, onInsert, onHover]);
  const getCurrentTab = useCallback(tab => {
    if (tab.name === 'blocks') {
      return blocksTab;
    } else if (tab.name === 'patterns') {
      return patternsTab;
    }

    return reusableBlocksTab;
  }, [blocksTab, patternsTab, reusableBlocksTab]);
  return createElement("div", {
    className: "block-editor-inserter__menu"
  }, createElement("div", {
    className: "block-editor-inserter__main-area"
  }, createElement("div", {
    className: "block-editor-inserter__content"
  }, createElement(SearchControl, {
    className: "block-editor-inserter__search",
    onChange: value => {
      if (hoveredItem) setHoveredItem(null);
      setFilterValue(value);
    },
    value: filterValue,
    label: __('搜索区块和区块样板'),
    placeholder: __('搜索')
  }), !!filterValue && createElement(InserterSearchResults, {
    filterValue: filterValue,
    onSelect: onSelect,
    onHover: onHover,
    rootClientId: rootClientId,
    clientId: clientId,
    isAppender: isAppender,
    __experimentalInsertionIndex: __experimentalInsertionIndex,
    showBlockDirectory: true,
    shouldFocusBlock: shouldFocusBlock
  }), !filterValue && (showPatterns || hasReusableBlocks) && createElement(InserterTabs, {
    showPatterns: showPatterns,
    showReusableBlocks: hasReusableBlocks
  }, getCurrentTab), !filterValue && !showPatterns && !hasReusableBlocks && blocksTab)), showInserterHelpPanel && hoveredItem && createElement(InserterPreviewPanel, {
    item: hoveredItem
  }));
}

export default InserterMenu;
//# sourceMappingURL=menu.js.map