fix race condition in Grid when rendered before device is initialized

Author: MarcusNotheis

packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Grid Custom Class Names and Styling 1`] = `
   style="width: 60%; background-color: purple;"
 >
   <div
-    class="Grid-gridSpan-0"
+    class="Grid-gridSpan-0 Grid-gridSpan3-0"
   >
     <div
       style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
@@ -29,7 +29,7 @@ exports[`Grid Grid Position Center 1`] = `
   class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0 Grid-gridPositionCenter-0"
 >
   <div
-    class="Grid-gridSpan-0"
+    class="Grid-gridSpan-0 Grid-gridSpan3-0"
   >
     <div
       style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
@@ -52,7 +52,7 @@ exports[`Grid Grid Position Right 1`] = `
   class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0 Grid-gridPositionRight-0"
 >
   <div
-    class="Grid-gridSpan-0"
+    class="Grid-gridSpan-0 Grid-gridSpan3-0"
   >
     <div
       style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
@@ -75,7 +75,7 @@ exports[`Grid Renders Children 1`] = `
   class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
 >
   <div
-    class="Grid-gridSpan-0"
+    class="Grid-gridSpan-0 Grid-gridSpan3-0"
   >
     <div
       style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
@@ -98,15 +98,15 @@ exports[`Grid Renders Children with custom layout data 1`] = `
   class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
 >
   <div
-    class="Grid-gridSpan-0"
+    class="Grid-gridSpan-0 Grid-gridSpan12-0"
   >
     <div
       data-layout="[object Object]"
       style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
     />
   </div>
   <div
-    class="Grid-gridSpan-0"
+    class="Grid-gridSpan-0 Grid-gridSpan3-0 Grid-gridIndent1-0"
   >
     <div
       data-layout="[object Object]"

packages/main/src/components/Grid/index.tsx

@@ -1,6 +1,7 @@
+import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
-import { useViewportRange } from "@ui5/webcomponents-react-base/lib/useViewportRange";
+import { useViewportRange } from '@ui5/webcomponents-react-base/lib/useViewportRange';
 import React, {
   Children,
   CSSProperties,
@@ -12,7 +13,6 @@ import React, {
   Ref,
   useMemo
 } from 'react';
-import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { GridClasses } from './Grid.jss';
 
@@ -61,32 +61,29 @@ export interface GridPropTypes extends CommonProps {
   children: ReactNode | ReactNodeArray;
 }
 
-const INDENT_PATTERN = /^([X][L](?:[0-9]|1[0-1]))? ?([L](?:[0-9]|1[0-1]))? ?([M](?:[0-9]|1[0-1]))? ?([S](?:[0-9]|1[0-1]))?$/i;
-const SPAN_PATTERN = /^([X][L](?:[1-9]|1[0-2]))? ?([L](?:[1-9]|1[0-2]))? ?([M](?:[1-9]|1[0-2]))? ?([S](?:[1-9]|1[0-2]))?$/i;
+const INDENT_PATTERN = /^([X][L](?<LargeDesktop>[0-9]|1[0-1]))? ?([L](?<Desktop>[0-9]|1[0-1]))? ?([M](?<Tablet>[0-9]|1[0-1]))? ?([S](?<Phone>[0-9]|1[0-1]))?$/i;
+const SPAN_PATTERN = /^([X][L](?<LargeDesktop>[1-9]|1[0-2]))? ?([L](?<Desktop>[1-9]|1[0-2]))? ?([M](?<Tablet>[1-9]|1[0-2]))? ?([S](?<Phone>[1-9]|1[0-2]))?$/i;
 
-const getCurrentSpan = () => {
-  const classList = document.querySelector('html').classList;
-  const isXL = classList.contains('sapUiMedia-StdExt-LargeDesktop');
-  const isL = !isXL && classList.contains('sapUiMedia-Std-Desktop');
-  const isM = !isL && classList.contains('sapUiMedia-Std-Tablet');
-  const isS = !isM && classList.contains('sapUiMedia-Std-Phone');
-  return [false, isXL, isL, isM, isS].indexOf(true);
-};
+const DefaultSpanMap = new Map();
+DefaultSpanMap.set('Phone', 12);
+DefaultSpanMap.set('Tablet', 6);
+DefaultSpanMap.set('Desktop', 3);
+DefaultSpanMap.set('LargeDesktop', 3);
+
+const DefaultIndentMap = new Map();
+DefaultIndentMap.set('Phone', 0);
+DefaultIndentMap.set('Tablet', 0);
+DefaultIndentMap.set('Desktop', 0);
+DefaultIndentMap.set('LargeDesktop', 0);
 
-const getSpanFromString = (span) => {
-  const currentSpan = getCurrentSpan();
+const getSpanFromString = (span, currentRange) => {
   const spanConfig = SPAN_PATTERN.exec(span);
-  return spanConfig[currentSpan]
-    ? parseInt(spanConfig[currentSpan].replace(/[XLMS]{0,2}/g, ''), 10)
-    : [undefined, 3, 3, 6, 12][currentSpan];
+  return spanConfig.groups[currentRange] ?? DefaultSpanMap.get(currentRange);
 };
 
-const getIndentFromString = (indent) => {
-  const currentSpan = getCurrentSpan();
+const getIndentFromString = (indent, currentRange) => {
   const indentConfig = INDENT_PATTERN.exec(indent);
-  return indentConfig[currentSpan]
-    ? parseInt(indentConfig[currentSpan].replace(/[XLMS]{0,2}/g, ''), 10)
-    : [undefined, 0, 0, 0, 0][currentSpan];
+  return indentConfig.groups[currentRange] ?? DefaultIndentMap.get(currentRange);
 };
 
 const useStyles = createComponentStyles(GridClasses, { name: 'Grid' });
@@ -114,6 +111,8 @@ const Grid: FC<GridPropTypes> = forwardRef((props: GridPropTypes, ref: Ref<HTMLD
   gridClasses.put(classes[`gridHSpace${hSpacing === 0.5 ? '05' : hSpacing}`]);
   gridClasses.put(classes[`gridVSpace${vSpacing === 0.5 ? '05' : vSpacing}`]);
 
+  const currentRange = useViewportRange('StdExt');
+
   if (GridPosition.Center === position) {
     gridClasses.put(classes.gridPositionCenter);
   }
@@ -142,22 +141,19 @@ const Grid: FC<GridPropTypes> = forwardRef((props: GridPropTypes, ref: Ref<HTMLD
     gridClasses.put(className);
   }
 
-  useViewportRange('StdExt');
-
   const renderGridElements = (child: ReactElement<any>) => {
-    const span = getSpanFromString(defaultSpan);
-    const indentSpan = getIndentFromString(defaultIndent);
-
     const gridSpanClasses = StyleClassHelper.of(classes.gridSpan);
     if (child.props['data-layout'] && child.props['data-layout'].span) {
-      const childSpan = getSpanFromString(child.props['data-layout'].span);
+      const childSpan = getSpanFromString(child.props['data-layout'].span, currentRange);
       gridSpanClasses.put(classes[`gridSpan${childSpan}`]);
     } else {
+      const span = getSpanFromString(defaultSpan, currentRange);
       gridSpanClasses.put(classes[`gridSpan${span}`]);
     }
 
+    const indentSpan = getIndentFromString(defaultIndent, currentRange);
     if (child.props['data-layout'] && child.props['data-layout'].indent) {
-      const childIndent = getIndentFromString(child.props['data-layout'].indent);
+      const childIndent = getIndentFromString(child.props['data-layout'].indent, currentRange);
       if (childIndent && childIndent > 0) {
         gridSpanClasses.put(classes[`gridIndent${childIndent}`]);
       }