Merge pull request #357 from funidata/adjust-replace-all-logic

[GridUtils]: Adjust replaceAll logic
funidata · Apr 18, 2024 · 7281719 · 7281719
2 parents bb18e44 + 5471a84
commit 7281719
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/gridUtils.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/gridUtils.ts
@@ -1,8 +1,4 @@
-import {
-  FudisGridProperties,
-  FudisGridFormInputWidth,
-  FudisGridPropertyCollection,
-} from '../../types/grid';
+import { FudisGridProperties, FudisGridPropertyCollection } from '../../types/grid';
 import { convertToRemValue } from '../../utilities/rem-converter';
 
 /**
@@ -34,16 +30,20 @@ export const getGridClasses = (values: FudisGridProperties): string => {
 };
 
 export const replaceFormInputWidthsToRem = (value: string): string => {
-  const inputXs: FudisGridFormInputWidth = 'inputXs';
-  const inputSm: FudisGridFormInputWidth = 'inputSm';
-  const inputMd: FudisGridFormInputWidth = 'inputMd';
-  const inputLg: FudisGridFormInputWidth = 'inputLg';
+  const convertMap: { [key: string]: string } = {
+    inputXs: convertToRemValue(4),
+    inputSm: convertToRemValue(10),
+    inputMd: convertToRemValue(14),
+    inputLg: convertToRemValue(23),
+  };
 
-  return value
-    .replaceAll(inputXs, convertToRemValue(4))
-    .replaceAll(inputSm, convertToRemValue(10))
-    .replaceAll(inputMd, convertToRemValue(14))
-    .replaceAll(inputLg, convertToRemValue(23));
+  const valueArray = value.split(' ');
+
+  valueArray.forEach((value, index) => {
+    valueArray[index] = convertMap?.[value] ? convertMap[value] : value;
+  });
+
+  return valueArray.join(' ');
 };
 
 /**
@@ -59,7 +59,18 @@ export const getGridCssValue = (value: number | string, isGridItem?: boolean): s
   if (value === 'stretch' && isGridItem) {
     return '1/-1';
   }
-  return replaceFormInputWidthsToRem(value);
+
+  if (
+    typeof value === 'string' &&
+    value !== 'start' &&
+    value !== 'stretch' &&
+    value !== 'end' &&
+    value !== 'center'
+  ) {
+    return replaceFormInputWidthsToRem(value);
+  }
+
+  return value;
 };
 
 /**

diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/utilities/rem-converter.ts b/ngx-fudis/projects/ngx-fudis/src/lib/utilities/rem-converter.ts
@@ -7,8 +7,17 @@
  * Function takes a number and returns value as string with 'rem' abbreviation.
  */
 export const convertToRemValue = (value: number): string => {
-  const applicationBody = document.querySelector('body') as HTMLElement;
-  const multiplier = getComputedStyle(applicationBody).getPropertyValue('--fudis-rem-multiplier');
-  const convertedRemValue: number = value / Number(multiplier);
-  return `${convertedRemValue}rem`;
+  const applicationBody = document?.querySelector('body') as HTMLElement;
+
+  if (applicationBody) {
+    const multiplier =
+      getComputedStyle(applicationBody)?.getPropertyValue('--fudis-rem-multiplier');
+
+    if (multiplier) {
+      const convertedRemValue: number = value / Number(multiplier);
+      return `${convertedRemValue}rem`;
+    }
+  }
+
+  return `${value}rem`;
 };