@s-yh/react-scroll-bar - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -1,1 +0,1 @@
-module.exports=function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=1)}([function(t,e){t.exports=require("react")},function(t,e,r){"use strict";r.r(e);var n=r(0),o=r.n(n);r(2);function i(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?i(Object(r),!0).forEach((function(e){c(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function c(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function u(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if(!(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(n=(a=c.next()).done)&&(r.push(a.value),!e||r.length!==e);n=!0);}catch(t){o=!0,i=t}finally{try{n||null==c.return||c.return()}finally{if(o)throw i}}return r}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}e.default=function(t){var e=t.height,r=t.width,i=t.style,c=t.children,s=0,l=!1,f=Object(n.useRef)(null),d=Object(n.useRef)(null),p=Object(n.useRef)(null),b=Object(n.useRef)(null),h=r.includes("%")?"100%":r,v=u(Object(n.useState)(0),2),m=v[0],g=v[1],y=u(Object(n.useState)(0),2),j=y[0],O=y[1];function w(t){if(!1!==l){var e=s;if(e){var r=100*(-1*(p.current.getBoundingClientRect().top-t.clientY)-(b.current.offsetHeight-e))/p.current.offsetHeight;d.current.scrollTop=r*d.current.scrollHeight/100}}}function x(t){l=!1,s=0,document.removeEventListener("mousemove",w),document.onselectstart=null}return Object(n.useEffect)((function(){var t;t=100*d.current.clientHeight/f.current.scrollHeight,g(t=t>100?100:t)})),o.a.createElement("div",{className:"scrollbar",style:a({height:e,width:r},i)},o.a.createElement("div",{className:"scrollbar-content",ref:d,style:{width:"calc(".concat(h," + ").concat(function(){var t=document.createElement("div");t.style.width="100px",t.style.visibility="hidden",t.style.position="absolute",t.style.top="-9999px",document.body.appendChild(t);var e=t.offsetWidth;t.style.overflow="scroll";var r=document.createElement("div");r.style.width="100%",t.appendChild(r);var n=r.offsetWidth;return t.parentNode.removeChild(t),e-n}(),"px)")},onScroll:function(){O(100*d.current.scrollTop/d.current.clientHeight)}},o.a.createElement("div",{ref:f},c)),m<100&&o.a.createElement("div",{className:"scrollbar-bar",ref:p,onClick:function(t){var e=100*(Math.abs(t.target.getBoundingClientRect().top-t.clientY)-b.current.offsetHeight/2)/d.current.offsetHeight;d.current.scrollTop=e*d.current.scrollHeight/100}},o.a.createElement("div",{className:"scrollbar-thumb",ref:b,style:{height:m+"%",transform:"translateY("+j+"%)"},onMouseDown:function(t){!function(t){t.nativeEvent.stopImmediatePropagation(),t.stopPropagation(),l=!0,document.addEventListener("mousemove",w),document.addEventListener("mouseup",x),document.onselectstart=null}(t),s=t.currentTarget.offsetHeight-(t.clientY-t.currentTarget.getBoundingClientRect().top)}})))}},function(t,e,r){var n=r(3);"string"==typeof n&&(n=[[t.i,n,""]]);var o={insert:"head",singleton:!1};r(5)(n,o);n.locals&&(t.exports=n.locals)},function(t,e,r){(t.exports=r(4)(!1)).push([t.i,".scrollbar {   \r\n    position: relative;\r\n    overflow: hidden;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n.scrollbar-content {\r\n    overflow: auto;\r\n    height: 100%;\r\n}\r\n.scrollbar-bar {\r\n    position: absolute;\r\n    right: 0;\r\n    bottom: 0;\r\n    z-index: 1;\r\n    opacity: 0;\r\n    width: 6px;\r\n    height: 100%;\r\n    border-radius: 4px;\r\n    background-color: rgba(0, 0, 0, .1);\r\n    transition: opacity 120ms ease-out;\r\n}\r\n.scrollbar-thumb {\r\n    position: relative;\r\n    display: block;\r\n    width: 100%;\r\n    height: 0;\r\n    border-radius: inherit;\r\n    background-color: rgba(135, 141, 153, .3);\r\n    transition: background-color .3s, transform .15s;\r\n    cursor: pointer;\r\n}\r\n.scrollbar:hover .scrollbar-bar {\r\n    opacity: 1;\r\n    transition: opacity 340ms ease-out;\r\n}",""])},function(t,e,r){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var r=function(t,e){var r=t[1]||"",n=t[3];if(!n)return r;if(e&&"function"==typeof btoa){var o=(a=n,c=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),u="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),"/*# ".concat(u," */")),i=n.sources.map((function(t){return"/*# sourceURL=".concat(n.sourceRoot).concat(t," */")}));return[r].concat(i).concat([o]).join("\n")}var a,c,u;return[r].join("\n")}(e,t);return e[2]?"@media ".concat(e[2],"{").concat(r,"}"):r})).join("")},e.i=function(t,r){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},o=0;o<this.length;o++){var i=this[o][0];null!=i&&(n[i]=!0)}for(var a=0;a<t.length;a++){var c=t[a];null!=c[0]&&n[c[0]]||(r&&!c[2]?c[2]=r:r&&(c[2]="(".concat(c[2],") and (").concat(r,")")),e.push(c))}},e}},function(t,e,r){"use strict";var n,o={},i=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},a=function(){var t={};return function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}t[e]=r}return t[e]}}();function c(t,e){for(var r=[],n={},o=0;o<t.length;o++){var i=t[o],a=e.base?i[0]+e.base:i[0],c={css:i[1],media:i[2],sourceMap:i[3]};n[a]?n[a].parts.push(c):r.push(n[a]={id:a,parts:[c]})}return r}function u(t,e){for(var r=0;r<t.length;r++){var n=t[r],i=o[n.id],a=0;if(i){for(i.refs++;a<i.parts.length;a++)i.parts[a](n.parts[a]);for(;a<n.parts.length;a++)i.parts.push(v(n.parts[a],e))}else{for(var c=[];a<n.parts.length;a++)c.push(v(n.parts[a],e));o[n.id]={id:n.id,refs:1,parts:c}}}}function s(t){var e=document.createElement("style");if(void 0===t.attributes.nonce){var n=r.nc;n&&(t.attributes.nonce=n)}if(Object.keys(t.attributes).forEach((function(r){e.setAttribute(r,t.attributes[r])})),"function"==typeof t.insert)t.insert(e);else{var o=a(t.insert||"head");if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(e)}return e}var l,f=(l=[],function(t,e){return l[t]=e,l.filter(Boolean).join("\n")});function d(t,e,r,n){var o=r?"":n.css;if(t.styleSheet)t.styleSheet.cssText=f(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}function p(t,e,r){var n=r.css,o=r.media,i=r.sourceMap;if(o&&t.setAttribute("media",o),i&&btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var b=null,h=0;function v(t,e){var r,n,o;if(e.singleton){var i=h++;r=b||(b=s(e)),n=d.bind(null,r,i,!1),o=d.bind(null,r,i,!0)}else r=s(e),n=p.bind(null,r,e),o=function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(r)};return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else o()}}t.exports=function(t,e){(e=e||{}).attributes="object"==typeof e.attributes?e.attributes:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=i());var r=c(t,e);return u(r,e),function(t){for(var n=[],i=0;i<r.length;i++){var a=r[i],s=o[a.id];s&&(s.refs--,n.push(s))}t&&u(c(t,e),e);for(var l=0;l<n.length;l++){var f=n[l];if(0===f.refs){for(var d=0;d<f.parts.length;d++)f.parts[d]();delete o[f.id]}}}}}]);
+module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=require("react")},function(e,t,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=n(0);n(2);var a=o(n(0));t.default=function(e){var t=e.height,n=e.width,o=e.style,s=e.children,c=0,u=!1,l=i.useRef(null),f=i.useRef(null),d=i.useRef(null),p=i.useRef(null),h=n.includes("%")?"100%":n,v=i.useState(0),b=v[0],m=v[1],g=i.useState(0),y=g[0],w=g[1];function x(e){if(!1!==u){var t=c;if(t){var n=100*(-1*(d.current.getBoundingClientRect().top-e.clientY)-(p.current.offsetHeight-t))/d.current.offsetHeight;f.current.scrollTop=n*f.current.scrollHeight/100}}}function j(e){u=!1,c=0,document.removeEventListener("mousemove",x),document.onselectstart=null}return i.useEffect((function(){var e;e=100*f.current.clientHeight/l.current.scrollHeight,m(e=e>100?100:e)})),a.default.createElement("div",{className:"scrollbar",style:r({height:t,width:n},o)},a.default.createElement("div",{className:"scrollbar-content",ref:f,style:{width:"calc("+h+" + "+function(){var e=document.createElement("div");e.style.width="100px",e.style.visibility="hidden",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var n=document.createElement("div");n.style.width="100%",e.appendChild(n);var r=n.offsetWidth;return e.parentNode.removeChild(e),t-r}()+"px)"},onScroll:function(){w(100*f.current.scrollTop/f.current.clientHeight)}},a.default.createElement("div",{ref:l},s)),b<100&&a.default.createElement("div",{className:"scrollbar-bar",ref:d,onClick:function(e){var t=100*(Math.abs(e.target.getBoundingClientRect().top-e.clientY)-p.current.offsetHeight/2)/f.current.offsetHeight;f.current.scrollTop=t*f.current.scrollHeight/100}},a.default.createElement("div",{className:"scrollbar-thumb",ref:p,style:{height:b+"%",transform:"translateY("+y+"%)"},onMouseDown:function(e){!function(e){e.nativeEvent.stopImmediatePropagation(),e.stopPropagation(),u=!0,document.addEventListener("mousemove",x),document.addEventListener("mouseup",j),document.onselectstart=null}(e),c=e.currentTarget.offsetHeight-(e.clientY-e.currentTarget.getBoundingClientRect().top)}})))}},function(e,t,n){var r=n(3);"string"==typeof r&&(r=[[e.i,r,""]]);var o={insert:"head",singleton:!1};n(5)(r,o);r.locals&&(e.exports=r.locals)},function(e,t,n){(e.exports=n(4)(!1)).push([e.i,".scrollbar {   \r\n    position: relative;\r\n    overflow: hidden;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n.scrollbar-content {\r\n    overflow: auto;\r\n    height: 100%;\r\n}\r\n.scrollbar-bar {\r\n    position: absolute;\r\n    right: 0;\r\n    bottom: 0;\r\n    z-index: 1;\r\n    opacity: 0;\r\n    width: 6px;\r\n    height: 100%;\r\n    border-radius: 4px;\r\n    background-color: rgba(0, 0, 0, .1);\r\n    transition: opacity 120ms ease-out;\r\n}\r\n.scrollbar-thumb {\r\n    position: relative;\r\n    display: block;\r\n    width: 100%;\r\n    height: 0;\r\n    border-radius: inherit;\r\n    background-color: rgba(135, 141, 153, .3);\r\n    transition: background-color .3s, transform .15s;\r\n    cursor: pointer;\r\n}\r\n.scrollbar:hover .scrollbar-bar {\r\n    opacity: 1;\r\n    transition: opacity 340ms ease-out;\r\n}",""])},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(a=r,s=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),i=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot).concat(e," */")}));return[n].concat(i).concat([o]).join("\n")}var a,s,c;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2],"{").concat(n,"}"):n})).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];null!=i&&(r[i]=!0)}for(var a=0;a<e.length;a++){var s=e[a];null!=s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="(".concat(s[2],") and (").concat(n,")")),t.push(s))}},t}},function(e,t,n){"use strict";var r,o={},i=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}();function s(e,t){for(var n=[],r={},o=0;o<e.length;o++){var i=e[o],a=t.base?i[0]+t.base:i[0],s={css:i[1],media:i[2],sourceMap:i[3]};r[a]?r[a].parts.push(s):n.push(r[a]={id:a,parts:[s]})}return n}function c(e,t){for(var n=0;n<e.length;n++){var r=e[n],i=o[r.id],a=0;if(i){for(i.refs++;a<i.parts.length;a++)i.parts[a](r.parts[a]);for(;a<r.parts.length;a++)i.parts.push(b(r.parts[a],t))}else{for(var s=[];a<r.parts.length;a++)s.push(b(r.parts[a],t));o[r.id]={id:r.id,refs:1,parts:s}}}}function u(e){var t=document.createElement("style");if(void 0===e.attributes.nonce){var r=n.nc;r&&(e.attributes.nonce=r)}if(Object.keys(e.attributes).forEach((function(n){t.setAttribute(n,e.attributes[n])})),"function"==typeof e.insert)e.insert(t);else{var o=a(e.insert||"head");if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}return t}var l,f=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function d(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=f(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function p(e,t,n){var r=n.css,o=n.media,i=n.sourceMap;if(o&&e.setAttribute("media",o),i&&btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var h=null,v=0;function b(e,t){var n,r,o;if(t.singleton){var i=v++;n=h||(h=u(t)),r=d.bind(null,n,i,!1),o=d.bind(null,n,i,!0)}else n=u(t),r=p.bind(null,n,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).attributes="object"==typeof t.attributes?t.attributes:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=i());var n=s(e,t);return c(n,t),function(e){for(var r=[],i=0;i<n.length;i++){var a=n[i],u=o[a.id];u&&(u.refs--,r.push(u))}e&&c(s(e,t),t);for(var l=0;l<r.length;l++){var f=r[l];if(0===f.refs){for(var d=0;d<f.parts.length;d++)f.parts[d]();delete o[f.id]}}}}}]);

package.json

 {
   "name": "@s-yh/react-scroll-bar",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A scrollbar for react",
@@ -24,2 +24,4 @@ "main": "/dist/index.js",
     "@babel/preset-react": "^7.7.4",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
     "babel-loader": "^8.0.6",
@@ -31,5 +33,8 @@ "clean-webpack-plugin": "^3.0.0",
     "style-loader": "^1.0.1",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.7.2",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
-  }
+  },
+  "dependencies": {}
 }

Readme.md

@@ -27,2 +27,4 @@ # @s-yh/react-scroll-bar
     * Work in progress
+* 1.0.2
+    * Support the typescript
 
@@ -29,0 +31,0 @@ ## Authors

New alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Number of package files

4

increased by33.33%

Lines of code

9

increased byInfinity%

Number of lines in readme file

34

increased by6.25%

Worsened metrics

Total package byte prevSize

9722

decreased by-4.84%

Dev dependency count

15

increased by36.36%

No dependency changes