From 059009a8e44efb435066c985425eda0add053eaf Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Mon, 4 Mar 2024 13:40:39 +0900 Subject: [PATCH 01/10] Implemented to update base font size when fontScale changes Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/ResolutionDecorator.js | 8 +++++++- packages/ui/resolution/resolution.js | 13 +++++++------ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/ui/resolution/ResolutionDecorator.js b/packages/ui/resolution/ResolutionDecorator.js index ee2854e85a..a1da5e9962 100644 --- a/packages/ui/resolution/ResolutionDecorator.js +++ b/packages/ui/resolution/ResolutionDecorator.js @@ -9,7 +9,7 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import hoc from '@enact/core/hoc'; -import {init, config as riConfig, defineScreenTypes, getResolutionClasses} from './resolution'; +import {init, config as riConfig, defineScreenTypes, getResolutionClasses, updateBaseFontSize, calculateFontSize} from './resolution'; /** * Default config for `ResolutionDecorator`. @@ -120,6 +120,12 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { if (config.dynamic) window.removeEventListener('resize', this.handleResize); } + componentDidUpdate (prevProps) { + if(prevProps.fontScale !== this.props.fontScale) { + updateBaseFontSize(calculateFontSize(null, this.props.fontScale)); + } + } + handleResize = () => { const classNames = this.didClassesChange(); diff --git a/packages/ui/resolution/resolution.js b/packages/ui/resolution/resolution.js index 4028498a1b..d58bf55b10 100644 --- a/packages/ui/resolution/resolution.js +++ b/packages/ui/resolution/resolution.js @@ -194,18 +194,18 @@ function getScreenType (rez) { * @returns {String} The calculated pixel size (with unit suffix. Ex: "24px"). * @public */ -function calculateFontSize (type) { +function calculateFontSize (type, fontScale) { const scrObj = getScreenTypeObject(type); const shouldScaleFontSize = (config.intermediateScreenHandling === 'scale') && (config.matchSmallerScreenType ? workspaceBounds.width > scrObj.width && workspaceBounds.height > scrObj.height : workspaceBounds.width < scrObj.width && workspaceBounds.height < scrObj.height); let size; if (orientation === 'portrait' && config.orientationHandling === 'scale') { - size = scrObj.height / scrObj.width * scrObj.pxPerRem; + size = scrObj.height / scrObj.width * (scrObj.pxPerRem * fontScale); } else { - size = scrObj.pxPerRem; + size = (scrObj.pxPerRem * fontScale); if (orientation === 'landscape' && shouldScaleFontSize) { - size = parseInt(workspaceBounds.height * scrObj.pxPerRem / scrObj.height); + size = parseInt(workspaceBounds.height * (scrObj.pxPerRem * fontScale)/ scrObj.height); } } return size + 'px'; @@ -215,7 +215,7 @@ function calculateFontSize (type) { * @function * @memberof ui/resolution * @param {String} size A valid CSS measurement to be applied as the base document font size. - * @private + * @public * @returns {undefined} */ function updateBaseFontSize (size) { @@ -494,5 +494,6 @@ export { scaleToRem, selectSrc, unit, - unitToPixelFactors + unitToPixelFactors, + updateBaseFontSize }; From 60cd8d657abb8e780f995e4135733cac5311cdcb Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Mon, 4 Mar 2024 14:34:32 +0900 Subject: [PATCH 02/10] Revert Api that was unnecessarily changed to public to private Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/resolution.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/resolution/resolution.js b/packages/ui/resolution/resolution.js index d58bf55b10..059892dadb 100644 --- a/packages/ui/resolution/resolution.js +++ b/packages/ui/resolution/resolution.js @@ -215,7 +215,7 @@ function calculateFontSize (type, fontScale) { * @function * @memberof ui/resolution * @param {String} size A valid CSS measurement to be applied as the base document font size. - * @public + * @private * @returns {undefined} */ function updateBaseFontSize (size) { From 7edf27da6918ecb94b63d62eaaf03a7160509f6f Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Mon, 4 Mar 2024 14:54:08 +0900 Subject: [PATCH 03/10] Specified fontScale default value in calculateFontSize Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/resolution.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/resolution/resolution.js b/packages/ui/resolution/resolution.js index 059892dadb..e90470c971 100644 --- a/packages/ui/resolution/resolution.js +++ b/packages/ui/resolution/resolution.js @@ -194,7 +194,7 @@ function getScreenType (rez) { * @returns {String} The calculated pixel size (with unit suffix. Ex: "24px"). * @public */ -function calculateFontSize (type, fontScale) { +function calculateFontSize (type, fontScale = 1) { const scrObj = getScreenTypeObject(type); const shouldScaleFontSize = (config.intermediateScreenHandling === 'scale') && (config.matchSmallerScreenType ? workspaceBounds.width > scrObj.width && workspaceBounds.height > scrObj.height : workspaceBounds.width < scrObj.width && workspaceBounds.height < scrObj.height); From dc800affd41759250681a80746b32bc529edc4e4 Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Tue, 12 Mar 2024 15:01:39 +0900 Subject: [PATCH 04/10] Fixed lint warning Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/ResolutionDecorator.js | 13 +++++++------ packages/ui/resolution/resolution.js | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/ui/resolution/ResolutionDecorator.js b/packages/ui/resolution/ResolutionDecorator.js index a1da5e9962..9289a1c1be 100644 --- a/packages/ui/resolution/ResolutionDecorator.js +++ b/packages/ui/resolution/ResolutionDecorator.js @@ -97,7 +97,8 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { static displayName = 'ResolutionDecorator'; static propTypes = /** @lends ui/resolution.ResolutionDecorator.prototype */ { - className: PropTypes.string + className: PropTypes.string, + fontScale: PropTypes.number }; constructor (props) { @@ -116,16 +117,16 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { this.rootNode = ReactDOM.findDOMNode(this); } - componentWillUnmount () { - if (config.dynamic) window.removeEventListener('resize', this.handleResize); - } - componentDidUpdate (prevProps) { - if(prevProps.fontScale !== this.props.fontScale) { + if (prevProps.fontScale !== this.props.fontScale) { updateBaseFontSize(calculateFontSize(null, this.props.fontScale)); } } + componentWillUnmount () { + if (config.dynamic) window.removeEventListener('resize', this.handleResize); + } + handleResize = () => { const classNames = this.didClassesChange(); diff --git a/packages/ui/resolution/resolution.js b/packages/ui/resolution/resolution.js index e90470c971..52cdc75af1 100644 --- a/packages/ui/resolution/resolution.js +++ b/packages/ui/resolution/resolution.js @@ -205,7 +205,7 @@ function calculateFontSize (type, fontScale = 1) { } else { size = (scrObj.pxPerRem * fontScale); if (orientation === 'landscape' && shouldScaleFontSize) { - size = parseInt(workspaceBounds.height * (scrObj.pxPerRem * fontScale)/ scrObj.height); + size = parseInt(workspaceBounds.height * (scrObj.pxPerRem * fontScale) / scrObj.height); } } return size + 'px'; From 0166ae285d4d9da96afb8060c70216364db1d35d Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Wed, 13 Mar 2024 16:56:17 +0900 Subject: [PATCH 05/10] Applied reviews - Added fontScale to defaultConfig of ResolutionDecorator - Deleted fontScale to prevent it from being passed to Wrapped. Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/ResolutionDecorator.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/ui/resolution/ResolutionDecorator.js b/packages/ui/resolution/ResolutionDecorator.js index 9289a1c1be..22297eae03 100644 --- a/packages/ui/resolution/ResolutionDecorator.js +++ b/packages/ui/resolution/ResolutionDecorator.js @@ -28,6 +28,18 @@ const defaultConfig = { */ dynamic: true, + /** + * Font Scale for large text mode. + * Use this value to set the scale of the font. + * This is the value that will be multiplied by pxPerRem, which is determined by resolution. + + * @type {Number} + * @default 1 + * @public + * @memberof ui/resolution.ResolutionDecorator.defaultConfig + */ + fontScale: 1, + /** * Determines how to calculate font-size. * When set to `scale` and the screen is in `landscape` orientation, @@ -152,11 +164,15 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { } render () { + const {...rest} = this.props; + + delete rest.fontScale; + // Check if the classes are different from our previous classes let classes = getResolutionClasses(); if (this.props.className) classes += (classes ? ' ' : '') + this.props.className; - return ; + return ; } }; }); From a371997daeb856b17a253d2730f7a35353186506 Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Fri, 15 Mar 2024 15:17:30 +0900 Subject: [PATCH 06/10] Applied reviews - Moved fontScale to defaultProps from defaultConfig - Modified it so that fontScale is applied on initial entry Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/ResolutionDecorator.js | 30 ++++++++++--------- packages/ui/resolution/resolution.js | 14 +++++---- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/ui/resolution/ResolutionDecorator.js b/packages/ui/resolution/ResolutionDecorator.js index 22297eae03..9b8a96e453 100644 --- a/packages/ui/resolution/ResolutionDecorator.js +++ b/packages/ui/resolution/ResolutionDecorator.js @@ -28,18 +28,6 @@ const defaultConfig = { */ dynamic: true, - /** - * Font Scale for large text mode. - * Use this value to set the scale of the font. - * This is the value that will be multiplied by pxPerRem, which is determined by resolution. - - * @type {Number} - * @default 1 - * @public - * @memberof ui/resolution.ResolutionDecorator.defaultConfig - */ - fontScale: 1, - /** * Determines how to calculate font-size. * When set to `scale` and the screen is in `landscape` orientation, @@ -110,14 +98,28 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { static propTypes = /** @lends ui/resolution.ResolutionDecorator.prototype */ { className: PropTypes.string, + + /** + * Font Scale for large text mode. + * Use this value to set the scale of the font. + * This is the value that will be multiplied by pxPerRem, which is determined by resolution. + * + * @type {Number} + * @default 1 + * @public + */ fontScale: PropTypes.number }; + static defaultProps = { + fontScale: 1 + }; + constructor (props) { super(props); riConfig.intermediateScreenHandling = config.intermediateScreenHandling; riConfig.matchSmallerScreenType = config.matchSmallerScreenType; - init({measurementNode: (typeof window !== 'undefined' && window)}); + init({measurementNode: (typeof window !== 'undefined' && window), fontScale: this.props.fontScale}); this.state = { resolutionClasses: '' }; @@ -156,7 +158,7 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { */ didClassesChange () { const prevClassNames = getResolutionClasses(); - init({measurementNode: this.rootNode}); + init({measurementNode: this.rootNode, fontScale: this.props.fontScale}); const classNames = getResolutionClasses(); if (prevClassNames !== classNames) { return classNames; diff --git a/packages/ui/resolution/resolution.js b/packages/ui/resolution/resolution.js index 52cdc75af1..71743ea4a2 100644 --- a/packages/ui/resolution/resolution.js +++ b/packages/ui/resolution/resolution.js @@ -189,9 +189,10 @@ function getScreenType (rez) { * * @function * @memberof ui/resolution - * @param {String} type Screen type to base size the calculation on. If no - * screen type is provided, the current screen type will be used. - * @returns {String} The calculated pixel size (with unit suffix. Ex: "24px"). + * @param {String} type Screen type to base size the calculation on. If no + * screen type is provided, the current screen type will be used. + * @param {Number} fontScale Scalue value to be multiflied by the base font size. + * @returns {String} The calculated pixel size (with unit suffix. Ex: "24px"). * @public */ function calculateFontSize (type, fontScale = 1) { @@ -456,19 +457,20 @@ function selectSrc (src) { * @memberof ui/resolution * @param {Object} args A hash of options. The key `measurementNode` is used to as the node, * typically the root element, to measure and use as the dimensions for - * the `screenType`. + * the `screenType`. The key `fontScale` is used multiflied scale value + * to base font size. * * @returns {undefined} * @public */ function init (args = {}) { - const {measurementNode} = args; + const {measurementNode, fontScale} = args; updateWorkspaceBounds(measurementNode); screenType = getScreenType(); screenTypeObject = getScreenTypeObject(); unitToPixelFactors.rem = getUnitToPixelFactors(); riRatio = getRiRatio(); - updateBaseFontSize(calculateFontSize()); + updateBaseFontSize(calculateFontSize(null, fontScale)); } /** From 4b93d18861378ed94dfeb9a6febd4c9be9fb8f3f Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Fri, 15 Mar 2024 16:12:05 +0900 Subject: [PATCH 07/10] Modified the fontScale value to be managed by resolution internal variable Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/ResolutionDecorator.js | 11 ++++--- packages/ui/resolution/resolution.js | 31 +++++++++++++------ 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/packages/ui/resolution/ResolutionDecorator.js b/packages/ui/resolution/ResolutionDecorator.js index 9b8a96e453..b3ef0f6b05 100644 --- a/packages/ui/resolution/ResolutionDecorator.js +++ b/packages/ui/resolution/ResolutionDecorator.js @@ -9,7 +9,7 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import hoc from '@enact/core/hoc'; -import {init, config as riConfig, defineScreenTypes, getResolutionClasses, updateBaseFontSize, calculateFontSize} from './resolution'; +import {init, calculateFontSize, config as riConfig, defineScreenTypes, getResolutionClasses, updateBaseFontSize, updateFontScale} from './resolution'; /** * Default config for `ResolutionDecorator`. @@ -119,7 +119,7 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { super(props); riConfig.intermediateScreenHandling = config.intermediateScreenHandling; riConfig.matchSmallerScreenType = config.matchSmallerScreenType; - init({measurementNode: (typeof window !== 'undefined' && window), fontScale: this.props.fontScale}); + init({measurementNode: (typeof window !== 'undefined' && window)}); this.state = { resolutionClasses: '' }; @@ -129,11 +129,14 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { if (config.dynamic) window.addEventListener('resize', this.handleResize); // eslint-disable-next-line react/no-find-dom-node this.rootNode = ReactDOM.findDOMNode(this); + + updateFontScale(this.props.fontScale); } componentDidUpdate (prevProps) { if (prevProps.fontScale !== this.props.fontScale) { - updateBaseFontSize(calculateFontSize(null, this.props.fontScale)); + updateFontScale(this.props.fontScale); + updateBaseFontSize(calculateFontSize()); } } @@ -158,7 +161,7 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { */ didClassesChange () { const prevClassNames = getResolutionClasses(); - init({measurementNode: this.rootNode, fontScale: this.props.fontScale}); + init({measurementNode: this.rootNode}); const classNames = getResolutionClasses(); if (prevClassNames !== classNames) { return classNames; diff --git a/packages/ui/resolution/resolution.js b/packages/ui/resolution/resolution.js index 71743ea4a2..b478dcc28e 100644 --- a/packages/ui/resolution/resolution.js +++ b/packages/ui/resolution/resolution.js @@ -1,4 +1,5 @@ let baseScreen, + fontScale = 1, orientation, riRatio, screenType, @@ -189,13 +190,12 @@ function getScreenType (rez) { * * @function * @memberof ui/resolution - * @param {String} type Screen type to base size the calculation on. If no - * screen type is provided, the current screen type will be used. - * @param {Number} fontScale Scalue value to be multiflied by the base font size. - * @returns {String} The calculated pixel size (with unit suffix. Ex: "24px"). + * @param {String} type Screen type to base size the calculation on. If no + * screen type is provided, the current screen type will be used. + * @returns {String} The calculated pixel size (with unit suffix. Ex: "24px"). * @public */ -function calculateFontSize (type, fontScale = 1) { +function calculateFontSize (type) { const scrObj = getScreenTypeObject(type); const shouldScaleFontSize = (config.intermediateScreenHandling === 'scale') && (config.matchSmallerScreenType ? workspaceBounds.width > scrObj.width && workspaceBounds.height > scrObj.height : workspaceBounds.width < scrObj.width && workspaceBounds.height < scrObj.height); @@ -225,6 +225,17 @@ function updateBaseFontSize (size) { } } +/** + * @function + * @memberof ui/resolution + * @param {Number} scale A value is used multiflied scale to base font size. + * @returns {undefined} + * @private + */ +function updateFontScale (fontScaleValue) { + fontScale = fontScaleValue; +} + /** * Returns the CSS classes for the given `type`. * @@ -457,20 +468,19 @@ function selectSrc (src) { * @memberof ui/resolution * @param {Object} args A hash of options. The key `measurementNode` is used to as the node, * typically the root element, to measure and use as the dimensions for - * the `screenType`. The key `fontScale` is used multiflied scale value - * to base font size. + * the `screenType`. * * @returns {undefined} * @public */ function init (args = {}) { - const {measurementNode, fontScale} = args; + const {measurementNode} = args; updateWorkspaceBounds(measurementNode); screenType = getScreenType(); screenTypeObject = getScreenTypeObject(); unitToPixelFactors.rem = getUnitToPixelFactors(); riRatio = getRiRatio(); - updateBaseFontSize(calculateFontSize(null, fontScale)); + updateBaseFontSize(calculateFontSize()); } /** @@ -497,5 +507,6 @@ export { selectSrc, unit, unitToPixelFactors, - updateBaseFontSize + updateBaseFontSize, + updateFontScale }; From a1b27c3cdcda7ec36f5c665f536d51dd9e696858 Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Tue, 19 Mar 2024 19:28:45 +0900 Subject: [PATCH 08/10] Applied review - Moved updateFontScale to constructor Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/ResolutionDecorator.js | 7 +++---- packages/ui/resolution/resolution.js | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/ui/resolution/ResolutionDecorator.js b/packages/ui/resolution/ResolutionDecorator.js index b3ef0f6b05..4789acf07d 100644 --- a/packages/ui/resolution/ResolutionDecorator.js +++ b/packages/ui/resolution/ResolutionDecorator.js @@ -100,9 +100,9 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { className: PropTypes.string, /** - * Font Scale for large text mode. + * Font Scale value for the large screen mode. * Use this value to set the scale of the font. - * This is the value that will be multiplied by pxPerRem, which is determined by resolution. + * This is the value that will be multiplied by pxPerRem, which is determined by the resolution. * * @type {Number} * @default 1 @@ -119,6 +119,7 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { super(props); riConfig.intermediateScreenHandling = config.intermediateScreenHandling; riConfig.matchSmallerScreenType = config.matchSmallerScreenType; + updateFontScale(this.props.fontScale); init({measurementNode: (typeof window !== 'undefined' && window)}); this.state = { resolutionClasses: '' @@ -129,8 +130,6 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { if (config.dynamic) window.addEventListener('resize', this.handleResize); // eslint-disable-next-line react/no-find-dom-node this.rootNode = ReactDOM.findDOMNode(this); - - updateFontScale(this.props.fontScale); } componentDidUpdate (prevProps) { diff --git a/packages/ui/resolution/resolution.js b/packages/ui/resolution/resolution.js index b478dcc28e..71a61d080d 100644 --- a/packages/ui/resolution/resolution.js +++ b/packages/ui/resolution/resolution.js @@ -228,7 +228,7 @@ function updateBaseFontSize (size) { /** * @function * @memberof ui/resolution - * @param {Number} scale A value is used multiflied scale to base font size. + * @param {Number} fontScaleValue The value to scale the base font size. * @returns {undefined} * @private */ From 7efab796df4b2443ec4cb17c6f82d21aff02ee87 Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Thu, 28 Mar 2024 19:22:14 +0900 Subject: [PATCH 09/10] Modified so that fontScale can be applied when adjusting the scale value regardless of the base font. Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/resolution.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ui/resolution/resolution.js b/packages/ui/resolution/resolution.js index 71a61d080d..124ae91120 100644 --- a/packages/ui/resolution/resolution.js +++ b/packages/ui/resolution/resolution.js @@ -344,7 +344,7 @@ function getAspectRatioName (type) { * @public */ function scale (px) { - return (riRatio || getRiRatio()) * px; + return (riRatio || getRiRatio()) * px * fontScale; } /** @@ -377,8 +377,7 @@ function unit (pixels, toUnit) { if (!toUnit || !unitToPixelFactors[toUnit]) return; if (typeof pixels === 'string' && pixels.substr(-2) === 'px') pixels = parseInt(pixels.substr(0, pixels.length - 2)); if (typeof pixels !== 'number') return; - - return (pixels / unitToPixelFactors[toUnit]) + '' + toUnit; + return (pixels / (fontScale * unitToPixelFactors[toUnit])) + '' + toUnit; } /** From 5308615883c4717add8294936df0c8e7e512a28e Mon Sep 17 00:00:00 2001 From: "myelyn.kim" Date: Fri, 29 Mar 2024 17:37:52 +0900 Subject: [PATCH 10/10] Added fontScale to config of ResolutionDecorator - FontScale must be updated before the scale function is called Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com) --- packages/ui/resolution/ResolutionDecorator.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/resolution/ResolutionDecorator.js b/packages/ui/resolution/ResolutionDecorator.js index 4789acf07d..d0f54b39fc 100644 --- a/packages/ui/resolution/ResolutionDecorator.js +++ b/packages/ui/resolution/ResolutionDecorator.js @@ -92,6 +92,7 @@ const ResolutionDecorator = hoc(defaultConfig, (config, Wrapped) => { if (config.screenTypes) { defineScreenTypes(config.screenTypes); } + updateFontScale(config.fontScale); return class extends Component { static displayName = 'ResolutionDecorator';