From 818647eefdcfa13b9da6644dec26f81d96d1e1ea Mon Sep 17 00:00:00 2001
From: Marek Rozmus <marek.rozmus@sandstream.pl>
Date: Tue, 14 Apr 2020 16:35:10 +0200
Subject: [PATCH] Code review fixes

---
 .eslintrc                               |  7 ++-
 README.md                               |  2 +-
 examples/.eslintrc                      | 12 +++-
 examples/src/App.js                     |  2 +-
 examples/src/animations/List.js         | 80 ++++++++++++++-----------
 examples/src/app.module.css             |  2 +-
 examples/src/basic/List.js              | 22 ++++---
 examples/src/complex/List.js            | 35 ++++++-----
 examples/src/size-to-content/List.js    | 38 ++++++------
 src/SwipeableListItem.css               |  6 +-
 src/SwipeableListItem.js                | 25 ++++----
 src/__tests__/SwipeableListItem.test.js | 18 +++---
 src/index.js                            |  4 +-
 src/module.d.ts                         |  4 +-
 14 files changed, 137 insertions(+), 120 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 345cf0b..0ba48a2 100644
--- a/.eslintrc
+++ b/.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 }
+    ]
   }
 }
diff --git a/README.md b/README.md
index 7eedb66..8e09c77 100644
--- a/README.md
+++ b/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.
 
diff --git a/examples/.eslintrc b/examples/.eslintrc
index 7e77f99..292a469 100644
--- a/examples/.eslintrc
+++ b/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
+      }
+    ]
   }
 }
diff --git a/examples/src/App.js b/examples/src/App.js
index 8b1e81e..9a3c7a3 100644
--- a/examples/src/App.js
+++ b/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}
diff --git a/examples/src/animations/List.js b/examples/src/animations/List.js
index 9398705..f3d6550 100644
--- a/examples/src/animations/List.js
+++ b/examples/src/animations/List.js
@@ -2,21 +2,27 @@ 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' },
@@ -24,65 +30,67 @@ const SimpleList = () => {
     { 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>
     </>
diff --git a/examples/src/app.module.css b/examples/src/app.module.css
index 8b2396c..44bea92 100644
--- a/examples/src/app.module.css
+++ b/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;
 }
diff --git a/examples/src/basic/List.js b/examples/src/basic/List.js
index b5058e4..9d76382 100644
--- a/examples/src/basic/List.js
+++ b/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>
     </>
   );
diff --git a/examples/src/complex/List.js b/examples/src/complex/List.js
index 1e328d1..c369229 100644
--- a/examples/src/complex/List.js
+++ b/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>
     </>
   );
diff --git a/examples/src/size-to-content/List.js b/examples/src/size-to-content/List.js
index 4f2808f..848983a 100644
--- a/examples/src/size-to-content/List.js
+++ b/examples/src/size-to-content/List.js
@@ -14,38 +14,38 @@ import styles from '../app.module.css';
 
 const SizeToContentList = () => {
   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: 5, text: 'Fifth', description: 'fifth decsription' },
-    { id: 6, text: 'Sixth', description: 'sixth decsription' },
-    { id: 7, text: 'Seventh', description: 'seventh decsription' },
-    { id: 8, text: 'Eighth', description: 'eighth decsription' },
-    { id: 9, text: 'Ninth', description: 'ninth decsription' },
-    { id: 10, text: 'Tenth', description: 'tenth decsription' },
-    { id: 11, text: 'Eleventh', description: 'eleventh decsription' },
-    { id: 12, text: 'Twelfth', description: 'twelfth 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' },
+    { id: 5, text: 'Fifth', description: 'fifth description' },
+    { id: 6, text: 'Sixth', description: 'sixth description' },
+    { id: 7, text: 'Seventh', description: 'seventh description' },
+    { id: 8, text: 'Eighth', description: 'eighth description' },
+    { id: 9, text: 'Ninth', description: 'ninth description' },
+    { id: 10, text: 'Tenth', description: 'tenth description' },
+    { id: 11, text: 'Eleventh', description: 'eleventh description' },
+    { id: 12, text: 'Twelfth', description: 'twelfth description' }
   ]);
 
-  const swipeRightData = () => ({
+  const swipeRightOptions = () => ({
     content: (
       <ItemContent
+        color="red"
         icon={<DeleteIcon />}
         label="Delete"
         side="right"
-        color="red"
       />
     ),
     action: identity
   });
 
-  const swipeLeftData = () => ({
+  const swipeLeftOptions = () => ({
     content: (
       <ItemContent
+        color="green"
         icon={<ReplyIcon />}
         label="Reply"
-        color="green"
         side="left"
       />
     ),
@@ -58,13 +58,13 @@ const SizeToContentList = () => {
         {items.map(({ id, text, description }) => (
           <SwipeableListItem
             key={id}
-            swipeLeft={swipeLeftData(text)}
-            swipeRight={swipeRightData(text)}
+            swipeLeft={swipeLeftOptions(text)}
+            swipeRight={swipeRightOptions(text)}
           >
             <ListItem
+              description={description}
               icon={<MailIcon />}
               name={text}
-              description={description}
             />
           </SwipeableListItem>
         ))}
diff --git a/src/SwipeableListItem.css b/src/SwipeableListItem.css
index b1dfef9..33c7867 100644
--- a/src/SwipeableListItem.css
+++ b/src/SwipeableListItem.css
@@ -21,7 +21,7 @@
 }
 
 .contentLeft {
-  composes: contentRight; /* stylelint-disable-line */
+  composes: contentright; /* stylelint-disable-line value-keyword-case */
   justify-content: flex-end;
 }
 
@@ -30,11 +30,11 @@
 }
 
 .contentLeftReturn {
-  composes: contentLeft return; /* stylelint-disable-line */
+  composes: contentleft return; /* stylelint-disable-line value-keyword-case */
 }
 
 .contentRightReturn {
-  composes: contentRight return; /* stylelint-disable-line */
+  composes: contentright return; /* stylelint-disable-line value-keyword-case */
 }
 
 .content {
diff --git a/src/SwipeableListItem.js b/src/SwipeableListItem.js
index 024a1ba..ebdeee1 100644
--- a/src/SwipeableListItem.js
+++ b/src/SwipeableListItem.js
@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 
 import styles from './SwipeableListItem.css';
 
-export const ActionAnimation = {
-  RETURN: 'RETURN',
-  REMOVE: 'REMOVE',
-  NONE: 'NONE'
+export const ActionAnimations = {
+  RETURN: Symbol('Return'),
+  REMOVE: Symbol('Remove'),
+  NONE: Symbol('None')
 };
 
 const SwipeActionPropType = PropTypes.shape({
   action: PropTypes.func.isRequired,
-  actionAnimation: PropTypes.oneOf(Object.values(ActionAnimation)),
+  actionAnimation: PropTypes.oneOf(Object.values(ActionAnimations)),
   content: PropTypes.node.isRequired
 });
 
@@ -198,9 +198,8 @@ class SwipeableListItem extends PureComponent {
 
     if (listElement) {
       listElement.className = styles.contentRemove;
-      listElement.style.transform = `translateX(${
-        direction === DragDirection.LEFT ? '-' : ''
-      }${listElement.offsetWidth}px)`;
+      listElement.style.transform = `translateX(${listElement.offsetWidth *
+        (direction === DragDirection.LEFT ? -1 : 1)}px)`;
     }
   };
 
@@ -209,10 +208,10 @@ class SwipeableListItem extends PureComponent {
 
     if (listElement) {
       switch (type) {
-        case ActionAnimation.REMOVE:
+        case ActionAnimations.REMOVE:
           this.playRemoveAnimation(direction);
           break;
-        case ActionAnimation.NONE:
+        case ActionAnimations.NONE:
           break;
         default:
           this.playReturnAnimation();
@@ -440,26 +439,26 @@ class SwipeableListItem extends PureComponent {
       <div className={styles.swipeableListItem} ref={this.bindWrapper}>
         {swipeLeft && (
           <div
-            ref={this.bindContentLeft}
             className={styles.contentLeft}
             data-testid="swipe-left-content"
+            ref={this.bindContentLeft}
           >
             {swipeLeft.content}
           </div>
         )}
         {swipeRight && (
           <div
-            ref={this.bindContentRight}
             className={styles.contentRight}
             data-testid="swipe-right-content"
+            ref={this.bindContentRight}
           >
             {swipeRight.content}
           </div>
         )}
         <div
-          ref={this.bindListElement}
           className={styles.content}
           data-testid="content"
+          ref={this.bindListElement}
         >
           {children}
         </div>
diff --git a/src/__tests__/SwipeableListItem.test.js b/src/__tests__/SwipeableListItem.test.js
index 22cb5cf..a5bf610 100644
--- a/src/__tests__/SwipeableListItem.test.js
+++ b/src/__tests__/SwipeableListItem.test.js
@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 
-import SwipeableListItem, { ActionAnimation } from '../SwipeableListItem';
+import SwipeableListItem, { ActionAnimations } from '../SwipeableListItem';
 import {
   swipeRightMouse,
   swipeRightTouch,
@@ -249,8 +249,8 @@ test('start and end callbacks not triggered if swipe content not defined', () =>
 
   const { getByTestId } = render(
     <SwipeableListItem
-      onSwipeStart={callbackSwipeStart}
       onSwipeEnd={callbackSwipeEnd}
+      onSwipeStart={callbackSwipeStart}
     >
       <span>Item content</span>
     </SwipeableListItem>
@@ -278,8 +278,8 @@ test('start and end callbacks not triggered if blockSwipe is set', () => {
         content: <span>Left swipe content</span>,
         action: callbackLeft
       }}
-      onSwipeStart={callbackSwipeStart}
       onSwipeEnd={callbackSwipeEnd}
+      onSwipeStart={callbackSwipeStart}
     >
       <span>Item content</span>
     </SwipeableListItem>
@@ -311,8 +311,8 @@ test('start and end callbacks triggered if swipe content is defined', () => {
         content: <span>Right swipe content</span>,
         action: callbackRight
       }}
-      onSwipeStart={callbackSwipeStart}
       onSwipeEnd={callbackSwipeEnd}
+      onSwipeStart={callbackSwipeStart}
     >
       <span>Item content</span>
     </SwipeableListItem>
@@ -336,12 +336,12 @@ test('if remove animation is applied', () => {
     <SwipeableListItem
       swipeLeft={{
         content: <span>Left swipe content</span>,
-        actionAnimation: ActionAnimation.REMOVE,
+        actionAnimation: ActionAnimations.REMOVE,
         action: callbackLeft
       }}
       swipeRight={{
         content: <span>Right swipe content</span>,
-        actionAnimation: ActionAnimation.REMOVE,
+        actionAnimation: ActionAnimations.REMOVE,
         action: callbackRight
       }}
     >
@@ -375,7 +375,7 @@ test('if return animation is applied', () => {
     <SwipeableListItem
       swipeLeft={{
         content: <span>Left swipe content</span>,
-        actionAnimation: ActionAnimation.RETURN,
+        actionAnimation: ActionAnimations.RETURN,
         action: callbackLeft
       }}
       swipeRight={{
@@ -413,12 +413,12 @@ test('if none animation is applied', () => {
     <SwipeableListItem
       swipeLeft={{
         content: <span>Left swipe content</span>,
-        actionAnimation: ActionAnimation.NONE,
+        actionAnimation: ActionAnimations.NONE,
         action: callbackLeft
       }}
       swipeRight={{
         content: <span>Right swipe content</span>,
-        actionAnimation: ActionAnimation.NONE,
+        actionAnimation: ActionAnimations.NONE,
         action: callbackRight
       }}
     >
diff --git a/src/index.js b/src/index.js
index f6d6463..24da29b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
 import SwipeableList from './SwipeableList';
-import SwipeableListItem, { ActionAnimation } from './SwipeableListItem';
+import SwipeableListItem, { ActionAnimations } from './SwipeableListItem';
 
-export { ActionAnimation, SwipeableList, SwipeableListItem };
+export { ActionAnimations, SwipeableList, SwipeableListItem };
diff --git a/src/module.d.ts b/src/module.d.ts
index 056a46f..cadb5af 100644
--- a/src/module.d.ts
+++ b/src/module.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-enum ActionAnimation {
+export enum ActionAnimations {
   RETURN = 'RETURN',
   REMOVE = 'REMOVE',
   NONE = 'NONE'
@@ -16,7 +16,7 @@ export class SwipeableList extends React.Component<ISwipeableListProps> {}
 
 interface ISwipeActionProps {
   action: () => void;
-  actionAnimation?: ActionAnimation;
+  actionAnimation?: ActionAnimations;
   content: React.ReactNode;
 }