@wordpress/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 _reactNative = require("react-native");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _blocks = require("@wordpress/blocks");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _style = _interopRequireDefault(require("./style.scss"));
var _store = require("../../store");
var _inserterButton = _interopRequireDefault(require("../inserter-button"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const hitSlop = {
  top: 22,
  bottom: 22,
  left: 22,
  right: 22
};
function BlockVariationPicker({
  isVisible,
  onClose,
  clientId,
  variations
}) {
  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 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
    onPress: onClose,
    hitSlop: hitSlop,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      children: isIOS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: cancelButtonStyle,
        maxFontSizeMultiplier: 2,
        children: (0, _i18n.__)('Cancel')
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
        icon: _icons.close,
        size: 24,
        style: _style.default.closeIcon
      })
    })
  });
  const onVariationSelect = variation => {
    replaceInnerBlocks(clientId, (0, _blocks.createBlocksFromInnerBlocksTemplate)(variation.innerBlocks));
    onClose();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.BottomSheet, {
    isVisible: isVisible,
    onClose: onClose,
    title: (0, _i18n.__)('Select a layout'),
    contentStyle: _style.default.contentStyle,
    leftButton: leftButton,
    testID: "block-variation-modal",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
      horizontal: true,
      showsHorizontalScrollIndicator: false,
      contentContainerStyle: _style.default.contentContainerStyle,
      style: _style.default.containerStyle,
      children: variations.map(v => /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterButton.default, {
        item: v,
        onSelect: () => onVariationSelect(v)
      }, v.name))
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FooterMessageControl, {
        label: (0, _i18n.__)('Note: Column layout may vary between themes and screen sizes')
      })
    })]
  });
}
var _default = exports.default = BlockVariationPicker;
//# sourceMappingURL=index.native.js.map