From 74002c87cc79ce00d0ded151822e0aa571bd2af7 Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Thu, 16 Apr 2020 08:26:13 +0200 Subject: [PATCH 1/2] refactor(AnalyticalTable): declare row height via css variable Prevents unnecessary rerenders --- .../AnalyticalTable/AnayticalTable.jss.ts | 53 +++++++++---------- .../src/components/AnalyticalTable/index.tsx | 46 ++++++++-------- prettier.config.js | 3 +- 3 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts index a17d1543322..c99b03ec850 100644 --- a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts +++ b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts @@ -5,18 +5,18 @@ const styles = { tableContainer: { width: '100%', height: `calc(100% - ${CssSizeVariables.sapWcrAnalyticalTableRowHeight})`, - minHeight: '3rem', + minHeight: '3rem' }, table: { position: 'relative', width: '100%', maxWidth: '100%', - overflowX: 'auto', + overflowX: 'auto' }, tableHeaderRow: { boxShadow: 'none !important', height: CssSizeVariables.sapWcrAnalyticalTableRowHeight, - position: 'relative', + position: 'relative' }, th: { backgroundColor: ThemingParameters.sapList_HeaderBackground, @@ -31,18 +31,18 @@ const styles = { textAlign: 'start', boxSizing: 'border-box', '&:first-child': { - borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`, - }, + borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}` + } }, tbody: { position: 'relative', zIndex: 0, backgroundColor: ThemingParameters.sapList_Background, overflowX: 'hidden !important', - overflowY: 'auto !important', + overflowY: 'auto !important' }, alternateRowColor: { - backgroundColor: ThemingParameters.sapList_HeaderBackground, + backgroundColor: ThemingParameters.sapList_HeaderBackground }, emptyRow: {}, tr: { @@ -52,12 +52,12 @@ const styles = { '&[data-is-selected]': { backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important`, '& $tableCell': { - borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}`, - }, + borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}` + } }, '&[data-is-selected]:hover': { - backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important`, - }, + backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important` + } }, tableGroupHeader: { '&$tr': { @@ -65,25 +65,25 @@ const styles = { border: `1px solid ${ThemingParameters.sapList_TableGroupHeaderBorderColor}`, color: ThemingParameters.sapList_TextColor, '& $tableCell': { - borderRight: 'none', - }, - }, + borderRight: 'none' + } + } }, selectable: { '& $tr:hover:not($emptyRow)': { backgroundColor: ThemingParameters.sapList_Hover_Background, '&:not($selectionModeRowSelector)': { - cursor: 'pointer', - }, + cursor: 'pointer' + } }, '& $tr:active:not([data-is-selected]):not($tableGroupHeader):not($emptyRow):not($selectionModeRowSelector)': { backgroundColor: ThemingParameters.sapList_Active_Background, '& $tableCell': { borderRight: `1px solid ${ThemingParameters.sapList_Active_Background}`, color: `${ThemingParameters.sapList_Active_TextColor}`, - '--sapTextColor': ThemingParameters.sapList_Active_TextColor, - }, - }, + '--sapTextColor': ThemingParameters.sapList_Active_TextColor + } + } }, selectionModeRowSelector: {}, tableCell: { @@ -97,7 +97,7 @@ const styles = { display: 'flex', padding: '0 0.5rem', '&:first-child': { - borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}`, + borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}` }, overflow: 'hidden', position: 'relative', @@ -106,8 +106,8 @@ const styles = { alignItems: 'center', '&:focus': { outlineOffset: '-2px', - outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`, - }, + outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}` + } }, noDataContainer: { display: 'flex', @@ -121,13 +121,8 @@ const styles = { fontFamily: ThemingParameters.sapFontFamily, fontSize: ThemingParameters.sapFontSize, fontWeight: 'normal', - borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`, - }, - modifiedRowHeight: { - '& $tableCell': { - height: (props) => `${props.rowHeight}px`, - }, - }, + borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}` + } }; export default styles; diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index 9a3d2059725..bdbc71315ee 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -16,7 +16,8 @@ import React, { useCallback, useEffect, useMemo, - useRef + useRef, + CSSProperties } from 'react'; import { PluginHook, @@ -164,7 +165,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< onLoadMore } = props; - const classes = useStyles({ rowHeight: props.rowHeight }); + const classes = useStyles(); const [analyticalTableRef, reactWindowRef] = useTableScrollHandles(ref); const tableRef: RefObject = useRef(); @@ -240,22 +241,20 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< ...tableHooks ); - const updateTableClientWidth = useCallback(() => { - requestAnimationFrame(() => { - if (tableRef.current) { - dispatch({ type: 'TABLE_RESIZE', payload: { tableClientWidth: tableRef.current.clientWidth } }); - } - }); - }, []); - useEffect(() => { // @ts-ignore - const tableWidthObserver = new ResizeObserver(updateTableClientWidth); + const tableWidthObserver = new ResizeObserver(() => { + requestAnimationFrame(() => { + if (tableRef.current) { + dispatch({ type: 'TABLE_RESIZE', payload: { tableClientWidth: tableRef.current.clientWidth } }); + } + }); + }); tableWidthObserver.observe(tableRef.current); return () => { tableWidthObserver.disconnect(); }; - }, [updateTableClientWidth]); + }, []); useEffect(() => { dispatch({ type: 'SET_GROUP_BY', payload: groupBy }); @@ -267,10 +266,6 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< const tableContainerClasses = StyleClassHelper.of(classes.tableContainer); - if (!!rowHeight) { - tableContainerClasses.put(classes.modifiedRowHeight); - } - const calcRowHeight = parseInt( getComputedStyle(tableRef.current ?? document.body).getPropertyValue('--sapWcrAnalyticalTableRowHeight') || '44' ); @@ -327,15 +322,24 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< ]); const inlineStyle = useMemo(() => { - if(tableState.tableClientWidth > 0) { - return style; + const tableStyles = {}; + if (!!rowHeight) { + tableStyles['--sapWcrAnalyticalTableRowHeight'] = `${rowHeight}px`; + } + + if (tableState.tableClientWidth > 0) { + return { + ...tableStyles, + style + } as CSSProperties; } return { + ...tableStyles, ...style, visibility: 'hidden' as 'hidden' - }; - }, [tableState.tableClientWidth, style]); - + } as CSSProperties; + }, [tableState.tableClientWidth, style, rowHeight]); + return (
{title && {title}} diff --git a/prettier.config.js b/prettier.config.js index 26e87242f46..add202f2cc2 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -2,5 +2,6 @@ module.exports = { printWidth: 120, parser: 'typescript', singleQuote: true, - arrowParens: 'always' + arrowParens: 'always', + trailingComma: 'none' }; From dd6bec50b2c5604878cb0b850001230d085566e3 Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Thu, 16 Apr 2020 08:32:13 +0200 Subject: [PATCH 2/2] Update AnalyticalTable.test.tsx.snap --- .../__snapshots__/AnalyticalTable.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index 2e320d73738..60714a8ac69 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -2242,7 +2242,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` exports[`AnalyticalTable custom row height 1`] = `