@faceless-ui/slider/dist/Slide/index.js

A React library for building every kind of slider

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useCallback, useEffect, useRef, useState, } from 'react';
import { useSlider } from '../useSlider/index.js';
import { useIntersection } from './useIntersection.js';
export const Slide = (props) => {
    const { index, htmlElement = 'div', children, style, onClick: onClickFromProps } = props, rest = __rest(props, ["index", "htmlElement", "children", "style", "onClick"]);
    const [snapStyles, setSnapStyles] = useState();
    const slider = useSlider();
    const slideRef = useRef(null);
    const { dispatchSlide, sliderTrackRef, goToSlideIndex, slideWidth, slideOnSelect, scrollSnap, scrollOffset, slides } = slider;
    const prevIntersection = useRef(undefined);
    const { isIntersecting } = useIntersection(slideRef, {
        root: sliderTrackRef,
        rootMargin: scrollOffset ? `0px -${scrollOffset}px 0px -${scrollOffset}px` : '-1px',
    });
    useEffect(() => {
        const intersectionChange = prevIntersection.current !== isIntersecting;
        if (intersectionChange) {
            dispatchSlide({
                index,
                ref: slideRef,
                isIntersecting,
            });
            prevIntersection.current = isIntersecting;
        }
    }, [
        dispatchSlide,
        isIntersecting,
        index,
    ]);
    // here
    useEffect(() => {
        if (scrollSnap) {
            setSnapStyles({
                scrollSnapStop: 'always',
                scrollSnapAlign: 'start',
            });
        }
        else {
            setSnapStyles(undefined);
        }
    }, [scrollSnap]);
    const handleClick = useCallback((e) => {
        if (slideOnSelect) {
            goToSlideIndex(index);
        }
        if (typeof onClickFromProps === 'function') {
            onClickFromProps(e);
        }
    }, [
        slideOnSelect,
        index,
        goToSlideIndex,
        onClickFromProps
    ]);
    const Tag = htmlElement;
    return (React.createElement(Tag, Object.assign({ ref: slideRef,
        onClick: handleClick,
        role: "group",
        'aria-roledescription': "slide",
        'aria-label': `${index + 1} of ${(slides === null || slides === void 0 ? void 0 : slides.length) || 0}` }, rest, { style: Object.assign(Object.assign({ flexShrink: 0, width: slideWidth }, style || {}), snapStyles || {}) }), children && children));
};
//# sourceMappingURL=index.js.map