@faceless-ui/slider/dist/SliderProgress/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, { useEffect, useState, } from 'react';
import { useSlider } from '../useSlider/index.js';
export const SliderProgress = (props) => {
    const { htmlElement: Tag = 'div', style } = props, _a = props.indicator, _b = _a === void 0 ? {} : _a, { id: indicatorID, style: indicatorStyle, htmlElement: IndicatorTag = 'div' } = _b, indicatorRest = __rest(_b, ["id", "style", "htmlElement"]), { indicatorType = 'position' } = props, rest = __rest(props, ["htmlElement", "style", "indicator", "indicatorType"]);
    const [segmentStyle, setSegmentStyle] = useState(undefined);
    const { scrollRatio, slides, slidesToShow, setIsPaused, pauseOnHover, scrollOffset, sliderTrackRef, } = useSlider();
    useEffect(() => {
        let newSegmentStyle;
        const { current: track } = sliderTrackRef;
        if (track) {
            newSegmentStyle = {};
            const trackWidth = track.offsetWidth;
            const scrollOffsetRatio = scrollOffset > 0 ? ((trackWidth / scrollOffset) / 100) : 0;
            const segmentWidth = (1 / slides.length) / (1 / slidesToShow) - scrollOffsetRatio;
            if (indicatorType === 'position') {
                newSegmentStyle.width = `${segmentWidth * 100}%`;
                newSegmentStyle.left = `${(scrollRatio - (scrollRatio * segmentWidth)) * 100}%`;
            }
            if (indicatorType === 'width') {
                newSegmentStyle.width = `${scrollRatio * 100}%`;
                newSegmentStyle.left = '0px';
            }
            setSegmentStyle(newSegmentStyle);
        }
    }, [
        slides.length,
        indicatorType,
        scrollRatio,
        slidesToShow,
        sliderTrackRef,
        scrollOffset,
    ]);
    return (React.createElement(Tag, Object.assign({}, rest, { style: Object.assign({ position: 'relative' }, style || {}), onMouseEnter: () => {
            if (pauseOnHover)
                setIsPaused(true);
        }, onMouseLeave: () => {
            if (pauseOnHover)
                setIsPaused(false);
        } }),
        React.createElement(IndicatorTag, Object.assign({ id: indicatorID }, indicatorRest, { style: Object.assign(Object.assign({ position: 'absolute', top: 0, height: '100%' }, segmentStyle || {}), indicatorStyle || {}) }))));
};
//# sourceMappingURL=index.js.map