@gechiui/block-editor/build/components/block-pattern-setup/index.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _data = require("@gechiui/data");

var _blocks = require("@gechiui/blocks");

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

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

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

var _store = require("../../store");

var _blockPreview = _interopRequireDefault(require("../block-preview"));

var _setupToolbar = _interopRequireDefault(require("./setup-toolbar"));

var _usePatternsSetup = _interopRequireDefault(require("./use-patterns-setup"));

var _constants = require("./constants");

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const SetupContent = _ref => {
  let {
    viewMode,
    activeSlide,
    patterns,
    onBlockPatternSelect
  } = _ref;
  const composite = (0, _components.__unstableUseCompositeState)();
  const containerClass = 'block-editor-block-pattern-setup__container';

  if (viewMode === _constants.VIEWMODES.carousel) {
    const slideClass = new Map([[activeSlide, 'active-slide'], [activeSlide - 1, 'previous-slide'], [activeSlide + 1, 'next-slide']]);
    return (0, _element.createElement)("div", {
      className: containerClass
    }, (0, _element.createElement)("ul", {
      className: "carousel-container"
    }, patterns.map((pattern, index) => (0, _element.createElement)(BlockPatternSlide, {
      className: slideClass.get(index) || '',
      key: pattern.name,
      pattern: pattern
    }))));
  }

  return (0, _element.createElement)(_components.__unstableComposite, (0, _extends2.default)({}, composite, {
    role: "listbox",
    className: containerClass,
    "aria-label": (0, _i18n.__)('区块样板列表')
  }), patterns.map(pattern => (0, _element.createElement)(BlockPattern, {
    key: pattern.name,
    pattern: pattern,
    onSelect: onBlockPatternSelect,
    composite: composite
  })));
};

function BlockPattern(_ref2) {
  let {
    pattern,
    onSelect,
    composite
  } = _ref2;
  const baseClassName = 'block-editor-block-pattern-setup-list';
  const {
    blocks,
    title,
    description,
    viewportWidth = 700
  } = pattern;
  const descriptionId = (0, _compose.useInstanceId)(BlockPattern, `${baseClassName}__item-description`);
  return (0, _element.createElement)("div", {
    className: `${baseClassName}__list-item`,
    "aria-label": pattern.title,
    "aria-describedby": pattern.description ? descriptionId : undefined
  }, (0, _element.createElement)(_components.__unstableCompositeItem, (0, _extends2.default)({
    role: "option",
    as: "div"
  }, composite, {
    className: `${baseClassName}__item`,
    onClick: () => onSelect(blocks)
  }), (0, _element.createElement)(_blockPreview.default, {
    blocks: blocks,
    viewportWidth: viewportWidth
  }), (0, _element.createElement)("div", {
    className: `${baseClassName}__item-title`
  }, title)), !!description && (0, _element.createElement)(_components.VisuallyHidden, {
    id: descriptionId
  }, description));
}

function BlockPatternSlide(_ref3) {
  let {
    className,
    pattern
  } = _ref3;
  const {
    blocks,
    title,
    description
  } = pattern;
  const descriptionId = (0, _compose.useInstanceId)(BlockPatternSlide, 'block-editor-block-pattern-setup-list__item-description');
  return (0, _element.createElement)("li", {
    className: `pattern-slide ${className}`,
    "aria-label": title,
    "aria-describedby": description ? descriptionId : undefined
  }, (0, _element.createElement)(_blockPreview.default, {
    blocks: blocks,
    __experimentalLive: true
  }), !!description && (0, _element.createElement)(_components.VisuallyHidden, {
    id: descriptionId
  }, description));
}

const BlockPatternSetup = _ref4 => {
  let {
    clientId,
    blockName,
    filterPatternsFn,
    startBlankComponent,
    onBlockPatternSelect
  } = _ref4;
  const [viewMode, setViewMode] = (0, _element.useState)(_constants.VIEWMODES.carousel);
  const [activeSlide, setActiveSlide] = (0, _element.useState)(0);
  const [showBlank, setShowBlank] = (0, _element.useState)(false);
  const {
    replaceBlock
  } = (0, _data.useDispatch)(_store.store);
  const patterns = (0, _usePatternsSetup.default)(clientId, blockName, filterPatternsFn);

  if (!(patterns !== null && patterns !== void 0 && patterns.length) || showBlank) {
    return startBlankComponent;
  }

  const onBlockPatternSelectDefault = blocks => {
    const clonedBlocks = blocks.map(block => (0, _blocks.cloneBlock)(block));
    replaceBlock(clientId, clonedBlocks);
  };

  const onPatternSelectCallback = onBlockPatternSelect || onBlockPatternSelectDefault;
  return (0, _element.createElement)("div", {
    className: `block-editor-block-pattern-setup view-mode-${viewMode}`
  }, (0, _element.createElement)(_setupToolbar.default, {
    viewMode: viewMode,
    setViewMode: setViewMode,
    activeSlide: activeSlide,
    totalSlides: patterns.length,
    handleNext: () => {
      setActiveSlide(active => active + 1);
    },
    handlePrevious: () => {
      setActiveSlide(active => active - 1);
    },
    onBlockPatternSelect: () => {
      onPatternSelectCallback(patterns[activeSlide].blocks);
    },
    onStartBlank: () => {
      setShowBlank(true);
    }
  }), (0, _element.createElement)(SetupContent, {
    viewMode: viewMode,
    activeSlide: activeSlide,
    patterns: patterns,
    onBlockPatternSelect: onPatternSelectCallback
  }));
};

var _default = BlockPatternSetup;
exports.default = _default;
//# sourceMappingURL=index.js.map