myprojectpackageprav
Version:
My package in npm
75 lines • 3.28 kB
JavaScript
import React, { useEffect, useState } from "react";
import "./progress.css";
var Infostepsslider = function (props) {
var children = props.children, show = props.show;
var _a = useState(getWindowSize()), windowSize = _a[0], setWindowSize = _a[1];
var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
var _c = useState(children && children.length), length = _c[0], setLength = _c[1];
var _d = useState(null), touchPosition = _d[0], setTouchPosition = _d[1];
// Set the length to match current children from props
useEffect(function () {
setLength(children && children.length);
function handleWindowResize() {
setWindowSize(getWindowSize());
}
window.addEventListener("resize", handleWindowResize);
return function () {
window.removeEventListener("resize", handleWindowResize);
};
}, [children]);
var next = function () {
if (currentIndex < length - show) {
setCurrentIndex(function (prevState) { return prevState + 1; });
}
};
var prev = function () {
if (currentIndex > 0) {
setCurrentIndex(function (prevState) { return prevState - 1; });
}
};
var handleTouchStart = function (e) {
var touchDown = e.touches[0].clientX;
setTouchPosition(touchDown);
};
var handleTouchMove = function (e) {
var touchDown = touchPosition;
if (touchDown === null) {
return;
}
var currentTouch = e.touches[0].clientX;
var diff = touchDown - currentTouch;
if (diff > 5) {
next();
}
if (diff < -5) {
prev();
}
setTouchPosition(null);
};
var carouselCountDisplay;
if (windowSize.innerWidth <= 700 && windowSize.innerWidth > 480) {
show = 4;
carouselCountDisplay = "show-".concat(show);
}
else if (windowSize.innerWidth <= 480 && windowSize.innerWidth > 0) {
show = 2;
carouselCountDisplay = "show-".concat(show);
}
else {
carouselCountDisplay = "show-".concat(show);
}
return (React.createElement("div", { className: "carousel-container" },
React.createElement("div", { className: "carousel-wrapper" },
currentIndex > 0 && (React.createElement("span", { onClick: prev, className: "left-arrow icon-left-arrow" })),
React.createElement("div", { className: "carousel-content-wrapper", onTouchStart: handleTouchStart, onTouchMove: handleTouchMove },
React.createElement("div", { className: "carousel-content ".concat(carouselCountDisplay, " ").concat(props === null || props === void 0 ? void 0 : props.className), style: {
transform: "translateX(-".concat(currentIndex * (100 / show), "%)")
} }, children)),
currentIndex < length - show && (React.createElement("span", { onClick: next, className: "right-arrow icon-right-arrow" })))));
};
export default Infostepsslider;
export function getWindowSize() {
var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
return { innerWidth: innerWidth, innerHeight: innerHeight };
}
//# sourceMappingURL=info-steps-carousel.js.map