@wordpress/components 24.0.0 → 25.0.0

package/build/mobile/readable-content-view/index.native.js

@@ -1,97 +0,0 @@
-"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 = _ref => {
-  let {
-    align,
-    reversed,
-    children,
-    style
-  } = _ref;
-
-  const {
-    width,
-    height
-  } = _reactNative.Dimensions.get('window');
-
-  const [windowWidth, setWindowWidth] = (0, _element.useState)(width);
-  const [windowRatio, setWindowRatio] = (0, _element.useState)(width / height);
-
-  function onDimensionsChange(_ref2) {
-    let {
-      window
-    } = _ref2;
-    setWindowWidth(window.width);
-    setWindowRatio(window.width / window.height);
-  }
-
-  (0, _element.useEffect)(() => {
-    const dimensionsChangeSubscription = _reactNative.Dimensions.addEventListener('change', onDimensionsChange);
-
-    return () => {
-      dimensionsChangeSubscription.remove();
-    };
-  }, []);
-
-  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

package/build/mobile/readable-content-view/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/readable-content-view/index.native.js"],"names":["PIXEL_RATIO","ReadableContentView","align","reversed","children","style","width","height","Dimensions","get","windowWidth","setWindowWidth","windowRatio","setWindowRatio","onDimensionsChange","window","dimensionsChangeSubscription","addEventListener","remove","getWideStyles","ALIGNMENT_BREAKPOINTS","large","styles","wideLandscape","small","maxWidth","medium","wide","wideMedium","container","reversedCenteredContent","centeredContent","WIDE_ALIGNMENTS","alignments","isContentMaxWidth"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AAIA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,WAAW,GAAG,CAApB;;AAEA,MAAMC,mBAAmB,GAAG,QAA4C;AAAA,MAA1C;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAA0C;;AACvE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBC,wBAAWC,GAAX,CAAgB,QAAhB,CAA1B;;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAUL,KAAV,CAAxC;AACA,QAAM,CAAEM,WAAF,EAAeC,cAAf,IAAkC,uBAAUP,KAAK,GAAGC,MAAlB,CAAxC;;AAEA,WAASO,kBAAT,QAA0C;AAAA,QAAb;AAAEC,MAAAA;AAAF,KAAa;AACzCJ,IAAAA,cAAc,CAAEI,MAAM,CAACT,KAAT,CAAd;AACAO,IAAAA,cAAc,CAAEE,MAAM,CAACT,KAAP,GAAeS,MAAM,CAACR,MAAxB,CAAd;AACA;;AAED,0BAAW,MAAM;AAChB,UAAMS,4BAA4B,GAAGR,wBAAWS,gBAAX,CACpC,QADoC,EAEpCH,kBAFoC,CAArC;;AAKA,WAAO,MAAM;AACZE,MAAAA,4BAA4B,CAACE,MAA7B;AACA,KAFD;AAGA,GATD,EASG,EATH;;AAWA,WAASC,aAAT,GAAyB;AACxB,QACCP,WAAW,IAAIZ,WAAf,IACAU,WAAW,GAAGU,kCAAsBC,KAFrC,EAGE;AACD,aAAOC,eAAOC,aAAd;AACA;;AAED,QAAKb,WAAW,IAAIU,kCAAsBI,KAA1C,EAAkD;AACjD,aAAO;AAAEC,QAAAA,QAAQ,EAAEf;AAAZ,OAAP;AACA;;AAED,QACCA,WAAW,IAAIU,kCAAsBM,MAArC,IACAhB,WAAW,GAAGU,kCAAsBO,IAFrC,EAGE;AACD,aAAOL,eAAOM,UAAd;AACA;AACD;;AAED,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGN,eAAOO;AAArB,KACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CACP1B,QAAQ,GACLmB,eAAOQ,uBADF,GAELR,eAAOS,eAHH,EAIP1B,KAJO,EAKPiB,eAAQpB,KAAR,CALO,EAMPA,KAAK,KAAK8B,4BAAgBC,UAAhB,CAA2BN,IAArC,IACCR,aAAa,EAPP;AADT,KAWGf,QAXH,CADD,CADD;AAiBA,CA1DD;;AA4DA,MAAM8B,iBAAiB,GAAG,MAAM;AAC/B,QAAM;AAAE5B,IAAAA;AAAF,MAAYE,wBAAWC,GAAX,CAAgB,QAAhB,CAAlB;;AACA,SAAOH,KAAK,GAAGgB,eAAOS,eAAP,CAAuBN,QAAtC;AACA,CAHD;;AAKAxB,mBAAmB,CAACiC,iBAApB,GAAwCA,iBAAxC;eAEejC,mB","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Dimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { ALIGNMENT_BREAKPOINTS, WIDE_ALIGNMENTS } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst PIXEL_RATIO = 2;\n\nconst ReadableContentView = ( { align, reversed, children, style } ) => {\n\tconst { width, height } = Dimensions.get( 'window' );\n\tconst [ windowWidth, setWindowWidth ] = useState( width );\n\tconst [ windowRatio, setWindowRatio ] = useState( width / height );\n\n\tfunction onDimensionsChange( { window } ) {\n\t\tsetWindowWidth( window.width );\n\t\tsetWindowRatio( window.width / window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonDimensionsChange\n\t\t);\n\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction getWideStyles() {\n\t\tif (\n\t\t\twindowRatio >= PIXEL_RATIO &&\n\t\t\twindowWidth < ALIGNMENT_BREAKPOINTS.large\n\t\t) {\n\t\t\treturn styles.wideLandscape;\n\t\t}\n\n\t\tif ( windowWidth <= ALIGNMENT_BREAKPOINTS.small ) {\n\t\t\treturn { maxWidth: windowWidth };\n\t\t}\n\n\t\tif (\n\t\t\twindowWidth >= ALIGNMENT_BREAKPOINTS.medium &&\n\t\t\twindowWidth < ALIGNMENT_BREAKPOINTS.wide\n\t\t) {\n\t\t\treturn styles.wideMedium;\n\t\t}\n\t}\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<View\n\t\t\t\tstyle={ [\n\t\t\t\t\treversed\n\t\t\t\t\t\t? styles.reversedCenteredContent\n\t\t\t\t\t\t: styles.centeredContent,\n\t\t\t\t\tstyle,\n\t\t\t\t\tstyles[ align ],\n\t\t\t\t\talign === WIDE_ALIGNMENTS.alignments.wide &&\n\t\t\t\t\t\tgetWideStyles(),\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\nconst isContentMaxWidth = () => {\n\tconst { width } = Dimensions.get( 'window' );\n\treturn width > styles.centeredContent.maxWidth;\n};\n\nReadableContentView.isContentMaxWidth = isContentMaxWidth;\n\nexport default ReadableContentView;\n"]}

package/build-module/mobile/readable-content-view/index.native.js

@@ -1,81 +0,0 @@
-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 = _ref => {
-  let {
-    align,
-    reversed,
-    children,
-    style
-  } = _ref;
-  const {
-    width,
-    height
-  } = Dimensions.get('window');
-  const [windowWidth, setWindowWidth] = useState(width);
-  const [windowRatio, setWindowRatio] = useState(width / height);
-
-  function onDimensionsChange(_ref2) {
-    let {
-      window
-    } = _ref2;
-    setWindowWidth(window.width);
-    setWindowRatio(window.width / window.height);
-  }
-
-  useEffect(() => {
-    const dimensionsChangeSubscription = Dimensions.addEventListener('change', onDimensionsChange);
-    return () => {
-      dimensionsChangeSubscription.remove();
-    };
-  }, []);
-
-  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

package/build-module/mobile/readable-content-view/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/components/src/mobile/readable-content-view/index.native.js"],"names":["View","Dimensions","useState","useEffect","ALIGNMENT_BREAKPOINTS","WIDE_ALIGNMENTS","styles","PIXEL_RATIO","ReadableContentView","align","reversed","children","style","width","height","get","windowWidth","setWindowWidth","windowRatio","setWindowRatio","onDimensionsChange","window","dimensionsChangeSubscription","addEventListener","remove","getWideStyles","large","wideLandscape","small","maxWidth","medium","wide","wideMedium","container","reversedCenteredContent","centeredContent","alignments","isContentMaxWidth"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,SAAnB,QAAoC,oBAApC;AACA,SAASC,qBAAT,EAAgCC,eAAhC,QAAuD,uBAAvD;AACA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AAEA,MAAMC,WAAW,GAAG,CAApB;;AAEA,MAAMC,mBAAmB,GAAG,QAA4C;AAAA,MAA1C;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAA0C;AACvE,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBb,UAAU,CAACc,GAAX,CAAgB,QAAhB,CAA1B;AACA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkCf,QAAQ,CAAEW,KAAF,CAAhD;AACA,QAAM,CAAEK,WAAF,EAAeC,cAAf,IAAkCjB,QAAQ,CAAEW,KAAK,GAAGC,MAAV,CAAhD;;AAEA,WAASM,kBAAT,QAA0C;AAAA,QAAb;AAAEC,MAAAA;AAAF,KAAa;AACzCJ,IAAAA,cAAc,CAAEI,MAAM,CAACR,KAAT,CAAd;AACAM,IAAAA,cAAc,CAAEE,MAAM,CAACR,KAAP,GAAeQ,MAAM,CAACP,MAAxB,CAAd;AACA;;AAEDX,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMmB,4BAA4B,GAAGrB,UAAU,CAACsB,gBAAX,CACpC,QADoC,EAEpCH,kBAFoC,CAArC;AAKA,WAAO,MAAM;AACZE,MAAAA,4BAA4B,CAACE,MAA7B;AACA,KAFD;AAGA,GATQ,EASN,EATM,CAAT;;AAWA,WAASC,aAAT,GAAyB;AACxB,QACCP,WAAW,IAAIX,WAAf,IACAS,WAAW,GAAGZ,qBAAqB,CAACsB,KAFrC,EAGE;AACD,aAAOpB,MAAM,CAACqB,aAAd;AACA;;AAED,QAAKX,WAAW,IAAIZ,qBAAqB,CAACwB,KAA1C,EAAkD;AACjD,aAAO;AAAEC,QAAAA,QAAQ,EAAEb;AAAZ,OAAP;AACA;;AAED,QACCA,WAAW,IAAIZ,qBAAqB,CAAC0B,MAArC,IACAd,WAAW,GAAGZ,qBAAqB,CAAC2B,IAFrC,EAGE;AACD,aAAOzB,MAAM,CAAC0B,UAAd;AACA;AACD;;AAED,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG1B,MAAM,CAAC2B;AAArB,KACC,cAAC,IAAD;AACC,IAAA,KAAK,EAAG,CACPvB,QAAQ,GACLJ,MAAM,CAAC4B,uBADF,GAEL5B,MAAM,CAAC6B,eAHH,EAIPvB,KAJO,EAKPN,MAAM,CAAEG,KAAF,CALC,EAMPA,KAAK,KAAKJ,eAAe,CAAC+B,UAAhB,CAA2BL,IAArC,IACCN,aAAa,EAPP;AADT,KAWGd,QAXH,CADD,CADD;AAiBA,CA1DD;;AA4DA,MAAM0B,iBAAiB,GAAG,MAAM;AAC/B,QAAM;AAAExB,IAAAA;AAAF,MAAYZ,UAAU,CAACc,GAAX,CAAgB,QAAhB,CAAlB;AACA,SAAOF,KAAK,GAAGP,MAAM,CAAC6B,eAAP,CAAuBN,QAAtC;AACA,CAHD;;AAKArB,mBAAmB,CAAC6B,iBAApB,GAAwCA,iBAAxC;AAEA,eAAe7B,mBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Dimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { ALIGNMENT_BREAKPOINTS, WIDE_ALIGNMENTS } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst PIXEL_RATIO = 2;\n\nconst ReadableContentView = ( { align, reversed, children, style } ) => {\n\tconst { width, height } = Dimensions.get( 'window' );\n\tconst [ windowWidth, setWindowWidth ] = useState( width );\n\tconst [ windowRatio, setWindowRatio ] = useState( width / height );\n\n\tfunction onDimensionsChange( { window } ) {\n\t\tsetWindowWidth( window.width );\n\t\tsetWindowRatio( window.width / window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonDimensionsChange\n\t\t);\n\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tfunction getWideStyles() {\n\t\tif (\n\t\t\twindowRatio >= PIXEL_RATIO &&\n\t\t\twindowWidth < ALIGNMENT_BREAKPOINTS.large\n\t\t) {\n\t\t\treturn styles.wideLandscape;\n\t\t}\n\n\t\tif ( windowWidth <= ALIGNMENT_BREAKPOINTS.small ) {\n\t\t\treturn { maxWidth: windowWidth };\n\t\t}\n\n\t\tif (\n\t\t\twindowWidth >= ALIGNMENT_BREAKPOINTS.medium &&\n\t\t\twindowWidth < ALIGNMENT_BREAKPOINTS.wide\n\t\t) {\n\t\t\treturn styles.wideMedium;\n\t\t}\n\t}\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<View\n\t\t\t\tstyle={ [\n\t\t\t\t\treversed\n\t\t\t\t\t\t? styles.reversedCenteredContent\n\t\t\t\t\t\t: styles.centeredContent,\n\t\t\t\t\tstyle,\n\t\t\t\t\tstyles[ align ],\n\t\t\t\t\talign === WIDE_ALIGNMENTS.alignments.wide &&\n\t\t\t\t\t\tgetWideStyles(),\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\nconst isContentMaxWidth = () => {\n\tconst { width } = Dimensions.get( 'window' );\n\treturn width > styles.centeredContent.maxWidth;\n};\n\nReadableContentView.isContentMaxWidth = isContentMaxWidth;\n\nexport default ReadableContentView;\n"]}

package/src/mobile/readable-content-view/index.native.js

@@ -1,85 +0,0 @@
-/**
- * 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( () => {
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onDimensionsChange
-		);
-
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-	}, [] );
-
-	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 (
-		<View style={ styles.container }>
-			<View
-				style={ [
-					reversed
-						? styles.reversedCenteredContent
-						: styles.centeredContent,
-					style,
-					styles[ align ],
-					align === WIDE_ALIGNMENTS.alignments.wide &&
-						getWideStyles(),
-				] }
-			>
-				{ children }
-			</View>
-		</View>
-	);
-};
-
-const isContentMaxWidth = () => {
-	const { width } = Dimensions.get( 'window' );
-	return width > styles.centeredContent.maxWidth;
-};
-
-ReadableContentView.isContentMaxWidth = isContentMaxWidth;
-
-export default ReadableContentView;

package/src/mobile/readable-content-view/style.native.scss

@@ -1,30 +0,0 @@
-.container {
-	align-items: center;
-}
-
-.centeredContent {
-	width: 100%;
-	max-width: 580;
-}
-
-.reversedCenteredContent {
-	flex-direction: column-reverse;
-	width: 100%;
-	max-width: 580;
-}
-
-.full {
-	max-width: 100%;
-}
-
-.wide {
-	max-width: 1054;
-}
-
-.wideMedium {
-	max-width: 770;
-}
-
-.wideLandscape {
-	max-width: 662;
-}