@wordpress/components/build/mobile/readable-content-view/index.native.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _reactNative = require("react-native");

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const PIXEL_RATIO = 2;

const ReadableContentView = ({
  align,
  reversed,
  children,
  style
}) => {
  const {
    width,
    height
  } = _reactNative.Dimensions.get('window');

  const [windowWidth, setWindowWidth] = (0, _element.useState)(width);
  const [windowRatio, setWindowRatio] = (0, _element.useState)(width / height);

  function onDimensionsChange({
    window
  }) {
    setWindowWidth(window.width);
    setWindowRatio(window.width / window.height);
  }

  (0, _element.useEffect)(() => {
    _reactNative.Dimensions.addEventListener('change', onDimensionsChange);

    return () => {
      _reactNative.Dimensions.removeEventListener('change', onDimensionsChange);
    };
  }, []);

  function getWideStyles() {
    if (windowRatio >= PIXEL_RATIO && windowWidth < _components.ALIGNMENT_BREAKPOINTS.large) {
      return _style.default.wideLandscape;
    }

    if (windowWidth <= _components.ALIGNMENT_BREAKPOINTS.small) {
      return {
        maxWidth: windowWidth
      };
    }

    if (windowWidth >= _components.ALIGNMENT_BREAKPOINTS.medium && windowWidth < _components.ALIGNMENT_BREAKPOINTS.wide) {
      return _style.default.wideMedium;
    }
  }

  return (0, _element.createElement)(_reactNative.View, {
    style: _style.default.container
  }, (0, _element.createElement)(_reactNative.View, {
    style: [reversed ? _style.default.reversedCenteredContent : _style.default.centeredContent, style, _style.default[align], align === _components.WIDE_ALIGNMENTS.alignments.wide && getWideStyles()]
  }, children));
};

const isContentMaxWidth = () => {
  const {
    width
  } = _reactNative.Dimensions.get('window');

  return width > _style.default.centeredContent.maxWidth;
};

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