Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add @react-hook/size and use it to have a dynamic resizable list + update packages

Browse source
This commit is contained in:
Eric NGUYEN 2022-10-03 17:49:43 +02:00
parent 36525399a4
commit 935318d475
5 changed files with 1036 additions and 715 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/Components/ElementsList/ElementsList.tsx
View file

@ -1,4 +1,5 @@
import * as React from 'react';
import useSize from '@react-hook/size';
import { FixedSizeList as List } from 'react-window';
import { Properties } from '../ContainerProperties/ContainerProperties';
import { IContainerModel } from '../../Interfaces/IContainerModel';
@ -116,6 +117,10 @@ function HandleOnDrop(
}
export function ElementsList(props: IElementsListProps): JSX.Element {
// States
const divRef = React.useRef<HTMLDivElement>(null);
const [width, height] = useSize(divRef);
// Render
const it = MakeRecursionDFSIterator(props.mainContainer, 0, [0, 0], true);
const containers = [...it];
@ -164,12 +169,12 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
return (
<div className='h-full flex flex-col'>
<div className='h-48'>
<div ref={divRef} className='h-1/2'>
<List
className="List divide-y divide-black overflow-y-auto"
itemCount={containers.length}
itemSize={35}
height={192}
height={height}
width={'100%'}
>
{Row}

6
src/Components/SymbolsList/SymbolsList.tsx
View file

@ -1,4 +1,5 @@
import * as React from 'react';
import useSize from '@react-hook/size';
import { FixedSizeList as List } from 'react-window';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
@ -11,6 +12,9 @@ interface ISymbolsSidebarProps {
}
export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
// States
const divRef = React.useRef<HTMLDivElement>(null);
const [width, height] = useSize(divRef);
// Render
const containers = [...props.symbols.values()];
function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element {
@ -38,7 +42,7 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
return (
<div>
<div className='h-80 text-gray-800'>
<div ref={divRef} className='h-1/2 text-gray-800'>
<List
className='List divide-y divide-black'
itemCount={containers.length}