prevent grid rerender when celldata is not changed

This commit is contained in:
Jan Prochazka
2021-01-14 10:40:54 +01:00
parent 2cd2546f3f
commit f60ee04883
2 changed files with 8 additions and 4 deletions

View File

@@ -27,13 +27,14 @@ export default function DataGrid(props) {
const [selection, setSelection] = React.useState([]); const [selection, setSelection] = React.useState([]);
const [formSelection, setFormSelection] = React.useState(null); const [formSelection, setFormSelection] = React.useState(null);
const [grider, setGrider] = React.useState(null); const [grider, setGrider] = React.useState(null);
const [collapsedWidgets, setCollapsedWidgets] = React.useState([]);
// const [formViewData, setFormViewData] = React.useState(null); // const [formViewData, setFormViewData] = React.useState(null);
const isFormView = !!(config && config.isFormView); const isFormView = !!(config && config.isFormView);
return ( return (
<HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}> <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
<LeftContainer theme={theme}> <LeftContainer theme={theme}>
<WidgetColumnBar> <WidgetColumnBar onChangeCollapsedWidgets={setCollapsedWidgets}>
{!isFormView && ( {!isFormView && (
<WidgetColumnBarItem title="Columns" name="columns" height={props.showReferences ? '40%' : '60%'}> <WidgetColumnBarItem title="Columns" name="columns" height={props.showReferences ? '40%' : '60%'}>
<ColumnManager {...props} managerSize={managerSize} /> <ColumnManager {...props} managerSize={managerSize} />
@@ -44,7 +45,7 @@ export default function DataGrid(props) {
<ReferenceManager {...props} managerSize={managerSize} /> <ReferenceManager {...props} managerSize={managerSize} />
</WidgetColumnBarItem> </WidgetColumnBarItem>
)} )}
<WidgetColumnBarItem title="Cell data" name="cellData" collapsed={props.isDetailView}> <WidgetColumnBarItem title="Cell data" name="cellData" collapsed>
{isFormView ? ( {isFormView ? (
<CellDataView selectedValue={formSelection} /> <CellDataView selectedValue={formSelection} />
) : ( ) : (
@@ -60,7 +61,7 @@ export default function DataGrid(props) {
) : ( ) : (
<GridCore <GridCore
{...props} {...props}
onSelectionChanged={setSelection} onSelectionChanged={collapsedWidgets.includes('cellData') ? null : setSelection}
onChangeGrider={setGrider} onChangeGrider={setGrider}
formViewAvailable={!!FormView && !!formDisplay} formViewAvailable={!!FormView && !!formDisplay}
/> />

View File

@@ -40,7 +40,7 @@ function WidgetContainer({ widget, visible, splitterVisible, parentHeight, initi
); );
} }
export default function WidgetColumnBar({ children }) { export default function WidgetColumnBar({ children, onChangeCollapsedWidgets = undefined }) {
const childArray = _.isArray(children) ? children : [children]; const childArray = _.isArray(children) ? children : [children];
const [refNode, dimensions] = useDimensions(); const [refNode, dimensions] = useDimensions();
const [collapsedWidgets, setCollapsedWidgets] = React.useState(() => const [collapsedWidgets, setCollapsedWidgets] = React.useState(() =>
@@ -53,6 +53,9 @@ export default function WidgetColumnBar({ children }) {
if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter((x) => x != name)); if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter((x) => x != name));
else setCollapsedWidgets([...collapsedWidgets, name]); else setCollapsedWidgets([...collapsedWidgets, name]);
}; };
React.useEffect(() => {
if (onChangeCollapsedWidgets) onChangeCollapsedWidgets(collapsedWidgets);
}, [onChangeCollapsedWidgets, collapsedWidgets]);
return ( return (
<WidgetsMainContainer ref={refNode}> <WidgetsMainContainer ref={refNode}>