dwed-components
v1.0.11
Published
InfiniteScroll это компонента, которая увеличивает offset списка (массива), когда children не помещается в screen браузера.
Downloads
3
Readme
DWED-COMPONENTS
1. InfiniteScroll
InfiniteScroll это компонента, которая увеличивает offset списка (массива), когда children не помещается в screen браузера.
Логика:
Если isLoading = true
, то ничего не делать,
иначе, следить за объектом lastElementCurrent
(из props, или дефолт div), внутри root (из props или document.body).
Если lastElementCurrent.isIntersecting = true
(Видимый), то
Если (props.offset < props.totalCount && props.nextOffset
< props.totalCount)
, то props.setOffset(props.nextOffset)
.
export const InfiniteScroll = (props: InfiniteScrollProps) => {
const _lastElement = useRef<any>(null);
const observer = useRef<any>(null);
useEffect(() => {
if (props.isLoading) return;
if (observer.current) observer.current.disconnect();
const options: (IntersectionObserverInit | undefined) = props.root !== undefined ? {
root: document.querySelector(props.root!),
} : undefined;
observer.current = new IntersectionObserver((entries) => {
const [entry] = entries;
if (props.nextOffset) {
if (entry.isIntersecting && props.offset < props.totalCount && props.nextOffset < props.totalCount) {
props.setOffset(props.nextOffset);
}
}
}, options);
if (props.lastElementCurrent !== undefined && props.lastElementCurrent !== null) {
observer.current.observe(props.lastElementCurrent);
} else {
observer.current.observe(_lastElement.current);
}
}, [props.isLoading, _lastElement]);
return <>
{props.children}
{props.lastElementCurrent === undefined &&
<div ref={_lastElement} style={props.debug ? {backgroundColor: 'red', height: 20, width: '100%'} : {}}/>
}
</>;
};
Props:
children
- это ReactNode Components (в основном map списка).offset
- с какого порядка начинается список (Например с 0).setOffset
- функция или setState, срабатывает, когда children не помещается в screen браузера.isLoading
- boolean флаг, еслиtrue
, тогда setOffset не будет срабатывать даже если children не помещается в screen браузера.totalCount
- размер списка (массива).nextOffset
- следующий порядковый номер, с которого подгружать список.root?
- не обязательное поле, передаетсяid
элемента с которого считывать scroll, если не указан то по умолчание этоdocument.body
.lastElementCurrent?
- не обязательное поле, ref ссылка на последний элемент, если не указан то по умолчанию это div внутриInfiniteScroll
, который отрисовывается,
послеchildren
.debug?
- не обязательное поле, еслиtrue
, тогдаlastElementCurrent
по умолчанию (div) покрасится в красный цвет, и установит height в 20px.
2. GetImage
GetImage это компонента, возвращает изображение, при загрузке возвращает skeleton.
Логика:
Используется хук useProgressiveImage
.
Если loaded = null
, то возвращает skeleton
,
иначе div
с background-image
с url
из props
.
export const GetImage = (props: GetImageProps) => {
const loaded = useProgressiveImage(props.src!);
return (loaded !== null ? <Root style={props.style} loaded={loaded}/> :
<Skeleton sx={{transform: 'none'}} style={props.style}/>);
};
type RootProps = {
loaded?: any;
}
const Root = styled.div`
background-image: url(${({loaded}: RootProps) => loaded});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
`;
Props:
style?
- задать свой стиль.src
- ссылка на изображение.