@gechiui/block-editor/build/components/block-styles/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 _lodash = require("lodash");

var _classnames = _interopRequireDefault(require("classnames"));

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

var _keycodes = require("@gechiui/keycodes");

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

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

var _utils = require("./utils");

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const EMPTY_OBJECT = {};

function useGenericPreviewBlock(block, type) {
  return (0, _element.useMemo)(() => {
    const example = type === null || type === void 0 ? void 0 : type.example;
    const blockName = type === null || type === void 0 ? void 0 : type.name;

    if (example && blockName) {
      return (0, _blocks.getBlockFromExample)(blockName, {
        attributes: example.attributes,
        innerBlocks: example.innerBlocks
      });
    }

    if (block) {
      return (0, _blocks.cloneBlock)(block);
    }
  }, [type !== null && type !== void 0 && type.example ? block === null || block === void 0 ? void 0 : block.name : block, type]);
}

function BlockStyles(_ref) {
  let {
    clientId,
    onSwitch = _lodash.noop,
    onHoverClassName = _lodash.noop,
    itemRole
  } = _ref;

  const selector = select => {
    const {
      getBlock
    } = select(_store.store);
    const block = getBlock(clientId);

    if (!block) {
      return EMPTY_OBJECT;
    }

    const blockType = (0, _blocks.getBlockType)(block.name);
    const {
      getBlockStyles
    } = select(_blocks.store);
    return {
      block,
      type: blockType,
      styles: getBlockStyles(block.name),
      className: block.attributes.className || ''
    };
  };

  const {
    styles,
    block,
    type,
    className
  } = (0, _data.useSelect)(selector, [clientId]);
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const genericPreviewBlock = useGenericPreviewBlock(block, type);

  if (!styles || styles.length === 0) {
    return null;
  }

  const renderedStyles = (0, _lodash.find)(styles, 'isDefault') ? styles : [{
    name: 'default',
    label: (0, _i18n._x)('Default', 'block style'),
    isDefault: true
  }, ...styles];
  const activeStyle = (0, _utils.getActiveStyle)(renderedStyles, className);
  return (0, _element.createElement)("div", {
    className: "block-editor-block-styles"
  }, renderedStyles.map(style => {
    var _type$example$viewpor, _type$example;

    const styleClassName = (0, _utils.replaceActiveStyle)(className, activeStyle, style);
    return (0, _element.createElement)(BlockStyleItem, {
      genericPreviewBlock: genericPreviewBlock,
      viewportWidth: (_type$example$viewpor = (_type$example = type.example) === null || _type$example === void 0 ? void 0 : _type$example.viewportWidth) !== null && _type$example$viewpor !== void 0 ? _type$example$viewpor : 500,
      className: className,
      isActive: activeStyle === style,
      key: style.name,
      onSelect: () => {
        updateBlockAttributes(clientId, {
          className: styleClassName
        });
        onHoverClassName(null);
        onSwitch();
      },
      onBlur: () => onHoverClassName(null),
      onHover: () => onHoverClassName(styleClassName),
      style: style,
      styleClassName: styleClassName,
      itemRole: itemRole
    });
  }));
}

function BlockStyleItem(_ref2) {
  let {
    genericPreviewBlock,
    viewportWidth,
    style,
    isActive,
    onBlur,
    onHover,
    onSelect,
    styleClassName,
    itemRole
  } = _ref2;
  const previewBlocks = (0, _element.useMemo)(() => {
    return { ...genericPreviewBlock,
      attributes: { ...genericPreviewBlock.attributes,
        className: styleClassName
      }
    };
  }, [genericPreviewBlock, styleClassName]);
  return (0, _element.createElement)("div", {
    key: style.name,
    className: (0, _classnames.default)('block-editor-block-styles__item', {
      'is-active': isActive
    }),
    onClick: () => onSelect(),
    onKeyDown: event => {
      if (_keycodes.ENTER === event.keyCode || _keycodes.SPACE === event.keyCode) {
        event.preventDefault();
        onSelect();
      }
    },
    onMouseEnter: onHover,
    onMouseLeave: onBlur,
    role: itemRole || 'button',
    tabIndex: "0",
    "aria-label": style.label || style.name
  }, (0, _element.createElement)("div", {
    className: "block-editor-block-styles__item-preview"
  }, (0, _element.createElement)(_blockPreview.default, {
    viewportWidth: viewportWidth,
    blocks: previewBlocks
  })), (0, _element.createElement)("div", {
    className: "block-editor-block-styles__item-label"
  }, style.label || style.name));
}

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