Skip to content

Commit

Permalink
Merge pull request #19 from krjakbrjak/VNI-state-rework
Browse files Browse the repository at this point in the history
State rework
  • Loading branch information
krjakbrjak authored Jan 4, 2024
2 parents 86c93cb + 4c33298 commit 47326da
Show file tree
Hide file tree
Showing 9 changed files with 508 additions and 461 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@krjakbrjak/virtualtable",
"version": "1.1.9",
"version": "1.1.10",
"description": "",
"repository": {
"type": "git",
Expand Down
80 changes: 80 additions & 0 deletions src/SizeChecker.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/**
* VirtualTable component.
*
* @author Nikita Vakula <[email protected]>
*/

import React, {
useEffect, useRef, ReactNode, useState, forwardRef, Ref, useImperativeHandle,
} from 'react';

import './base.css';

import { DataSource, } from './helpers/types';

/**
* Represent the rectangular.
*/
interface Rect {
x: number;
y: number;
height: number;
width: number;
}

interface Args<Type> {
renderer: (data: Type, classes: string) => ReactNode;
fetcher: DataSource<Type>;
on_ready: () => void;
}

interface ISizeChecker {
height: () => number;
}

/**
* @description SizeChecker component.
*
* This component is used for checking the dimensions that are required to display the
* item of type Type.
*
* @component
*/
const SizeChecker = <Type,>({ renderer, fetcher, on_ready }: Args<Type>, ref: Ref<ISizeChecker>): JSX.Element => {
const invisible = useRef(null);
const [data, setData] = useState<Array<Type>>([]);

useImperativeHandle(ref, () => ({
height: () => {
if (invisible && invisible.current) {
return invisible.current.clientHeight;
}
return 0;
}
}), [invisible]);

useEffect(() => {
fetcher.fetch(0, 1).then((result) => {
if (result.items.length) {
setData(result.items);
on_ready();
}
});
}, [fetcher]);

if (data.length) {
return (
<div ref={invisible} style={{
'visibility': 'hidden',
position: 'absolute',
pointerEvents: 'none'
}}>
{renderer(data[0], '')}
</div>
);
}

return null;
}

export default forwardRef(SizeChecker);
Loading

0 comments on commit 47326da

Please sign in to comment.