myprojectpackageprav
Version:
My package in npm
80 lines • 3.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getWindowSize = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
require("./progress.css");
var Infostepsslider = function (props) {
var children = props.children, show = props.show;
var _a = (0, react_1.useState)(getWindowSize()), windowSize = _a[0], setWindowSize = _a[1];
var _b = (0, react_1.useState)(0), currentIndex = _b[0], setCurrentIndex = _b[1];
var _c = (0, react_1.useState)(children && children.length), length = _c[0], setLength = _c[1];
var _d = (0, react_1.useState)(null), touchPosition = _d[0], setTouchPosition = _d[1];
// Set the length to match current children from props
(0, react_1.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_1.default.createElement("div", { className: "carousel-container" },
react_1.default.createElement("div", { className: "carousel-wrapper" },
currentIndex > 0 && (react_1.default.createElement("span", { onClick: prev, className: "left-arrow icon-left-arrow" })),
react_1.default.createElement("div", { className: "carousel-content-wrapper", onTouchStart: handleTouchStart, onTouchMove: handleTouchMove },
react_1.default.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_1.default.createElement("span", { onClick: next, className: "right-arrow icon-right-arrow" })))));
};
exports.default = Infostepsslider;
function getWindowSize() {
var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
return { innerWidth: innerWidth, innerHeight: innerHeight };
}
exports.getWindowSize = getWindowSize;
//# sourceMappingURL=info-steps-carousel.js.map