Modified the fontScale value to be managed by resolution internal var…

…iable

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

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;

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
 };