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

Generic block editor.

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

/**
 * External dependencies
 */
import { find, noop } from 'lodash';
import classnames from 'classnames';
/**
 * GeChiUI dependencies
 */

import { useMemo } from '@gechiui/element';
import { useSelect, useDispatch } from '@gechiui/data';
import { ENTER, SPACE } from '@gechiui/keycodes';
import { _x } from '@gechiui/i18n';
import { getBlockType, cloneBlock, getBlockFromExample, store as blocksStore } from '@gechiui/blocks';
/**
 * Internal dependencies
 */

import { getActiveStyle, replaceActiveStyle } from './utils';
import BlockPreview from '../block-preview';
import { store as blockEditorStore } from '../../store';
const EMPTY_OBJECT = {};

function useGenericPreviewBlock(block, type) {
  return 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 getBlockFromExample(blockName, {
        attributes: example.attributes,
        innerBlocks: example.innerBlocks
      });
    }

    if (block) {
      return 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 = noop,
    onHoverClassName = noop,
    itemRole
  } = _ref;

  const selector = select => {
    const {
      getBlock
    } = select(blockEditorStore);
    const block = getBlock(clientId);

    if (!block) {
      return EMPTY_OBJECT;
    }

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

  const {
    styles,
    block,
    type,
    className
  } = useSelect(selector, [clientId]);
  const {
    updateBlockAttributes
  } = useDispatch(blockEditorStore);
  const genericPreviewBlock = useGenericPreviewBlock(block, type);

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

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

    const styleClassName = replaceActiveStyle(className, activeStyle, style);
    return 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 = useMemo(() => {
    return { ...genericPreviewBlock,
      attributes: { ...genericPreviewBlock.attributes,
        className: styleClassName
      }
    };
  }, [genericPreviewBlock, styleClassName]);
  return createElement("div", {
    key: style.name,
    className: classnames('block-editor-block-styles__item', {
      'is-active': isActive
    }),
    onClick: () => onSelect(),
    onKeyDown: event => {
      if (ENTER === event.keyCode || SPACE === event.keyCode) {
        event.preventDefault();
        onSelect();
      }
    },
    onMouseEnter: onHover,
    onMouseLeave: onBlur,
    role: itemRole || 'button',
    tabIndex: "0",
    "aria-label": style.label || style.name
  }, createElement("div", {
    className: "block-editor-block-styles__item-preview"
  }, createElement(BlockPreview, {
    viewportWidth: viewportWidth,
    blocks: previewBlocks
  })), createElement("div", {
    className: "block-editor-block-styles__item-label"
  }, style.label || style.name));
}

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