Code review fixes

.eslintrc

@@ -1,6 +1,7 @@
 {
   "env": {
     "browser": true,
+    "es6": true,
     "node": true,
     "jest": true
   },
@@ -18,6 +19,10 @@
   },
   "rules": {
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error"
+    "react-hooks/exhaustive-deps": "error",
+    "react/jsx-sort-props": [
+      "error",
+      { "callbacksLast": true, "shorthandFirst": true }
+    ]
   }
 }

README.md

@@ -143,7 +143,7 @@ Callback function that should be run when swipe is done beyond threshold.
 
 #### actionAnimation
 
-Type: `ActionAnimation (RETURN | REMOVE | NONE)` (optional, default: RETURN)
+Type: `ActionAnimations (RETURN | REMOVE | NONE)` (optional, default: RETURN)
 
 Animation type to be played swipe is done beyond threshold.
 

examples/.eslintrc

@@ -1,6 +1,7 @@
 {
   "env": {
-    "browser": true
+    "browser": true,
+    "es6": true
   },
   "extends": ["plugin:prettier/recommended", "plugin:react/recommended"],
   "parser": "babel-eslint",
@@ -13,6 +14,13 @@
   "rules": {
     "no-undef": "error",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error"
+    "react-hooks/exhaustive-deps": "error",
+    "react/jsx-sort-props": [
+      "error",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true
+      }
+    ]
   }
 }

examples/src/App.js

@@ -62,7 +62,7 @@ class App extends PureComponent {
       <div className={styles.example}>
         <h1>react-swipeable-list example</h1>
         <h5>(try also mobile view in dev tools for touch events)</h5>
-        <select onChange={this.handleSelectExample} value={selectedExample}>
+        <select value={selectedExample} onChange={this.handleSelectExample}>
           {Examples.map(item => (
             <option key={item.id} value={item.id}>
               {item.text}

examples/src/animations/List.js

@@ -2,87 +2,95 @@ import React, { useState } from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { v4 as uuidv4 } from 'uuid';
 import {
-  ActionAnimation,
+  ActionAnimations,
   SwipeableList,
   SwipeableListItem
 } from '@sandstreamdev/react-swipeable-list';
 import '@sandstreamdev/react-swipeable-list/dist/styles.css';
-import { mapValues } from '@sandstreamdev/std/object';
+import { findKey, mapEntries } from '@sandstreamdev/std/object';
 
 import styles from '../app.module.css';
 import transitionStyles from './transitions.module.css';
 
+const itemContent = name => (
+  <div className={styles.listItem}>
+    <span>{name}</span>
+  </div>
+);
+
 const SimpleList = () => {
   const [contentAnimation, setContentAnimation] = useState(
-    ActionAnimation.REMOVE
+    ActionAnimations.REMOVE
   );
-  const [listAnimations, setListAnimations] = useState('on');
+  const [listAnimations, setListAnimations] = useState(true);
   const [items, setItems] = useState(() => [
     { id: uuidv4(), text: 'Item 1' },
     { id: uuidv4(), text: 'Item 2' },
     { id: uuidv4(), text: 'Item 3' },
     { id: uuidv4(), text: 'Item 4' }
   ]);
 
+  const deleteItemById = id =>
+    setItems(items => items.filter(item => item.id !== id));
+
   const addItem = () =>
     setItems([...items, { id: uuidv4(), text: `New item` }]);
 
-  const swipeRightData = id => ({
+  const swipeRightOptions = id => ({
     content: (
       <div className={styles.contentLeft}>
         <span>Delete</span>
       </div>
     ),
     actionAnimation: contentAnimation,
-    action: () => setItems(items => items.filter(item => item.id !== id))
+    action: () => deleteItemById(id)
   });
 
-  const swipeLeftData = id => ({
+  const swipeLeftOptions = id => ({
     content: (
       <div className={styles.contentRight}>
         <span>Delete</span>
       </div>
     ),
     actionAnimation: contentAnimation,
-    action: () => setItems(items => items.filter(item => item.id !== id))
+    action: () => deleteItemById(id)
   });
 
-  const itemContent = name => (
-    <div className={styles.listItem}>
-      <span>{name}</span>
-    </div>
-  );
-
   const handleChangeActionAnimation = ({ target: { value } }) =>
-    setContentAnimation(value);
+    setContentAnimation(ActionAnimations[value]);
 
   const handleChangeListAnimations = ({ target: { value } }) =>
-    setListAnimations(value);
+    setListAnimations(value === 'true');
+
+  const threshold = 0.33;
+  const transitionTimeout = 2500;
 
   return (
     <>
       <span className={styles.actionInfo}>
-        Swipe to delete (trigger threshold: 0.33)
+        Swipe to delete (trigger threshold: {threshold})
       </span>
       <div className={styles.listContainer}>
-        <SwipeableList threshold={0.33}>
-          {props => (
+        <SwipeableList threshold={threshold}>
+          {({ scrollStartThreshold, swipeStartThreshold, threshold }) => (
             <TransitionGroup
               className="todo-list"
-              enter={listAnimations === 'on'}
-              exit={listAnimations === 'on'}
+              enter={listAnimations}
+              exit={listAnimations}
             >
               {items.map(({ id, text }) => (
                 <CSSTransition
-                  key={id}
-                  timeout={2500}
                   classNames={transitionStyles}
+                  key={id}
+                  timeout={transitionTimeout}
                 >
                   <SwipeableListItem
                     key={id}
-                    swipeLeft={swipeLeftData(id)}
-                    swipeRight={swipeRightData(id)}
-                    {...props}
+                    scrollStartThreshold={scrollStartThreshold}
+                    swipeLeft={swipeLeftOptions(id)}
+                    swipeRight={swipeRightOptions(id)}
+                    swipeStartThreshold={swipeStartThreshold}
+                    threshold={threshold}
                   >
                     {itemContent(text)}
                   </SwipeableListItem>
@@ -96,26 +104,26 @@ const SimpleList = () => {
       <div className={styles.switcherRow}>
         <span>Item content animation:</span>
         <select
-          onChange={handleChangeActionAnimation}
-          value={contentAnimation}
           className={styles.switcher}
+          value={findKey(value => value === contentAnimation)(ActionAnimations)}
+          onChange={handleChangeActionAnimation}
         >
-          {mapValues(item => (
-            <option key={item} value={item}>
-              {item}
+          {mapEntries((value, key) => (
+            <option key={key} value={key}>
+              {value.description}
             </option>
-          ))(ActionAnimation)}
+          ))(ActionAnimations)}
         </select>
       </div>
       <div>
         <span>List content animations:</span>
         <select
-          onChange={handleChangeListAnimations}
-          value={listAnimations}
           className={styles.switcher}
+          value={listAnimations}
+          onChange={handleChangeListAnimations}
         >
-          <option value="on">ON</option>
-          <option value="off">OFF</option>
+          <option value="true">ON</option>
+          <option value="false">OFF</option>
         </select>
       </div>
     </>

examples/src/app.module.css

@@ -99,7 +99,7 @@ footer a:hover {
 }
 
 .contentRight {
-  composes: contentLeft; /* stylelint-disable-line */
+  composes: contentleft; /* stylelint-disable-line value-keyword-case */
   background-color: green;
   justify-content: flex-end;
 }

examples/src/basic/List.js

@@ -12,7 +12,7 @@ const SimpleList = () => {
   const [swipeProgress, handleSwipeProgress] = useState();
   const [swipeAction, handleSwipeAction] = useState('None');
 
-  const swipeRightData = name => ({
+  const swipeRightOptions = name => ({
     content: (
       <div className={styles.contentLeft}>
         <span>Left content</span>
@@ -21,7 +21,7 @@ const SimpleList = () => {
     action: () => triggerItemAction(`Swipe right action on "${name}"`)
   });
 
-  const swipeLeftData = name => ({
+  const swipeLeftOptions = name => ({
     content: (
       <div className={styles.contentRight}>
         <span>Right content</span>
@@ -52,27 +52,27 @@ const SimpleList = () => {
       <div className={styles.listContainer}>
         <SwipeableList>
           <SwipeableListItem
-            swipeRight={swipeRightData('Item with swipe right')}
-            onSwipeStart={handleSwipeStart}
+            swipeRight={swipeRightOptions('Item with swipe right')}
             onSwipeEnd={handleSwipeEnd}
             onSwipeProgress={handleSwipeProgress}
+            onSwipeStart={handleSwipeStart}
           >
             {itemContent('Item with swipe right')}
           </SwipeableListItem>
           <SwipeableListItem
-            swipeLeft={swipeLeftData('Item with swipe left')}
-            onSwipeStart={handleSwipeStart}
+            swipeLeft={swipeLeftOptions('Item with swipe left')}
             onSwipeEnd={handleSwipeEnd}
             onSwipeProgress={handleSwipeProgress}
+            onSwipeStart={handleSwipeStart}
           >
             {itemContent('Item with swipe left')}
           </SwipeableListItem>
           <SwipeableListItem
-            swipeRight={swipeRightData('Item with both swipes')}
-            swipeLeft={swipeLeftData('Item with both swipes')}
-            onSwipeStart={handleSwipeStart}
+            swipeLeft={swipeLeftOptions('Item with both swipes')}
+            swipeRight={swipeRightOptions('Item with both swipes')}
             onSwipeEnd={handleSwipeEnd}
             onSwipeProgress={handleSwipeProgress}
+            onSwipeStart={handleSwipeStart}
           >
             {itemContent('Item with both swipes')}
           </SwipeableListItem>
@@ -87,9 +87,7 @@ const SimpleList = () => {
         <span className={styles.actionInfo}>Callback swipe action:</span>
         <span className={styles.actionInfoValue}>{swipeAction}</span>
         <span className={styles.actionInfo}>Callback swipe progress:</span>
-        <span className={styles.actionInfoValue}>
-          {swipeProgress !== undefined ? swipeProgress : '-'}%
-        </span>
+        <span className={styles.actionInfoValue}>{swipeProgress ?? '-'}%</span>
       </div>
     </>
   );

examples/src/complex/List.js

@@ -16,30 +16,30 @@ const ComplexList = () => {
   const [swipeProgress, handleSwipeProgress] = useState();
   const [swipeAction, handleSwipeAction] = useState('None');
   const [items] = useState([
-    { id: 1, text: 'First', description: 'first decsription' },
-    { id: 2, text: 'Second', description: 'second decsription' },
-    { id: 3, text: 'Third', description: 'third decsription' },
-    { id: 4, text: 'Fourth', description: 'fourth decsription' }
+    { id: 1, text: 'First', description: 'first description' },
+    { id: 2, text: 'Second', description: 'second description' },
+    { id: 3, text: 'Third', description: 'third description' },
+    { id: 4, text: 'Fourth', description: 'fourth description' }
   ]);
 
-  const swipeRightData = name => ({
+  const swipeRightOptions = name => ({
     content: (
       <ItemContent
+        color="red"
         icon={<DeleteIcon />}
         label="Delete"
         side="right"
-        color="red"
       />
     ),
     action: () => triggerItemAction(`Delete action triggered on "${name}" item`)
   });
 
-  const swipeLeftData = name => ({
+  const swipeLeftOptions = name => ({
     content: (
       <ItemContent
+        color="green"
         icon={<ReplyIcon />}
         label="Reply"
-        color="green"
         side="left"
       />
     ),
@@ -56,41 +56,40 @@ const ComplexList = () => {
     handleSwipeProgress();
   };
 
+  const threshold = 0.25;
+
   return (
     <>
       <span className={styles.actionInfo}>
-        List in smaller container (trigger threshold: 0.25)
+        List in smaller container (trigger threshold: {threshold})
       </span>
       <div className={styles.complexListContainer}>
-        <SwipeableList threshold={0.25}>
+        <SwipeableList threshold={threshold}>
           {items.map(({ id, text, description }) => (
             <SwipeableListItem
               key={id}
-              swipeLeft={swipeLeftData(text)}
-              swipeRight={swipeRightData(text)}
-              onSwipeStart={handleSwipeStart}
+              swipeLeft={swipeLeftOptions(text)}
+              swipeRight={swipeRightOptions(text)}
               onSwipeEnd={handleSwipeEnd}
               onSwipeProgress={handleSwipeProgress}
+              onSwipeStart={handleSwipeStart}
             >
               <ListItem
+                description={description}
                 icon={<MailIcon />}
                 name={text}
-                description={description}
               />
             </SwipeableListItem>
           ))}
         </SwipeableList>
       </div>
-
       <div className={styles.summary}>
         <span className={styles.actionInfo}>Triggered action:</span>
         <span className={styles.actionInfoValue}>{triggeredItemAction}</span>
         <span className={styles.actionInfo}>Callback swipe action:</span>
         <span className={styles.actionInfoValue}>{swipeAction}</span>
         <span className={styles.actionInfo}>Callback swipe progress:</span>
-        <span className={styles.actionInfoValue}>
-          {swipeProgress !== undefined ? swipeProgress : '-'}%
-        </span>
+        <span className={styles.actionInfoValue}>{swipeProgress ?? '-'}%</span>
       </div>
     </>
   );