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

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { View, Dimensions } from 'react-native';
/**
 * WordPress dependencies
 */

import { useState, useEffect } from '@wordpress/element';
import { ALIGNMENT_BREAKPOINTS, WIDE_ALIGNMENTS } from '@wordpress/components';
/**
 * Internal dependencies
 */

import styles from './style.scss';
const PIXEL_RATIO = 2;

const ReadableContentView = ({
  align,
  reversed,
  children,
  style
}) => {
  const {
    width,
    height
  } = Dimensions.get('window');
  const [windowWidth, setWindowWidth] = useState(width);
  const [windowRatio, setWindowRatio] = useState(width / height);

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

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

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

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

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

  return createElement(View, {
    style: styles.container
  }, createElement(View, {
    style: [reversed ? styles.reversedCenteredContent : styles.centeredContent, style, styles[align], align === WIDE_ALIGNMENTS.alignments.wide && getWideStyles()]
  }, children));
};

const isContentMaxWidth = () => {
  const {
    width
  } = Dimensions.get('window');
  return width > styles.centeredContent.maxWidth;
};

ReadableContentView.isContentMaxWidth = isContentMaxWidth;
export default ReadableContentView;
//# sourceMappingURL=index.native.js.map