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

Generic block editor.

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

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

import { Flex, FlexItem, SelectControl, Button } from '@gechiui/components';
import { __, _x } from '@gechiui/i18n';
import { useViewportMatch } from '@gechiui/compose';

function PatternInserterPanel(_ref) {
  let {
    selectedCategory,
    patternCategories,
    onClickCategory,
    openPatternExplorer
  } = _ref;
  const isMobile = useViewportMatch('medium', '<');

  const categoryOptions = () => {
    const options = [];
    patternCategories.map(patternCategory => {
      return options.push({
        value: patternCategory.name,
        label: patternCategory.label
      });
    });
    return options;
  };

  const onChangeSelect = selected => {
    onClickCategory(patternCategories.find(patternCategory => selected === patternCategory.name));
  };

  const className = classnames('block-editor-inserter__panel-header', 'block-editor-inserter__panel-header-patterns'); // In iOS-based mobile devices, the onBlur will fire when selecting an option
  // from a Select element. To prevent closing the useDialog on iOS devices, we
  // stop propagating the onBlur event if there is no relatedTarget, which means
  // that the user most likely did not click on an element within the editor canvas.

  const onBlur = event => {
    if (!(event !== null && event !== void 0 && event.relatedTarget)) {
      event.stopPropagation();
    }
  };

  return createElement(Flex, {
    justify: "space-between",
    align: "start",
    gap: "4",
    className: className
  }, createElement(FlexItem, {
    isBlock: true
  }, createElement(SelectControl, {
    className: "block-editor-inserter__panel-dropdown",
    label: __('筛选区块样板'),
    hideLabelFromVision: true,
    value: selectedCategory.name,
    onChange: onChangeSelect,
    onBlur: onBlur,
    options: categoryOptions()
  })), !isMobile && createElement(FlexItem, null, createElement(Button, {
    variant: "secondary",
    className: "block-editor-inserter__patterns-explorer-expand",
    label: __('探索所有模式'),
    onClick: () => openPatternExplorer()
  }, _x('Explore', 'Label for showing all block patterns'))));
}

export default PatternInserterPanel;
//# sourceMappingURL=pattern-panel.js.map