@gechiui/block-editor/build-module/components/block-patterns-list/index.js

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { VisuallyHidden, __unstableComposite as Composite, __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem } from '@gechiui/components';
import { useInstanceId } from '@gechiui/compose';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import BlockPreview from '../block-preview';
import InserterDraggableBlocks from '../inserter-draggable-blocks';

function BlockPattern(_ref) {
  let {
    isDraggable,
    pattern,
    onClick,
    composite
  } = _ref;
  const {
    blocks,
    viewportWidth
  } = pattern;
  const instanceId = useInstanceId(BlockPattern);
  const descriptionId = `block-editor-block-patterns-list__item-description-${instanceId}`;
  return createElement(InserterDraggableBlocks, {
    isEnabled: isDraggable,
    blocks: blocks
  }, _ref2 => {
    let {
      draggable,
      onDragStart,
      onDragEnd
    } = _ref2;
    return createElement("div", {
      className: "block-editor-block-patterns-list__list-item",
      "aria-label": pattern.title,
      "aria-describedby": pattern.description ? descriptionId : undefined,
      draggable: draggable,
      onDragStart: onDragStart,
      onDragEnd: onDragEnd
    }, createElement(CompositeItem, _extends({
      role: "option",
      as: "div"
    }, composite, {
      className: "block-editor-block-patterns-list__item",
      onClick: () => onClick(pattern, blocks)
    }), createElement(BlockPreview, {
      blocks: blocks,
      viewportWidth: viewportWidth
    }), createElement("div", {
      className: "block-editor-block-patterns-list__item-title"
    }, pattern.title), !!pattern.description && createElement(VisuallyHidden, {
      id: descriptionId
    }, pattern.description)));
  });
}

function BlockPatternPlaceholder() {
  return createElement("div", {
    className: "block-editor-block-patterns-list__item is-placeholder"
  });
}

function BlockPatternList(_ref3) {
  let {
    isDraggable,
    blockPatterns,
    shownPatterns,
    onClickPattern,
    orientation,
    label = __('区块样板')
  } = _ref3;
  const composite = useCompositeState({
    orientation
  });
  return createElement(Composite, _extends({}, composite, {
    role: "listbox",
    className: "block-editor-block-patterns-list",
    "aria-label": label
  }), blockPatterns.map(pattern => {
    const isShown = shownPatterns.includes(pattern);
    return isShown ? createElement(BlockPattern, {
      key: pattern.name,
      pattern: pattern,
      onClick: onClickPattern,
      isDraggable: isDraggable,
      composite: composite
    }) : createElement(BlockPatternPlaceholder, {
      key: pattern.name
    });
  }));
}

export default BlockPatternList;
//# sourceMappingURL=index.js.map