flowscrollbar
Version:
A customizable React scrollbar component that supports both vertical and horizontal scrolling with drag functionality.
1 lines • 11.7 kB
JavaScript
module.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=5)}([function(t,e){t.exports=require("react")},function(t,e,n){var r=n(2),o=n(3);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[t.i,o,""]]);var c={insert:"head",singleton:!1};r(o,c);t.exports=o.locals||{}},function(t,e,n){"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},c=function(){var t={};return function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}t[e]=n}return t[e]}}(),i=[];function l(t){for(var e=-1,n=0;n<i.length;n++)if(i[n].identifier===t){e=n;break}return e}function a(t,e){for(var n={},r=[],o=0;o<t.length;o++){var c=t[o],a=e.base?c[0]+e.base:c[0],s=n[a]||0,u="".concat(a," ").concat(s);n[a]=s+1;var d=l(u),f={css:c[1],media:c[2],sourceMap:c[3]};-1!==d?(i[d].references++,i[d].updater(f)):i.push({identifier:u,updater:m(f,e),references:1}),r.push(u)}return r}function s(t){var e=document.createElement("style"),r=t.attributes||{};if(void 0===r.nonce){var o=n.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(t){e.setAttribute(t,r[t])})),"function"==typeof t.insert)t.insert(e);else{var i=c(t.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(e)}return e}var u,d=(u=[],function(t,e){return u[t]=e,u.filter(Boolean).join("\n")});function f(t,e,n,r){var o=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(t.styleSheet)t.styleSheet.cssText=d(e,o);else{var c=document.createTextNode(o),i=t.childNodes;i[e]&&t.removeChild(i[e]),i.length?t.insertBefore(c,i[e]):t.appendChild(c)}}function p(t,e,n){var r=n.css,o=n.media,c=n.sourceMap;if(o?t.setAttribute("media",o):t.removeAttribute("media"),c&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(c))))," */")),t.styleSheet)t.styleSheet.cssText=r;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(r))}}var h=null,b=0;function m(t,e){var n,r,o;if(e.singleton){var c=b++;n=h||(h=s(e)),r=f.bind(null,n,c,!1),o=f.bind(null,n,c,!0)}else n=s(e),r=p.bind(null,n,e),o=function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(n)};return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){(e=e||{}).singleton||"boolean"==typeof e.singleton||(e.singleton=o());var n=a(t=t||[],e);return function(t){if(t=t||[],"[object Array]"===Object.prototype.toString.call(t)){for(var r=0;r<n.length;r++){var o=l(n[r]);i[o].references--}for(var c=a(t,e),s=0;s<n.length;s++){var u=l(n[s]);0===i[u].references&&(i[u].updater(),i.splice(u,1))}n=c}}}},function(t,e,n){(e=n(4)(!1)).push([t.i,".scrollbar {\n border: 1px solid;\n position: relative;\n width: fit-content;\n height:fit-content;\n}\n.scrollbar-container {\n padding-right: 20px ;\n overflow: auto;\n scrollbar-width: none; /* Hides scrollbar in Firefox */\n -ms-overflow-style: none; /* Hides scrollbar in Internet Explorer 10+ */\n}\n.scrollbar::-webkit-scrollbar {\n display: none; /* Hides scrollbar in Chrome, Safari, and Edge */\n}\n\n\n\n\n.scrollbar-track-main-y {\n position: absolute;\n right: 0;\n bottom:0;\n}\n.scrollbar-track-main-y {\n visibility: visible;\n}\n.scrollbar-container:hover > .scrollbar-track-main-y {\n visibility: visible;\n}\n\n.scrollbar-track-y {\n height: 94%;\n top:3%;\n width: 10px;\n background: #dfdfdf;\n position: relative;\n right:5px;\n border-radius: 50px;\n}\n\n.scrollbar-track-ps-y {\n background: gray;\n width: 100%;\n position: absolute;\n border-radius: 30px;\n cursor: pointer;\n}\n\n\n\n\n.scrollbar-track-main-x {\n position: absolute;\n bottom:0;\n}\n.scrollbar-track-main-y {\n visibility: visible;\n}\n.scrollbar-container:hover > .scrollbar-track-main-x {\n visibility: visible;\n}\n\n.scrollbar-track-x {\n width: 94%;\n left:3%;\n height: 10px;\n background: #dfdfdf;\n position: relative;\n bottom:5px;\n border-radius: 50px;\n\n}\n\n.scrollbar-track-ps-x {\n background: gray;\n height: 100%;\n position: absolute;\n border-radius: 30px;\n cursor: pointer;\n}\n\n\n\n.hidden-draginfo-store {\n display:none;\n font-size: 0;\n color: transparent;\n}\n\n",""]),t.exports=e},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(i=r,l=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),a="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(l),"/*# ".concat(a," */")),c=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(t," */")}));return[n].concat(c).concat([o]).join("\n")}var i,l,a;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,r){"string"==typeof t&&(t=[[null,t,""]]);var o={};if(r)for(var c=0;c<this.length;c++){var i=this[c][0];null!=i&&(o[i]=!0)}for(var l=0;l<t.length;l++){var a=[].concat(t[l]);r&&o[a[0]]||(n&&(a[2]?a[2]="".concat(n," and ").concat(a[2]):a[2]=n),e.push(a))}},e}},function(t,e,n){"use strict";n.r(e);var r=n(0),o=n.n(r);n(1);function c(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function i(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?c(Object(n),!0).forEach((function(e){l(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function l(t,e,n){return(e=function(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}e.default=function(t){let{children:e,height:n=300,width:c=null,style:l={track:{},thumb:{}},onScrollYEnd:a=null,onScrollXEnd:s=null,beforeEndOffset:u=5,onScroll:d=null}=t;const f="scrollBar".concat(function(t){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let n="";for(let r=0;r<t;r++)n+=e.charAt(Math.floor(Math.random()*e.length));return n}(5)),[p,h]=Object(r.useState)(n/100),[b,m]=Object(r.useState)(c/100),[v,y]=Object(r.useState)(!1),[g,S]=Object(r.useState)(!1),[x,j]=Object(r.useState)(0),[O,w]=Object(r.useState)(0),[E,k]=Object(r.useState)(0),[M,H]=Object(r.useState)(0),N="scrollbar-track-ps-y",T="scrollbar-track-ps-x",P=t=>{let{isStart:e=!1}=t;const n=document.getElementById("dragInfo");n&&(n.innerText=e?"dragStart":"dragStop")},W=t=>{var e,n;t.preventDefault(),P({isStart:!0}),w(t.clientY),j(t.clientX);const r=document.querySelectorAll("#".concat(f," .").concat(N))[0],o=document.querySelectorAll("#".concat(f," .").concat(T))[0];k(parseFloat((null==r||null===(e=r.style)||void 0===e?void 0:e.top)||"0")),H(parseFloat((null==o||null===(n=o.style)||void 0===n?void 0:n.left)||"0"))},I=t=>{if("dragStart"!==(document.getElementById("dragInfo").innerText||null))return;const e=t.clientY-O,n=t.clientX-x,r=document.getElementById(f);if(!r)return;const o=r.scrollHeight-r.clientHeight,c=r.scrollWidth-r.clientWidth,i=r.clientHeight,l=r.clientWidth,a=document.querySelectorAll("#".concat(f," .").concat(N))[0],s=document.querySelectorAll("#".concat(f," .").concat(T))[0];if(a){const t=Math.min(Math.max(E+e/i*100,0),100-p);a.style.top="".concat(t,"%");const n=t/100*o;r.scrollTop=n}if(s){const t=Math.min(Math.max(M+n/l*100,0),100-b)/100*c;r.scrollLeft=t}},A=()=>{P({isStart:!1})};return Object(r.useEffect)(()=>{setTimeout(()=>{(()=>{const t=document.getElementById(f);if(t){const e=t.scrollHeight-t.clientHeight,n=t.scrollWidth-t.clientWidth,r=t.scrollTop,o=t.scrollLeft,c=Math.round(r/e*100),i=Math.round(o/n*100),l=document.querySelectorAll("#".concat(f," .scrollbar-track-ps-y")),a=document.querySelectorAll("#".concat(f," .scrollbar-track-ps-x"));if(l&&l.length){const e=l[0].offsetHeight,n=Math.min(c,100-e/t.clientHeight*100);console.log(n),l[0].style.top="".concat(n,"%")}if(a&&a.length){const e=a[0].offsetWidth,n=Math.min(i,100-e/t.clientWidth*100);a[0].style.left="".concat(n,"%")}}})(),document.addEventListener("mouseup",A),document.addEventListener("mousemove",I);const t=document.getElementById(f);t&&t.addEventListener("scroll",t=>{const e=t.target,n=e.scrollHeight-e.clientHeight,r=e.scrollTop,o=Math.round(r/n*100),c=document.querySelectorAll("#".concat(f," .").concat(N));if(c&&c.length){const t=c[0].offsetHeight,n=Math.min(o,100-t/e.clientHeight*100);c[0].style.top="".concat(n,"%")}e.scrollTop+e.clientHeight>=e.scrollHeight-u&&v&&a&&"function"==typeof a&&a(t);const i=e.scrollWidth-e.clientWidth,l=e.scrollLeft,p=Math.round(l/i*100),h=document.querySelectorAll("#".concat(f," .").concat(T));if(h&&h.length){const t=h[0].offsetWidth,n=Math.min(p,100-t/e.clientWidth*100);h[0].style.left="".concat(n,"%")}e.scrollLeft+e.clientWidth>=e.scrollWidth-u&&g&&s&&"function"==typeof s&&s(t),d&&"function"==typeof d&&d(t)})},500)},[p,e,g,v]),Object(r.useEffect)(()=>{h(n/100),m(c/100),(()=>{const t=document.getElementById(f);y((null==t?void 0:t.scrollHeight)>(null==t?void 0:t.clientHeight)),S((null==t?void 0:t.scrollWidth)>(null==t?void 0:t.clientWidth))})()},[e]),o.a.createElement(o.a.Fragment,null,o.a.createElement("span",{className:"hidden-draginfo-store",id:"dragInfo"}),o.a.createElement("div",{className:"scrollbar"},o.a.createElement("div",{className:"scrollbar-container",style:{width:"".concat(c,"px"),height:"".concat(n,"px")},id:f},e,v&&o.a.createElement("div",{className:"scrollbar-track-main-y",style:{height:"".concat(n,"px")}},o.a.createElement("div",{className:"scrollbar-track-y",style:null!=l&&l.track?i({},l.track):{}},o.a.createElement("div",{className:N,onMouseDown:W,style:i({height:"".concat(p,"%")},null==l?void 0:l.thumb)}))),g&&o.a.createElement("div",{className:"scrollbar-track-main-x",style:{width:"".concat(c,"px")}},o.a.createElement("div",{className:"scrollbar-track-x"},o.a.createElement("div",{className:T,onMouseDown:W,style:{width:"".concat(b,"%")}}))))))}}]);