@gechiui/block-editor/build/components/inserter/block-types-tab.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BlockTypesTab = BlockTypesTab;
exports.default = void 0;

var _element = require("@gechiui/element");

var _lodash = require("lodash");

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

var _compose = require("@gechiui/compose");

var _blockTypesList = _interopRequireDefault(require("../block-types-list"));

var _panel = _interopRequireDefault(require("./panel"));

var _useBlockTypesState = _interopRequireDefault(require("./hooks/use-block-types-state"));

var _inserterListbox = _interopRequireDefault(require("../inserter-listbox"));

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const getBlockNamespace = item => item.name.split('/')[0];

const MAX_SUGGESTED_ITEMS = 6;
/**
 * Shared reference to an empty array for cases where it is important to avoid
 * returning a new array reference on every invocation and rerendering the component.
 *
 * @type {Array}
 */

const EMPTY_ARRAY = [];

function BlockTypesTab(_ref) {
  let {
    rootClientId,
    onInsert,
    onHover,
    showMostUsedBlocks
  } = _ref;
  const [items, categories, collections, onSelectItem] = (0, _useBlockTypesState.default)(rootClientId, onInsert);
  const suggestedItems = (0, _element.useMemo)(() => {
    return (0, _lodash.orderBy)(items, ['frecency'], ['desc']).slice(0, MAX_SUGGESTED_ITEMS);
  }, [items]);
  const uncategorizedItems = (0, _element.useMemo)(() => {
    return items.filter(item => !item.category);
  }, [items]);
  const itemsPerCategory = (0, _element.useMemo)(() => {
    return (0, _lodash.flow)(itemList => itemList.filter(item => item.category && item.category !== 'reusable'), itemList => (0, _lodash.groupBy)(itemList, 'category'))(items);
  }, [items]);
  const itemsPerCollection = (0, _element.useMemo)(() => {
    // Create a new Object to avoid mutating collection.
    const result = { ...collections
    };
    Object.keys(collections).forEach(namespace => {
      result[namespace] = items.filter(item => getBlockNamespace(item) === namespace);

      if (result[namespace].length === 0) {
        delete result[namespace];
      }
    });
    return result;
  }, [items, collections]); // Hide block preview on unmount.

  (0, _element.useEffect)(() => () => onHover(null), []);
  /**
   * The inserter contains a big number of blocks and opening it is a costful operation.
   * The rendering is the most costful part of it, in order to improve the responsiveness
   * of the "opening" action, these lazy lists allow us to render the inserter category per category,
   * once all the categories are rendered, we start rendering the collections and the uncategorized block types.
   */

  const currentlyRenderedCategories = (0, _compose.useAsyncList)(categories);
  const didRenderAllCategories = categories.length === currentlyRenderedCategories.length; // Async List requires an array

  const collectionEntries = (0, _element.useMemo)(() => {
    return Object.entries(collections);
  }, [collections]);
  const currentlyRenderedCollections = (0, _compose.useAsyncList)(didRenderAllCategories ? collectionEntries : EMPTY_ARRAY);
  return (0, _element.createElement)(_inserterListbox.default, null, (0, _element.createElement)("div", null, showMostUsedBlocks && !!suggestedItems.length && (0, _element.createElement)(_panel.default, {
    title: (0, _i18n._x)('Most used', 'blocks')
  }, (0, _element.createElement)(_blockTypesList.default, {
    items: suggestedItems,
    onSelect: onSelectItem,
    onHover: onHover,
    label: (0, _i18n._x)('Most used', 'blocks')
  })), (0, _lodash.map)(currentlyRenderedCategories, category => {
    const categoryItems = itemsPerCategory[category.slug];

    if (!categoryItems || !categoryItems.length) {
      return null;
    }

    return (0, _element.createElement)(_panel.default, {
      key: category.slug,
      title: category.title,
      icon: category.icon
    }, (0, _element.createElement)(_blockTypesList.default, {
      items: categoryItems,
      onSelect: onSelectItem,
      onHover: onHover,
      label: category.title
    }));
  }), didRenderAllCategories && uncategorizedItems.length > 0 && (0, _element.createElement)(_panel.default, {
    className: "block-editor-inserter__uncategorized-blocks-panel",
    title: (0, _i18n.__)('未分类')
  }, (0, _element.createElement)(_blockTypesList.default, {
    items: uncategorizedItems,
    onSelect: onSelectItem,
    onHover: onHover,
    label: (0, _i18n.__)('未分类')
  })), (0, _lodash.map)(currentlyRenderedCollections, _ref2 => {
    let [namespace, collection] = _ref2;
    const collectionItems = itemsPerCollection[namespace];

    if (!collectionItems || !collectionItems.length) {
      return null;
    }

    return (0, _element.createElement)(_panel.default, {
      key: namespace,
      title: collection.title,
      icon: collection.icon
    }, (0, _element.createElement)(_blockTypesList.default, {
      items: collectionItems,
      onSelect: onSelectItem,
      onHover: onHover,
      label: collection.title
    }));
  })));
}

var _default = BlockTypesTab;
exports.default = _default;
//# sourceMappingURL=block-types-tab.js.map