@gechiui/block-editor/build/components/inserter/pattern-panel.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 _classnames = _interopRequireDefault(require("classnames"));

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

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */
function PatternInserterPanel(_ref) {
  let {
    selectedCategory,
    patternCategories,
    onClickCategory,
    openPatternExplorer
  } = _ref;
  const isMobile = (0, _compose.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 = (0, _classnames.default)('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 (0, _element.createElement)(_components.Flex, {
    justify: "space-between",
    align: "start",
    gap: "4",
    className: className
  }, (0, _element.createElement)(_components.FlexItem, {
    isBlock: true
  }, (0, _element.createElement)(_components.SelectControl, {
    className: "block-editor-inserter__panel-dropdown",
    label: (0, _i18n.__)('筛选区块样板'),
    hideLabelFromVision: true,
    value: selectedCategory.name,
    onChange: onChangeSelect,
    onBlur: onBlur,
    options: categoryOptions()
  })), !isMobile && (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
    variant: "secondary",
    className: "block-editor-inserter__patterns-explorer-expand",
    label: (0, _i18n.__)('探索所有模式'),
    onClick: () => openPatternExplorer()
  }, (0, _i18n._x)('Explore', 'Label for showing all block patterns'))));
}

var _default = PatternInserterPanel;
exports.default = _default;
//# sourceMappingURL=pattern-panel.js.map