@maxweek/react-scroller
Version:
Make your blocks scrolling easy, with a custom scroll-bar, based on native browser scroll
659 lines (656 loc) • 24.9 kB
JavaScript
import Ce, { forwardRef as je, useRef as H, useState as Ne, useEffect as L, useImperativeHandle as Xe } from "react";
var fe = { exports: {} }, J = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Te;
function Oe() {
if (Te)
return J;
Te = 1;
var t = Symbol.for("react.transitional.element"), y = Symbol.for("react.fragment");
function r(l, g, _) {
var u = null;
if (_ !== void 0 && (u = "" + _), g.key !== void 0 && (u = "" + g.key), "key" in g) {
_ = {};
for (var d in g)
d !== "key" && (_[d] = g[d]);
} else
_ = g;
return g = _.ref, {
$$typeof: t,
type: l,
key: u,
ref: g !== void 0 ? g : null,
props: _
};
}
return J.Fragment = y, J.jsx = r, J.jsxs = r, J;
}
var I = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ye;
function Ae() {
return Ye || (Ye = 1, process.env.NODE_ENV !== "production" && function() {
function t(e) {
if (e == null)
return null;
if (typeof e == "function")
return e.$$typeof === re ? null : e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case R:
return "Fragment";
case X:
return "Portal";
case n:
return "Profiler";
case Q:
return "StrictMode";
case v:
return "Suspense";
case w:
return "SuspenseList";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case m:
return (e.displayName || "Context") + ".Provider";
case s:
return (e._context.displayName || "Context") + ".Consumer";
case b:
var o = e.render;
return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case $:
return o = e.displayName || null, o !== null ? o : t(e.type) || "Memo";
case V:
o = e._payload, e = e._init;
try {
return t(e(o));
} catch {
}
}
return null;
}
function y(e) {
return "" + e;
}
function r(e) {
try {
y(e);
var o = !1;
} catch {
o = !0;
}
if (o) {
o = console;
var a = o.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return a.call(
o,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
c
), y(e);
}
}
function l() {
}
function g() {
if (F === 0) {
de = console.log, be = console.info, ve = console.warn, he = console.error, ge = console.group, Ee = console.groupCollapsed, me = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: l,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
F++;
}
function _() {
if (F--, F === 0) {
var e = { configurable: !0, enumerable: !0, writable: !0 };
Object.defineProperties(console, {
log: A({}, e, { value: de }),
info: A({}, e, { value: be }),
warn: A({}, e, { value: ve }),
error: A({}, e, { value: he }),
group: A({}, e, { value: ge }),
groupCollapsed: A({}, e, { value: Ee }),
groupEnd: A({}, e, { value: me })
});
}
0 > F && console.error(
"disabledDepth fell below zero. This is a bug in React. Please file an issue."
);
}
function u(e) {
if (ie === void 0)
try {
throw Error();
} catch (a) {
var o = a.stack.trim().match(/\n( *(at )?)/);
ie = o && o[1] || "", we = -1 < a.stack.indexOf(`
at`) ? " (<anonymous>)" : -1 < a.stack.indexOf("@") ? "@unknown:0:0" : "";
}
return `
` + ie + e + we;
}
function d(e, o) {
if (!e || ce)
return "";
var a = se.get(e);
if (a !== void 0)
return a;
ce = !0, a = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
var c = null;
c = O.H, O.H = null, g();
try {
var h = {
DetermineComponentFrameRoot: function() {
try {
if (o) {
var C = function() {
throw Error();
};
if (Object.defineProperty(C.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(C, []);
} catch (T) {
var te = T;
}
Reflect.construct(e, [], C);
} else {
try {
C.call();
} catch (T) {
te = T;
}
e.call(C.prototype);
}
} else {
try {
throw Error();
} catch (T) {
te = T;
}
(C = e()) && typeof C.catch == "function" && C.catch(function() {
});
}
} catch (T) {
if (T && te && typeof T.stack == "string")
return [T.stack, te.stack];
}
return [null, null];
}
};
h.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
var f = Object.getOwnPropertyDescriptor(
h.DetermineComponentFrameRoot,
"name"
);
f && f.configurable && Object.defineProperty(
h.DetermineComponentFrameRoot,
"name",
{ value: "DetermineComponentFrameRoot" }
);
var i = h.DetermineComponentFrameRoot(), S = i[0], W = i[1];
if (S && W) {
var E = S.split(`
`), z = W.split(`
`);
for (i = f = 0; f < E.length && !E[f].includes(
"DetermineComponentFrameRoot"
); )
f++;
for (; i < z.length && !z[i].includes(
"DetermineComponentFrameRoot"
); )
i++;
if (f === E.length || i === z.length)
for (f = E.length - 1, i = z.length - 1; 1 <= f && 0 <= i && E[f] !== z[i]; )
i--;
for (; 1 <= f && 0 <= i; f--, i--)
if (E[f] !== z[i]) {
if (f !== 1 || i !== 1)
do
if (f--, i--, 0 > i || E[f] !== z[i]) {
var G = `
` + E[f].replace(
" at new ",
" at "
);
return e.displayName && G.includes("<anonymous>") && (G = G.replace("<anonymous>", e.displayName)), typeof e == "function" && se.set(e, G), G;
}
while (1 <= f && 0 <= i);
break;
}
}
} finally {
ce = !1, O.H = c, _(), Error.prepareStackTrace = a;
}
return E = (E = e ? e.displayName || e.name : "") ? u(E) : "", typeof e == "function" && se.set(e, E), E;
}
function U(e) {
if (e == null)
return "";
if (typeof e == "function") {
var o = e.prototype;
return d(
e,
!(!o || !o.isReactComponent)
);
}
if (typeof e == "string")
return u(e);
switch (e) {
case v:
return u("Suspense");
case w:
return u("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case b:
return e = d(e.render, !1), e;
case $:
return U(e.type);
case V:
o = e._payload, e = e._init;
try {
return U(e(o));
} catch {
}
}
return "";
}
function k() {
var e = O.A;
return e === null ? null : e.getOwner();
}
function ne(e) {
if (ue.call(e, "key")) {
var o = Object.getOwnPropertyDescriptor(e, "key").get;
if (o && o.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function D(e, o) {
function a() {
_e || (_e = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
o
));
}
a.isReactWarning = !0, Object.defineProperty(e, "key", {
get: a,
configurable: !0
});
}
function Z() {
var e = t(this.type);
return xe[e] || (xe[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function K(e, o, a, c, h, f) {
return a = f.ref, e = {
$$typeof: x,
type: e,
key: o,
props: f,
_owner: h
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: Z
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function B(e, o, a, c, h, f) {
if (typeof e == "string" || typeof e == "function" || e === R || e === n || e === Q || e === v || e === w || e === p || typeof e == "object" && e !== null && (e.$$typeof === V || e.$$typeof === $ || e.$$typeof === m || e.$$typeof === s || e.$$typeof === b || e.$$typeof === ye || e.getModuleId !== void 0)) {
var i = o.children;
if (i !== void 0)
if (c)
if (le(i)) {
for (c = 0; c < i.length; c++)
N(i[c], e);
Object.freeze && Object.freeze(i);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else
N(i, e);
} else
i = "", (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (i += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), e === null ? c = "null" : le(e) ? c = "array" : e !== void 0 && e.$$typeof === x ? (c = "<" + (t(e.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : c = typeof e, console.error(
"React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
c,
i
);
if (ue.call(o, "key")) {
i = t(e);
var S = Object.keys(o).filter(function(E) {
return E !== "key";
});
c = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", Re[i + c] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
c,
i,
S,
i
), Re[i + c] = !0);
}
if (i = null, a !== void 0 && (r(a), i = "" + a), ne(o) && (r(o.key), i = "" + o.key), "key" in o) {
a = {};
for (var W in o)
W !== "key" && (a[W] = o[W]);
} else
a = o;
return i && D(
a,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), K(e, i, f, h, k(), a);
}
function N(e, o) {
if (typeof e == "object" && e && e.$$typeof !== ke) {
if (le(e))
for (var a = 0; a < e.length; a++) {
var c = e[a];
P(c) && q(c, o);
}
else if (P(e))
e._store && (e._store.validated = 1);
else if (e === null || typeof e != "object" ? a = null : (a = ee && e[ee] || e["@@iterator"], a = typeof a == "function" ? a : null), typeof a == "function" && a !== e.entries && (a = a.call(e), a !== e))
for (; !(e = a.next()).done; )
P(e.value) && q(e.value, o);
}
}
function P(e) {
return typeof e == "object" && e !== null && e.$$typeof === x;
}
function q(e, o) {
if (e._store && !e._store.validated && e.key == null && (e._store.validated = 1, o = oe(o), !Se[o])) {
Se[o] = !0;
var a = "";
e && e._owner != null && e._owner !== k() && (a = null, typeof e._owner.tag == "number" ? a = t(e._owner.type) : typeof e._owner.name == "string" && (a = e._owner.name), a = " It was passed a child from " + a + ".");
var c = O.getCurrentStack;
O.getCurrentStack = function() {
var h = U(e.type);
return c && (h += c() || ""), h;
}, console.error(
'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
o,
a
), O.getCurrentStack = c;
}
}
function oe(e) {
var o = "", a = k();
return a && (a = t(a.type)) && (o = `
Check the render method of \`` + a + "`."), o || (e = t(e)) && (o = `
Check the top-level render call using <` + e + ">."), o;
}
var ae = Ce, x = Symbol.for("react.transitional.element"), X = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), Q = Symbol.for("react.strict_mode"), n = Symbol.for("react.profiler"), s = Symbol.for("react.consumer"), m = Symbol.for("react.context"), b = Symbol.for("react.forward_ref"), v = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), $ = Symbol.for("react.memo"), V = Symbol.for("react.lazy"), p = Symbol.for("react.offscreen"), ee = Symbol.iterator, re = Symbol.for("react.client.reference"), O = ae.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ue = Object.prototype.hasOwnProperty, A = Object.assign, ye = Symbol.for("react.client.reference"), le = Array.isArray, F = 0, de, be, ve, he, ge, Ee, me;
l.__reactDisabledLog = !0;
var ie, we, ce = !1, se = new (typeof WeakMap == "function" ? WeakMap : Map)(), ke = Symbol.for("react.client.reference"), _e, xe = {}, Re = {}, Se = {};
I.Fragment = R, I.jsx = function(e, o, a, c, h) {
return B(e, o, a, !1, c, h);
}, I.jsxs = function(e, o, a, c, h) {
return B(e, o, a, !0, c, h);
};
}()), I;
}
process.env.NODE_ENV === "production" ? fe.exports = Oe() : fe.exports = Ae();
var j = fe.exports;
function Y(t, y, r = "") {
return t ? `__${y}` : r ? `__${r}` : "";
}
function M(t) {
return t || "";
}
const Le = je((t, y) => {
const r = H({
height: 0,
width: 0,
top: 0,
left: 0,
boxHeight: 0,
boxWidth: 0,
progressX: 0,
progressY: 0,
grab: !1,
grabOffset: 0,
grabStartX: 0,
grabStartY: 0,
grabDeltaX: 0,
grabDeltaY: 0,
scrollStartX: 0,
scrollStartY: 0,
hovered: !1,
inited: !1,
barX: {
size: 0,
offset: 0,
offsetStart: 0,
offsetDelta: 0,
clicked: !1
},
barY: {
size: 0,
offset: 0,
offsetStart: 0,
offsetDelta: 0,
clicked: !1
}
}).current, l = H(null), g = H(null), _ = H(null), u = H(null), d = H(null), [U, k] = Ne(!1);
L(() => {
const n = (v) => {
var w;
r.barX.clicked = !1, r.barY.clicked = !1, r.grab = !1, k(r.hovered), (w = l.current) == null || w.classList.remove("__grabbing");
}, s = (v) => {
if (l.current) {
if (r.barX.clicked || r.barY.clicked) {
const w = X(v);
r.barX.clicked && (r.barX.offset = w.x, r.barX.offsetDelta = r.barX.offsetStart - r.barX.offset, l.current.scrollLeft = r.scrollStartX + -r.barX.offsetDelta / r.boxWidth * (r.width - r.boxWidth)), r.barY.clicked && (r.barY.offset = w.y, r.barY.offsetDelta = r.barY.offsetStart - r.barY.offset, l.current.scrollTop = r.scrollStartY + -r.barY.offsetDelta / r.boxHeight * (r.height - r.boxHeight));
}
if (r.grab) {
const w = X(v);
t.horizontal && (r.grabDeltaX = r.grabStartX - w.x, l.current.scrollLeft = r.scrollStartX + r.grabDeltaX), t.vertical && (r.grabDeltaY = r.grabStartY - w.y, l.current.scrollTop = r.scrollStartY + r.grabDeltaY);
}
}
}, m = (v) => {
v.cancelable && (r.barX.clicked || r.barY.clicked) && v.preventDefault();
};
window.addEventListener("pointerup", n), window.addEventListener("pointermove", s), window.addEventListener("touchmove", m, { passive: !1 });
const b = new ResizeObserver((v) => {
r.inited && (x(), R());
});
if (l.current)
return b.observe(l.current), () => {
window.removeEventListener("pointerup", n), window.removeEventListener("pointermove", s), window.removeEventListener("touchmove", m), b.disconnect();
};
}, []), L(() => {
let n = l.current;
if (n)
return t.horizontal && n.addEventListener("wheel", P), n.addEventListener("scroll", q), t.grab && n.addEventListener("pointerdown", Z), () => {
n && (n.removeEventListener("scroll", q), t.horizontal && n.removeEventListener("wheel", P), t.grab && n.removeEventListener("pointerdown", Z));
};
}, [l.current]), L(() => {
let n = u.current;
if (n)
return n.addEventListener("pointerdown", K), () => {
n && n.removeEventListener("pointerdown", K);
};
}, [u.current]), L(() => {
let n = d.current;
if (n)
return n.addEventListener("pointerdown", B), () => {
n && n.removeEventListener("pointerdown", B);
};
}, [d.current]), L(() => {
let n = g.current;
if (n)
return n.addEventListener("wheel", N), () => {
n && n.removeEventListener("wheel", N);
};
}, [g.current]), L(() => {
let n = _.current;
if (n)
return n.addEventListener("wheel", N), () => {
n && n.removeEventListener("wheel", N);
};
}, [_.current]), L(() => {
x(), R();
}, [t.children]);
const ne = () => {
x(), R();
}, D = (n, s = 300) => {
if (!l.current)
return;
const m = t.horizontal, b = m ? l.current.scrollLeft : l.current.scrollTop, v = n - b, w = performance.now(), $ = (V) => {
if (!l.current)
return;
const p = V - w, ee = Math.min(p / s, 1), re = b + v * ee;
m ? l.current.scrollLeft = re : l.current.scrollTop = re, p < s && requestAnimationFrame($);
};
requestAnimationFrame($);
};
Xe(y, () => ({
scrollTo: (n, s) => {
D(n, s);
},
scrollToStart: (n) => {
D(0, n);
},
scrollToEnd: (n) => {
D(r.height, n);
},
update: () => {
ne();
},
getProperties: () => r,
scrollRef: l
}));
const Z = (n) => {
if (!l.current || r.barX.clicked || r.barY.clicked)
return;
r.grab = !0;
const s = X(n);
r.grabStartX = s.x, r.grabStartY = s.y, t.horizontal && (r.scrollStartX = l.current.scrollLeft), t.vertical && (r.scrollStartY = l.current.scrollTop), l.current.classList.add("__grabbing");
}, K = (n) => {
l.current && (r.barY.clicked = !0, r.barY.offsetStart = X(n).y, r.scrollStartY = l.current.scrollTop);
}, B = (n) => {
l.current && (r.barX.clicked = !0, r.barX.offsetStart = X(n).x, r.scrollStartX = l.current.scrollLeft);
}, N = (n) => {
n.preventDefault(), l.current && (t.horizontal && (l.current.scrollLeft += n.deltaX), t.vertical && (l.current.scrollTop += n.deltaY));
}, P = (n) => {
let s = n;
if (s.shiftKey || !l.current || t.horizontal)
return;
let m = s.wheelDeltaY, b = !1;
m ? m === s.deltaY * -3 && (b = !0) : s.deltaMode === 0 && (b = !0), b || (s.preventDefault(), l.current.scrollLeft += s.deltaY / 4), x(), R();
}, q = (n) => {
n.stopPropagation(), x(), R();
}, oe = () => {
(t.showWhenMinimal || r.height > r.boxHeight || r.width > r.boxWidth) && (r.hovered = !0, k(!0));
}, ae = () => {
r.hovered = !1, !r.grab && (r.barX.clicked || r.barY.clicked || k(!1));
}, x = () => {
l.current && (t.vertical && t.horizontal ? (r.height = l.current.scrollHeight, r.top = l.current.scrollTop, r.boxHeight = l.current.clientHeight, r.width = l.current.scrollWidth, r.left = l.current.scrollLeft, r.boxWidth = l.current.clientWidth) : t.horizontal ? (r.width = l.current.scrollWidth, r.left = l.current.scrollLeft, r.boxWidth = l.current.clientWidth) : (r.height = l.current.scrollHeight, r.top = l.current.scrollTop, r.boxHeight = l.current.clientHeight), r.progressY = r.top / (r.height - r.boxHeight), r.progressX = r.left / (r.width - r.boxWidth), r.inited = !0);
}, X = (n) => {
if ("x" in n)
return { x: n.x, y: n.y };
{
const s = n.touches[0];
return { x: s.clientX, y: s.clientY };
}
}, R = () => {
var n, s, m, b, v;
r.barX.size = 100 / (r.width / r.boxWidth), r.barY.size = 100 / (r.height / r.boxHeight), t.vertical && t.horizontal ? (u.current && (u.current.style.height = `${r.barY.size}%`, u.current.style.top = `${r.progressY * 100 - r.progressY * r.barY.size}%`), d.current && (d.current.style.width = `${r.barX.size}%`, d.current.style.left = `${r.progressX * 100 - r.progressX * r.barX.size}%`)) : t.horizontal ? d.current && (d.current.style.width = `${r.barX.size}%`, d.current.style.left = `${r.progressX * 100 - r.progressX * r.barX.size}%`) : u.current && (u.current.style.height = `${r.barY.size}%`, u.current.style.top = `${r.progressY * 100 - r.progressY * r.barY.size}%`), r.progressX === 0 && ((n = t.onReachStart) == null || n.call(t, "x")), r.progressY === 0 && ((s = t.onReachStart) == null || s.call(t, "y")), r.progressX === 1 && ((m = t.onReachEnd) == null || m.call(t, "x")), r.progressY === 1 && ((b = t.onReachEnd) == null || b.call(t, "y")), (v = t.onScroll) == null || v.call(
t,
{ progress: r.progressX, offset: r.left },
{ progress: r.progressY, offset: r.top }
);
}, Q = [
"scroller",
M(t.className),
Y(t.horizontal, "horizontal"),
Y(t.vertical, "vertical"),
Y(t.needBar, "bar"),
Y(t.grabCursor, "grab"),
Y(t.autoHide, "autoHide"),
Y(t.barAltPosition, "barAlt"),
Y(t.borderPadding, "borderPadding"),
Y(t.borderFade, "borderFade"),
Y(U, "hovered")
].join(" ");
return /* @__PURE__ */ j.jsxs(
"div",
{
className: Q,
onPointerEnter: oe,
onPointerLeave: ae,
children: [
t.needBar && /* @__PURE__ */ j.jsxs(j.Fragment, { children: [
t.vertical && /* @__PURE__ */ j.jsx("div", { className: `scroller__bar scroller__bar_vertical ${M(t.barClassName)}`, ref: g, children: /* @__PURE__ */ j.jsx("div", { className: `scroller__bar_roller scroller__bar_roller_vertical ${M(t.barRollerClassName)}`, ref: u }) }),
t.horizontal && /* @__PURE__ */ j.jsx("div", { className: `scroller__bar scroller__bar_horizontal ${M(t.barClassName)}`, ref: _, children: /* @__PURE__ */ j.jsx("div", { className: `scroller__bar_roller scroller__bar_roller_horizontal ${M(t.barRollerClassName)}`, ref: d }) })
] }),
/* @__PURE__ */ j.jsx(
"div",
{
className: `scroller__content ${M(t.contentClassName)}`,
ref: l,
children: t.children
}
)
]
}
);
});
export {
Le as default
};