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

Generic block editor.

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

/**
 * GeChiUI dependencies
 */
import { store as blocksStore } from '@gechiui/blocks';
import { __ } from '@gechiui/i18n';
import { DropdownMenu, MenuGroup, MenuItemsChoice } from '@gechiui/components';
import { useSelect, useDispatch } from '@gechiui/data';
import { useState, useEffect } from '@gechiui/element';
import { chevronDown } from '@gechiui/icons';
/**
 * Internal dependencies
 */

import { __experimentalGetMatchingVariation as getMatchingVariation } from '../../utils';
import { store as blockEditorStore } from '../../store';

function __experimentalBlockVariationTransforms(_ref) {
  let {
    blockClientId
  } = _ref;
  const [selectedValue, setSelectedValue] = useState();
  const {
    updateBlockAttributes
  } = useDispatch(blockEditorStore);
  const {
    variations,
    blockAttributes
  } = useSelect(select => {
    const {
      getBlockVariations
    } = select(blocksStore);
    const {
      getBlockName,
      getBlockAttributes
    } = select(blockEditorStore);
    const blockName = blockClientId && getBlockName(blockClientId);
    return {
      variations: blockName && getBlockVariations(blockName, 'transform'),
      blockAttributes: getBlockAttributes(blockClientId)
    };
  }, [blockClientId]);
  useEffect(() => {
    var _getMatchingVariation;

    setSelectedValue((_getMatchingVariation = getMatchingVariation(blockAttributes, variations)) === null || _getMatchingVariation === void 0 ? void 0 : _getMatchingVariation.name);
  }, [blockAttributes, variations]);
  if (!(variations !== null && variations !== void 0 && variations.length)) return null;
  const selectOptions = variations.map(_ref2 => {
    let {
      name,
      title,
      description
    } = _ref2;
    return {
      value: name,
      label: title,
      info: description
    };
  });

  const onSelectVariation = variationName => {
    updateBlockAttributes(blockClientId, { ...variations.find(_ref3 => {
        let {
          name
        } = _ref3;
        return name === variationName;
      }).attributes
    });
  };

  const baseClass = 'block-editor-block-variation-transforms';
  return createElement(DropdownMenu, {
    className: baseClass,
    label: __('转换变体'),
    text: __('转换变体'),
    popoverProps: {
      position: 'bottom center',
      className: `${baseClass}__popover`
    },
    icon: chevronDown,
    toggleProps: {
      iconPosition: 'right'
    }
  }, () => createElement("div", {
    className: `${baseClass}__container`
  }, createElement(MenuGroup, null, createElement(MenuItemsChoice, {
    choices: selectOptions,
    value: selectedValue,
    onSelect: onSelectVariation
  }))));
}

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