From 7392b7945b974add607ab89bcb22d8a107ac6043 Mon Sep 17 00:00:00 2001
From: Roshdy Kamel <roshdy89@gmail.com>
Date: Thu, 7 Feb 2019 16:03:05 +0300
Subject: [PATCH 1/2] Add RTL Support

Add direction property to handle mouse movement based on layout direction ["ltr"/"rtl"]
---
 lib/Resizable.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/lib/Resizable.js b/lib/Resizable.js
index 51522976..5cfcd67a 100644
--- a/lib/Resizable.js
+++ b/lib/Resizable.js
@@ -17,6 +17,7 @@ type DragCallbackData = {
   deltaX: number, deltaY: number,
   lastX: number, lastY: number
 };
+type Direction = 'ltr' | 'rtl';
 export type ResizeCallbackData = {
   node: HTMLElement,
   size: {width: number, height: number}
@@ -34,7 +35,8 @@ export type Props = {
   onResizeStop?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
-  draggableOpts?: ?Object
+  draggableOpts?: ?Object,
+  direction?: ?Direction
 };
 
 export default class Resizable extends React.Component<Props, State> {
@@ -77,7 +79,10 @@ export default class Resizable extends React.Component<Props, State> {
     onResize: PropTypes.func,
 
     // These will be passed wholesale to react-draggable's DraggableCore
-    draggableOpts: PropTypes.object
+    draggableOpts: PropTypes.object,
+
+    // To support RTL resizing
+    direction: PropTypes.String,
   };
 
   static defaultProps =  {
@@ -85,7 +90,8 @@ export default class Resizable extends React.Component<Props, State> {
     lockAspectRatio: false,
     axis: 'both',
     minConstraints: [20, 20],
-    maxConstraints: [Infinity, Infinity]
+    maxConstraints: [Infinity, Infinity],
+    direction: 'ltr',
   };
 
   state: State = {
@@ -165,7 +171,10 @@ export default class Resizable extends React.Component<Props, State> {
       const canDragY = this.props.axis === 'both' || this.props.axis === 'y';
 
       // Update w/h
-      let width = this.state.width + (canDragX ? deltaX : 0);
+      let width = this.props.direction === 'ltr'
+        ? this.state.width + (canDragX ? deltaX : 0)
+        : this.state.width - (canDragX ? deltaX : 0);
+
       let height = this.state.height + (canDragY ? deltaY : 0);
 
       // Early return if no change
@@ -202,7 +211,7 @@ export default class Resizable extends React.Component<Props, State> {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
-        onResizeStop, onResizeStart, ...p} = this.props;
+        onResizeStop, onResizeStart, direction, ...p} = this.props;
 
     const className = p.className ?
       `${p.className} react-resizable`:
@@ -224,7 +233,7 @@ export default class Resizable extends React.Component<Props, State> {
           onStart={this.resizeHandler('onResizeStart')}
           onDrag={this.resizeHandler('onResize')}
           >
-          <span className="react-resizable-handle" />
+          <span className={`react-resizable-handle ${direction}`} />
         </DraggableCore>
       ]
     });

From 437ce6105d2bdae3a7ef9ae9c2bbc358567c63fd Mon Sep 17 00:00:00 2001
From: Roshdy Kamel <roshdy89@gmail.com>
Date: Thu, 7 Feb 2019 16:12:10 +0300
Subject: [PATCH 2/2] Add RTL Support

Set background image & positioning based on direction ["ltr"/"rtl"]
---
 css/styles.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index ae64b220..b1b694b6 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -6,12 +6,20 @@
   width: 20px;
   height: 20px;
   bottom: 0;
-  right: 0;
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
-  background-position: bottom right;
   padding: 0 3px 3px 0;
   background-repeat: no-repeat;
   background-origin: content-box;
   box-sizing: border-box;
+}
+.react-resizable-handle.ltr{
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  background-position: bottom right;
   cursor: se-resize;
+  right: 0;
+}
+.react-resizable-handle.rtl{
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiA8Zz4gIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4gIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPiA8L2c+IDxnPiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPiAgPGcgaWQ9InN2Z18xIiBvcGFjaXR5PSIwLjMwMiI+ICAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoODkuOTM3MDcyNzUzOTA2MjUgMywzKSAiIGlkPSJzdmdfMiIgZmlsbD0iIzAwMDAwMCIgZD0ibTYsNmwtNiwwbDAsLTEuOGw0LDBsMC4yLDBsMCwtNC4ybDEuOCwwbDAsNmwwLDB6Ii8+ICA8L2c+IDwvZz48L3N2Zz4=');
+  background-position: bottom left;
+  cursor: sw-resize;
+  left: 0;
 }