react-base-guide/lib/components/slider/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const SliderRoot_1 = __importDefault(require("./SliderRoot"));
const slide_list_1 = __importDefault(require("./slide-list"));
const slide_1 = __importDefault(require("./slide"));
const getIndex = (length, index) => {
    if (index < 0) {
        index = length - 1;
    }
    if (index >= length) {
        index = 0;
    }
    return index;
};
const getPerspective = (slider, setState) => {
    setState({ perspective: slider.offsetWidth * 2 + "px" });
    window.onresize = () => {
        setState({ perspective: slider.offsetWidth * 2 + "px" });
    };
};
const onSwipe = ({ length, position, state, setState }) => {
    if (Math.abs(position.x) >= 50) {
        position.x > 0 ?
            onPrev({ length, state, setState }) :
            onNext({ length, state, setState });
    }
};
const onPrev = ({ length, state, setState }) => {
    if (!state.disabledNavigation) {
        let prevIndex = state.currentIndex - 1;
        if (prevIndex < 0) {
            prevIndex = length - 1;
        }
        setState({ disabledNavigation: true, animation: "prev" });
        setTimeout(() => {
            setState({ currentIndex: prevIndex, disabledNavigation: false, animation: null });
        }, 950);
    }
};
const onNext = ({ length, state, setState }) => {
    if (!state.disabledNavigation) {
        let nextIndex = state.currentIndex + 1;
        if (nextIndex >= length) {
            nextIndex = 0;
        }
        setState({ disabledNavigation: true, animation: "next" });
        setTimeout(() => {
            setState({ currentIndex: nextIndex, disabledNavigation: false, animation: null });
        }, 950);
    }
};
const Slider = (props) => {
    const { children } = props;
    const [state, setAllState] = (0, react_1.useState)({
        currentIndex: 0,
        animation: null,
        disabledNavigation: false,
        perspective: null,
    });
    const setState = obj => setAllState(Object.assign(Object.assign({}, state), obj));
    const slider = (0, react_1.useRef)(null);
    const { currentIndex, animation, disabledNavigation, perspective } = state;
    (0, react_1.useEffect)(() => {
        getPerspective(slider.current, setState);
    }, []);
    const onPrevFunc = () => onPrev({
        length: children.length,
        state, setState
    });
    const onNextFunc = () => onNext({
        length: children.length,
        state, setState
    });
    return ((0, jsx_runtime_1.jsx)(SliderRoot_1.default, Object.assign({ id: props.id, className: props.className, "$styled": props.styled }, { children: (0, jsx_runtime_1.jsxs)(slide_list_1.default, Object.assign({ forwardRef: slider, animation: animation, perspective: perspective, onSwipe: position => onSwipe({
                length: children.length,
                position,
                state,
                setState
            }) }, { children: [(0, jsx_runtime_1.jsx)(slide_1.default, Object.assign({ position: "prev", onPrev: onPrevFunc, onNext: onNextFunc, disabledNavigation: disabledNavigation }, { children: children[getIndex(children.length, currentIndex - 1)] })), (0, jsx_runtime_1.jsx)(slide_1.default, Object.assign({ onPrev: onPrevFunc, onNext: onNextFunc, disabledNavigation: disabledNavigation }, { children: children[getIndex(children.length, currentIndex)] })), (0, jsx_runtime_1.jsx)(slide_1.default, Object.assign({ position: "next", onPrev: onPrevFunc, onNext: onNextFunc, disabledNavigation: disabledNavigation }, { children: children[getIndex(children.length, currentIndex + 1)] }))] })) })));
};
exports.default = Slider;
//# sourceMappingURL=index.js.map