neurogrid-layout
Version:
🧠NeuroGrid — content-aware adaptive layout for React
671 lines (668 loc) • 22.8 kB
JavaScript
import Oe, { useRef as lr, useEffect as fr } from "react";
var X = { exports: {} }, I = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var we;
function cr() {
if (we) return I;
we = 1;
var F = Oe, b = Symbol.for("react.element"), h = Symbol.for("react.fragment"), w = Object.prototype.hasOwnProperty, R = F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, j = { key: !0, ref: !0, __self: !0, __source: !0 };
function C(_, a, f) {
var l, c = {}, E = null, T = null;
f !== void 0 && (E = "" + f), a.key !== void 0 && (E = "" + a.key), a.ref !== void 0 && (T = a.ref);
for (l in a) w.call(a, l) && !j.hasOwnProperty(l) && (c[l] = a[l]);
if (_ && _.defaultProps) for (l in a = _.defaultProps, a) c[l] === void 0 && (c[l] = a[l]);
return { $$typeof: b, type: _, key: E, ref: T, props: c, _owner: R.current };
}
return I.Fragment = h, I.jsx = C, I.jsxs = C, I;
}
var W = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its 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 dr() {
return Te || (Te = 1, process.env.NODE_ENV !== "production" && function() {
var F = Oe, b = Symbol.for("react.element"), h = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), R = Symbol.for("react.strict_mode"), j = Symbol.for("react.profiler"), C = Symbol.for("react.provider"), _ = Symbol.for("react.context"), a = Symbol.for("react.forward_ref"), f = Symbol.for("react.suspense"), l = Symbol.for("react.suspense_list"), c = Symbol.for("react.memo"), E = Symbol.for("react.lazy"), T = Symbol.for("react.offscreen"), H = Symbol.iterator, Ce = "@@iterator";
function Se(e) {
if (e === null || typeof e != "object")
return null;
var r = H && e[H] || e[Ce];
return typeof r == "function" ? r : null;
}
var x = F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function p(e) {
{
for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
t[n - 1] = arguments[n];
Pe("error", e, t);
}
}
function Pe(e, r, t) {
{
var n = x.ReactDebugCurrentFrame, u = n.getStackAddendum();
u !== "" && (r += "%s", t = t.concat([u]));
var s = t.map(function(o) {
return String(o);
});
s.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, s);
}
}
var je = !1, xe = !1, ke = !1, Ae = !1, Fe = !1, Z;
Z = Symbol.for("react.module.reference");
function De(e) {
return !!(typeof e == "string" || typeof e == "function" || e === w || e === j || Fe || e === R || e === f || e === l || Ae || e === T || je || xe || ke || typeof e == "object" && e !== null && (e.$$typeof === E || e.$$typeof === c || e.$$typeof === C || e.$$typeof === _ || e.$$typeof === a || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === Z || e.getModuleId !== void 0));
}
function $e(e, r, t) {
var n = e.displayName;
if (n)
return n;
var u = r.displayName || r.name || "";
return u !== "" ? t + "(" + u + ")" : t;
}
function Q(e) {
return e.displayName || "Context";
}
function O(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && p("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case w:
return "Fragment";
case h:
return "Portal";
case j:
return "Profiler";
case R:
return "StrictMode";
case f:
return "Suspense";
case l:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case _:
var r = e;
return Q(r) + ".Consumer";
case C:
var t = e;
return Q(t._context) + ".Provider";
case a:
return $e(e, e.render, "ForwardRef");
case c:
var n = e.displayName || null;
return n !== null ? n : O(e.type) || "Memo";
case E: {
var u = e, s = u._payload, o = u._init;
try {
return O(o(s));
} catch {
return null;
}
}
}
return null;
}
var S = Object.assign, D = 0, ee, re, te, ne, ae, ie, oe;
function ue() {
}
ue.__reactDisabledLog = !0;
function Ie() {
{
if (D === 0) {
ee = console.log, re = console.info, te = console.warn, ne = console.error, ae = console.group, ie = console.groupCollapsed, oe = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: ue,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
D++;
}
}
function We() {
{
if (D--, D === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: S({}, e, {
value: ee
}),
info: S({}, e, {
value: re
}),
warn: S({}, e, {
value: te
}),
error: S({}, e, {
value: ne
}),
group: S({}, e, {
value: ae
}),
groupCollapsed: S({}, e, {
value: ie
}),
groupEnd: S({}, e, {
value: oe
})
});
}
D < 0 && p("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var U = x.ReactCurrentDispatcher, N;
function Y(e, r, t) {
{
if (N === void 0)
try {
throw Error();
} catch (u) {
var n = u.stack.trim().match(/\n( *(at )?)/);
N = n && n[1] || "";
}
return `
` + N + e;
}
}
var z = !1, L;
{
var Ye = typeof WeakMap == "function" ? WeakMap : Map;
L = new Ye();
}
function se(e, r) {
if (!e || z)
return "";
{
var t = L.get(e);
if (t !== void 0)
return t;
}
var n;
z = !0;
var u = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var s;
s = U.current, U.current = null, Ie();
try {
if (r) {
var o = function() {
throw Error();
};
if (Object.defineProperty(o.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(o, []);
} catch (y) {
n = y;
}
Reflect.construct(e, [], o);
} else {
try {
o.call();
} catch (y) {
n = y;
}
e.call(o.prototype);
}
} else {
try {
throw Error();
} catch (y) {
n = y;
}
e();
}
} catch (y) {
if (y && n && typeof y.stack == "string") {
for (var i = y.stack.split(`
`), g = n.stack.split(`
`), d = i.length - 1, v = g.length - 1; d >= 1 && v >= 0 && i[d] !== g[v]; )
v--;
for (; d >= 1 && v >= 0; d--, v--)
if (i[d] !== g[v]) {
if (d !== 1 || v !== 1)
do
if (d--, v--, v < 0 || i[d] !== g[v]) {
var m = `
` + i[d].replace(" at new ", " at ");
return e.displayName && m.includes("<anonymous>") && (m = m.replace("<anonymous>", e.displayName)), typeof e == "function" && L.set(e, m), m;
}
while (d >= 1 && v >= 0);
break;
}
}
} finally {
z = !1, U.current = s, We(), Error.prepareStackTrace = u;
}
var A = e ? e.displayName || e.name : "", P = A ? Y(A) : "";
return typeof e == "function" && L.set(e, P), P;
}
function Le(e, r, t) {
return se(e, !1);
}
function Me(e) {
var r = e.prototype;
return !!(r && r.isReactComponent);
}
function M(e, r, t) {
if (e == null)
return "";
if (typeof e == "function")
return se(e, Me(e));
if (typeof e == "string")
return Y(e);
switch (e) {
case f:
return Y("Suspense");
case l:
return Y("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case a:
return Le(e.render);
case c:
return M(e.type, r, t);
case E: {
var n = e, u = n._payload, s = n._init;
try {
return M(s(u), r, t);
} catch {
}
}
}
return "";
}
var $ = Object.prototype.hasOwnProperty, le = {}, fe = x.ReactDebugCurrentFrame;
function V(e) {
if (e) {
var r = e._owner, t = M(e.type, e._source, r ? r.type : null);
fe.setExtraStackFrame(t);
} else
fe.setExtraStackFrame(null);
}
function Ve(e, r, t, n, u) {
{
var s = Function.call.bind($);
for (var o in e)
if (s(e, o)) {
var i = void 0;
try {
if (typeof e[o] != "function") {
var g = Error((n || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw g.name = "Invariant Violation", g;
}
i = e[o](r, o, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (d) {
i = d;
}
i && !(i instanceof Error) && (V(u), p("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, o, typeof i), V(null)), i instanceof Error && !(i.message in le) && (le[i.message] = !0, V(u), p("Failed %s type: %s", t, i.message), V(null));
}
}
}
var Ue = Array.isArray;
function q(e) {
return Ue(e);
}
function Ne(e) {
{
var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t;
}
}
function ze(e) {
try {
return ce(e), !1;
} catch {
return !0;
}
}
function ce(e) {
return "" + e;
}
function de(e) {
if (ze(e))
return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ne(e)), ce(e);
}
var ve = x.ReactCurrentOwner, qe = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, pe, ge;
function Be(e) {
if ($.call(e, "ref")) {
var r = Object.getOwnPropertyDescriptor(e, "ref").get;
if (r && r.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function Je(e) {
if ($.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function Ge(e, r) {
typeof e.ref == "string" && ve.current;
}
function Ke(e, r) {
{
var t = function() {
pe || (pe = !0, p("%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://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
}
function Xe(e, r) {
{
var t = function() {
ge || (ge = !0, p("%s: `ref` 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://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: t,
configurable: !0
});
}
}
var He = function(e, r, t, n, u, s, o) {
var i = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: b,
// Built-in properties that belong on the element
type: e,
key: r,
ref: t,
props: o,
// Record the component responsible for creating this element.
_owner: s
};
return i._store = {}, Object.defineProperty(i._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(i, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: n
}), Object.defineProperty(i, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: u
}), Object.freeze && (Object.freeze(i.props), Object.freeze(i)), i;
};
function Ze(e, r, t, n, u) {
{
var s, o = {}, i = null, g = null;
t !== void 0 && (de(t), i = "" + t), Je(r) && (de(r.key), i = "" + r.key), Be(r) && (g = r.ref, Ge(r, u));
for (s in r)
$.call(r, s) && !qe.hasOwnProperty(s) && (o[s] = r[s]);
if (e && e.defaultProps) {
var d = e.defaultProps;
for (s in d)
o[s] === void 0 && (o[s] = d[s]);
}
if (i || g) {
var v = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
i && Ke(o, v), g && Xe(o, v);
}
return He(e, i, g, u, n, ve.current, o);
}
}
var B = x.ReactCurrentOwner, he = x.ReactDebugCurrentFrame;
function k(e) {
if (e) {
var r = e._owner, t = M(e.type, e._source, r ? r.type : null);
he.setExtraStackFrame(t);
} else
he.setExtraStackFrame(null);
}
var J;
J = !1;
function G(e) {
return typeof e == "object" && e !== null && e.$$typeof === b;
}
function ye() {
{
if (B.current) {
var e = O(B.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function Qe(e) {
return "";
}
var Ee = {};
function er(e) {
{
var r = ye();
if (!r) {
var t = typeof e == "string" ? e : e.displayName || e.name;
t && (r = `
Check the top-level render call using <` + t + ">.");
}
return r;
}
}
function me(e, r) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var t = er(r);
if (Ee[t])
return;
Ee[t] = !0;
var n = "";
e && e._owner && e._owner !== B.current && (n = " It was passed a child from " + O(e._owner.type) + "."), k(e), p('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), k(null);
}
}
function _e(e, r) {
{
if (typeof e != "object")
return;
if (q(e))
for (var t = 0; t < e.length; t++) {
var n = e[t];
G(n) && me(n, r);
}
else if (G(e))
e._store && (e._store.validated = !0);
else if (e) {
var u = Se(e);
if (typeof u == "function" && u !== e.entries)
for (var s = u.call(e), o; !(o = s.next()).done; )
G(o.value) && me(o.value, r);
}
}
}
function rr(e) {
{
var r = e.type;
if (r == null || typeof r == "string")
return;
var t;
if (typeof r == "function")
t = r.propTypes;
else if (typeof r == "object" && (r.$$typeof === a || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
r.$$typeof === c))
t = r.propTypes;
else
return;
if (t) {
var n = O(r);
Ve(t, e.props, "prop", n, e);
} else if (r.PropTypes !== void 0 && !J) {
J = !0;
var u = O(r);
p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", u || "Unknown");
}
typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function tr(e) {
{
for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
var n = r[t];
if (n !== "children" && n !== "key") {
k(e), p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), k(null);
break;
}
}
e.ref !== null && (k(e), p("Invalid attribute `ref` supplied to `React.Fragment`."), k(null));
}
}
var Re = {};
function be(e, r, t, n, u, s) {
{
var o = De(e);
if (!o) {
var 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.");
var g = Qe();
g ? i += g : i += ye();
var d;
e === null ? d = "null" : q(e) ? d = "array" : e !== void 0 && e.$$typeof === b ? (d = "<" + (O(e.type) || "Unknown") + " />", i = " Did you accidentally export a JSX literal instead of a component?") : d = typeof e, p("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", d, i);
}
var v = Ze(e, r, t, u, s);
if (v == null)
return v;
if (o) {
var m = r.children;
if (m !== void 0)
if (n)
if (q(m)) {
for (var A = 0; A < m.length; A++)
_e(m[A], e);
Object.freeze && Object.freeze(m);
} else
p("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
_e(m, e);
}
if ($.call(r, "key")) {
var P = O(e), y = Object.keys(r).filter(function(sr) {
return sr !== "key";
}), K = y.length > 0 ? "{key: someKey, " + y.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Re[P + K]) {
var ur = y.length > 0 ? "{" + y.join(": ..., ") + ": ...}" : "{}";
p(`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} />`, K, P, ur, P), Re[P + K] = !0;
}
}
return e === w ? tr(v) : rr(v), v;
}
}
function nr(e, r, t) {
return be(e, r, t, !0);
}
function ar(e, r, t) {
return be(e, r, t, !1);
}
var ir = ar, or = nr;
W.Fragment = w, W.jsx = ir, W.jsxs = or;
}()), W;
}
process.env.NODE_ENV === "production" ? X.exports = cr() : X.exports = dr();
var vr = X.exports;
const gr = ({ children: F }) => {
const b = lr(null);
return fr(() => {
if (!b.current) return;
const h = Array.from(b.current.querySelectorAll(".neuro-block")), w = () => {
h.forEach((a) => {
const f = a.scrollHeight, l = a.querySelectorAll(".mini").length, c = f + l * 50;
a.hasAttribute("data-size-manual") || (c > 500 ? a.dataset.size = "full" : c > 300 ? a.dataset.size = "wide" : a.removeAttribute("data-size"));
});
}, R = (a, f) => a.dataset.size === "full" ? f : a.dataset.size === "wide" ? Math.min(2, f) : 1, j = () => {
let a = window.innerWidth <= 600 ? 1 : window.innerWidth <= 900 ? 2 : 3;
h.forEach((l) => l.style.gridColumn = "");
let f = 0;
for (let l = 0; l < h.length; l++) {
const c = R(h[l], a);
if (f + c > a) {
const E = a - f, T = h[l - 1];
T && (T.style.gridColumn = `span ${R(T, a) + E}`), f = 0;
}
f = (f + c) % a;
}
if (f) {
const l = a - f, c = h.at(-1);
c && (c.style.gridColumn = `span ${R(c, a) + l}`);
}
}, C = () => {
let a = window.innerWidth <= 600 ? 1 : window.innerWidth <= 900 ? 2 : 3, f = 0;
for (let E = 0; E < h.length; E++)
f = (f + R(h[E], a)) % a;
if (a === 1 || f === 0) return;
const l = a - f, c = h.at(-1);
c && (c.style.gridColumn = `span ${R(c, a) + l}`);
}, _ = () => {
h.forEach((a) => {
a.style.gridColumn = "", a.removeAttribute("data-force-row");
}), w(), C(), j();
};
return _(), window.addEventListener("resize", () => requestAnimationFrame(_)), () => window.removeEventListener("resize", () => requestAnimationFrame(_));
}, []), /* @__PURE__ */ vr.jsx("div", { className: "neuro-grid", ref: b, children: F });
};
export {
gr as NeuroGrid
};