bj-web-components 0.2.33 → 0.2.35

package/dist/web/OverlayScrollbar/BOverlayScrollbar.js

@@ -1 +1,273 @@
-"use strict";const Y=require("react/jsx-runtime"),s=require("react");;/* empty css                        */const $=24,re=800,H={visible:!1,offset:0,length:0,cross:0};function se({containerRef:_,targetRef:j,selector:U,direction:S="vertical",size:E=4,gap:w=0,background:F,showOnHover:l=!0,showOnScroll:Z=!0,hoverSelector:A,horizontalInsetStart:p=0,horizontalInsetEnd:D=0,horizontalThumbLength:R,className:te=""}){const P=S==="vertical"||S==="both",V=S==="horizontal"||S==="both",m=s.useRef(null),f=s.useRef(null),y=s.useRef(null),L=s.useRef(!1),M=s.useRef(!1),[k,G]=s.useState(H),[B,J]=s.useState(H),[ne,v]=s.useState(!l);s.useEffect(()=>{l||v(!0)},[l]);const g=s.useCallback(()=>{const e=m.current,n=_.current;if(!e||!n)return;const{scrollTop:t,scrollHeight:o,clientHeight:c,scrollLeft:d,scrollWidth:u,clientWidth:i}=e,h=e.getBoundingClientRect(),r=n.getBoundingClientRect(),b=h.top-r.top,x=h.left-r.left;if(P){const C=o-c;if(C<=1)G(a=>a.visible?H:a);else{const a=Math.max(c/o*c,$);G({visible:!0,offset:b+t/C*(c-a),length:a,cross:x+i-E-w})}}if(V){const C=u-i,a=Math.max(i-p-D,0);if(C<=1||a<=0)J(W=>W.visible?H:W);else{const W=i/u*a,ee=Math.min(a,Math.max(R??W,$));J({visible:!0,offset:x+p+d/C*(a-ee),length:ee,cross:b+c-E-w})}}},[_,w,D,p,R,V,P,E]),q=s.useCallback(()=>{if(!l)return;const e=L.current||M.current||f.current;if(!Z&&!e){v(!1);return}v(!0),y.current&&clearTimeout(y.current),y.current=setTimeout(()=>{!f.current&&!L.current&&!M.current&&v(!1)},re)},[l,Z]),X=s.useCallback(()=>{g(),q()},[g,q]);s.useEffect(()=>{const e=_.current;if(!e)return;window.getComputedStyle(e).position==="static"&&(e.style.position="relative");let n,t=null;const o=()=>{const r=(j==null?void 0:j.current)??(U?e.querySelector(U):e.firstElementChild);if(!r||r===m.current)return;n==null||n(),m.current=r,r.addEventListener("scroll",X,{passive:!0});const b=new ResizeObserver(g);b.observe(r),r.firstElementChild&&b.observe(r.firstElementChild),n=()=>{r.removeEventListener("scroll",X),b.disconnect()},g()},c=()=>{L.current=!0,l&&v(!0)},d=()=>{L.current=!1,l&&!M.current&&!f.current&&v(!1)},u=()=>{t==null||t.removeEventListener("mouseenter",c),t==null||t.removeEventListener("mouseleave",d),t=null,L.current=!1},i=()=>{const r=A?e.querySelector(A):e;!r||r===t||(u(),t=r,t.addEventListener("mouseenter",c),t.addEventListener("mouseleave",d))};o(),i();const h=new MutationObserver(()=>{(!m.current||!e.contains(m.current))&&o(),t&&!e.contains(t)&&u(),t||i(),g()});return h.observe(e,{childList:!0,subtree:!0}),()=>{h.disconnect(),n==null||n(),u(),m.current=null,y.current&&clearTimeout(y.current)}},[_,A,X,U,l,g,j]);const T=s.useCallback(e=>{const n=m.current,t=f.current;if(!n||!t)return;const o=t.axis==="vertical",c=o?n.clientHeight:n.clientWidth,d=o?n.scrollHeight:n.scrollWidth,u=o?c:Math.max(c-p-D,0),i=c/d*u,h=Math.min(u,Math.max(o?i:R??i,$)),r=u-h;if(r<=0)return;const b=(o?e.clientY:e.clientX)-t.client,x=t.scroll+b*((d-c)/r);o?n.scrollTop=x:n.scrollLeft=x},[D,p,R]),N=s.useCallback(()=>{const e=!!f.current;f.current=null,document.body.style.userSelect="",document.removeEventListener("mousemove",T),document.removeEventListener("mouseup",N),e&&q()},[T,q]),K=e=>n=>{const t=m.current;t&&(n.preventDefault(),n.stopPropagation(),f.current={axis:e,client:e==="vertical"?n.clientY:n.clientX,scroll:e==="vertical"?t.scrollTop:t.scrollLeft},document.body.style.userSelect="none",document.addEventListener("mousemove",T),document.addEventListener("mouseup",N))};s.useEffect(()=>()=>{f.current=null,document.body.style.userSelect="",document.removeEventListener("mousemove",T),document.removeEventListener("mouseup",N)},[N,T]);const Q=["bj-overlay-scrollbar__thumb",ne&&"bj-overlay-scrollbar__thumb--active",te].filter(Boolean).join(" "),I=F?{"--bj-overlay-scrollbar-bg":F}:void 0,z=()=>{M.current=!0,l&&v(!0)},O=()=>{M.current=!1,l&&!L.current&&!f.current&&v(!1)};return Y.jsxs(Y.Fragment,{children:[P&&k.visible&&Y.jsx("div",{className:`${Q} bj-overlay-scrollbar__thumb--vertical`,onMouseDown:K("vertical"),onMouseEnter:z,onMouseLeave:O,style:{...I,top:k.offset,left:k.cross,height:k.length,width:E}}),V&&B.visible&&Y.jsx("div",{className:`${Q} bj-overlay-scrollbar__thumb--horizontal`,onMouseDown:K("horizontal"),onMouseEnter:z,onMouseLeave:O,style:{...I,left:B.offset,top:B.cross,width:B.length,height:E}})]})}module.exports=se;
+"use strict";
+
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var O = require("react/jsx-runtime"),
+  s = require("react");
+; /* empty css                        */
+var le = Object.defineProperty,
+  ue = Object.defineProperties,
+  ie = Object.getOwnPropertyDescriptors,
+  te = Object.getOwnPropertySymbols,
+  ae = Object.prototype.hasOwnProperty,
+  fe = Object.prototype.propertyIsEnumerable,
+  re = function re(c, n, o) {
+    return n in c ? le(c, n, {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: o
+    }) : c[n] = o;
+  },
+  ne = function ne(c, n) {
+    for (var o in n || (n = {})) ae.call(n, o) && re(c, o, n[o]);
+    if (te) {
+      var _iterator = _createForOfIteratorHelper(te(n)),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var o = _step.value;
+          fe.call(n, o) && re(c, o, n[o]);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+    return c;
+  },
+  se = function se(c, n) {
+    return ue(c, ie(n));
+  };
+var X = 24,
+  me = 800,
+  W = {
+    visible: !1,
+    offset: 0,
+    length: 0,
+    cross: 0
+  };
+function ve(_ref) {
+  var c = _ref.containerRef,
+    n = _ref.targetRef,
+    o = _ref.selector,
+    _ref$direction = _ref.direction,
+    S = _ref$direction === void 0 ? "vertical" : _ref$direction,
+    _ref$size = _ref.size,
+    j = _ref$size === void 0 ? 4 : _ref$size,
+    _ref$gap = _ref.gap,
+    Y = _ref$gap === void 0 ? 0 : _ref$gap,
+    $ = _ref.background,
+    _ref$showOnHover = _ref.showOnHover,
+    f = _ref$showOnHover === void 0 ? !0 : _ref$showOnHover,
+    _ref$showOnScroll = _ref.showOnScroll,
+    F = _ref$showOnScroll === void 0 ? !0 : _ref$showOnScroll,
+    H = _ref.hoverSelector,
+    _ref$horizontalInsetS = _ref.horizontalInsetStart,
+    P = _ref$horizontalInsetS === void 0 ? 0 : _ref$horizontalInsetS,
+    _ref$horizontalInsetE = _ref.horizontalInsetEnd,
+    D = _ref$horizontalInsetE === void 0 ? 0 : _ref$horizontalInsetE,
+    y = _ref.horizontalThumbLength,
+    _ref$className = _ref.className,
+    ce = _ref$className === void 0 ? "" : _ref$className;
+  var U = S === "vertical" || S === "both",
+    V = S === "horizontal" || S === "both",
+    h = s.useRef(null),
+    b = s.useRef(null),
+    T = s.useRef(null),
+    L = s.useRef(!1),
+    x = s.useRef(!1),
+    _s$useState = s.useState(W),
+    _s$useState2 = _slicedToArray(_s$useState, 2),
+    w = _s$useState2[0],
+    Z = _s$useState2[1],
+    _s$useState3 = s.useState(W),
+    _s$useState4 = _slicedToArray(_s$useState3, 2),
+    B = _s$useState4[0],
+    G = _s$useState4[1],
+    _s$useState5 = s.useState(!f),
+    _s$useState6 = _slicedToArray(_s$useState5, 2),
+    oe = _s$useState6[0],
+    _ = _s$useState6[1];
+  s.useEffect(function () {
+    f || _(!0);
+  }, [f]);
+  var M = s.useCallback(function () {
+      var e = h.current,
+        r = c.current;
+      if (!e || !r) return;
+      var t = e.scrollTop,
+        i = e.scrollHeight,
+        l = e.clientHeight,
+        g = e.scrollLeft,
+        m = e.scrollWidth,
+        v = e.clientWidth,
+        E = e.getBoundingClientRect(),
+        a = r.getBoundingClientRect(),
+        u = E.top - a.top,
+        p = E.left - a.left;
+      if (U) {
+        var R = i - l;
+        if (R <= 1) Z(function (d) {
+          return d.visible ? W : d;
+        });else {
+          var d = Math.max(l / i * l, X);
+          Z({
+            visible: !0,
+            offset: u + t / R * (l - d),
+            length: d,
+            cross: p + v - j - Y
+          });
+        }
+      }
+      if (V) {
+        var _R = m - v,
+          _d = Math.max(v - P - D, 0);
+        if (_R <= 1 || _d <= 0) G(function (N) {
+          return N.visible ? W : N;
+        });else {
+          var N = v / m * _d,
+            ee = Math.min(_d, Math.max(y != null ? y : N, X));
+          G({
+            visible: !0,
+            offset: p + P + g / _R * (_d - ee),
+            length: ee,
+            cross: u + l - j - Y
+          });
+        }
+      }
+    }, [c, Y, D, P, y, V, U, j]),
+    k = s.useCallback(function () {
+      if (!f) return;
+      var e = L.current || x.current || b.current;
+      if (!F && !e) {
+        _(!1);
+        return;
+      }
+      _(!0), T.current && clearTimeout(T.current), T.current = setTimeout(function () {
+        !b.current && !L.current && !x.current && _(!1);
+      }, me);
+    }, [f, F]),
+    A = s.useCallback(function () {
+      M(), k();
+    }, [M, k]);
+  s.useEffect(function () {
+    var e = c.current;
+    if (!e) return;
+    window.getComputedStyle(e).position === "static" && (e.style.position = "relative");
+    var r,
+      t = null;
+    var i = function i() {
+        var a;
+        var u = (a = n == null ? void 0 : n.current) != null ? a : o ? e.querySelector(o) : e.firstElementChild;
+        if (!u || u === h.current) return;
+        r == null || r(), h.current = u, u.addEventListener("scroll", A, {
+          passive: !0
+        });
+        var p = new ResizeObserver(M);
+        p.observe(u), u.firstElementChild && p.observe(u.firstElementChild), r = function r() {
+          u.removeEventListener("scroll", A), p.disconnect();
+        }, M();
+      },
+      l = function l() {
+        L.current = !0, f && _(!0);
+      },
+      g = function g() {
+        L.current = !1, f && !x.current && !b.current && _(!1);
+      },
+      m = function m() {
+        t == null || t.removeEventListener("mouseenter", l), t == null || t.removeEventListener("mouseleave", g), t = null, L.current = !1;
+      },
+      v = function v() {
+        var a = H ? e.querySelector(H) : e;
+        !a || a === t || (m(), t = a, t.addEventListener("mouseenter", l), t.addEventListener("mouseleave", g));
+      };
+    i(), v();
+    var E = new MutationObserver(function () {
+      (!h.current || !e.contains(h.current)) && i(), t && !e.contains(t) && m(), t || v(), M();
+    });
+    return E.observe(e, {
+      childList: !0,
+      subtree: !0
+    }), function () {
+      E.disconnect(), r == null || r(), m(), h.current = null, T.current && clearTimeout(T.current);
+    };
+  }, [c, H, A, o, f, M, n]);
+  var C = s.useCallback(function (e) {
+      var r = h.current,
+        t = b.current;
+      if (!r || !t) return;
+      var i = t.axis === "vertical",
+        l = i ? r.clientHeight : r.clientWidth,
+        g = i ? r.scrollHeight : r.scrollWidth,
+        m = i ? l : Math.max(l - P - D, 0),
+        v = l / g * m,
+        E = Math.min(m, Math.max(i ? v : y != null ? y : v, X)),
+        a = m - E;
+      if (a <= 0) return;
+      var u = (i ? e.clientY : e.clientX) - t.client,
+        p = t.scroll + u * ((g - l) / a);
+      i ? r.scrollTop = p : r.scrollLeft = p;
+    }, [D, P, y]),
+    q = s.useCallback(function () {
+      var e = !!b.current;
+      b.current = null, document.body.style.userSelect = "", document.removeEventListener("mousemove", C), document.removeEventListener("mouseup", q), e && k();
+    }, [C, k]),
+    J = function J(e) {
+      return function (r) {
+        var t = h.current;
+        t && (r.preventDefault(), r.stopPropagation(), b.current = {
+          axis: e,
+          client: e === "vertical" ? r.clientY : r.clientX,
+          scroll: e === "vertical" ? t.scrollTop : t.scrollLeft
+        }, document.body.style.userSelect = "none", document.addEventListener("mousemove", C), document.addEventListener("mouseup", q));
+      };
+    };
+  s.useEffect(function () {
+    return function () {
+      b.current = null, document.body.style.userSelect = "", document.removeEventListener("mousemove", C), document.removeEventListener("mouseup", q);
+    };
+  }, [q, C]);
+  var K = ["bj-overlay-scrollbar__thumb", oe && "bj-overlay-scrollbar__thumb--active", ce].filter(Boolean).join(" "),
+    Q = $ ? {
+      "--bj-overlay-scrollbar-bg": $
+    } : void 0,
+    I = function I() {
+      x.current = !0, f && _(!0);
+    },
+    z = function z() {
+      x.current = !1, f && !L.current && !b.current && _(!1);
+    };
+  return O.jsxs(O.Fragment, {
+    children: [U && w.visible && O.jsx("div", {
+      className: "".concat(K, " bj-overlay-scrollbar__thumb--vertical"),
+      onMouseDown: J("vertical"),
+      onMouseEnter: I,
+      onMouseLeave: z,
+      style: se(ne({}, Q), {
+        top: w.offset,
+        left: w.cross,
+        height: w.length,
+        width: j
+      })
+    }), V && B.visible && O.jsx("div", {
+      className: "".concat(K, " bj-overlay-scrollbar__thumb--horizontal"),
+      onMouseDown: J("horizontal"),
+      onMouseEnter: I,
+      onMouseLeave: z,
+      style: se(ne({}, Q), {
+        left: B.offset,
+        top: B.cross,
+        width: B.length,
+        height: j
+      })
+    })]
+  });
+}
+module.exports = ve;