flexy-slider
Version:
A simple react component which makes your carousel/slider functionality so easy to integrate in your application. ## Demo
122 lines (121 loc) • 8.55 kB
JavaScript
import { jsx as n, jsxs as y } from "react/jsx-runtime";
import j, { useState as k, useRef as R, useLayoutEffect as $, useEffect as G, useCallback as O, Fragment as N } from "react";
const H = ({ svgSource: l, svgColor: t }) => l === "left" ? /* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", fill: t, viewBox: "0 0 24 24", children: /* @__PURE__ */ n("g", { "data-name": "Layer 2", children: /* @__PURE__ */ y("g", { "data-name": "arrowhead-left", children: [
/* @__PURE__ */ n("rect", { width: "24", height: "24", opacity: "0", transform: "rotate(90 12 12)" }),
/* @__PURE__ */ n("path", { d: "M11.64 5.23a1 1 0 0 0-1.41.13l-5 6a1 1 0 0 0 0 1.27l4.83 6a1 1 0 0 0 .78.37 1 1 0 0 0 .78-1.63L7.29 12l4.48-5.37a1 1 0 0 0-.13-1.4z" }),
/* @__PURE__ */ n("path", { d: "M14.29 12l4.48-5.37a1 1 0 0 0-1.54-1.28l-5 6a1 1 0 0 0 0 1.27l4.83 6a1 1 0 0 0 .78.37 1 1 0 0 0 .78-1.63z" })
] }) }) }) : /* @__PURE__ */ n("svg", { xmlns: "http://www.w3.org/2000/svg", fill: t, viewBox: "0 0 24 24", children: /* @__PURE__ */ n("g", { "data-name": "Layer 2", children: /* @__PURE__ */ y("g", { "data-name": "arrowhead-right", children: [
/* @__PURE__ */ n("rect", { width: "24", height: "24", opacity: "0", transform: "rotate(-90 12 12)" }),
/* @__PURE__ */ n("path", { d: "M18.78 11.37l-4.78-6a1 1 0 0 0-1.41-.15 1 1 0 0 0-.15 1.41L16.71 12l-4.48 5.37a1 1 0 0 0 .13 1.41A1 1 0 0 0 13 19a1 1 0 0 0 .77-.36l5-6a1 1 0 0 0 .01-1.27z" }),
/* @__PURE__ */ n("path", { d: "M7 5.37a1 1 0 0 0-1.61 1.26L9.71 12l-4.48 5.36a1 1 0 0 0 .13 1.41A1 1 0 0 0 6 19a1 1 0 0 0 .77-.36l5-6a1 1 0 0 0 0-1.27z" })
] }) }) }), g = {
tileToShow: 4,
responsive: {
XS: 1,
SM: 2,
MD: 3
},
autoSlideInterval: 4e3,
autoSlideCount: 1,
navMode: {
navigationSlideCount: 1
}
}, F = (l, t, s) => {
let e = t;
const { XS: h, SM: p, MD: u } = s, { responsive: f } = g;
return l < 500 ? e = h ? e < h ? e : h : e < f.XS ? e : f.XS : l > 500 && l < 899 ? e = p ? e < p ? e : p : e < f.SM ? e : f.SM : l > 900 && l < 1200 ? e = u ? e < u ? e : u : e < f.MD ? e : f.MD : e = t || g.navMode.navigationSlideCount, e;
}, q = (l) => l === "circle" ? "30px" : "5px", J = (l) => {
let t = {};
if (l) {
const { ArrowBackGroundShape: s, ArrowBackGroundColor: e, iconColor: h } = l;
s && (t.borderRadius = q(s)), e && (t.backgroundColor = e), h && (t.color = h);
}
return t;
}, K = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20data-name='Layer%202'%3e%3cg%20data-name='arrowhead-left'%3e%3crect%20width='24'%20height='24'%20opacity='0'%20transform='rotate(90%2012%2012)'/%3e%3cpath%20d='M11.64%205.23a1%201%200%200%200-1.41.13l-5%206a1%201%200%200%200%200%201.27l4.83%206a1%201%200%200%200%20.78.37%201%201%200%200%200%20.78-1.63L7.29%2012l4.48-5.37a1%201%200%200%200-.13-1.4z'/%3e%3cpath%20d='M14.29%2012l4.48-5.37a1%201%200%200%200-1.54-1.28l-5%206a1%201%200%200%200%200%201.27l4.83%206a1%201%200%200%200%20.78.37%201%201%200%200%200%20.78-1.63z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e", Q = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20data-name='Layer%202'%3e%3cg%20data-name='arrowhead-right'%3e%3crect%20width='24'%20height='24'%20opacity='0'%20transform='rotate(-90%2012%2012)'/%3e%3cpath%20d='M18.78%2011.37l-4.78-6a1%201%200%200%200-1.41-.15%201%201%200%200%200-.15%201.41L16.71%2012l-4.48%205.37a1%201%200%200%200%20.13%201.41A1%201%200%200%200%2013%2019a1%201%200%200%200%20.77-.36l5-6a1%201%200%200%200%20.01-1.27z'/%3e%3cpath%20d='M7%205.37a1%201%200%200%200-1.61%201.26L9.71%2012l-4.48%205.36a1%201%200%200%200%20.13%201.41A1%201%200%200%200%206%2019a1%201%200%200%200%20.77-.36l5-6a1%201%200%200%200%200-1.27z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e", U = {
parentWidth: 0,
innerWidth: "100%",
innerElementPosition: 0,
passedTile: 0,
mainWidth: "100%",
overflowX: "hidden",
autoSlide: !1
}, B = { left: !0, right: !1 }, _ = (l) => {
let { children: t, tileToShow: s, responsive: e = {}, navMode: h = {}, componentWidth: p, componentHeight: u, componentMargin: f, tileMargin: M, autoSlide: E } = l;
const [r, x] = k({ ...U }), [W, T] = k({ ...B });
let b = 20;
M && (document.documentElement.style.setProperty("--base-tile-margin", `${M}px`), b = M + M);
const m = R(null);
s = s || g.tileToShow;
const A = () => {
let i = { ...r, passedTile: s, autoSlide: E }, d = { ...W };
i.passedTile >= (t == null ? void 0 : t.length) && T({ left: !0, right: !0 }), (!h || !h.showArrow) && (i.overflowX = "auto");
const { clientWidth: a } = m.current.parentElement;
a < 500 ? (i.innerWidth = a / (e && e.XS || g.responsive.XS) * t.length, i.passedTile = e && e.XS || g.responsive.XS) : a > 500 && a < 899 ? (i.innerWidth = a / (e && e.SM || g.responsive.SM) * t.length, i.passedTile = e && e.SM || g.responsive.SM) : a > 900 && a < 1200 ? (i.innerWidth = a / (e && e.MD || g.responsive.MD) * t.length, i.passedTile = e && e.MD || g.responsive.MD) : i.innerWidth = t.length ? a / s * t.length : a, Number(i.passedTile) === t.length && (d.right = !0), i.parentWidth = a, i.mainWidth = a, x(i), T({ ...d });
};
$(() => {
if (t != null && t.length)
return window.addEventListener("resize", A), A(), () => window.removeEventListener("resize", A);
}, []);
const L = (i) => {
const d = { left: !1, right: !1 }, { clientWidth: a } = m.current.parentElement;
let o = F(r.parentWidth, h.navigationSlideCount, e);
l.autoSlide && (o = g.autoSlideCount);
const { innerElementPosition: S, passedTile: w } = r, c = m.current.children[0].children[0].clientWidth;
o ? o = o <= s ? o : Math.floor(m.current.clientWidth / c) : o = Math.floor(m.current.clientWidth / c);
let v = (o * c + o * b) * i, z = w + i * -o;
if (S !== 0 && (v = parseInt(S) + parseInt(v)), i < 0 && t.length - w <= s) {
let D = t.length - w;
D <= o && (v = S + D * (c + b) * i, d.right = !0);
}
i > 0 && v * i >= 0 && (v = 0, d.left = !0, z = s);
let P = {
...r,
mainWidth: a || r.mainWidth,
parentWidth: a || r.parentWidth,
passedTile: z,
innerElementPosition: v
};
x(P), T(d);
};
G(() => {
const { autoSlideInterval: i } = l;
let d;
if (r.autoSlide && r.passedTile > 0) {
let a = i || g.autoSlideInterval;
if (r.passedTile > (t == null ? void 0 : t.length)) {
let o = { ...r };
o.innerElementPosition = 0, o.passedTile = s, x(o), T(B);
} else
d = setTimeout(() => {
L(-1);
}, a);
return () => {
clearInterval(d);
};
}
}, [r.passedTile, r.autoSlide]);
const C = j.memo(({ style: i, disableMe: d, iconOption: a, directionMode: o }) => {
const { type: S } = a || {};
let w = J(i), c = {
arrowSrc: "",
altText: "",
clickValue: 0
};
return o === "left" ? (c.arrowSrc = a && a.left ? a.left : K, c.altText = "Left Arrow Slider", c.clickValue = 1) : (c.arrowSrc = a && a.right ? a.right : Q, c.altText = "Right Arrow Slider", c.clickValue = -1), /* @__PURE__ */ n("span", { className: d ? "disabled" : "enabled", style: w, onClick: () => L(c.clickValue), children: S === "IMAGE" ? /* @__PURE__ */ n("img", { disabled: d, src: c.arrowSrc, alt: c.altText }) : /* @__PURE__ */ n(H, { svgSource: o, svgColor: w.color }) });
}), I = O(() => {
const { icon: i, showArrow: d, arrowStyle: a } = h || {};
return d ? /* @__PURE__ */ y(N, { children: [
/* @__PURE__ */ n("div", { className: "nav-slider left", children: /* @__PURE__ */ n(C, { directionMode: "left", style: a, disableMe: W.left, iconOption: i }) }),
/* @__PURE__ */ n("div", { className: "nav-slider right", children: /* @__PURE__ */ n(C, { directionMode: "right", style: a, disableMe: W.right, iconOption: i }) })
] }) : null;
}), X = (i) => {
l.pauseOnHover && E && x({ ...r, autoSlide: i });
};
return /* @__PURE__ */ n(N, { children: t && t.length ? /* @__PURE__ */ n("div", { style: { width: p ? `${p}px` : "100%", height: u ? `${u}px` : "auto", margin: f ? `${f}px` : "0px" }, children: /* @__PURE__ */ y("div", { ref: m, className: "slider-container", style: { width: r.mainWidth, overflowX: r.overflowX }, children: [
/* @__PURE__ */ n("div", { className: "sliderWidthBox", onMouseEnter: () => X(!1), onMouseLeave: () => X(!0), style: { width: r.innerWidth, transform: `translateX(${r.innerElementPosition}px)` }, children: t }),
I()
] }) }) : "No data found !!" });
};
export {
_ as default
};