@wordpress/editor/build/components/offline-status/index.native.js

Enhanced block editor for WordPress posts.

"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 _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _styleNative = _interopRequireDefault(require("./style.native.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Conditionally announces messages for screen reader users. This Hook provides
 * two benefits over React Native's `accessibilityLiveRegion`:
 *
 * 1. It works on both iOS and Android.
 * 2. It allows announcing a secondary message when the component is inactive.
 *
 * @param {string}  message                   The message to announce.
 * @param {Object}  options                   Options for the Hook.
 * @param {boolean} [options.isActive]        Whether the message should be announced.
 * @param {string}  [options.inactiveMessage] The message to announce when inactive.
 */function useAccessibilityLiveRegion(message, {
  isActive,
  inactiveMessage
}) {
  const {
    announceForAccessibility
  } = _reactNative.AccessibilityInfo;
  const prevIsActive = (0, _compose.usePrevious)(isActive);
  (0, _element.useEffect)(() => {
    const unconditionalMessage = typeof isActive === 'undefined';
    const initialRender = typeof prevIsActive === 'undefined';
    if (unconditionalMessage || isActive && !prevIsActive && !initialRender) {
      announceForAccessibility(message);
    } else if (!isActive && prevIsActive && inactiveMessage) {
      announceForAccessibility(inactiveMessage);
    }
  }, [message, isActive, prevIsActive, inactiveMessage, announceForAccessibility]);
}
const OfflineStatus = () => {
  const {
    isConnected
  } = (0, _compose.useNetworkConnectivity)();
  useAccessibilityLiveRegion((0, _i18n.__)('Network connection re-established'), {
    isActive: isConnected,
    inactiveMessage: (0, _i18n.__)('Network connection lost, working offline')
  });
  const containerStyle = (0, _compose.usePreferredColorSchemeStyle)(_styleNative.default.offline, _styleNative.default.offline__dark);
  const textStyle = (0, _compose.usePreferredColorSchemeStyle)(_styleNative.default['offline--text'], _styleNative.default['offline--text__dark']);
  const iconStyle = (0, _compose.usePreferredColorSchemeStyle)(_styleNative.default['offline--icon'], _styleNative.default['offline--icon__dark']);
  return !isConnected ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    accessible: true,
    accessibilityRole: "alert",
    accessibilityLabel: (0, _i18n.__)('Network connection lost, working offline'),
    style: containerStyle,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
      fill: iconStyle.fill,
      icon: _icons.offline
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
      style: textStyle,
      children: [(0, _i18n.__)('Working Offline'), " "]
    })]
  }) : null;
};
var _default = exports.default = OfflineStatus;
//# sourceMappingURL=index.native.js.map