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 0000000000000..d1e7372a2a56c --- /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 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 0a19277a4fb2b..3f1fb3ba69d45 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 @@ -464,6 +464,16 @@ export class DetailsHeaderBase extends BaseComponent= 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 * @@ -476,8 +486,11 @@ export class DetailsHeaderBase extends BaseComponent= this._dropHintDetails[currentDropHintIndex!].startX && - eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex!].endX + this._liesBetween( + eventXRelativePosition, + this._dropHintDetails[currentDropHintIndex!].startX, + this._dropHintDetails[currentDropHintIndex!].endX + ) ) { return; } @@ -492,21 +505,27 @@ export class DetailsHeaderBase extends BaseComponent= this._dropHintDetails[lastValidColumn].startX) { + } 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; } @@ -517,14 +536,13 @@ export class DetailsHeaderBase extends BaseComponent= 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) { + } else if (this._isBefore(eventXRelativePosition, this._dropHintDetails[middleIndex].originX)) { endIndex = middleIndex; - } else if (eventXRelativePosition > this._dropHintDetails[middleIndex].originX) { + } else if (this._isAfter(eventXRelativePosition, this._dropHintDetails[middleIndex].originX)) { startIndex = middleIndex; } }