Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

useEffect to optimize updates

Browse source
This commit is contained in:
Yury Semikhatsky 2024-05-30 11:25:41 -07:00
parent 3426fdc3ca
commit 99a8b6ec73
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/web/src/components/gridView.tsx
View file

@ -38,15 +38,18 @@ export type GridViewProps<T> = Omit<ListViewProps<T>, 'render'> & {
}; };
export function GridView<T>(model: GridViewProps<T>) { export function GridView<T>(model: GridViewProps<T>) {
function offsets() { const [offsets, setOffsets] = React.useState<number[]>([]);
React.useEffect(() => {
const offsets: number[] = []; const offsets: number[] = [];
for (let i = 0; i < model.columns.length - 1; ++i) { for (let i = 0; i < model.columns.length - 1; ++i) {
const column = model.columns[i]; const column = model.columns[i];
offsets[i] = (offsets[i - 1] || 0) + model.columnWidths.get(column)!; offsets[i] = (offsets[i - 1] || 0) + model.columnWidths.get(column)!;
} }
return offsets; setOffsets(offsets);
} }, [model.columns, model.columnWidths]);
function setOffsets(offsets: number[]) {
function updateWidths(offsets: number[]) {
const widths = new Map(model.columnWidths.entries()); const widths = new Map(model.columnWidths.entries());
for (let i = 0; i < offsets.length; ++i) { for (let i = 0; i < offsets.length; ++i) {
const width = offsets[i] - (offsets[i - 1] || 0); const width = offsets[i] - (offsets[i - 1] || 0);
@ -63,8 +66,8 @@ export function GridView<T>(model: GridViewProps<T>) {
return <div className={`grid-view ${model.name}-grid-view`}> return <div className={`grid-view ${model.name}-grid-view`}>
<ResizeView <ResizeView
orientation={'horizontal'} orientation={'horizontal'}
offsets={offsets()} offsets={offsets}
setOffsets={setOffsets} setOffsets={updateWidths}
resizerColor='var(--vscode-panel-border)' resizerColor='var(--vscode-panel-border)'
resizerWidth={1} resizerWidth={1}
minColumnWidth={25}> minColumnWidth={25}>