Fix code review issues and add css modules

Author: Marek Rozmus

README.md

@@ -3,9 +3,9 @@
 ## Installation
 
 ```bash
-npm install @sandstreamdev/react-swipeable-list
+npm install sandstreamdev/react-swipeable-list
 # or via yarn
-yarn add @sandstreamdev/react-swipeable-list
+yarn add sandstreamdev/react-swipeable-list
 ```
 
 ## Usage

package-lock.json

@@ -1,6 +1,23 @@
 {
   "name": "react-swipeable-list",
+  "description": "Swipeable list component for React",
   "version": "0.0.1",
+  "author": {
+    "name": "Sandstream Development",
+    "url": "https://github.com/sandstreamdev/react-swipeable-list/graphs/contributors"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sandstreamdev/react-swipeable-list"
+  },
+  "license": "MIT",
+  "keywords": [
+    "swipe",
+    "list",
+    "react",
+    "component",
+    "custom"
+  ],
   "main": "dist/react-swipeable-list.cjs.js",
   "module": "dist/react-swipeable-list.esm.js",
   "browser": "dist/react-swipeable-list.umd.js",

package.json

@@ -30,7 +30,8 @@ export default [
         }
       }),
       postcss({
-        extract: true
+        extract: true,
+        modules: true
       })
     ]
   },
@@ -46,7 +47,8 @@ export default [
         exclude: ['node_modules/**']
       }),
       postcss({
-        extract: true
+        extract: true,
+        modules: true
       })
     ]
   }

rollup.config.js

@@ -1,4 +1,4 @@
-.swipeable-list {
+.swipeableList {
   flex: 1;
   background: white;
   width: 100%;

src/SwipeableList.css

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import './SwipeableList.css';
+import styles from './SwipeableList.css';
 
 const SwipeableList = ({ children }) => {
   const [blockSwipe, setBlockSwipe] = useState(false);
@@ -35,7 +35,7 @@ const SwipeableList = ({ children }) => {
 
   return (
     <div
-      className="swipeable-list"
+      className={styles.swipeableList}
       onMouseDown={onDragStart}
       onTouchStart={onDragStart}
       onScroll={onScroll}

src/SwipeableList.js

@@ -1,4 +1,4 @@
-.swipeable-list-item {
+.swipeableListItem {
   position: relative;
   transition: max-height 0.5s ease;
   max-height: 1000px;
@@ -8,7 +8,7 @@
   z-index: 0;
 }
 
-.swipeable-list-item > .background {
+.contentLeft {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -20,15 +20,23 @@
   opacity: 0;
 }
 
-.swipeable-list-item > .background.right {
+.contentRight {
+  composes: contentLeft;
   justify-content: flex-end;
 }
 
-.swipeable-list-item > .background.return {
+.return {
   transition: opacity 0.5s ease-out;
 }
 
-.swipeable-list-item > .content {
+.contentLeftReturn {
+  composes: contentLeft return;
+}
+.contentRightReturn {
+  composes: contentRight return;
+}
+
+.content {
   width: 100%;
   align-items: center;
   box-sizing: border-box;
@@ -37,6 +45,7 @@
   display: flex;
 }
 
-.swipeable-list-item > .content.return {
+.contentReturn {
+  composes: content;
   transition: transform 0.5s ease-out;
 }

src/SwipeableListItem.css

@@ -1,19 +1,19 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
-import './SwipeableListItem.css';
+import styles from './SwipeableListItem.css';
 
 const SwipeActionPropType = PropTypes.shape({
   action: PropTypes.func.isRequired,
-  background: PropTypes.node.isRequired
+  content: PropTypes.node.isRequired
 });
 
 class SwipeableListItem extends PureComponent {
   constructor(props) {
     super(props);
 
-    this.backgroundLeft = null;
-    this.backgroundRight = null;
+    this.contentLeft = null;
+    this.contentRight = null;
     this.listElement = null;
     this.wrapper = null;
 
@@ -49,12 +49,12 @@ class SwipeableListItem extends PureComponent {
   onDragStart = ({ clientX }) => {
     this.dragged = true;
     this.dragStartX = clientX;
-    this.listElement.className = 'content';
-    if (this.backgroundLeft) {
-      this.backgroundLeft.className = 'background';
+    this.listElement.className = styles.content;
+    if (this.contentLeft) {
+      this.contentLeft.className = styles.contentLeft;
     }
-    if (this.backgroundRight) {
-      this.backgroundRight.className = 'background right';
+    if (this.contentRight) {
+      this.contentRight.className = styles.contentRight;
     }
     this.startTime = Date.now();
     requestAnimationFrame(this.updatePosition);
@@ -83,34 +83,34 @@ class SwipeableListItem extends PureComponent {
       }
 
       this.left = 0;
-      this.listElement.className = 'content return';
+      this.listElement.className = styles.contentReturn;
       this.listElement.style.transform = `translateX(${this.left}px)`;
 
       // hide backgrounds
-      if (this.backgroundLeft) {
-        this.backgroundLeft.style.opacity = 0;
-        this.backgroundLeft.className = `${this.backgroundLeft.className} return`;
+      if (this.contentLeft) {
+        this.contentLeft.style.opacity = 0;
+        this.contentLeft.className = styles.contentLeftReturn;
       }
 
-      if (this.backgroundRight) {
-        this.backgroundRight.style.opacity = 0;
-        this.backgroundRight.className = `${this.backgroundRight.className} return`;
+      if (this.contentRight) {
+        this.contentRight.style.opacity = 0;
+        this.contentRight.className = styles.contentRightReturn;
       }
     }
   };
 
   shouldMoveItem = delta => {
     const {
-      swipeLeft: { background: backgroundLeft } = {},
-      swipeRight: { background: backgroundRight } = {},
+      swipeLeft: { content: contentLeft } = {},
+      swipeRight: { content: contentRight } = {},
       blockSwipe
     } = this.props;
     const swipingLeft = delta < 0;
     const swipingRight = delta > 0;
 
     return (
       !blockSwipe &&
-      ((swipingLeft && backgroundLeft) || (swipingRight && backgroundRight))
+      ((swipingLeft && contentLeft) || (swipingRight && contentRight))
     );
   };
 
@@ -145,32 +145,27 @@ class SwipeableListItem extends PureComponent {
     const elapsed = now - this.startTime;
 
     if (this.dragged && elapsed > this.fpsInterval) {
-      let backgroundToShow =
-        this.left < 0 ? this.backgroundLeft : this.backgroundRight;
-      let backgroundToHide =
-        this.left < 0 ? this.backgroundRight : this.backgroundLeft;
+      let contentToShow = this.left < 0 ? this.contentLeft : this.contentRight;
+      let contentToHide = this.left < 0 ? this.contentRight : this.contentLeft;
 
-      if (!backgroundToShow) {
+      if (!contentToShow) {
         return;
       }
 
       const opacity = (Math.abs(this.left) / 100).toFixed(2);
 
       this.listElement.style.transform = `translateX(${this.left}px)`;
 
-      if (
-        opacity < 1 &&
-        opacity.toString() !== backgroundToShow.style.opacity
-      ) {
-        backgroundToShow.style.opacity = opacity.toString();
+      if (opacity < 1 && opacity.toString() !== contentToShow.style.opacity) {
+        contentToShow.style.opacity = opacity.toString();
 
-        if (backgroundToHide) {
-          backgroundToHide.style.opacity = '0';
+        if (contentToHide) {
+          contentToHide.style.opacity = '0';
         }
       }
 
       if (opacity >= 1) {
-        backgroundToShow.style.opacity = '1';
+        contentToShow.style.opacity = '1';
       }
 
       this.startTime = Date.now();
@@ -193,31 +188,31 @@ class SwipeableListItem extends PureComponent {
     }
   };
 
-  bindBackgroundLeft = ref => (this.backgroundLeft = ref);
-  bindBackgroundRight = ref => (this.backgroundRight = ref);
+  bindContentLeft = ref => (this.contentLeft = ref);
+  bindContentRight = ref => (this.contentRight = ref);
   bindListElement = ref => (this.listElement = ref);
   bindWrapper = ref => (this.wrapper = ref);
 
   render() {
     const { children, swipeLeft, swipeRight } = this.props;
 
     return (
-      <div className="swipeable-list-item" ref={this.bindWrapper}>
+      <div className={styles.swipeableListItem} ref={this.bindWrapper}>
         {swipeLeft && (
-          <div ref={this.bindBackgroundLeft} className="background">
-            {swipeLeft.background}
+          <div ref={this.bindContentLeft} className={styles.contentLeft}>
+            {swipeLeft.content}
           </div>
         )}
         {swipeRight && (
-          <div ref={this.bindBackgroundRight} className="background right">
-            {swipeRight.background}
+          <div ref={this.bindContentRight} className={styles.contentRight}>
+            {swipeRight.content}
           </div>
         )}
         <div
           ref={this.bindListElement}
           onMouseDown={this.onDragStartMouse}
           onTouchStart={this.onDragStartTouch}
-          className="content"
+          className={styles.content}
         >
           {children}
         </div>