Skip to content

Commit 6e170b2

Browse files
Rui-SunRui-Sun
committed
fix: fix flex layout update in react-custom-layout component #3696 
1 parent 2b35e78 commit 6e170b2

4 files changed

Lines changed: 220 additions & 4 deletions

File tree

‎common/changes/@visactor/vtable/fix-custom-flex-layout_2025-04-09-08-08.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"changes": [
3+
{
4+
"packageName": "@visactor/vtable",
5+
"comment": "fix: fix flex layout update in react-custom-layout component #3696",
6+
"type": "none"
7+
}
8+
],
9+
"packageName": "@visactor/vtable"
10+
}

‎packages/react-vtable/demo/src/App.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import customLayoutDomSite from './component/custom-layout-dom-site';
2323
import customLayoutDomSite1 from './component/custom-layout-dom-site-1';
2424
import customLayoutPivot from './component/custom-layout-pivot';
2525

26+
import userCustomLayoutUpdate from './component/user/custom-layout-update';
27+
2628
// export default listTable;
2729
// export default listEditor;
2830
// export default listOptionRecord;
@@ -45,5 +47,7 @@ import customLayoutPivot from './component/custom-layout-pivot';
4547
// export default customLayout;
4648
// export default customLayoutDom;
4749
// export default customLayoutDomSite;
48-
export default customLayoutDomSite1;
50+
// export default customLayoutDomSite1;
4951
// export default customLayoutPivot;
52+
53+
export default userCustomLayoutUpdate;

‎packages/react-vtable/demo/src/component/user/custom-layout-update.tsx‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
/* eslint-disable max-len */
2+
import { useEffect, useRef, useState } from 'react';
3+
import ReactDOM from 'react-dom/client';
4+
import type { CustomLayoutFunctionArg } from '../../../../src';
5+
import {
6+
ListTable,
7+
ListColumn,
8+
CustomLayout,
9+
Group,
10+
Text,
11+
Tag,
12+
Checkbox,
13+
Radio,
14+
Button,
15+
Link,
16+
Avatar,
17+
Image,
18+
Popover
19+
} from '../../../../src';
20+
21+
const UserProfileComponent = (props: any) => {
22+
const { table, row, col, rect, dataValue, align } = props;
23+
if (!table || row === undefined || col === undefined) {
24+
return null;
25+
}
26+
const { height, width } = rect || table.getCellRect(col, row);
27+
const record = table.getRecordByCell(col, row);
28+
29+
const [hover, setHover] = useState(false);
30+
31+
return (
32+
<Group
33+
attribute={{
34+
width,
35+
height,
36+
display: 'flex',
37+
alignItems: align,
38+
justifyContent: 'center',
39+
flexDirection: 'column',
40+
flexWrap: 'nowrap'
41+
}}
42+
>
43+
<Group
44+
attribute={{
45+
// boundsPadding: [0, 10],
46+
// stroke: 'red',
47+
// lineWidth: 1,
48+
// display: 'flex',
49+
// // background: style?.bgColor
50+
// background: 'pink'
51+
boundsPadding: [0, 10],
52+
stroke: '#16a34a',
53+
lineWidth: 1,
54+
display: 'flex',
55+
cornerRadius: 10,
56+
background: '#ccc'
57+
}}
58+
>
59+
<Text
60+
attribute={{
61+
text: dataValue,
62+
fontSize: 12,
63+
// fill: style?.textColor,
64+
fill: 'blue',
65+
boundsPadding: 3,
66+
cursor: 'pointer',
67+
backgroundCornerRadius: 8
68+
}}
69+
/>
70+
</Group>
71+
</Group>
72+
);
73+
};
74+
75+
function App() {
76+
const [col, setCol] = useState([
77+
{ title: 'ID', field: 'bloggerId' },
78+
{ title: 'Name', field: 'bloggerName' }
79+
]);
80+
const records = [
81+
{
82+
bloggerId: 1,
83+
bloggerName: 'Virtual Anchor Xiaohua',
84+
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
85+
introduction:
86+
'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
87+
fansCount: 400,
88+
worksCount: 10,
89+
viewCount: 5,
90+
city: 'Dream City',
91+
tags: ['game', 'anime', 'food']
92+
},
93+
{
94+
bloggerId: 2,
95+
bloggerName: 'Virtual anchor little wolf',
96+
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
97+
introduction:
98+
'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
99+
fansCount: 800,
100+
worksCount: 20,
101+
viewCount: 15,
102+
city: 'City of Music',
103+
tags: ['music', 'travel', 'photography']
104+
},
105+
{
106+
bloggerId: 3,
107+
bloggerName: 'Virtual anchor bunny',
108+
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
109+
introduction:
110+
'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
111+
fansCount: 600,
112+
worksCount: 15,
113+
viewCount: 10,
114+
city: 'City of Art',
115+
tags: ['painting', 'handmade', 'beauty makeup']
116+
},
117+
{
118+
bloggerId: 4,
119+
bloggerName: 'Virtual anchor kitten',
120+
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
121+
introduction:
122+
'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
123+
fansCount: 1000,
124+
worksCount: 30,
125+
viewCount: 20,
126+
city: 'Health City',
127+
tags: ['dance', 'fitness', 'cooking']
128+
},
129+
{
130+
bloggerId: 5,
131+
bloggerName: 'Virtual anchor Bear',
132+
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
133+
introduction:
134+
'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
135+
fansCount: 1200,
136+
worksCount: 25,
137+
viewCount: 18,
138+
city: 'City of Wisdom',
139+
tags: ['Movie', 'Literature']
140+
},
141+
{
142+
bloggerId: 6,
143+
bloggerName: 'Virtual anchor bird',
144+
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
145+
introduction:
146+
'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
147+
fansCount: 900,
148+
worksCount: 12,
149+
viewCount: 8,
150+
city: 'Happy City',
151+
tags: ['music', 'performance', 'variety']
152+
}
153+
];
154+
155+
const columns = [];
156+
const handleChange = () => {
157+
setCol([
158+
{ title: 'ID', field: 'bloggerId' },
159+
{ title: 'Name', field: 'bloggerName' }
160+
]);
161+
};
162+
return (
163+
<div>
164+
<button onClick={handleChange}>更新columns</button>
165+
<ListTable
166+
records={records}
167+
// theme={VTable.themes.ARCO}
168+
height={900}
169+
// defaultRowHeight={80}
170+
onReady={(table: any) => {
171+
// eslint-disable-next-line no-undef
172+
(window as any).tableInstance = table;
173+
}}
174+
// ReactDOM={ReactDom}
175+
>
176+
{col.map((item, i) => {
177+
return (
178+
<ListColumn key={i} field={'bloggerName'} title={'Name'} width={220}>
179+
<UserProfileComponent align="center" role={'custom-layout'} />
180+
</ListColumn>
181+
);
182+
})}
183+
</ListTable>
184+
</div>
185+
);
186+
}
187+
188+
export default App;

‎packages/react-vtable/src/table-components/custom/reconciler.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { application, REACT_TO_CANOPUS_EVENTS, Tag } from '@visactor/vtable/es/vrender';
2-
import type { Graphic, IGraphic, IGraphicCreator } from '@visactor/vtable/es/vrender';
3-
import { isFunction, merge } from '@visactor/vutils';
2+
import type { FlexLayoutPlugin, Graphic, IGraphic, IGraphicCreator } from '@visactor/vtable/es/vrender';
3+
import { isFunction, isNumber, merge } from '@visactor/vutils';
44
import React from 'react';
55
import ReactReconciler from 'react-reconciler';
66
import { DefaultEventPriority } from 'react-reconciler/constants.js';
@@ -175,10 +175,24 @@ function updateGraphicProps(graphic: IGraphic, newProps: any, oldProps: any) {
175175
);
176176
}
177177
}
178-
// update all attribute
179178
const attribute = newProps.attribute ?? merge({}, newProps);
179+
180+
// update all attribute
180181
graphic.initAttributes(attribute);
181182
if (graphic.type === 'image') {
182183
graphic.loadImage(attribute.image);
183184
}
185+
186+
if (
187+
attribute.display === 'flex' &&
188+
attribute.width === undefined &&
189+
attribute.height === undefined &&
190+
isNumber(oldProps.attribute.width) &&
191+
isNumber(oldProps.attribute.height)
192+
) {
193+
const plugin = graphic.stage.pluginService.findPluginsByName('FlexLayoutPlugin')[0] as FlexLayoutPlugin;
194+
if (plugin) {
195+
plugin.tryLayoutChildren(graphic);
196+
}
197+
}
184198
}

0 commit comments

Comments
 (0)