Column drag drop changes - Added 2 callback functions to notify the d…

…ragStart and dragEnd events (#5779)

* Adding callback functions for drag start and end events

* Adding changefile

* Resolving PR comments

* Keeping all existing callback functions

* removing extra code

common/changes/office-ui-fabric-react/laxmika-ColumnDragDropCallbacks_2018-08-02-15-03.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "' Added 2 callback functions for dragstart and drag end events to get the telemetry logs in ODSP-Next'",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx

@@ -32,6 +32,7 @@ export class DetailsColumnBase extends BaseComponent<IDetailsColumnProps> {
     this._onDragStart = this._onDragStart.bind(this);
     this._onDragEnd = this._onDragEnd.bind(this);
     this._onRootMouseDown = this._onRootMouseDown.bind(this);
+    this._updateHeaderDragInfo = this._updateHeaderDragInfo.bind(this);
   }
 
   public render(): JSX.Element {
@@ -265,19 +266,23 @@ export class DetailsColumnBase extends BaseComponent<IDetailsColumnProps> {
 
   private _onDragStart(item?: any, itemIndex?: number, selectedItems?: any[], event?: MouseEvent): void {
     const classNames = this._classNames;
-
-    if (itemIndex && this.props.setDraggedItemIndex) {
-      this.props.setDraggedItemIndex(itemIndex);
+    if (itemIndex) {
+      this._updateHeaderDragInfo(itemIndex);
       this._root.current.classList.add(classNames.borderWhileDragging);
     }
   }
 
   private _onDragEnd(item?: any, event?: MouseEvent): void {
     const classNames = this._classNames;
+    this._root.current.classList.remove(classNames.borderWhileDragging);
+  }
 
+  private _updateHeaderDragInfo(itemIndex: number, event?: MouseEvent) {
     if (this.props.setDraggedItemIndex) {
-      this.props.setDraggedItemIndex(-1);
-      this._root.current.classList.remove(classNames.borderWhileDragging);
+      this.props.setDraggedItemIndex(itemIndex);
+    }
+    if (this.props.updateDragInfo) {
+      this.props.updateDragInfo({ itemIndex }, event);
     }
   }
 

packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.types.ts

@@ -18,7 +18,9 @@ export interface IDetailsColumnProps extends React.Props<DetailsColumnBase> {
   onColumnContextMenu?: (column: IColumn, ev: React.MouseEvent<HTMLElement>) => void;
   dragDropHelper?: IDragDropHelper | null;
   isDraggable?: boolean;
+  // @deprecated, use updateDragInfo
   setDraggedItemIndex?: (itemIndex: number) => void;
+  updateDragInfo?: (props: { itemIndex: number }, event?: MouseEvent) => void;
   isDropped?: boolean;
   cellStyleProps?: ICellStyleProps;
 }

packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx

@@ -34,7 +34,7 @@ const _columns: IColumn[] = [
     isIconOnly: false
   }
 ];
-const _columnReorderOptions = {
+const _columnReorderProps = {
   frozenColumnCountFromStart: 1,
   handleColumnReorder: this._dummyFunction
 };
@@ -69,7 +69,7 @@ describe('DetailsHeader', () => {
         layoutMode={DetailsListLayoutMode.fixedColumns}
         columns={_columns}
         onColumnResized={onColumnResized}
-        columnReorderOptions={_columnReorderOptions}
+        columnReorderProps={_columnReorderProps}
       />
     );
 

packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts

@@ -6,7 +6,7 @@ import { IViewport } from '../../utilities/decorators/withViewport';
 import { ISelection, SelectionMode } from '../../utilities/selection/interfaces';
 import { ITheme, IStyle } from '../../Styling';
 import { DetailsHeaderBase } from './DetailsHeader.base';
-import { IColumn, DetailsListLayoutMode, IColumnReorderOptions } from './DetailsList.types';
+import { IColumn, DetailsListLayoutMode, IColumnReorderOptions, ColumnDragEndLocation } from './DetailsList.types';
 import { ICellStyleProps } from './DetailsRow.types';
 
 export interface IDetailsHeader {
@@ -85,7 +85,10 @@ export interface IDetailsHeaderProps extends React.Props<DetailsHeaderBase> {
   viewport?: IViewport;
 
   /** Column reordering options */
-  columnReorderOptions?: IColumnReorderOptions | null;
+  columnReorderOptions?: IColumnReorderOptions;
+
+  /** Column reordering options */
+  columnReorderProps?: IColumnReorderHeaderProps;
 
   /** Minimum pixels to be moved before dragging is registered */
   minimumPixelsForDrag?: number;
@@ -116,6 +119,14 @@ export interface IColumnResizeDetails {
   columnMinWidth: number;
 }
 
+export interface IColumnReorderHeaderProps extends IColumnReorderOptions {
+  /** Callback to notify the column dragEnd event to List
+   * Need this to check whether the dragEnd has happened on
+   * corresponding list or outside of the list
+   */
+  onColumnDragEnd?: (props: { dropLocation?: ColumnDragEndLocation }, event: MouseEvent) => void;
+}
+
 export interface IDropHintDetails {
   originX: number; // X index of dropHint Element relative to header
   startX: number; // start index of the range for the current drophint

packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx

@@ -20,10 +20,16 @@ import {
   IDetailsListProps,
   IDetailsListStyles,
   IDetailsListStyleProps,
-  IDetailsGroupRenderProps
+  IDetailsGroupRenderProps,
+  ColumnDragEndLocation
 } from '../DetailsList/DetailsList.types';
 import { DetailsHeader } from '../DetailsList/DetailsHeader';
-import { IDetailsHeader, SelectAllVisibility, IDetailsHeaderProps } from '../DetailsList/DetailsHeader.types';
+import {
+  IDetailsHeader,
+  SelectAllVisibility,
+  IDetailsHeaderProps,
+  IColumnReorderHeaderProps
+} from '../DetailsList/DetailsHeader.types';
 import { IDetailsFooterProps } from '../DetailsList/DetailsFooter.types';
 import { DetailsRowBase } from '../DetailsList/DetailsRow.base';
 import { DetailsRow } from '../DetailsList/DetailsRow';
@@ -114,6 +120,7 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
     this._onContentKeyDown = this._onContentKeyDown.bind(this);
     this._onRenderCell = this._onRenderCell.bind(this);
     this._onGroupExpandStateChanged = this._onGroupExpandStateChanged.bind(this);
+    this._onColumnDragEnd = this._onColumnDragEnd.bind(this);
 
     this.state = {
       focusedItemIndex: -1,
@@ -305,7 +312,6 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
       onShouldVirtualize,
       enableShimmer,
       viewport,
-      columnReorderOptions,
       minimumPixelsForDrag,
       getGroupHeight,
       styles,
@@ -345,6 +351,7 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
     } = this.props;
 
     const detailsFooterProps = this._getDetailsFooterProps();
+    const columnReorderProps = this._getColumnReorderProps();
 
     const rowCount = (isHeaderVisible ? 1 : 0) + GetGroupCount(groups) + (items ? items.length : 0);
 
@@ -401,7 +408,7 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
                   selectAllVisibility: selectAllVisibility,
                   collapseAllVisibility: groupProps && groupProps.collapseAllVisibility,
                   viewport: viewport,
-                  columnReorderOptions: columnReorderOptions,
+                  columnReorderProps: columnReorderProps,
                   minimumPixelsForDrag: minimumPixelsForDrag,
                   cellStyleProps: DEFAULT_CELL_STYLE_PROPS
                 },
@@ -649,6 +656,27 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
     }
   }
 
+  private _onColumnDragEnd(props: { dropLocation?: ColumnDragEndLocation }, event: MouseEvent): void {
+    const { columnReorderOptions } = this.props;
+    let finalDropLocation: ColumnDragEndLocation = ColumnDragEndLocation.outside;
+    if (columnReorderOptions && columnReorderOptions.onDragEnd) {
+      if (props.dropLocation && props.dropLocation !== ColumnDragEndLocation.header) {
+        finalDropLocation = props.dropLocation;
+      } else if (this._root.current) {
+        const clientRect = this._root.current.getBoundingClientRect();
+        if (
+          event.clientX > clientRect.left &&
+          event.clientX < clientRect.right &&
+          event.clientY > clientRect.top &&
+          event.clientY < clientRect.bottom
+        ) {
+          finalDropLocation = ColumnDragEndLocation.surface;
+        }
+      }
+      columnReorderOptions.onDragEnd(finalDropLocation);
+    }
+  }
+
   private _forceListUpdates(): void {
     this._pendingForceUpdate = false;
 
@@ -957,6 +985,17 @@ export class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsLi
       ...detailsFooterProps
     };
   }
+
+  private _getColumnReorderProps(): IColumnReorderHeaderProps | undefined {
+    const { columnReorderOptions } = this.props;
+    if (columnReorderOptions) {
+      return {
+        ...columnReorderOptions,
+        onColumnDragEnd: this._onColumnDragEnd
+      };
+    }
+  }
+
   private _getGroupProps(detailsGroupProps: IDetailsGroupRenderProps): IGroupRenderProps {
     const {
       onRenderFooter: onRenderDetailsGroupFooter,

packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts

@@ -495,11 +495,64 @@ export interface IColumnReorderOptions {
    */
   frozenColumnCountFromEnd?: number;
 
+  /**
+   * Callback to handle the column dragstart
+   * draggedStarted indicates that the column drag has been started on DetailsHeader
+   */
+  onColumnDragStart?: (dragStarted: boolean) => void;
+
+  /**
+   * Callback to handle the column reorder
+   * draggedIndex is the source column index, that need to be placed in targetIndex
+   * Use oncolumnDrop instead of this
+   * @deprecated
+   */
+  handleColumnReorder?: (draggedIndex: number, targetIndex: number) => void;
+
   /**
    * Callback to handle the column reorder
    * draggedIndex is the source column index, that need to be placed in targetIndex
    */
-  handleColumnReorder: (draggedIndex: number, targetIndex: number) => void;
+  onColumnDrop?: (dragDropDetails: IColumnDragDropDetails) => void;
+
+  /**
+   * Callback to handle the column reorder
+   */
+  onDragEnd?: (columnDropLocationDetails: ColumnDragEndLocation) => void;
+}
+
+export interface IColumnDragDropDetails {
+  /**
+   * Specifies the source column index
+   * @default -1
+   */
+  draggedIndex: number;
+
+  /**
+   * Specifies the target column index
+   * @default -1
+   */
+  targetIndex: number;
+}
+
+/**
+ * Enum to describe where the column has been dropped, after starting the drag
+ */
+export enum ColumnDragEndLocation {
+  /**
+   * Drag ended outside of current list
+   */
+  outside = 0,
+
+  /**
+   * Drag ended on current List
+   */
+  surface = 1,
+
+  /**
+   * Drag ended on Header
+   */
+  header = 2
 }
 
 export enum DetailsListLayoutMode {