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

Generic block editor.

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

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * GeChiUI dependencies
 */

import { useState, useEffect } from '@gechiui/element';
import { __ } from '@gechiui/i18n';
import { Button, SearchControl } from '@gechiui/components';
import { useSelect } from '@gechiui/data';
/**
 * Internal dependencies
 */

import InserterSearchResults from './search-results';
import useInsertionPoint from './hooks/use-insertion-point';
import usePatternsState from './hooks/use-patterns-state';
import useBlockTypesState from './hooks/use-block-types-state';
import { store as blockEditorStore } from '../../store';
const SEARCH_THRESHOLD = 6;
const SHOWN_BLOCK_TYPES = 6;
const SHOWN_BLOCK_PATTERNS = 2;
export default function QuickInserter(_ref) {
  let {
    onSelect,
    rootClientId,
    clientId,
    isAppender
  } = _ref;
  const [filterValue, setFilterValue] = useState('');
  const [destinationRootClientId, onInsertBlocks] = useInsertionPoint({
    onSelect,
    rootClientId,
    clientId,
    isAppender
  });
  const [blockTypes] = useBlockTypesState(destinationRootClientId, onInsertBlocks);
  const [patterns] = usePatternsState(onInsertBlocks, destinationRootClientId);
  const showPatterns = patterns.length && !!filterValue;
  const showSearch = showPatterns && patterns.length > SEARCH_THRESHOLD || blockTypes.length > SEARCH_THRESHOLD;
  const {
    setInserterIsOpened,
    insertionIndex
  } = useSelect(select => {
    const {
      getSettings,
      getBlockIndex,
      getBlockCount
    } = select(blockEditorStore);
    const index = getBlockIndex(clientId);
    return {
      setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened,
      insertionIndex: index === -1 ? getBlockCount() : index
    };
  }, [clientId, rootClientId]);
  useEffect(() => {
    if (setInserterIsOpened) {
      setInserterIsOpened(false);
    }
  }, [setInserterIsOpened]); // When clicking Browse All select the appropriate block so as
  // the insertion point can work as expected

  const onBrowseAll = () => {
    setInserterIsOpened({
      rootClientId,
      insertionIndex,
      filterValue
    });
  };

  return createElement("div", {
    className: classnames('block-editor-inserter__quick-inserter', {
      'has-search': showSearch,
      'has-expand': setInserterIsOpened
    })
  }, showSearch && createElement(SearchControl, {
    className: "block-editor-inserter__search",
    value: filterValue,
    onChange: value => {
      setFilterValue(value);
    },
    label: __('搜索区块和区块样板'),
    placeholder: __('搜索')
  }), createElement("div", {
    className: "block-editor-inserter__quick-inserter-results"
  }, createElement(InserterSearchResults, {
    filterValue: filterValue,
    onSelect: onSelect,
    rootClientId: rootClientId,
    clientId: clientId,
    isAppender: isAppender,
    maxBlockPatterns: showPatterns ? SHOWN_BLOCK_PATTERNS : 0,
    maxBlockTypes: SHOWN_BLOCK_TYPES,
    isDraggable: false
  })), setInserterIsOpened && createElement(Button, {
    className: "block-editor-inserter__quick-inserter-expand",
    onClick: onBrowseAll,
    "aria-label": __('浏览所有。这将打开编辑器工具栏中的主插入器面板。')
  }, __('浏览全部')));
}
//# sourceMappingURL=quick-inserter.js.map