Example of changes required for table dragNdrop

chandlerprall · Apr 3, 2019 · 3b1ac3a · 3b1ac3a
1 parent d54ff39
commit 3b1ac3a
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 23 deletions.
diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js
@@ -7,6 +7,7 @@ import {
   EuiLink,
   EuiHealth,
 } from '../../../../../src/components';
+import { EuiDragDropContext } from '../../../../../src/components/drag_and_drop';
 
 /*
 Example user object:
@@ -105,11 +106,16 @@ export const Table = () => {
   };
 
   return (
-    <EuiBasicTable
-      items={items}
-      columns={columns}
-      rowProps={getRowProps}
-      cellProps={getCellProps}
-    />
+    <EuiDragDropContext onDragEnd={({ source, destination }) => console.log({ source, destination })}>
+      <EuiBasicTable
+        items={items}
+        columns={columns}
+        rowProps={getRowProps}
+        cellProps={getCellProps}
+        dragAndDrop={{
+          droppableId: 'BASIC_TABLE'
+        }}
+      />
+    </EuiDragDropContext>
   );
 };
diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
@@ -35,6 +35,7 @@ import { withRequiredProp } from '../../utils/prop_types/with_required_prop';
 import { EuiScreenReaderOnly, EuiKeyboardAccessible } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import makeId from '../form/form_row/make_id';
+import { EuiDroppable } from '../drag_and_drop';
 
 const dataTypesProfiles = {
   auto: {
@@ -164,6 +165,9 @@ const BasicTablePropTypes = {
   rowProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   selection: withRequiredProp(SelectionType, 'itemId', 'row selection uses the itemId prop to identify each row'),
   sorting: SortingType,
+  dragAndDrop: PropTypes.shape({
+    droppableId: PropTypes.string.isRequired,
+  }),
 };
 
 export function getItemId(item, itemId) {
@@ -324,6 +328,7 @@ export class EuiBasicTable extends Component {
     const {
       className,
       loading,
+      dragAndDrop, // eslint-disable-line no-unused-vars
       items, // eslint-disable-line no-unused-vars
       itemId, // eslint-disable-line no-unused-vars
       columns, // eslint-disable-line no-unused-vars
@@ -365,7 +370,7 @@ export class EuiBasicTable extends Component {
 
   renderTable() {
 
-    const { compressed, responsive } = this.props;
+    const { compressed, responsive, dragAndDrop } = this.props;
 
     const mobileHeader = responsive ? (
       <EuiTableHeaderMobile>
@@ -381,10 +386,19 @@ export class EuiBasicTable extends Component {
     const head = this.renderTableHead();
     const body = this.renderTableBody();
     const footer = this.renderTableFooter();
-    return (
-      <div
-        ref={element => { this.tableElement = element; }}
-      >
+
+    return dragAndDrop ? (
+      <EuiDroppable droppableId={dragAndDrop.droppableId}>
+        {mobileHeader}
+        <EuiTable responsive={responsive} compressed={compressed}>
+          {caption}
+          {head}
+          {body}
+          {footer}
+        </EuiTable>
+      </EuiDroppable>
+    ) : (
+      <div>
         {mobileHeader}
         <EuiTable responsive={responsive} compressed={compressed}>
           {caption}
@@ -669,7 +683,7 @@ export class EuiBasicTable extends Component {
   }
 
   renderItemRow(item, rowIndex) {
-    const { columns, selection, isSelectable, hasActions, itemIdToExpandedRowMap = {}, isExpandable } = this.props;
+    const { columns, selection, isSelectable, hasActions, itemIdToExpandedRowMap = {}, isExpandable, dragAndDrop } = this.props;
 
     const cells = [];
 
@@ -730,6 +744,8 @@ export class EuiBasicTable extends Component {
         isSelected={selected}
         hasActions={hasActions == null ? calculatedHasActions : hasActions}
         isExpandable={isExpandable}
+        rowIndex={rowIndex}
+        dragAndDrop={dragAndDrop}
         {...rowProps}
       >
         {cells}

diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx
@@ -5,6 +5,7 @@ import React, {
   ReactElement,
   cloneElement,
   useContext,
+  JSXElementConstructor,
 } from 'react';
 import { Draggable, DraggableProps } from 'react-beautiful-dnd';
 import classNames from 'classnames';
@@ -30,6 +31,7 @@ export interface EuiDraggableProps
   isRemovable?: boolean;
   spacing?: EuiDraggableSpacing;
   style?: CSSProperties;
+  as?: JSXElementConstructor<any>;
 }
 
 export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
@@ -42,6 +44,7 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
   className,
   spacing = 'none',
   style,
+  as: As = 'div',
   ...rest
 }) => {
   const { cloneItems } = useContext(EuiDroppableContext);
@@ -72,25 +75,27 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
             : (children as ReactElement); // as specified by `DraggableProps`
         return (
           <Fragment>
-            <div
+            <As
               {...provided.draggableProps}
               {...(!customDragHandle ? provided.dragHandleProps : {})}
               ref={provided.innerRef}
               data-test-subj="draggable"
               className={classes}
               style={{ ...style, ...provided.draggableProps.style }}>
-              {cloneElement(DraggableElement, {
-                className: classNames(
-                  DraggableElement.props.className,
-                  childClasses
-                ),
-              })}
-            </div>
+              {React.Children.map(DraggableElement, child =>
+                cloneElement(child, {
+                  className: classNames(
+                    child.props.className,
+                    childClasses
+                  ),
+                })
+              )}
+            </As>
             {cloneItems &&
               (snapshot.isDragging && (
-                <div className={classNames(classes, 'euiDraggable--clone')}>
+                <As className={classNames(classes, 'euiDraggable--clone')}>
                   {DraggableElement}
-                </div>
+                </As>
               ))}
           </Fragment>
         );

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -100,6 +100,10 @@
       background-color: $euiTableHoverSelectedColor;
     }
   }
+
+  &.euiDraggable--isDragging {
+    background-color: green;
+  }
 }
 
 .euiTableRowCell {

diff --git a/src/components/table/table_row.js b/src/components/table/table_row.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { EuiDraggable } from '../drag_and_drop';
 
 export const EuiTableRow = ({
   children,
@@ -11,6 +12,8 @@ export const EuiTableRow = ({
   isExpandedRow,
   isExpandable,
   onClick,
+  dragAndDrop,
+  rowIndex,
   ...rest
 }) => {
   const classes = classNames('euiTableRow', className, {
@@ -22,7 +25,18 @@ export const EuiTableRow = ({
     'euiTableRow-isClickable': onClick,
   });
 
-  return (
+  return dragAndDrop ? (
+    <EuiDraggable
+      as="tr"
+      draggableId={`${dragAndDrop.droppableId}-${rowIndex}`}
+      index={rowIndex}
+      className={classes}
+      onClick={onClick}
+      {...rest}
+    >
+      {children}
+    </EuiDraggable>
+  ) : (
     <tr
       className={classes}
       onClick={onClick}
@@ -56,4 +70,7 @@ EuiTableRow.propTypes = {
    * Indicates if the row will be the expanded row
    */
   isExpandedRow: PropTypes.bool,
+  dragAndDrop: PropTypes.shape({
+    droppableId: PropTypes.string.isRequired,
+  }),
 };