@wordpress/block-editor/build/components/inserter/menu.native.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("@wordpress/element");

var _reactNative = require("react-native");

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

var _blocks = require("@wordpress/blocks");

var _components = require("@wordpress/components");

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

var _searchForm = _interopRequireDefault(require("./search-form"));

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

var _searchItems = require("./search-items");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const MIN_ITEMS_FOR_SEARCH = 2;

function InserterMenu({
  onSelect,
  onDismiss,
  rootClientId,
  clientId,
  isAppender,
  shouldReplaceBlock,
  insertionIndex
}) {
  const [filterValue, setFilterValue] = (0, _element.useState)('');
  const [searchFormHeight, setSearchFormHeight] = (0, _element.useState)(0); // eslint-disable-next-line no-undef

  const [showSearchForm, setShowSearchForm] = (0, _element.useState)(__DEV__);
  const {
    showInsertionPoint,
    hideInsertionPoint,
    clearSelectedBlock,
    insertBlock,
    removeBlock,
    resetBlocks,
    insertDefaultBlock
  } = (0, _data.useDispatch)(_store.store);
  const {
    items,
    destinationRootClientId
  } = (0, _data.useSelect)(select => {
    const {
      getInserterItems,
      getBlockRootClientId,
      getBlockSelectionEnd
    } = select(_store.store);
    let targetRootClientId = rootClientId;

    if (!targetRootClientId && !clientId && !isAppender) {
      const end = getBlockSelectionEnd();

      if (end) {
        targetRootClientId = getBlockRootClientId(end) || undefined;
      }
    }

    return {
      items: getInserterItems(targetRootClientId),
      destinationRootClientId: targetRootClientId
    };
  });
  const {
    getBlockOrder,
    getBlockCount,
    canInsertBlockType
  } = (0, _data.useSelect)(_store.store);
  const {
    getBlockType
  } = (0, _data.useSelect)(_blocks.store);
  (0, _element.useEffect)(() => {
    var _getItems;

    // Show/Hide insertion point on Mount/Dismount
    if (shouldReplaceBlock) {
      const count = getBlockCount(); // Check if there is a rootClientId because that means it is a nested replaceable block
      // and we don't want to clear/reset all blocks.

      if (count === 1 && !rootClientId) {
        // Removing the last block is not possilble with `removeBlock` action.
        // It always inserts a default block if the last of the blocks have been removed.
        clearSelectedBlock();
        resetBlocks([]);
      } else {
        const blockToReplace = getBlockOrder(destinationRootClientId)[insertionIndex];
        removeBlock(blockToReplace, false);
      }
    }

    showInsertionPoint(destinationRootClientId, insertionIndex); // Show search form if there are enough items to filter.

    if (((_getItems = getItems()) === null || _getItems === void 0 ? void 0 : _getItems.length) < MIN_ITEMS_FOR_SEARCH) {
      setShowSearchForm(false);
    }

    return hideInsertionPoint;
  }, []);
  const onClose = (0, _element.useCallback)(() => {
    // if should replace but didn't insert any block
    // re-insert default block
    if (shouldReplaceBlock) {
      insertDefaultBlock({}, destinationRootClientId, insertionIndex);
    }

    onDismiss();
  }, [shouldReplaceBlock, destinationRootClientId, insertionIndex]);
  const onInsert = (0, _element.useCallback)(item => {
    const {
      name,
      initialAttributes,
      innerBlocks
    } = item;
    const newBlock = (0, _blocks.createBlock)(name, initialAttributes, innerBlocks);
    insertBlock(newBlock, insertionIndex, destinationRootClientId, true, {
      source: 'inserter_menu'
    });
  }, [insertBlock, destinationRootClientId, insertionIndex]);
  /**
   * Processes the inserter items to check
   * if there's any copied block in the clipboard
   * to add it as an extra item
   */

  function getItems() {
    var _clipboardBlock;

    // Filter out reusable blocks (they will be added in another tab)
    let itemsToDisplay = items.filter(({
      name
    }) => name !== 'core/block');
    itemsToDisplay = (0, _searchItems.searchItems)(itemsToDisplay, filterValue);
    const clipboard = (0, _components.getClipboard)();
    let clipboardBlock = (0, _blocks.rawHandler)({
      HTML: clipboard
    })[0];
    const canAddClipboardBlock = canInsertBlockType((_clipboardBlock = clipboardBlock) === null || _clipboardBlock === void 0 ? void 0 : _clipboardBlock.name, destinationRootClientId);

    if (!canAddClipboardBlock) {
      return itemsToDisplay;
    }

    const {
      icon,
      name
    } = getBlockType(clipboardBlock.name);
    const {
      attributes: initialAttributes,
      innerBlocks
    } = clipboardBlock;
    clipboardBlock = {
      id: 'clipboard',
      name,
      icon,
      initialAttributes,
      innerBlocks
    };
    return [clipboardBlock, ...itemsToDisplay];
  }

  return (0, _element.createElement)(_components.BottomSheet, {
    isVisible: true,
    onClose: onClose,
    hideHeader: true,
    hasNavigation: true,
    setMinHeightToMaxHeight: showSearchForm
  }, (0, _element.createElement)(_components.BottomSheetConsumer, null, ({
    listProps,
    safeAreaBottomInset
  }) => (0, _element.createElement)(_reactNative.View, null, showSearchForm && (0, _element.createElement)(_searchForm.default, {
    onChange: value => {
      setFilterValue(value);
    },
    value: filterValue,
    onLayout: event => {
      const {
        height
      } = event.nativeEvent.layout;
      setSearchFormHeight(height);
    }
  }), (0, _element.createElement)(_searchResults.default, {
    items: getItems(),
    onSelect: item => {
      onInsert(item);
      onSelect(item);
    },
    listProps,
    safeAreaBottomInset,
    searchFormHeight
  }))));
}

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