fix: fix custom component flash when cell resizes #2516

This commit is contained in:
Rui-Sun 2024-10-08 16:13:32 +08:00
parent 5532274c94
commit 9b79733fea
5 changed files with 27 additions and 15 deletions

View File

@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vtable",
"comment": "fix: fix custom component flash when cell resizes #2516",
"type": "none"
}
],
"packageName": "@visactor/vtable"
}

View File

@ -31,7 +31,7 @@ export const CustomLayout: React.FC<CustomLayoutProps> = (props: PropsWithChildr
// customLayout function for vtable
const createGraphic: ICustomLayoutFuc = useCallback(
args => {
const key = `${args.col}-${args.row}`;
const key = `${(args as any).originCol}-${(args as any).originRow}`;
let group;
if (container.current.has(key)) {
const currentContainer = container.current.get(key);

View File

@ -54,8 +54,8 @@ export function dealWithCustom(
}
if (typeof customLayout === 'function') {
const arg = {
col,
row,
col: range?.start.col ?? col,
row: range?.start.row ?? row,
dataValue: table.getCellOriginValue(col, row),
value: table.getCellValue(col, row) || '',
rect: {
@ -66,7 +66,9 @@ export function dealWithCustom(
width,
height
},
table
table,
originCol: col,
originRow: row
};
const customRenderObj = customLayout(arg);
if (customRenderObj.rootContainer) {

View File

@ -212,12 +212,11 @@ export function updateCellHeight(
(cell.getChildByName(CUSTOM_CONTAINER_NAME) as Group) ||
(cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME) as Group);
if (customContainer) {
if (scene.table.reactCustomLayout) {
scene.table.reactCustomLayout.removeCustomCell(col, row);
}
// if (scene.table.reactCustomLayout) {
// scene.table.reactCustomLayout.removeCustomCell(col, row);
// }
// customContainer.removeAllChild();
let customElementsGroup;
customContainer.removeAllChild();
cell.removeChild(customContainer);
const customMergeRange = getCustomCellMergeCustom(col, row, cell, scene.table);

View File

@ -366,11 +366,12 @@ function updateCellWidth(
(cell.getChildByName(CUSTOM_CONTAINER_NAME) as Group) ||
(cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME) as Group);
if (customContainer) {
if (scene.table.reactCustomLayout) {
scene.table.reactCustomLayout.removeCustomCell(col, row);
}
// fix for custom component flash
// if (scene.table.reactCustomLayout) {
// scene.table.reactCustomLayout.removeCustomCell(col, row);
// }
// customContainer.removeAllChild();
let customElementsGroup;
customContainer.removeAllChild();
cell.removeChild(customContainer);
const customMergeRange = getCustomCellMergeCustom(col, row, cell, scene.table);
@ -428,8 +429,8 @@ function updateCellWidth(
const customResult = dealWithCustom(
customLayout,
customRender,
cellGroup.mergeStartCol ?? col,
cellGroup.mergeStartRow ?? row,
col,
row,
width,
height,
false,