@gechiui/block-editor/build/components/inserter/menu.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 _components = require("@gechiui/components");

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

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

var _tips = _interopRequireDefault(require("./tips"));

var _previewPanel = _interopRequireDefault(require("./preview-panel"));

var _blockTypesTab = _interopRequireDefault(require("./block-types-tab"));

var _blockPatternsTab = _interopRequireDefault(require("./block-patterns-tab"));

var _reusableBlocksTab = _interopRequireDefault(require("./reusable-blocks-tab"));

var _searchResults = _interopRequireDefault(require("./search-results"));

var _useInsertionPoint = _interopRequireDefault(require("./hooks/use-insertion-point"));

var _tabs = _interopRequireDefault(require("./tabs"));

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

/**
 * GeChiUI dependencies
 */

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

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

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

var _default = InserterMenu;
exports.default = _default;
//# sourceMappingURL=menu.js.map