Update SwipeableListItem.js

Fix width of swappable items

Author: LiatMatzovKadosh

src/SwipeableListItem.js

@@ -502,6 +502,36 @@ class SwipeableListItem extends PureComponent {
         this.resetState();
       }
     }
+
+    this.fixFinalWidth();
+  };
+
+  fixFinalWidth = () => {
+    const { leadingOffset = 0, trailingOffset = 0 } = this.props;
+
+    if (this.leadingActionsElement) {
+      const leadingActionsWidth = parseInt(
+        this.leadingActionsElement.style.width
+      );
+
+      if (leadingActionsWidth > 0) {
+        this.leadingActionsElement.style.width = `${
+          leadingActionsWidth + leadingOffset
+        }px`;
+      }
+    }
+
+    if (this.trailingActionsElement) {
+      const trailingActionsWidth = parseInt(
+        this.trailingActionsElement.style.width
+      );
+
+      if (trailingActionsWidth > 0) {
+        this.trailingActionsElement.style.width = `${
+          trailingActionsWidth + trailingOffset
+        }px`;
+      }
+    }
   };
 
   dragStartedWithinItem = () => {
@@ -656,6 +686,8 @@ class SwipeableListItem extends PureComponent {
       }px`;
     }
 
+    this.fixFinalWidth();
+
     if (this.listElement) {
       if (fullSwipe) {
         const {
@@ -709,7 +741,6 @@ class SwipeableListItem extends PureComponent {
         }
       }
     }
-
     this.startTime = Date.now();
   };
 
@@ -822,6 +853,8 @@ SwipeableListItem.propTypes = {
   swipeStartThreshold: PropTypes.number,
   threshold: PropTypes.number,
   trailingActions: PropTypes.node,
+  leadingOffset: PropTypes.number,
+  trailingOffset: PropTypes.number,
 };
 
 export default SwipeableListItem;