Skip to content

Commit 3898b71

Browse files
raheeliftikhar5raheeliftikhar5
committed
added memoization on table comp
1 parent 4effe28 commit 3898b71

File tree

6 files changed

+49
-27
lines changed

6 files changed

+49
-27
lines changed

‎client/packages/lowcoder/src/components/table/EditableCell.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ interface EditableCellProps<T> extends CellProps {
8484
changeValue?: T | null;
8585
}
8686

87-
export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
87+
function EditableCellComp<T extends JSONValue>(props: EditableCellProps<T>) {
8888
const {
8989
dispatch,
9090
normalView,
@@ -157,9 +157,10 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
157157
<ColumnTypeView
158158
textOverflow={props.textOverflow}
159159
>
160-
{status === "toSave" && !isEditing && <EditableChip />}
160+
{status === "toSave" && !isEditing && <EditableChip key={`editable-chip`}/>}
161161
<CellWrapper tooltipTitle={props.cellTooltip}>
162162
<div
163+
key={`normal-view`}
163164
tabIndex={editable ? 0 : -1 }
164165
onFocus={enterEditFn}
165166
>
@@ -170,6 +171,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
170171
{editable && (
171172
<CellWrapper tooltipTitle={props.cellTooltip}>
172173
<div
174+
key={`editable-view`}
173175
style={{
174176
position: 'absolute',
175177
top: 0,
@@ -186,3 +188,5 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
186188
</ColumnTypeView>
187189
);
188190
}
191+
192+
export const EditableCell = React.memo(EditableCellComp) as typeof EditableCellComp;

‎client/packages/lowcoder/src/components/table/columnTypeView.tsx

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useMemo, useRef, useState } from "react";
1+
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
22
import styled from "styled-components";
33

44
const ColumnTypeViewWrapper = styled.div<{
@@ -73,13 +73,13 @@ function childIsOverflow(nodes: HTMLCollection): boolean {
7373
return false;
7474
}
7575

76-
export default function ColumnTypeView(props: {
76+
function ColumnTypeView(props: {
7777
children: React.ReactNode,
7878
textOverflow?: boolean,
7979
}) {
8080

81-
const wrapperRef = useRef<HTMLDivElement>(null);
82-
const hoverViewRef = useRef<HTMLDivElement>(null);
81+
const wrapperRef = useRef<HTMLDivElement | null>(null);
82+
const hoverViewRef = useRef<HTMLDivElement | null>(null);
8383
const [isHover, setIsHover] = useState(false);
8484
const [hasOverflow, setHasOverflow] = useState(false);
8585
const [adjustedPosition, setAdjustedPosition] = useState<{
@@ -90,13 +90,12 @@ export default function ColumnTypeView(props: {
9090
width?: number;
9191
}>({ done: false });
9292
const [delayHandler, setDelayHandler] = useState<any>();
93-
const delayMouseEnter = useMemo(() => {
94-
return () =>
95-
setDelayHandler(
96-
setTimeout(() => {
97-
setIsHover(true);
98-
}, 300)
99-
);
93+
const delayMouseEnter = useCallback(() => {
94+
setDelayHandler(
95+
setTimeout(() => {
96+
setIsHover(true);
97+
}, 300)
98+
);
10099
}, []);
101100

102101
useEffect(() => {
@@ -172,14 +171,21 @@ export default function ColumnTypeView(props: {
172171
});
173172
}, [isHover, hasOverflow]);
174173

174+
useEffect(() => {
175+
return () => {
176+
hoverViewRef.current = null;
177+
wrapperRef.current = null;
178+
179+
clearTimeout(delayHandler);
180+
}
181+
}, [])
182+
175183
return (
176184
<>
177185
<ColumnTypeViewWrapper
178186
ref={wrapperRef}
179187
$textOverflow={props.textOverflow}
180-
onMouseEnter={() => {
181-
delayMouseEnter();
182-
}}
188+
onMouseEnter={delayMouseEnter}
183189
onMouseLeave={() => {
184190
clearTimeout(delayHandler);
185191
setIsHover(false);
@@ -208,3 +214,5 @@ export default function ColumnTypeView(props: {
208214
</>
209215
);
210216
}
217+
218+
export default React.memo(ColumnTypeView);

‎client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt
4242
import { DisabledContext } from "comps/generators/uiCompBuilder";
4343
import { SliderControl } from "@lowcoder-ee/comps/controls/sliderControl";
4444
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
45+
import React from "react";
4546

4647
const ContainWrapper = styled.div<{
4748
$style: ContainerStyleType & {
@@ -158,6 +159,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
158159
const containerProps = containers[id].children;
159160
const noOfColumns = columns.length;
160161
return (
162+
<React.Fragment key={id}>
161163
<BackgroundColorContext.Provider value={props.columnStyle.background}>
162164
<ColWrapper
163165
key={id}
@@ -176,6 +178,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
176178
/>
177179
</ColWrapper>
178180
</BackgroundColorContext.Provider>
181+
</React.Fragment>
179182
)
180183
})
181184
}

‎client/packages/lowcoder/src/comps/comps/gridLayoutComp/dragSelector.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@ class DragSelectorComp extends React.Component<SectionProps, SectionState> {
4949
this._onMouseUp = this._onMouseUp.bind(this);
5050
}
5151

52+
componentWillUnmount(): void {
53+
window.document.removeEventListener("mousemove", this._onMouseMove);
54+
window.document.removeEventListener("mouseup", this._onMouseUp);
55+
}
56+
5257
_onMouseDown(e: React.MouseEvent<HTMLDivElement>) {
5358
if (e.button === 2 || e.nativeEvent.which === 2) {
5459
return;

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ export const ColumnTagsComp = (function () {
273273
// The actual eval value is of type number or boolean
274274
const tagText = String(tag);
275275
return (
276-
<div>
276+
<div key={`${tag.split(' ').join('_')}-${index}`}>
277277
<TagStyled color={getTagColor(tagText, tagOptions)} icon={getTagIcon(tagText, tagOptions)} key={index} >
278278
{tagText}
279279
</TagStyled>

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -551,7 +551,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
551551
onCellClick: (columnName: string, dataIndex: string) => void;
552552
};
553553

554-
function TableCellView(props: {
554+
const TableCellView = React.memo((props: {
555555
record: RecordType;
556556
title: string;
557557
rowColorFn: RowColorViewType;
@@ -565,7 +565,7 @@ function TableCellView(props: {
565565
tableSize?: string;
566566
autoHeight?: boolean;
567567
loading?: boolean;
568-
}) {
568+
}) => {
569569
const {
570570
record,
571571
title,
@@ -648,9 +648,9 @@ function TableCellView(props: {
648648
{tdView}
649649
</TableCellContext.Provider>
650650
);
651-
}
651+
});
652652

653-
function TableRowView(props: any) {
653+
const TableRowView = React.memo((props: any) => {
654654
const [hover, setHover] = useState(false);
655655
const [selected, setSelected] = useState(false);
656656
return (
@@ -665,12 +665,12 @@ function TableRowView(props: any) {
665665
></tr>
666666
</TableRowContext.Provider>
667667
);
668-
}
668+
});
669669

670670
/**
671671
* A table with adjustable column width, width less than 0 means auto column width
672672
*/
673-
function ResizeableTable<RecordType extends object>(props: CustomTableProps<RecordType>) {
673+
function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<RecordType>) {
674674
const [resizeData, setResizeData] = useState({
675675
index: -1,
676676
width: -1,
@@ -760,8 +760,10 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
760760
></Table>
761761
);
762762
}
763+
ResizeableTableComp.whyDidYouRender = true;
764+
765+
const ResizeableTable = React.memo(ResizeableTableComp) as typeof ResizeableTableComp;
763766

764-
ResizeableTable.whyDidYouRender = true;
765767

766768
const createNewEmptyRow = (
767769
rowIndex: number,
@@ -776,11 +778,11 @@ const createNewEmptyRow = (
776778
return emptyRowData;
777779
}
778780

779-
export function TableCompView(props: {
781+
export const TableCompView = React.memo((props: {
780782
comp: InstanceType<typeof TableImplComp>;
781783
onRefresh: (allQueryNames: Array<string>, setLoading: (loading: boolean) => void) => void;
782784
onDownload: (fileName: string) => void;
783-
}) {
785+
}) => {
784786
const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
785787
const editorState = useContext(EditorContext);
786788
const currentTheme = useContext(ThemeContext)?.theme;
@@ -1101,4 +1103,4 @@ export function TableCompView(props: {
11011103

11021104
</BackgroundColorContext.Provider>
11031105
);
1104-
}
1106+
});

0 commit comments

Comments
 (0)