Dwed-components NPM

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;
`;