upgrade to webpack 5. Update eslint to prettier defaults - arrow function style.

Author: rommguy

.eslintrc

@@ -9,7 +9,7 @@
     "prefer-spread": 0,
     "prefer-template": 2,
     "arrow-body-style": [2, "as-needed"],
-    "arrow-parens": [2, "as-needed"],
+    "arrow-parens": 2,
     "arrow-spacing": [
       2,
       {

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "semi": false,
-  "printWidth": 120
+  "printWidth": 120,
+  "trailingComma": "none"
 }

dist/customScroll.css

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */

dist/reactCustomScroll.js

@@ -29,7 +29,7 @@ export class FirstComp extends Component {
     return demoText.text
   }
   getDynamicContent() {
-    return times(index => `Content #${index}`, this.state.dynamicContentCounter)
+    return times((index) => `Content #${index}`, this.state.dynamicContentCounter)
   }
   addContent = () => {
     this.setState({
@@ -130,7 +130,7 @@ export class FirstComp extends Component {
                 <div className="panel-content-custom panel-content">
                   <div className="content-fill">
                     {map(
-                      content => (
+                      (content) => (
                         <div className="dynamic-content" key={content}>
                           {content}
                         </div>

example/exampleDist/example.js

@@ -1,14 +1,15 @@
 const path = require('path')
+const KarmaWebpack = require('karma-webpack')
 
-module.exports = config => {
+module.exports = (config) => {
   config.set({
     browsers: ['ChromeHeadless', 'FirefoxHeadless'],
     // browsers: ['Chrome'],
     frameworks: ['jasmine'],
     singleRun: false,
     reporters: ['dots'], //report results in this format
     files: [
-      {pattern: 'src/test/*.spec.js', watched: false}
+      { pattern: 'src/test/*.spec.js', watched: false }
       // each file acts as entry point for the webpack configuration
     ],
 
@@ -33,23 +34,25 @@ module.exports = config => {
             use: [
               {
                 loader: 'style-loader'
-              }, {
+              },
+              {
                 loader: 'css-loader',
                 options: {
                   modules: {
-                    localIdentName: 'rcs-[local]'
-                  },
-                  localsConvention: 'dashes'
+                    localIdentName: 'rcs-[local]',
+                    exportLocalsConvention: 'dashes'
+                  }
                 }
-              }, {
+              },
+              {
                 loader: 'sass-loader'
               }
             ]
           }
         ]
       },
       resolve: {
-        modules: [path.resolve(__dirname, "src/main"), "node_modules"]
+        modules: [path.resolve(__dirname, 'src/main'), 'node_modules']
       }
     },
 

example/exampleDist/example.js.LICENSE.txt

@@ -35,26 +35,26 @@
     "eslint": "^6.8.0",
     "eslint-plugin-lodash": "^6.0.0",
     "eslint-plugin-react": "^7.18.3",
-    "extract-text-webpack-plugin": "4.0.0-beta.0",
     "jasmine": "^3.5.0",
     "jasmine-core": "^3.5.0",
     "karma": "^6.2.3",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^1.3.0",
+    "karma-firefox-launcher": "^2.1.0",
     "karma-jasmine": "^3.1.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^4.13.1",
     "postcss-cli": "^7.1.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.3.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.1.3",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
+    "sass-loader": "^11.1.1",
+    "style-loader": "^1.3.0",
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0"
   },
   "peerDependencies": {
     "prop-types": "*",
@@ -70,5 +70,6 @@
     "ui component",
     "ui",
     "component"
-  ]
+  ],
+  "dependencies": {}
 }

example/firstComp/firstComp.js

@@ -3,7 +3,6 @@
     "react/prop-types": 2,
     "react/sort-comp": 2,
     "arrow-body-style": [2, "as-needed"],
-    "arrow-parens": [2, "as-needed"],
     "arrow-spacing": [2, { "before": true, "after": true }],
     "constructor-super": 2,
     "generator-star-spacing": [2, {"before": true, "after": false}],

karma.conf.js

@@ -23,14 +23,19 @@
 
     -webkit-overflow-scrolling: touch;
 
-    &:after{
+    &:after {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       height: 0;
-      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0) 100%);
+      background-image: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.2) 0%,
+        rgba(0, 0, 0, 0.05) 60%,
+        rgba(0, 0, 0, 0) 100%
+      );
       pointer-events: none;
       transition: height 0.1s ease-in;
       will-change: height;
@@ -81,4 +86,3 @@
     border-radius: 3px;
   }
 }
-

package.json

@@ -88,7 +88,7 @@ class CustomScroll extends Component {
     this.hideScrollThumb.cancel()
     document.removeEventListener('mousemove', this.onHandleDrag)
     document.removeEventListener('mouseup', this.onHandleDragEnd)
-    
+
     if (this.innerContainerRef.current) {
       this.innerContainerRef.current.removeEventListener('wheel', this.blockOuterScroll)
     }
@@ -99,7 +99,7 @@ class CustomScroll extends Component {
   scrollHandleRef = createRef()
   contentWrapperRef = createRef()
 
-  adjustFreezePosition = prevProps => {
+  adjustFreezePosition = (prevProps) => {
     if (!this.contentWrapperRef.current) {
       return
     }
@@ -123,7 +123,7 @@ class CustomScroll extends Component {
     }
   }
 
-  updateScrollPosition = scrollValue => {
+  updateScrollPosition = (scrollValue) => {
     const innerContainer = this.getScrolledElement()
     const updatedScrollTop = ensureWithinLimits(scrollValue, 0, this.contentHeight - this.visibleHeight)
     innerContainer.scrollTop = updatedScrollTop
@@ -132,7 +132,7 @@ class CustomScroll extends Component {
     })
   }
 
-  onClick = event => {
+  onClick = (event) => {
     if (!this.hasScroll || !this.isMouseEventOnCustomScrollbar(event) || this.isMouseEventOnScrollHandle(event)) {
       return
     }
@@ -142,7 +142,7 @@ class CustomScroll extends Component {
     this.updateScrollPosition(newScrollValue)
   }
 
-  isMouseEventOnCustomScrollbar = event => {
+  isMouseEventOnCustomScrollbar = (event) => {
     if (!this.customScrollbarRef.current) {
       return false
     }
@@ -171,15 +171,15 @@ class CustomScroll extends Component {
     return isEventPosOnLayout(event, customScrollbarLayout)
   }
 
-  isMouseEventOnScrollHandle = event => {
+  isMouseEventOnScrollHandle = (event) => {
     if (!this.scrollHandleRef.current) {
       return false
     }
     const scrollHandle = reactDOM.findDOMNode(this.scrollHandleRef.current)
     return isEventPosOnDomNode(event, scrollHandle)
   }
 
-  calculateNewScrollHandleTop = clickEvent => {
+  calculateNewScrollHandleTop = (clickEvent) => {
     const domNode = reactDOM.findDOMNode(this)
     const boundingRect = domNode.getBoundingClientRect()
     const currentTop = boundingRect.top + window.pageYOffset
@@ -196,7 +196,7 @@ class CustomScroll extends Component {
     return newScrollHandleTop
   }
 
-  getScrollValueFromHandlePosition = handlePosition => handlePosition / this.scrollRatio
+  getScrollValueFromHandlePosition = (handlePosition) => handlePosition / this.scrollRatio
 
   getScrollHandleStyle = () => {
     const handlePosition = this.state.scrollPos * this.scrollRatio
@@ -207,13 +207,13 @@ class CustomScroll extends Component {
     }
   }
 
-  adjustCustomScrollPosToContentPos = scrollPosition => {
+  adjustCustomScrollPosToContentPos = (scrollPosition) => {
     this.setState({
       scrollPos: scrollPosition
     })
   }
 
-  onScroll = event => {
+  onScroll = (event) => {
     if (this.props.freezePosition) {
       return
     }
@@ -226,7 +226,7 @@ class CustomScroll extends Component {
 
   getScrolledElement = () => this.innerContainerRef.current
 
-  onMouseDown = event => {
+  onMouseDown = (event) => {
     if (!this.hasScroll || !this.isMouseEventOnScrollHandle(event)) {
       return
     }
@@ -246,7 +246,7 @@ class CustomScroll extends Component {
     })
   }
 
-  onHandleDrag = event => {
+  onHandleDrag = (event) => {
     event.preventDefault()
     const mouseDeltaY = event.pageY - this.startDragMousePos
     const handleTopPosition = ensureWithinLimits(
@@ -258,7 +258,7 @@ class CustomScroll extends Component {
     this.updateScrollPosition(newScrollValue)
   }
 
-  onHandleDragEnd = e => {
+  onHandleDragEnd = (e) => {
     this.setState({
       onDrag: false
     })
@@ -267,7 +267,7 @@ class CustomScroll extends Component {
     document.removeEventListener('mouseup', this.onHandleDragEnd)
   }
 
-  blockOuterScroll = e => {
+  blockOuterScroll = (e) => {
     if (this.props.allowOuterScroll) {
       return
     }
@@ -327,7 +327,7 @@ class CustomScroll extends Component {
     return result
   }
 
-  enforceMinHandleHeight = calculatedStyle => {
+  enforceMinHandleHeight = (calculatedStyle) => {
     const minHeight = this.props.minScrollHandleHeight
     if (calculatedStyle.height >= minHeight) {
       return calculatedStyle
@@ -352,14 +352,11 @@ class CustomScroll extends Component {
     const className = [
       this.props.className || '',
       styles.customScroll,
-      this.state.onDrag ? styles.scrollHandleDragged : '',
-    ].join('')
+      this.state.onDrag ? styles.scrollHandleDragged : ''
+    ].join(' ')
 
     return (
-      <div
-        className={className}
-        style={rootStyle}
-      >
+      <div className={className} style={rootStyle}>
         <div
           className={styles.outerContainer}
           style={this.getOuterContainerStyle()}
@@ -374,11 +371,7 @@ class CustomScroll extends Component {
                 className={`${styles.customScrollbar} ${this.props.rtl ? styles.customScrollbarRtl : ''}`}
                 key="scrollbar"
               >
-                <div
-                  ref={this.scrollHandleRef}
-                  className={styles.customScrollHandle}
-                  style={scrollHandleStyle}
-                >
+                <div ref={this.scrollHandleRef} className={styles.customScrollHandle} style={scrollHandleStyle}>
                   <div className={this.props.handleClass} />
                 </div>
               </div>
@@ -390,11 +383,7 @@ class CustomScroll extends Component {
             style={scrollStyles.innerContainer}
             onScroll={this.onScroll}
           >
-            <div
-              className={styles.contentWrapper}
-              ref={this.contentWrapperRef}
-              style={scrollStyles.contentWrapper}
-            >
+            <div className={styles.contentWrapper} ref={this.contentWrapperRef} style={scrollStyles.contentWrapper}>
               {this.props.children}
             </div>
           </div>