react-custom-scroll - npm Package Compare versions

Comparing version 4.3.0 to 4.4.0

example/firstComp/firstComp.js

@@ -74,3 +74,3 @@ import React, { Component, Fragment } from 'react'
             <div className="panel-header">
-              <label className="panel-title">Cool Scrollbar !</label>
+              <label className="panel-title">Cool Scrollbar!</label>
             </div>
@@ -89,3 +89,3 @@ <CustomScroll allowOuterScroll={true}>
             <div className="panel-header">
-              <label className="panel-title">Who designed this ???</label>
+              <label className="panel-title">Who designed this???</label>
             </div>
@@ -92,0 +92,0 @@ <CustomScroll allowOuterScroll={true}>

package.json

 {
   "name": "react-custom-scroll",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "An easily designable, cross browser (!!), custom scroll with ReactJS Animations and scroll rate **exactly** like native scroll",
@@ -8,3 +8,3 @@ "main": "index",
     "test": "karma start --single-run",
-    "sassex": "node-sass example/main.scss | postcss --use autoprefixer -b 'last 2 versions' > example/styles.css",
+    "sassex": "sass example/main.scss example/styles.css",
     "lint": "eslint ./src && eslint ./example/firstComp",
@@ -28,16 +28,15 @@ "example-sass": "npm run sassex",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.8.3",
     "@babel/runtime": "^7.8.4",
     "@types/react-dom": "^16.9.5",
-    "autoprefixer": "^9.7.4",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
-    "css-loader": "^5.2.4",
+    "css-loader": "^6.5.1",
     "eslint": "^6.8.0",
     "eslint-plugin-lodash": "^6.0.0",
-    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react": "^7.28.0",
     "jasmine": "^3.5.0",
     "jasmine-core": "^3.5.0",
-    "karma": "^6.2.3",
+    "karma": "^6.3.11",
     "karma-chrome-launcher": "^3.1.0",
@@ -50,4 +49,2 @@ "karma-firefox-launcher": "^2.1.0",
     "mini-css-extract-plugin": "^1.6.0",
-    "node-sass": "^4.13.1",
-    "postcss-cli": "^7.1.0",
     "prettier": "^2.3.0",
@@ -57,2 +54,3 @@ "prop-types": "^15.7.2",
     "react-dom": "^16.12.0",
+    "sass": "^1.49.0",
     "sass-loader": "^11.1.1",
@@ -78,3 +76,6 @@ "style-loader": "^1.3.0",
   ],
-  "dependencies": {}
+  "dependencies": {},
+  "resolutions": {
+    "follow-redirects": "^1.14.7"
+  }
 }

README.md

@@ -27,4 +27,4 @@ [![NPM version][npm-image]][npm-url]
 **From unpkg cdn:**      
-* [Js file](https://unpkg.com/react-custom-scroll@4.3.0/dist/reactCustomScroll)
-* [css file](https://unpkg.com/react-custom-scroll@4.3.0/dist/customScroll.css) 
+* [Js file](https://unpkg.com/react-custom-scroll@4.4.0/dist/reactCustomScroll)
+* [css file](https://unpkg.com/react-custom-scroll@4.4.0/dist/customScroll.css)
 
@@ -31,0 +31,0 @@ Wrap your content with the custom scroll component

src/test/customScroll.spec.js

@@ -8,3 +8,3 @@ import React from 'react'
 describe('custom scroll', function () {
-  let customScrollContainer, visibleHeight, totalScrollHeight
+  let customScrollContainer, visibleHeight, totalScrollHeight, customScrollInst
 
@@ -18,3 +18,3 @@ beforeEach(function () {
     visibleHeight = 100
-    this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
+    customScrollInst = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
   })
@@ -77,4 +77,5 @@
       describe('when native scrollbar exists', function () {
+        let nativeScrollWidth
         beforeEach(function () {
-          this.nativeScrollWidth = 15
+          nativeScrollWidth = 15
           const innerContainer = {
@@ -85,13 +86,13 @@ scrollTop: 0,
           }
-          spyOn(this.customScroll, 'getScrolledElement').and.returnValue(innerContainer)
+          spyOn(customScrollInst, 'getScrolledElement').and.returnValue(innerContainer)
 
           innerContainer.clientWidth = 50
-          innerContainer.offsetWidth = innerContainer.clientWidth + this.nativeScrollWidth
-          this.customScroll.forceUpdate()
+          innerContainer.offsetWidth = innerContainer.clientWidth + nativeScrollWidth
+          customScrollInst.forceUpdate()
         })
 
         it('should position the inner container to the right with minus the size of the scrollbar', function () {
-          const innerContainerStyle = this.customScroll.innerContainerRef.current.style
+          const innerContainerStyle = customScrollInst.innerContainerRef.current.style
 
-          expect(innerContainerStyle.marginRight).toEqual(`${-1 * this.nativeScrollWidth}px`)
+          expect(innerContainerStyle.marginRight).toEqual(`${-1 * nativeScrollWidth}px`)
         })
@@ -107,11 +108,11 @@ })
           }
-          spyOn(this.customScroll, 'getScrolledElement').and.returnValue(innerContainer)
+          spyOn(customScrollInst, 'getScrolledElement').and.returnValue(innerContainer)
           innerContainer.clientWidth = 50
           innerContainer.offsetWidth = innerContainer.clientWidth
 
-          this.customScroll.forceUpdate()
+          customScrollInst.forceUpdate()
         })
 
         it('should position the inner container to the right with minus 20 pixels', function () {
-          const innerContainerStyle = this.customScroll.innerContainerRef.current.style
+          const innerContainerStyle = customScrollInst.innerContainerRef.current.style
 
@@ -125,4 +126,4 @@ expect(innerContainerStyle.marginRight).toEqual('-20px')
       it('should update scroll handle position', function () {
-        const initialHandlePos = this.customScroll.getScrollHandleStyle().top
-        const contentContainerNode = this.customScroll.innerContainerRef.current
+        const initialHandlePos = customScrollInst.getScrollHandleStyle().top
+        const contentContainerNode = customScrollInst.innerContainerRef.current
 
@@ -132,3 +133,3 @@ contentContainerNode.scrollTop = totalScrollHeight / 4
 
-        const newHandlePos = this.customScroll.getScrollHandleStyle().top
+        const newHandlePos = customScrollInst.getScrollHandleStyle().top
 
@@ -140,3 +141,3 @@ expect(newHandlePos).toEqual(initialHandlePos + visibleHeight / 4)
         const propsOnScroll = jasmine.createSpy('onScroll')
-        this.customScroll = renderCustomScroll(
+        customScrollInst = renderCustomScroll(
           customScrollContainer,
@@ -149,4 +150,4 @@ {
         )
-        this.customScroll.forceUpdate()
-        const contentContainerNode = this.customScroll.innerContainerRef.current
+        customScrollInst.forceUpdate()
+        const contentContainerNode = customScrollInst.innerContainerRef.current
 
@@ -171,3 +172,3 @@ TestUtils.Simulate.scroll(contentContainerNode)
       it('should set the size of the handle relative to the visible area, in the same ratio as the visible area to the content size', function () {
-        const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
+        const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.customScrollHandle)
         const handleHeight = parseInt(scrollHandle.style.height, 10)
@@ -183,3 +184,3 @@
           visibleHeight = 200
-          this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
+          customScrollInst = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
         })
@@ -189,3 +190,3 @@
           const defaultMinHeight = 38
-          const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
+          const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.customScrollHandle)
           const handleHeight = parseInt(scrollHandle.style.height, 10)
@@ -198,3 +199,3 @@
         it('should set the handle size to minimum height from props', function () {
-          this.customScroll = renderCustomScroll(
+          customScrollInst = renderCustomScroll(
             customScrollContainer,
@@ -207,3 +208,3 @@ {
           )
-          const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
+          const scrollHandle = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.customScrollHandle)
           const handleHeight = parseInt(scrollHandle.style.height, 10)
@@ -222,3 +223,3 @@
       visibleHeight = 100
-      this.customScroll = renderCustomScroll(
+      customScrollInst = renderCustomScroll(
         customScrollContainer,
@@ -234,3 +235,3 @@ {
     it('should not scroll', function () {
-      const contentContainerNode = this.customScroll.innerContainerRef.current
+      const contentContainerNode = customScrollInst.innerContainerRef.current
 
@@ -247,3 +248,3 @@ contentContainerNode.scrollTop = totalScrollHeight / 4
       beforeEach(function () {
-        this.customScroll = renderCustomScroll(
+        customScrollInst = renderCustomScroll(
           customScrollContainer,
@@ -259,5 +260,5 @@ {
       it('should set value passed as heightRelativeToParent on the root element, and 100% on other containers', function () {
-        const rootStyle = reactDOM.findDOMNode(this.customScroll).style
-        const innerContainerStyle = this.customScroll.innerContainerRef.current.style
-        const contentWrapperStyle = this.customScroll.contentWrapperRef.current.style
+        const rootStyle = reactDOM.findDOMNode(customScrollInst).style
+        const innerContainerStyle = customScrollInst.innerContainerRef.current.style
+        const contentWrapperStyle = customScrollInst.contentWrapperRef.current.style
 
@@ -272,9 +273,9 @@ expect(rootStyle.height).toEqual('70%')
       beforeEach(function () {
-        this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
+        customScrollInst = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
       })
 
       it('should set value passed as heightRelativeToParent on the root element, and 100% on other containers', function () {
-        const rootStyle = reactDOM.findDOMNode(this.customScroll).style
-        const innerContainerStyle = this.customScroll.innerContainerRef.current.style
-        const contentWrapperStyle = this.customScroll.contentWrapperRef.current.style
+        const rootStyle = reactDOM.findDOMNode(customScrollInst).style
+        const innerContainerStyle = customScrollInst.innerContainerRef.current.style
+        const contentWrapperStyle = customScrollInst.contentWrapperRef.current.style
 
@@ -290,3 +291,3 @@ expect(rootStyle.height).toBeFalsy()
     beforeEach(function () {
-      this.customScroll = renderCustomScroll(
+      customScrollInst = renderCustomScroll(
         customScrollContainer,
@@ -302,5 +303,5 @@ {
     it('should set value passed as flex on the root element, and 100% on other containers', function () {
-      const rootStyle = reactDOM.findDOMNode(this.customScroll).style
-      const innerContainerStyle = this.customScroll.innerContainerRef.current.style
-      const contentWrapperStyle = this.customScroll.contentWrapperRef.current.style
+      const rootStyle = reactDOM.findDOMNode(customScrollInst).style
+      const innerContainerStyle = customScrollInst.innerContainerRef.current.style
+      const contentWrapperStyle = customScrollInst.contentWrapperRef.current.style
 
@@ -390,3 +391,3 @@ expect(rootStyle.flexGrow).toEqual('2')
     it('should replace the default class', function () {
-      this.customScroll = renderCustomScroll(
+      customScrollInst = renderCustomScroll(
         customScrollContainer,
@@ -401,7 +402,7 @@ {
       const scrollHandleWithDefaultClass = TestUtils.scryRenderedDOMComponentsWithClass(
-        this.customScroll,
+        customScrollInst,
         styles.innerHandle
       )
       const scrollHandleWithCustomClass = TestUtils.findRenderedDOMComponentWithClass(
-        this.customScroll,
+        customScrollInst,
         'some-custom-class'
@@ -416,9 +417,10 @@ )
   describe('on click events', function () {
+    let initialHandlePos, innerContainer
     beforeEach(function () {
-      this.initialHandlePos = this.customScroll.getScrollHandleStyle().top
-      this.outerContainer = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.outerContainer)
-      this.scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
+      initialHandlePos = customScrollInst.getScrollHandleStyle().top
+      this.outerContainer = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.outerContainer)
+      this.scrollHandle = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.customScrollHandle)
       this.scrollHandleLayout = this.scrollHandle.getBoundingClientRect()
-      this.innerContainer = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.innerContainer)
-      this.initialScrollPos = this.innerContainer.scrollTop
+      innerContainer = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.innerContainer)
+      this.initialScrollPos = innerContainer.scrollTop
     })
@@ -437,4 +439,4 @@
 
-      expect(this.customScroll.getScrollHandleStyle().top).toEqual(this.initialHandlePos)
-      expect(this.innerContainer.scrollTop).toEqual(this.initialScrollPos)
+      expect(customScrollInst.getScrollHandleStyle().top).toEqual(initialHandlePos)
+      expect(innerContainer.scrollTop).toEqual(this.initialScrollPos)
     })
@@ -454,4 +456,4 @@
 
-      expect(this.customScroll.getScrollHandleStyle().top).toEqual(this.initialHandlePos)
-      expect(this.innerContainer.scrollTop).toEqual(this.initialScrollPos)
+      expect(customScrollInst.getScrollHandleStyle().top).toEqual(initialHandlePos)
+      expect(innerContainer.scrollTop).toEqual(this.initialScrollPos)
     })
@@ -462,3 +464,3 @@
       const visibleHeight = contentHeight + 100
-      this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, contentHeight)
+      customScrollInst = renderCustomScroll(customScrollContainer, {}, visibleHeight, contentHeight)
 
@@ -476,4 +478,4 @@ const yOnHandle = this.scrollHandleLayout.top + this.scrollHandleLayout.height / 2
 
-      expect(this.customScroll.getScrollHandleStyle().top).toEqual(this.initialHandlePos)
-      expect(this.innerContainer.scrollTop).toEqual(this.initialScrollPos)
+      expect(customScrollInst.getScrollHandleStyle().top).toEqual(initialHandlePos)
+      expect(innerContainer.scrollTop).toEqual(this.initialScrollPos)
     })
@@ -494,6 +496,4 @@
 
-        expect(this.customScroll.getScrollHandleStyle().top).toEqual(
-          this.initialHandlePos + this.scrollHandleLayout.height
-        )
-        expect(this.innerContainer.scrollTop).toBeGreaterThan(this.initialScrollPos)
+        expect(customScrollInst.getScrollHandleStyle().top).toEqual(initialHandlePos + this.scrollHandleLayout.height)
+        expect(innerContainer.scrollTop).toBeGreaterThan(this.initialScrollPos)
       })
@@ -512,6 +512,6 @@
         TestUtils.Simulate.click(this.outerContainer, clickPositionBelowHandle)
-        const newHandlePosition = this.customScroll.getScrollHandleStyle().top
-        const newScrollPos = this.innerContainer.scrollTop
+        const newHandlePosition = customScrollInst.getScrollHandleStyle().top
+        const newScrollPos = innerContainer.scrollTop
 
-        const yAboveHandle = this.customScroll.getScrollHandleStyle().top - 20
+        const yAboveHandle = customScrollInst.getScrollHandleStyle().top - 20
         const clickPositionAboveHandle = {
@@ -526,4 +526,4 @@ clientY: yAboveHandle,
 
-        expect(this.customScroll.getScrollHandleStyle().top).toEqual(newHandlePosition - this.scrollHandleLayout.height)
-        expect(this.innerContainer.scrollTop).toBeLessThan(newScrollPos)
+        expect(customScrollInst.getScrollHandleStyle().top).toEqual(newHandlePosition - this.scrollHandleLayout.height)
+        expect(innerContainer.scrollTop).toBeLessThan(newScrollPos)
       })
@@ -609,3 +609,3 @@ })
       it('should not scroll to bottom if the scroll is at the bottom', function () {
-        const contentContainerNode = this.customScroll.innerContainerRef.current
+        const contentContainerNode = customScrollInst.innerContainerRef.current
         const expectedScrollTop = totalScrollHeight - visibleHeight
@@ -629,3 +629,3 @@
           const addedContentHeight = 500
-          const contentContainerNode = this.customScroll.innerContainerRef.current
+          const contentContainerNode = customScrollInst.innerContainerRef.current
           const expectedScrollTop = totalScrollHeight - visibleHeight + addedContentHeight
@@ -651,3 +651,3 @@
           const addedContentHeight = 50
-          const contentContainerNode = this.customScroll.innerContainerRef.current
+          const contentContainerNode = customScrollInst.innerContainerRef.current
           const initialScrollTop = contentContainerNode.scrollTop
@@ -669,3 +669,3 @@
         it('should keep scroll at bottom', function () {
-          const contentContainerNode = this.customScroll.innerContainerRef.current
+          const contentContainerNode = customScrollInst.innerContainerRef.current
 
@@ -697,3 +697,3 @@ const content = [1, 2, 3, 4, 5, 6, 7, 8]
         it('should not scroll to bottom if the scroll is at the bottom', function () {
-          const contentContainerNode = this.customScroll.innerContainerRef.current
+          const contentContainerNode = customScrollInst.innerContainerRef.current
           const expectedScrollTop = totalScrollHeight - visibleHeight
@@ -712,3 +712,3 @@
         it('should allow regular scroll', function () {
-          this.customScroll = renderCustomScroll(
+          customScrollInst = renderCustomScroll(
             customScrollContainer,
@@ -723,3 +723,3 @@ {
 
-          const contentContainerNode = this.customScroll.innerContainerRef.current
+          const contentContainerNode = customScrollInst.innerContainerRef.current
           contentContainerNode.scrollTop = 0
@@ -736,10 +736,11 @@
   describe('dynamic content size', () => {
+    let initialHandlePos, initialScrollPos, innerContainer
     beforeEach(() => {
-      this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
-      this.initialHandlePos = this.customScroll.getScrollHandleStyle().top
-      this.outerContainer = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.outerContainer)
-      this.scrollHandle = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.customScrollHandle)
+      customScrollInst = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
+      initialHandlePos = customScrollInst.getScrollHandleStyle().top
+      this.outerContainer = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.outerContainer)
+      this.scrollHandle = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.customScrollHandle)
       this.scrollHandleLayout = this.scrollHandle.getBoundingClientRect()
-      this.innerContainer = TestUtils.findRenderedDOMComponentWithClass(this.customScroll, styles.innerContainer)
-      this.initialScrollPos = this.innerContainer.scrollTop
+      innerContainer = TestUtils.findRenderedDOMComponentWithClass(customScrollInst, styles.innerContainer)
+      initialScrollPos = innerContainer.scrollTop
     })
@@ -749,8 +750,8 @@
       beforeEach(() => {
-        this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, 10)
-        this.customScroll = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
+        customScrollInst = renderCustomScroll(customScrollContainer, {}, visibleHeight, 10)
+        customScrollInst = renderCustomScroll(customScrollContainer, {}, visibleHeight, totalScrollHeight)
       })
 
       it('should not respond to click on content area', () => {
-        const innerContainerLayout = this.innerContainer.getBoundingClientRect()
+        const innerContainerLayout = innerContainer.getBoundingClientRect()
         const yOnContent = innerContainerLayout.top + 70
@@ -767,4 +768,4 @@ const xOnContent = innerContainerLayout.left + 10
 
-        expect(this.customScroll.getScrollHandleStyle().top).toEqual(this.initialHandlePos)
-        expect(this.innerContainer.scrollTop).toEqual(this.initialScrollPos)
+        expect(customScrollInst.getScrollHandleStyle().top).toEqual(initialHandlePos)
+        expect(innerContainer.scrollTop).toEqual(initialScrollPos)
       })
@@ -771,0 +772,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

31

decreased by-6.06%

Worsened metrics

Total package byte prevSize

243277

decreased by-29.8%

Lines of code

2556

decreased by-23.63%

No dependency changes