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

Generic block editor.

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

/**
 * External dependencies
 */
import { ScrollView, View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
/**
 * GeChiUI dependencies
 */

import { withSelect, useDispatch } from '@gechiui/data';
import { compose, usePreferredColorSchemeStyle } from '@gechiui/compose';
import { createBlocksFromInnerBlocksTemplate, store as blocksStore } from '@gechiui/blocks';
import { __ } from '@gechiui/i18n';
import { PanelBody, BottomSheet, FooterMessageControl, InserterButton } from '@gechiui/components';
import { Icon, close } from '@gechiui/icons';
import { useMemo } from '@gechiui/element';
/**
 * Internal dependencies
 */

import styles from './style.scss';
import { store as blockEditorStore } from '../../store';
const hitSlop = {
  top: 22,
  bottom: 22,
  left: 22,
  right: 22
};

function BlockVariationPicker(_ref) {
  let {
    isVisible,
    onClose,
    clientId,
    variations
  } = _ref;
  const {
    replaceInnerBlocks
  } = useDispatch(blockEditorStore);
  const isIOS = Platform.OS === 'ios';
  const cancelButtonStyle = usePreferredColorSchemeStyle(styles.cancelButton, styles.cancelButtonDark);
  const leftButton = useMemo(() => createElement(TouchableWithoutFeedback, {
    onPress: onClose,
    hitSlop: hitSlop
  }, createElement(View, null, isIOS ? createElement(Text, {
    style: cancelButtonStyle,
    maxFontSizeMultiplier: 2
  }, __('取消')) : createElement(Icon, {
    icon: close,
    size: 24,
    style: styles.closeIcon
  }))), [onClose, cancelButtonStyle]);

  const onVariationSelect = variation => {
    replaceInnerBlocks(clientId, createBlocksFromInnerBlocksTemplate(variation.innerBlocks));
    onClose();
  };

  return useMemo(() => createElement(BottomSheet, {
    isVisible: isVisible,
    onClose: onClose,
    title: __('Select a layout'),
    contentStyle: styles.contentStyle,
    leftButton: leftButton
  }, createElement(ScrollView, {
    horizontal: true,
    showsHorizontalScrollIndicator: false,
    contentContainerStyle: styles.contentContainerStyle,
    style: styles.containerStyle
  }, variations.map(v => {
    return createElement(InserterButton, {
      item: v,
      key: v.name,
      onSelect: () => onVariationSelect(v)
    });
  })), createElement(PanelBody, null, createElement(FooterMessageControl, {
    label: __('Note: Column layout may vary between themes and screen sizes')
  }))), [variations, isVisible, onClose]);
}

export default compose(withSelect((select, _ref2) => {
  let {} = _ref2;
  const {
    getBlockVariations
  } = select(blocksStore);
  return {
    date: getBlockVariations('core/columns', 'block')
  };
}))(BlockVariationPicker);
//# sourceMappingURL=index.native.js.map