@gechiui/block-editor/build/components/block-variation-picker/index.native.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 _reactNative = require("react-native");

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

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

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

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

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

var _icons = require("@gechiui/icons");

var _style = _interopRequireDefault(require("./style.scss"));

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const hitSlop = {
  top: 22,
  bottom: 22,
  left: 22,
  right: 22
};

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

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

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

var _default = (0, _compose.compose)((0, _data.withSelect)((select, _ref2) => {
  let {} = _ref2;
  const {
    getBlockVariations
  } = select(_blocks.store);
  return {
    date: getBlockVariations('core/columns', 'block')
  };
}))(BlockVariationPicker);

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