react-perfect-scrollbar-z
Version:
React-Wrap PerfectScrollbar (Hooks)
2 lines (1 loc) • 8.81 kB
JavaScript
import{HtmlUtils as e,Hooks as t}from"@delpi/common";import r,{useState as n,useEffect as l,useRef as o}from"react";import c from"perfect-scrollbar";var i={"ps-scroll-y":"onScrollY","ps-scroll-x":"onScrollX","ps-scroll-up":"onScrollUp","ps-scroll-down":"onScrollDown","ps-scroll-left":"onScrollLeft","ps-scroll-right":"onScrollRight","ps-y-reach-start":"onYReachStart","ps-y-reach-end":"onYReachEnd","ps-x-reach-start":"onXReachStart","ps-x-reach-end":"onXReachEnd"},u=function(e){var t=e.height,r=e.maxHeight,n=e.width,l=e.maxWidth,o={};return(t||r)&&(o.height=t||void 0,o.maxHeight=r||void 0),n&&(o.width=n),l&&(o.maxWidth=l),o},s=function(e,t){if(t){var r={};return Object.keys(i).forEach((function(n){var l=e[i[n]];l&&(r[n]=function(e){return l(e)},t.addEventListener(n,r[n],!1))})),r}},a=function(e,t){Object.keys(e).forEach((function(r){return t.removeEventListener(r,e[r],!1)}))};function f(e){return void 0===e&&(e=[]),e.reduce((function(e,t){return e+t.clientHeight||0}),0)}var d=function(e,t,r){if(e.current&&r){var n=e.current.querySelector("table"),l=n?n.querySelector("tbody"):null;if(l)return Object.keys(t).forEach((function(e){l.style[e]=t[e]})),{table:n,el:null==n?void 0:n.querySelector("tbody")}}return{el:e.current}},p=function(t,r,n){var l=(n||e.findFirstLevel(t,r)).filter((function(t){return e.isVisible(t)}));return l.length>0?l[l.length-1]:{}},v=function(e,t){return e.length<=0?[]:Array.from(e).filter((function(e){return!t.includes(e)}))},h=function(){return h=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var l in t=arguments[r])Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l]);return e},h.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var g=":scope>.ps__rail-x",m=":scope>.ps__rail-y",y="".concat(g,", ").concat(g,">.ps__thumb-x, ").concat(m,", ").concat(m,">.ps__thumb-y"),w=function(e){var t=n(!1),r=t[0],c=t[1],i=function(e){var t=o(null),r=n(!1),c=r[0],i=r[1];return l((function(){try{"IntersectionObserver"in window&&(t.current=new IntersectionObserver((function(e){var t=e[0];return i(t.isIntersecting)})))}catch(e){i(!0)}}),[]),l((function(){if(t.current&&e.current)return t.current.observe(e.current),function(){var e;null===(e=t.current)||void 0===e||e.disconnect()}}),[e]),c}(e);return l((function(){i&&c(!0)}),[i]),r},S=function(e,t,r){void 0===t&&(t=!1);var c=n({}),i=c[0],u=c[1],s=n(!1),f=s[0],d=s[1],p=o(),v=o([]);l((function(){h()}),[i]);var h=function(){e&&(v.current=Array.from(e.querySelectorAll(y)),t&&v.current.forEach((function(e){e.addEventListener("click",(function(e){e.stopPropagation(),e.preventDefault()}))})))};return{psElement:v.current,scrollbar:p,setPsEvent:u,triggerScrollbar:h,handleFocus:function(){if(!f&&p.current){d(!0);var e=p.current.element.classList;if(e.contains("ps--active-y")||e.contains("ps--active-x"))return;p.current.update()}},handleClose:function(){p.current&&(a(i,p.current.element),u({}),p.current.destroy(),r&&(r.current=null))}}},b=function(n){var i,a=o(null),g=o(null),m=S(n.injectTable?a.current:g.current,n.triggerScrollClick,n.refScroll),y=m.psElement,b=m.scrollbar,_=m.triggerScrollbar,E=m.setPsEvent,T=m.handleFocus,C=m.handleClose,j=t.useWindowSize(),P=w(g),H=u(n),x=(null===(i=n.options)||void 0===i?void 0:i.wheelPropagation)||n.wheelStop;l((function(){if(P&&g.current){var e=d(g,H,n.injectTable),t=e.table,r=e.el,l=h({},n.options||{});return l.wheelPropagation=x,t&&(a.current=r,l.suppressScrollX=!0,t.classList.add("list-dk-scroll-view"),t.classList.add("perfect-table"),null==r||r.classList.add(n.always?"scroll-always":""),null==r||r.classList.add(n.wheelStop?"scroll-wheel-stop":"")),b.current=new c(r,l),E(s(n,r)),n.refScroll&&(n.refScroll.current=b.current),_(),setTimeout((function(){return b.current.update()}),320),function(){C()}}}),[P,g.current]),l((function(){k()}),[n.effectData,j]);var L=function(e){void 0===e&&(e=!0),b.current&&(e&&(b.current.element.scrollTop=0),b.current.update())},k=function(){if(b.current){var t=b.current.element,r=t,l=r.children,o=r.scrollTop,c=r.scrollHeight;if(r.clientHeight>=c||!l.length)L(!0);else{var i=v(l,y);if(i.length){var u=p(t,":not(.ps__rail-x):not(.ps__rail-y)",i);if(u){var s=3*(t.querySelectorAll("div.ps__rail-y").length-1);n.injectTable?setTimeout((function(){var r=p(t,"div.ps__rail-y").clientHeight,n=u.getBoundingClientRect().top-t.getBoundingClientRect().top;if(void 0!==r&&n+u.clientHeight<r){var l=(r<c?c:r)-f(i);if(l>0)return e.scrollTo(t,o-l,250),void setTimeout((function(){return L(!1)}),320)}else setTimeout((function(){return L(!1)}))}),s):setTimeout((function(){return L(!1)}),s)}}else L(!0)}}},N=h(h({},n.style),n.injectTable?{}:H),R=n.injectTable?void 0:e.joinClass("list-dk-scroll-view","perfect-list",n.className),O=n.injectTable?"scroll-content":e.joinClass("scroll-content",{"scroll-always":n.always},{"scroll-wheel-stop":x});return r.createElement("div",{id:n.id,className:R,style:N,onMouseEnter:T},r.createElement("div",{ref:g,className:O},n.children))};b.defaultProps={wheelStop:!0,style:{}};var _=function(i){var a,d=n("".concat(i.tagName).toLowerCase())[0],g=o(null),m=S(g.current,i.triggerScrollClick,i.refScroll),y=m.psElement,b=m.scrollbar,_=m.triggerScrollbar,E=m.setPsEvent,T=m.handleFocus,C=m.handleClose,j=t.useWindowSize(),P=w(g),H=u(i),x=(null===(a=i.options)||void 0===a?void 0:a.wheelPropagation)||i.wheelStop;l((function(){if(P&&g.current){var e=h({},i.options||{});return e.wheelPropagation=x,b.current=new c(g.current,e),E(s(i,g.current)),i.refScroll&&(i.refScroll.current=b.current),_(),setTimeout((function(){return b.current.update()}),320),function(){C()}}}),[P,g.current]),l((function(){k()}),[i.effectData,j]);var L=function(e){void 0===e&&(e=!0),b.current&&(e&&(b.current.element.scrollTop=0),b.current.update())},k=function(){if(b.current){var t=b.current.element,r=t,n=r.children,l=r.scrollTop,o=r.scrollHeight;if(r.clientHeight>=o||!n.length)L(!0);else{var c=v(n,y);if(c.length){var i=p(t,":not(.ps__rail-x):not(.ps__rail-y)",c);if(i){var u=3*(t.querySelectorAll("div.ps__rail-y").length-1);setTimeout((function(){var r=p(t,"div.ps__rail-y").clientHeight,n=i.getBoundingClientRect().top-t.getBoundingClientRect().top;if(void 0!==r&&n+i.clientHeight<r){var u=(r<o?o:r)-f(c);if(u>0)return e.scrollTo(t,l-u,250),void setTimeout((function(){return L(!1)}),320)}else setTimeout((function(){return L(!1)}))}),u)}}else L(!0)}}};return r.createElement(d,{ref:g,id:i.id,style:h(h({},i.style),H),className:e.joinClass("list-dk-scroll-view","perfect-list",{"scroll-always":i.always},{"scroll-wheel-stop":x}),onMouseEnter:T},i.children)};_.defaultProps={tagName:"ul",wheelStop:!0,style:{}};var E=function(n){var i,a=o(null),d=S(a.current,n.triggerScrollClick,n.refScroll),g=d.psElement,m=d.scrollbar,y=d.triggerScrollbar,b=d.setPsEvent,_=d.handleFocus,E=d.handleClose,T=t.useWindowSize(),C=w(a),j=u(n),P=(null===(i=n.options)||void 0===i?void 0:i.wheelPropagation)||n.wheelStop;l((function(){if(C&&a.current){var t=a.current.parentElement;t.classList.add(e.joinClass(["list-dk-scroll-view",n.className])),t.classList.add("perfect-table");var r=h({},n.options||{});return r.suppressScrollX=!0,r.wheelPropagation=P,m.current=new c(a.current,r),b(s(n,a.current)),n.refScroll&&(n.refScroll.current=m.current),y(),setTimeout((function(){return m.current.update()}),320),function(){E()}}}),[C,a.current]),l((function(){x()}),[n.effectData,T]);var H=function(e){void 0===e&&(e=!0),m.current&&(e&&(m.current.element.scrollTop=0),m.current.update())},x=function(){if(m.current){var t=m.current.element,r=t,n=r.children,l=r.scrollTop,o=r.scrollHeight;if(r.clientHeight>=o||!n.length)H(!0);else{var c=v(n,g);if(c.length){var i=p(t,":not(.ps__rail-x):not(.ps__rail-y)",c);if(i){var u=3*(t.querySelectorAll("div.ps__rail-y").length-1);setTimeout((function(){var r=p(t,"div.ps__rail-y").clientHeight,n=i.getBoundingClientRect().top-t.getBoundingClientRect().top;if(void 0!==r&&n+i.clientHeight<r){var u=(r<o?o:r)-f(c);if(u>0)return e.scrollTo(t,l-u,250),void setTimeout((function(){return H(!1)}),320)}else setTimeout((function(){return H(!1)}))}),u)}}else H(!0)}}};return r.createElement("tbody",{ref:a,id:n.id,style:h(h({},n.style),j),className:e.joinClass({"scroll-always":n.always},{"scroll-wheel-stop":P}),onMouseEnter:_},n.children)};E.defaultProps={wheelStop:!0,style:{}};var T=function(e){var t="".concat(e.tagName).toLowerCase();return"tbody"===t?r.createElement(E,h({},e)):["ul","dl","ol"].includes(t)?r.createElement(_,h({},e,{tagName:t})):r.createElement(b,h({},e))};T.defaultProps={tagName:"div",wheelStop:!0,style:{}};export{T as Scroll,b as Scrollbar,_ as ScrollbarDataList,E as ScrollbarTBody,u as appendDimension,s as appendEventListener,f as calculatorRealSize,a as clearEventListener,T as default,p as find1stLevel,d as findTargetTable,v as psHtmlListSize};