feat(component): refactor to show drag icon

bigcommerce · Jan 5, 2021 · 155abb9 · 155abb9
1 parent 797bb63
commit 155abb9
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 47 deletions.
diff --git a/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx b/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx
@@ -22,6 +22,10 @@ export interface HeaderCheckboxCellProps {
   stickyHeader?: boolean;
 }
 
+export interface DragIconCellProps {
+  actionsRef: RefObject<HTMLDivElement>;
+}
+
 const InternalHeaderCell = <T extends TableItem>({
   children,
   column,
@@ -78,4 +82,10 @@ export const HeaderCheckboxCell: React.FC<HeaderCheckboxCellProps> = memo(({ sti
   return <StyledTableHeaderCheckbox stickyHeader={stickyHeader} stickyHeight={actionsSize.height} />;
 });
 
+export const DragIconHeaderCell: React.FC<DragIconCellProps> = memo(({ actionsRef }) => {
+  const actionsSize = useComponentSize(actionsRef);
+
+  return <StyledTableHeaderCell stickyHeight={actionsSize.height} />;
+});
+
 export const HeaderCell = typedMemo(InternalHeaderCell);
diff --git a/packages/big-design/src/components/Table/Row/Row.tsx b/packages/big-design/src/components/Table/Row/Row.tsx
@@ -1,3 +1,4 @@
+import { DragIndicatorIcon } from '@bigcommerce/big-design-icons';
 import React, { forwardRef, TableHTMLAttributes } from 'react';
 
 import { typedMemo } from '../../../utils';
@@ -13,6 +14,7 @@ export interface RowProps<T> extends TableHTMLAttributes<HTMLTableRowElement> {
   isSelectable?: boolean;
   item: T;
   columns: Array<TableColumn<T>>;
+  showDragIcon?: boolean;
   onItemSelect?(item: T): void;
 }
 
@@ -27,6 +29,7 @@ const InternalRow = <T extends TableItem>({
   isSelectable = false,
   isSelected = false,
   item,
+  showDragIcon = false,
   onItemSelect,
   ...rest
 }: RowProps<T> & PrivateProps) => {
@@ -40,6 +43,11 @@ const InternalRow = <T extends TableItem>({
 
   return (
     <StyledTableRow isSelected={isSelected} ref={forwardedRef} isDragging={isDragging} {...rest}>
+      {showDragIcon && (
+        <DataCell>
+          <DragIndicatorIcon />
+        </DataCell>
+      )}
       {isSelectable && (
         <DataCell key="data-checkbox" isCheckbox={true}>
           <Checkbox checked={isSelected} hiddenLabel label={label} onChange={onChange} />

diff --git a/packages/big-design/src/components/Table/Table.tsx b/packages/big-design/src/components/Table/Table.tsx
@@ -9,7 +9,7 @@ import { Actions } from './Actions';
 import { Body } from './Body';
 import { Head } from './Head';
 import { HeaderCell } from './HeaderCell';
-import { HeaderCheckboxCell } from './HeaderCell/HeaderCell';
+import { DragIconHeaderCell, HeaderCheckboxCell } from './HeaderCell/HeaderCell';
 import { Row } from './Row';
 import { StyledTable, StyledTableFigure } from './styled';
 import { TableColumn, TableItem, TableProps } from './types';
@@ -19,13 +19,13 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
     className,
     columns,
     actions,
-    dragAndDrop,
     emptyComponent,
     headerless = false,
     id,
     itemName,
     items,
     keyField = 'id',
+    onRowDrop,
     pagination,
     selectable,
     sortable,
@@ -92,9 +92,11 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
         return;
       }
 
-      dragAndDrop && dragAndDrop.onDragEnd(source.index, destination.index);
+      if (typeof onRowDrop === 'function') {
+        onRowDrop(source.index, destination.index);
+      }
     },
-    [dragAndDrop],
+    [onRowDrop],
   );
 
   const shouldRenderActions = () => {
@@ -112,6 +114,7 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
   const renderHeaders = () => (
     <Head hidden={headerless}>
       <tr>
+        {typeof onRowDrop === 'function' && <DragIconHeaderCell actionsRef={actionsRef} />}
         {isSelectable && <HeaderCheckboxCell stickyHeader={stickyHeader} actionsRef={actionsRef} />}
 
         {columns.map((column, index) => {
@@ -138,37 +141,42 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
     </Head>
   );
 
+  const renderDroppableItems = () => (
+    <Droppable droppableId="bd-droppable">
+      {(provided) => (
+        <Body withFirstRowBorder={headerless} ref={provided.innerRef} {...provided.droppableProps}>
+          {items.map((item: T, index) => {
+            const key = getItemKey(item, index);
+            const isSelected = selectedItems.has(item);
+
+            return (
+              <Draggable key={key} draggableId={String(key)} index={index}>
+                {(provided, snapshot) => (
+                  <Row
+                    isDragging={snapshot.isDragging}
+                    {...provided.dragHandleProps}
+                    {...provided.draggableProps}
+                    ref={provided.innerRef}
+                    columns={columns}
+                    isSelectable={isSelectable}
+                    isSelected={isSelected}
+                    item={item}
+                    onItemSelect={onItemSelect}
+                    showDragIcon={true}
+                  />
+                )}
+              </Draggable>
+            );
+          })}
+          {provided.placeholder}
+        </Body>
+      )}
+    </Droppable>
+  );
+
   const renderItems = () =>
-    dragAndDrop ? (
-      <Droppable droppableId="priority-droppable">
-        {(provided) => (
-          <Body withFirstRowBorder={headerless} ref={provided.innerRef} {...provided.droppableProps}>
-            {items.map((item: T, index) => {
-              const key = getItemKey(item, index);
-              const isSelected = selectedItems.has(item);
-
-              return (
-                <Draggable key={key} draggableId={String(key)} index={index}>
-                  {(provided, snapshot) => (
-                    <Row
-                      isDragging={snapshot.isDragging}
-                      {...provided.dragHandleProps}
-                      {...provided.draggableProps}
-                      ref={provided.innerRef}
-                      columns={columns}
-                      isSelectable={isSelectable}
-                      isSelected={isSelected}
-                      item={item}
-                      onItemSelect={onItemSelect}
-                    />
-                  )}
-                </Draggable>
-              );
-            })}
-            {provided.placeholder}
-          </Body>
-        )}
-      </Droppable>
+    onRowDrop ? (
+      renderDroppableItems()
     ) : (
       <Body withFirstRowBorder={headerless}>
         {items.map((item: T, index) => {
@@ -197,6 +205,13 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
     return null;
   };
 
+  const renderWithDragDropContext = () => (
+    <DragDropContext onDragEnd={onDragEnd}>
+      {renderHeaders()}
+      {renderItems()}
+    </DragDropContext>
+  );
+
   return (
     <>
       {shouldRenderActions() && (
@@ -213,11 +228,8 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
         />
       )}
       <StyledTable {...rest} id={tableIdRef.current}>
-        {dragAndDrop ? (
-          <DragDropContext onDragEnd={onDragEnd}>
-            {renderHeaders()}
-            {renderItems()}
-          </DragDropContext>
+        {onRowDrop ? (
+          renderWithDragDropContext()
         ) : (
           <>
             {renderHeaders()}

diff --git a/packages/big-design/src/components/Table/types.ts b/packages/big-design/src/components/Table/types.ts
@@ -8,10 +8,6 @@ export interface TableSelectable<T> {
   onSelectionChange(selectedItems: T[]): void;
 }
 
-export interface TableDraggable {
-  onDragEnd(from: number, to: number): void;
-}
-
 export type TableSortDirection = 'ASC' | 'DESC';
 
 export interface TableSortable<T> {
@@ -42,12 +38,12 @@ export type TablePaginationProps = Omit<PaginationProps, keyof MarginProps>;
 export interface TableProps<T> extends React.TableHTMLAttributes<HTMLTableElement> {
   actions?: React.ReactNode;
   columns: Array<TableColumn<T>>;
-  dragAndDrop?: TableDraggable;
   emptyComponent?: React.ReactElement;
   headerless?: boolean;
   itemName?: string;
   items: T[];
   keyField?: string;
+  onRowDrop?(from: number, to: number): void;
   pagination?: TablePaginationProps;
   selectable?: TableSelectable<T>;
   sortable?: TableSortable<T>;

diff --git a/packages/docs/pages/Table/TablePage.tsx b/packages/docs/pages/Table/TablePage.tsx
@@ -273,9 +273,7 @@ const TablePage = () => {
               ]}
               items={items}
               itemName="Products"
-              dragAndDrop={{
-                onDragEnd,
-              }}
+              onRowDrop={onDragEnd}
             />
           );
         }}