From 738a5a17ad023bebd91c19a5ada9f7c1912c1a76 Mon Sep 17 00:00:00 2001
From: Arko Gupta <arkgupta@microsoft.com>
Date: Tue, 27 Nov 2018 20:00:38 +0530
Subject: [PATCH 1/3] support for drag-drop in RTL

---
 .../DetailsList/DetailsHeader.base.tsx        | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 0a19277a4fb2bf..7a00f1da07f05a 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -415,6 +415,12 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
     }
   }
 
+  private _swap(array: any, index: number): void {
+    let temp = array[index].startX;
+    array[index].startX = array[index].endX;
+    array[index].endX = temp;
+  }
+
   private _updateDropHintElement(element: HTMLElement, property: string) {
     (element.childNodes[1] as HTMLElement).style.visibility = property;
     (element.childNodes[0] as HTMLElement).style.visibility = property;
@@ -430,6 +436,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
       columnReorderProps && columnReorderProps.frozenColumnCountFromStart ? columnReorderProps.frozenColumnCountFromStart : 0;
     const frozenColumnCountFromEnd =
       columnReorderProps && columnReorderProps.frozenColumnCountFromEnd ? columnReorderProps.frozenColumnCountFromEnd : 0;
+    const isRTL = getRTL();
 
     for (let i = frozenColumnCountFromStart!; i < columns.length - frozenColumnCountFromEnd! + 1; i++) {
       if (this._rootElement) {
@@ -457,6 +464,12 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                 endX: dropHintElement.offsetLeft,
                 dropHintElementRef: prevRef
               };
+              if (isRTL) {
+                this._swap(this._dropHintDetails, i); // swap startX and endX
+              }
+            }
+            if (isRTL) {
+              this._swap(this._dropHintDetails, i - 1); // swap startX and endX
             }
           }
         }
@@ -492,10 +505,13 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
       const currentIndex: number = frozenColumnCountFromStart!;
       const lastValidColumn = columns.length - frozenColumnCountFromEnd!;
       let indexToUpdate = -1;
-      if (eventXRelativePosition <= this._dropHintDetails[currentIndex].endX) {
-        indexToUpdate = currentIndex;
-      } else if (eventXRelativePosition >= this._dropHintDetails[lastValidColumn].startX) {
-        indexToUpdate = lastValidColumn;
+      const isRTL = getRTL();
+      const boundaryColumnLeft = isRTL ? lastValidColumn : currentIndex;
+      const boundaryColumnRight = isRTL ? currentIndex : lastValidColumn;
+      if (eventXRelativePosition <= this._dropHintDetails[boundaryColumnLeft].endX) {
+        indexToUpdate = boundaryColumnLeft;
+      } else if (eventXRelativePosition >= this._dropHintDetails[boundaryColumnRight].startX) {
+        indexToUpdate = boundaryColumnRight;
       } else if (this._isValidCurrentDropHintIndex()) {
         if (
           this._dropHintDetails[currentDropHintIndex! + 1] &&
@@ -511,6 +527,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
           indexToUpdate = currentDropHintIndex! - 1;
         }
       }
+
       if (indexToUpdate === -1) {
         let startIndex = frozenColumnCountFromStart!;
         let endIndex = lastValidColumn;
@@ -523,9 +540,17 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
             indexToUpdate = middleIndex;
             break;
           } else if (eventXRelativePosition < this._dropHintDetails[middleIndex].originX) {
-            endIndex = middleIndex;
+            if (isRTL) {
+              startIndex = middleIndex; // search towards right in case of RTL as drop hint indexes are in opposite order
+            } else {
+              endIndex = middleIndex;
+            }
           } else if (eventXRelativePosition > this._dropHintDetails[middleIndex].originX) {
-            startIndex = middleIndex;
+            if (isRTL) {
+              endIndex = middleIndex; // search towards left in case of RTL as drop hint indexes are in opposite order
+            } else {
+              startIndex = middleIndex;
+            }
           }
         }
       }

From 3576923a49880d3207625ddb7b7a4cebdfa48539 Mon Sep 17 00:00:00 2001
From: Arko Gupta <arkgupta@microsoft.com>
Date: Tue, 27 Nov 2018 20:16:31 +0530
Subject: [PATCH 2/3] adding change file

---
 .../arkgupta-dragDropRTLFix_2018-11-27-14-45.json     | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/arkgupta-dragDropRTLFix_2018-11-27-14-45.json

diff --git a/common/changes/office-ui-fabric-react/arkgupta-dragDropRTLFix_2018-11-27-14-45.json b/common/changes/office-ui-fabric-react/arkgupta-dragDropRTLFix_2018-11-27-14-45.json
new file mode 100644
index 00000000000000..d1e7372a2a56cf
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/arkgupta-dragDropRTLFix_2018-11-27-14-45.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: Adding support for column drag-drop in RTL",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "arkgupta@microsoft.com"
+}
\ No newline at end of file

From 432132e228b62211b23ddbb28e43860134e9d5be Mon Sep 17 00:00:00 2001
From: Arko Gupta <arkgupta@microsoft.com>
Date: Fri, 30 Nov 2018 12:48:09 +0530
Subject: [PATCH 3/3] refactoring

---
 .../DetailsList/DetailsHeader.base.tsx        | 75 +++++++++----------
 1 file changed, 34 insertions(+), 41 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 7a00f1da07f05a..3f1fb3ba69d455 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -415,12 +415,6 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
     }
   }
 
-  private _swap(array: any, index: number): void {
-    let temp = array[index].startX;
-    array[index].startX = array[index].endX;
-    array[index].endX = temp;
-  }
-
   private _updateDropHintElement(element: HTMLElement, property: string) {
     (element.childNodes[1] as HTMLElement).style.visibility = property;
     (element.childNodes[0] as HTMLElement).style.visibility = property;
@@ -436,7 +430,6 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
       columnReorderProps && columnReorderProps.frozenColumnCountFromStart ? columnReorderProps.frozenColumnCountFromStart : 0;
     const frozenColumnCountFromEnd =
       columnReorderProps && columnReorderProps.frozenColumnCountFromEnd ? columnReorderProps.frozenColumnCountFromEnd : 0;
-    const isRTL = getRTL();
 
     for (let i = frozenColumnCountFromStart!; i < columns.length - frozenColumnCountFromEnd! + 1; i++) {
       if (this._rootElement) {
@@ -464,12 +457,6 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                 endX: dropHintElement.offsetLeft,
                 dropHintElementRef: prevRef
               };
-              if (isRTL) {
-                this._swap(this._dropHintDetails, i); // swap startX and endX
-              }
-            }
-            if (isRTL) {
-              this._swap(this._dropHintDetails, i - 1); // swap startX and endX
             }
           }
         }
@@ -477,6 +464,16 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
     }
   };
 
+  private _liesBetween(target: number, left: number, right: number): boolean {
+    return getRTL() ? target <= left && target >= right : target >= left && target <= right;
+  }
+  private _isBefore(a: number, b: number): boolean {
+    return getRTL() ? a >= b : a <= b;
+  }
+  private _isAfter(a: number, b: number): boolean {
+    return getRTL() ? a <= b : a >= b;
+  }
+
   /**
    * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible
    *
@@ -489,8 +486,11 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
       const currentDropHintIndex = this._currentDropHintIndex!;
       if (this._isValidCurrentDropHintIndex()) {
         if (
-          eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex!].startX &&
-          eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex!].endX
+          this._liesBetween(
+            eventXRelativePosition,
+            this._dropHintDetails[currentDropHintIndex!].startX,
+            this._dropHintDetails[currentDropHintIndex!].endX
+          )
         ) {
           return;
         }
@@ -505,52 +505,45 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
       const currentIndex: number = frozenColumnCountFromStart!;
       const lastValidColumn = columns.length - frozenColumnCountFromEnd!;
       let indexToUpdate = -1;
-      const isRTL = getRTL();
-      const boundaryColumnLeft = isRTL ? lastValidColumn : currentIndex;
-      const boundaryColumnRight = isRTL ? currentIndex : lastValidColumn;
-      if (eventXRelativePosition <= this._dropHintDetails[boundaryColumnLeft].endX) {
-        indexToUpdate = boundaryColumnLeft;
-      } else if (eventXRelativePosition >= this._dropHintDetails[boundaryColumnRight].startX) {
-        indexToUpdate = boundaryColumnRight;
+      if (this._isBefore(eventXRelativePosition, this._dropHintDetails[currentIndex].endX)) {
+        indexToUpdate = currentIndex;
+      } else if (this._isAfter(eventXRelativePosition, this._dropHintDetails[lastValidColumn].startX)) {
+        indexToUpdate = lastValidColumn;
       } else if (this._isValidCurrentDropHintIndex()) {
         if (
           this._dropHintDetails[currentDropHintIndex! + 1] &&
-          eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex! + 1].startX &&
-          eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex! + 1].endX
+          this._liesBetween(
+            eventXRelativePosition,
+            this._dropHintDetails[currentDropHintIndex! + 1].startX,
+            this._dropHintDetails[currentDropHintIndex! + 1].endX
+          )
         ) {
           indexToUpdate = currentDropHintIndex! + 1;
         } else if (
           this._dropHintDetails[currentDropHintIndex! - 1] &&
-          eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex! - 1].startX &&
-          eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex! - 1].endX
+          this._liesBetween(
+            eventXRelativePosition,
+            this._dropHintDetails[currentDropHintIndex! - 1].startX,
+            this._dropHintDetails[currentDropHintIndex! - 1].endX
+          )
         ) {
           indexToUpdate = currentDropHintIndex! - 1;
         }
       }
-
       if (indexToUpdate === -1) {
         let startIndex = frozenColumnCountFromStart!;
         let endIndex = lastValidColumn;
         while (startIndex < endIndex) {
           const middleIndex = Math.ceil((endIndex + startIndex!) / 2);
           if (
-            eventXRelativePosition >= this._dropHintDetails[middleIndex].startX &&
-            eventXRelativePosition <= this._dropHintDetails[middleIndex].endX
+            this._liesBetween(eventXRelativePosition, this._dropHintDetails[middleIndex].startX, this._dropHintDetails[middleIndex].endX)
           ) {
             indexToUpdate = middleIndex;
             break;
-          } else if (eventXRelativePosition < this._dropHintDetails[middleIndex].originX) {
-            if (isRTL) {
-              startIndex = middleIndex; // search towards right in case of RTL as drop hint indexes are in opposite order
-            } else {
-              endIndex = middleIndex;
-            }
-          } else if (eventXRelativePosition > this._dropHintDetails[middleIndex].originX) {
-            if (isRTL) {
-              endIndex = middleIndex; // search towards left in case of RTL as drop hint indexes are in opposite order
-            } else {
-              startIndex = middleIndex;
-            }
+          } else if (this._isBefore(eventXRelativePosition, this._dropHintDetails[middleIndex].originX)) {
+            endIndex = middleIndex;
+          } else if (this._isAfter(eventXRelativePosition, this._dropHintDetails[middleIndex].originX)) {
+            startIndex = middleIndex;
           }
         }
       }