Skip to content

Commit

Permalink
fix race condition in Grid when rendered before device is initialized
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarcusNotheis
MarcusNotheis committed Apr 8, 2020
1 parent 104d882 commit bcda418
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 35 deletions.
12 changes: 6 additions & 6 deletions packages/main/src/components/Grid/__snapshots__/Grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);"
Expand All @@ -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);"
Expand All @@ -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);"
Expand All @@ -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);"
Expand All @@ -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]"
Expand Down
54 changes: 25 additions & 29 deletions packages/main/src/components/Grid/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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';

Expand Down Expand Up @@ -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' });
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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}`]);
}
Expand Down

0 comments on commit bcda418

Please sign in to comment.