38 lines
956 B
TypeScript
38 lines
956 B
TypeScript
|
import React, {useCallback} from "react";
|
||
|
|
|
||
|
|
export function ListLoader({count, itemContent}: {
|
||
|
|
/**
|
||
|
|
* Sample items count.
|
||
|
|
* 3 by default.
|
||
|
|
*/
|
||
|
|
count?: number;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Sample items content or content generator function.
|
||
|
|
*/
|
||
|
|
itemContent?: React.ReactNode|((key: number) => React.ReactNode);
|
||
|
|
})
|
||
|
|
{
|
||
|
|
// Sample items count. 3 by default.
|
||
|
|
count = count === undefined ? 3 : count;
|
||
|
|
|
||
|
|
// Initialize the sample content generator.
|
||
|
|
const contentGenerator = useCallback((key: number) => (
|
||
|
|
typeof itemContent != "function"
|
||
|
|
// No function given, return the given content or a sample text.
|
||
|
|
? (itemContent ?? "Loading content...")
|
||
|
|
// A function have been given, just return its result.
|
||
|
|
: itemContent(key)
|
||
|
|
), [itemContent]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ul className={"list loader"}>
|
||
|
|
{ // Render every sample item.
|
||
|
|
[...Array(count)].map((_, key) => (
|
||
|
|
<li key={key}><div className={"content"}>{contentGenerator(key)}</div></li>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</ul>
|
||
|
|
);
|
||
|
|
}
|