From 65ecb39c2e160065fc3820a806be73e837d4d3a9 Mon Sep 17 00:00:00 2001 From: Henrique Raposo Date: Fri, 26 May 2023 15:44:37 +0100 Subject: [PATCH] fix: styles not apllying in first render --- .../migration/MigrationV5.stories.mdx | 6 ++-- .../components/Table/TableCell/TableCell.tsx | 33 ++++++++++++++++--- .../components/Table/TableRow/TableRow.tsx | 21 +++++++----- .../core/src/components/Table/utils/utils.ts | 4 +-- packages/styles/src/themes/ds3.ts | 2 +- 5 files changed, 46 insertions(+), 20 deletions(-) diff --git a/docs/overview/migration/MigrationV5.stories.mdx b/docs/overview/migration/MigrationV5.stories.mdx index 150a0d27ba..8c96914d6b 100644 --- a/docs/overview/migration/MigrationV5.stories.mdx +++ b/docs/overview/migration/MigrationV5.stories.mdx @@ -743,7 +743,7 @@ const images = ["img1.png", "img2.png", "img3.png"]; ### Table Renderer - hvExpandColumn -The default icon for this component has changed to the one specified in DS5 specifications, in order to be possible to revert to the previous icon or customize to any other, the following properties where added: +The default icon for this component has changed to the one specified in DS5 specifications, in order to be possible to revert to the previous icon or customize to any other, the following properties were added: -- `isExpandedIcon` -- `isCollapsedIcon` +- `ExpandedIcon` +- `CollapsedIcon` diff --git a/packages/core/src/components/Table/TableCell/TableCell.tsx b/packages/core/src/components/Table/TableCell/TableCell.tsx index 584a675afb..10af0d9efd 100644 --- a/packages/core/src/components/Table/TableCell/TableCell.tsx +++ b/packages/core/src/components/Table/TableCell/TableCell.tsx @@ -6,11 +6,14 @@ import { forwardRef, TdHTMLAttributes, useContext, + useEffect, useMemo, + useState, } from "react"; import { theme } from "@hitachivantara/uikit-styles"; import { transientOptions } from "@core/utils/transientOptions"; import { getVarValue, hexToRgbA } from "@core/utils"; +import { useTheme } from "@core/hooks"; import { HvTableCellAlign, HvTableCellType, @@ -117,9 +120,17 @@ export const HvTableCell = forwardRef( }, externalRef ) => { + const { activeTheme, selectedMode } = useTheme(); const tableContext = useContext(TableContext); const tableSectionContext = useContext(TableSectionContext); + const [sortedColorValue, setSortedColorValue] = useState< + string | undefined + >(); + const [sortedColorAlpha, setSortedColorAlpha] = useState< + string | undefined + >(); + const type = typeProp || tableSectionContext?.type || "body"; const Component = @@ -127,12 +138,24 @@ export const HvTableCell = forwardRef( const TableCell = useMemo(() => StyledTableCell(Component), [Component]); - const sortedColorValue = getVarValue(theme.table.rowSortedColor); - const sortedColorAlpha = getVarValue(theme.table.rowSortedColorAlpha); + let sortedColor = + checkValidHexColorValue(sortedColorValue) && sortedColorAlpha + ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha)) + : sortedColorValue; + + useEffect(() => { + setSortedColorValue(getVarValue(theme.table.rowSortedColor)); + setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha)); - const sortedColor = checkValidHexColorValue(sortedColorValue) - ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha)) - : sortedColorValue; + sortedColor = + checkValidHexColorValue(sortedColorValue) && sortedColorAlpha + ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha)) + : sortedColorValue; + }, [ + activeTheme?.colors?.modes[selectedMode], + sortedColorValue, + sortedColorAlpha, + ]); return ( diff --git a/packages/core/src/components/Table/TableRow/TableRow.tsx b/packages/core/src/components/Table/TableRow/TableRow.tsx index 552c1fff13..d5a3e25701 100644 --- a/packages/core/src/components/Table/TableRow/TableRow.tsx +++ b/packages/core/src/components/Table/TableRow/TableRow.tsx @@ -84,12 +84,8 @@ export const HvTableRow = forwardRef( const tableContext = useContext(TableContext); const tableSectionContext = useContext(TableSectionContext); - const [even, setEven] = useState( - getVarValue(theme.table.rowStripedBackgroundColorEven) - ); - const [odd, setOdd] = useState( - getVarValue(theme.table.rowStripedBackgroundColorOdd) - ); + const [even, setEven] = useState(); + const [odd, setOdd] = useState(); const type = tableSectionContext?.type || "body"; @@ -100,17 +96,24 @@ export const HvTableRow = forwardRef( const TableRow = useMemo(() => StyledTableRow(Component), [Component]); - const stripedColorEven = checkValidHexColorValue(even) + let stripedColorEven = checkValidHexColorValue(even) ? hexToRgbA(even, 0.6) : even; - const stripedColorOdd = checkValidHexColorValue(odd) + + let stripedColorOdd = checkValidHexColorValue(odd) ? hexToRgbA(odd, 0.6) : odd; useEffect(() => { setEven(getVarValue(theme.table.rowStripedBackgroundColorEven)); setOdd(getVarValue(theme.table.rowStripedBackgroundColorOdd)); - }, [activeTheme?.colors?.modes[selectedMode]]); + stripedColorEven = checkValidHexColorValue(even) + ? hexToRgbA(even, 0.6) + : even; + stripedColorOdd = checkValidHexColorValue(odd) + ? hexToRgbA(odd, 0.6) + : odd; + }, [activeTheme?.colors?.modes[selectedMode], even, odd]); return ( diff --git a/packages/core/src/components/Table/utils/utils.ts b/packages/core/src/components/Table/utils/utils.ts index 0e86754a4d..88c826f904 100644 --- a/packages/core/src/components/Table/utils/utils.ts +++ b/packages/core/src/components/Table/utils/utils.ts @@ -48,7 +48,7 @@ export const getBorderStyles = ( } }; -export const checkValidHexColorValue = (value: string): boolean => { +export const checkValidHexColorValue = (value?: string): boolean => { const reg = /^#([0-9a-f]{3}){1,2}$/i; - return reg.test(value); + return value ? reg.test(value) : false; }; diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts index d6aa95cebb..1e4bd37079 100644 --- a/packages/styles/src/themes/ds3.ts +++ b/packages/styles/src/themes/ds3.ts @@ -449,7 +449,7 @@ const ds3 = makeTheme((theme: HvTheme) => ({ rowListBorderColor: "transparent", rowStripedBackgroundColorEven: theme.colors.atmo1, rowStripedBackgroundColorOdd: "transparent", - rowExpandBackgroundColor: theme.colors.atmo1, + rowExpandBackgroundColor: theme.colors.atmo2, rowHoverColor: theme.colors.atmo3, rowHoverBorderColor: theme.colors.atmo4, rowSortedColor: theme.colors.atmo1,