@wordpress/block-editor/build/components/unsupported-block-details/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 _components = require("@wordpress/components");
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _hooks = require("@wordpress/hooks");
var _style = _interopRequireDefault(require("./style.scss"));
var _useUnsupportedBlockEditor = _interopRequireDefault(require("../use-unsupported-block-editor"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const EMPTY_ARRAY = [];
const UnsupportedBlockDetails = ({
  clientId,
  showSheet,
  onCloseSheet,
  customBlockTitle = '',
  icon,
  title,
  description,
  actionButtonLabel,
  customActions = EMPTY_ARRAY
}) => {
  const [sendFallbackMessage, setSendFallbackMessage] = (0, _element.useState)(false);
  const [sendButtonPressMessage, setSendButtonPressMessage] = (0, _element.useState)(false);
  const {
    blockName,
    blockContent,
    isUnsupportedBlockEditorSupported,
    canEnableUnsupportedBlockEditor,
    isEditableInUnsupportedBlockEditor
  } = (0, _useUnsupportedBlockEditor.default)(clientId);

  // Styles
  const textStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['unsupported-block-details__text'], _style.default['unsupported-block-details__text--dark']);
  const titleStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['unsupported-block-details__title'], _style.default['unsupported-block-details__title--dark']);
  const descriptionStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['unsupported-block-details__description'], _style.default['unsupported-block-details__description--dark']);
  const iconStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['unsupported-block-details__icon'], _style.default['unsupported-block-details__icon--dark']);
  const actionButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['unsupported-block-details__action-button'], _style.default['unsupported-block-details__action-button--dark']);
  const blockTitle = customBlockTitle || (0, _blocks.getBlockType)(blockName)?.title || blockName;
  const requestFallback = (0, _element.useCallback)(() => {
    if (canEnableUnsupportedBlockEditor && isUnsupportedBlockEditorSupported === false) {
      onCloseSheet();
      setSendButtonPressMessage(true);
    } else {
      onCloseSheet();
      setSendFallbackMessage(true);
    }
  }, [canEnableUnsupportedBlockEditor, isUnsupportedBlockEditorSupported, onCloseSheet]);

  // The description can include extra notes via WP hooks.
  const descriptionWithNotes = (0, _hooks.applyFilters)('native.unsupported_block_details_extra_note', description, blockName);
  const webEditorDefaultLabel = (0, _hooks.applyFilters)('native.unsupported_block_details_web_editor_action', (0, _i18n.__)('Edit using web editor'));
  const canUseWebEditor = (isUnsupportedBlockEditorSupported || canEnableUnsupportedBlockEditor) && isEditableInUnsupportedBlockEditor;
  const actions = [...[canUseWebEditor && {
    label: actionButtonLabel || webEditorDefaultLabel,
    onPress: requestFallback
  }], ...customActions].filter(Boolean);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.BottomSheet, {
    isVisible: showSheet,
    hideHeader: true,
    onClose: onCloseSheet,
    onModalHide: () => {
      if (sendFallbackMessage) {
        // On iOS, onModalHide is called when the controller is still part of the hierarchy.
        // A small delay will ensure that the controller has already been removed.
        (void 0).timeout = setTimeout(() => {
          // For the Classic block, the content is kept in the `content` attribute.
          (0, _reactNativeBridge.requestUnsupportedBlockFallback)(blockContent, clientId, blockName, blockTitle);
        }, 100);
        setSendFallbackMessage(false);
      } else if (sendButtonPressMessage) {
        (void 0).timeout = setTimeout(() => {
          (0, _reactNativeBridge.sendActionButtonPressedAction)(_reactNativeBridge.actionButtons.missingBlockAlertActionButton);
        }, 100);
        setSendButtonPressMessage(false);
      }
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: _style.default['unsupported-block-details__container'],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
        icon: icon || _icons.help,
        color: iconStyle.color,
        size: iconStyle.size
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [textStyle, titleStyle],
        children: title
      }), isEditableInUnsupportedBlockEditor && descriptionWithNotes && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [textStyle, descriptionStyle],
        children: descriptionWithNotes
      })]
    }), actions.map(({
      label,
      onPress
    }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
      label: label,
      separatorType: "topFullWidth",
      onPress: onPress,
      labelStyle: actionButtonStyle
    }, `${label} - ${index}`)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
      label: (0, _i18n.__)('Dismiss'),
      separatorType: "topFullWidth",
      onPress: onCloseSheet,
      labelStyle: actionButtonStyle
    })]
  });
};
var _default = exports.default = UnsupportedBlockDetails;
//# sourceMappingURL=index.native.js.map