react-science 13.0.2 → 15.0.0

package/src/components/table/reorder_rows/draggable_row_tr.tsx

@@ -0,0 +1,166 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import type { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import {
+  draggable,
+  dropTargetForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { Colors } from '@blueprintjs/core';
+import type { Row, RowData } from '@tanstack/react-table';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { assert } from '../../utils/index.js';
+import type {
+  TableRowPreviewRenderer,
+  TableRowTrProps,
+} from '../table_utils.js';
+
+import type { DraggableRowContext } from './draggable_row_context.js';
+import { draggableRowContext } from './draggable_row_context.js';
+import { useDroppedItemContext } from './dropped_item_context.js';
+import type { DraggableItemState } from './item_data.js';
+import { getItemData, isItemData } from './item_data.js';
+import { useItemOrder } from './item_order_context.js';
+
+export interface TableDraggableRowTrProps<TData extends RowData> {
+  /**
+   * Props to be spread on the `tr` element.
+   */
+  trProps: TableRowTrProps;
+  /**
+   * Row data.
+   */
+  row: Row<TData>;
+  /**
+   * Preview of the row being dragged.
+   */
+  renderRowPreview: TableRowPreviewRenderer<TData>;
+}
+
+export function TableDraggableRowTr<TData extends RowData>(
+  props: TableDraggableRowTrProps<TData>,
+) {
+  const { trProps, row, renderRowPreview } = props;
+  const { instanceId } = useItemOrder();
+  const innerRef = useRef<HTMLTableRowElement>(null);
+  const [state, setState] = useState<DraggableItemState>(idleState);
+  const [droppedItemId, setDroppedItemId] = useDroppedItemContext();
+
+  const dragHandleRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    const trElement = innerRef.current;
+    assert(trElement, 'tr ref is null');
+    assert(dragHandleRef.current, 'dragHandleRef is null');
+
+    function canDrop({ source }: { source: ElementDragPayload }): boolean {
+      return (
+        isItemData(source.data) &&
+        source.data.instanceId === instanceId &&
+        source.data.id !== row.id
+      );
+    }
+
+    const data = getItemData(row as Row<unknown>, instanceId);
+
+    return combine(
+      draggable({
+        element: trElement,
+        dragHandle: dragHandleRef.current,
+        getInitialData: () => data,
+        onGenerateDragPreview({ nativeSetDragImage }) {
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            getOffset: pointerOutsideOfPreview({
+              x: '8px',
+              y: '8px',
+            }),
+            render({ container }) {
+              setState({ type: 'preview', container });
+
+              return () => setState(draggingState);
+            },
+          });
+        },
+        onDragStart() {
+          setState(draggingState);
+        },
+        onDrop() {
+          setState(idleState);
+        },
+      }),
+      dropTargetForElements({
+        element: trElement,
+        canDrop,
+        getIsSticky: () => false,
+        getData({ input }) {
+          return attachClosestEdge(data, {
+            element: trElement,
+            input,
+            allowedEdges: ['top', 'bottom'],
+          });
+        },
+        onDrag({ self }) {
+          const closestEdge = extractClosestEdge(self.data);
+          setState((current) => {
+            if (
+              current.type === 'is-over' &&
+              current.closestEdge === closestEdge
+            ) {
+              return current;
+            }
+            return { type: 'is-over', closestEdge };
+          });
+        },
+        onDragLeave() {
+          setState(idleState);
+        },
+        onDrop() {
+          setState(idleState);
+        },
+      }),
+    );
+  }, [row, instanceId]);
+
+  useEffect(() => {
+    if (droppedItemId === row.id && innerRef.current) {
+      triggerPostFlash(innerRef.current);
+      setDroppedItemId(undefined);
+    }
+  }, [droppedItemId, row.id, setDroppedItemId]);
+
+  const value = useMemo<DraggableRowContext>(() => {
+    return {
+      dragHandleRef,
+      state,
+    };
+  }, [state]);
+
+  return (
+    <>
+      <draggableRowContext.Provider value={value}>
+        <tr {...trProps} ref={innerRef} />
+      </draggableRowContext.Provider>
+      {state.type === 'preview' &&
+        createPortal(renderRowPreview(row), state.container)}
+    </>
+  );
+}
+
+const idleState: DraggableItemState = { type: 'idle' };
+const draggingState: DraggableItemState = { type: 'dragging' };
+
+function triggerPostFlash(element: HTMLElement) {
+  element.animate(
+    [{ backgroundColor: Colors.BLUE5, opacity: 0.5 }, { opacity: 0.5 }],
+    {
+      duration: 250,
+      iterations: 1,
+    },
+  );
+}

package/src/components/table/reorder_rows/drop_indicator.tsx

@@ -0,0 +1,28 @@
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import { Colors } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+
+export interface TableDropIndicatorProps {
+  /**
+   * The edge (top or bottom) on which to render the drop indicator
+   * with respect to the nearest relatively positioned element.
+   */
+  edge: Edge;
+}
+
+/**
+ * An absolutely positioned line which indicates where a dragged item will
+ * be dropped.
+ *
+ */
+export const TableDropIndicator = styled.div<TableDropIndicatorProps>`
+  position: absolute;
+  z-index: 1;
+  background-color: ${Colors.BLUE3};
+  height: 2px;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  ${(props) => props.edge === 'top' && 'top: -1px;'}
+  ${(props) => props.edge === 'bottom' && 'bottom: -1px;'}
+`;

package/src/components/table/reorder_rows/dropped_item_context.ts

@@ -0,0 +1,23 @@
+import type { useState } from 'react';
+import { createContext, useContext } from 'react';
+
+/**
+ * ID of the dropped item
+ */
+type DroppedItemContextValue = ReturnType<typeof useState<string>>;
+
+export const droppedItemContext = createContext<DroppedItemContextValue | null>(
+  null,
+);
+
+export function useDroppedItemContext() {
+  const context = useContext(droppedItemContext);
+
+  if (!context) {
+    throw new Error(
+      'useDroppedItemId must be used within a DroppedItemProvider',
+    );
+  }
+
+  return context;
+}

package/src/components/table/reorder_rows/dropped_item_provider.tsx

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+
+import { droppedItemContext } from './dropped_item_context.js';
+
+export function DroppedItemProvider(props: { children: ReactNode }) {
+  const value = useState<string>();
+  return (
+    <droppedItemContext.Provider value={value}>
+      {props.children}
+    </droppedItemContext.Provider>
+  );
+}

package/src/components/table/reorder_rows/index.ts

@@ -0,0 +1,4 @@
+export * from './table_drag_row_handler.js';
+export { useTableDraggableRowContext } from './draggable_row_context.js';
+export * from './draggable_row_tr.js';
+export * from './drop_indicator.js';

package/src/components/table/reorder_rows/item_data.ts

@@ -0,0 +1,33 @@
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import type { Row } from '@tanstack/react-table';
+
+const itemKey = Symbol('table-item-data');
+export interface ItemData {
+  [itemKey]: true;
+  instanceId: symbol;
+  id: string;
+  index: number;
+  [key: string]: unknown;
+  [key: symbol]: unknown;
+}
+
+export function getItemData(row: Row<unknown>, instanceId: symbol): ItemData {
+  return {
+    [itemKey]: true,
+    id: row.id,
+    index: row.index,
+    instanceId,
+  };
+}
+
+export function isItemData(
+  data: Record<string | symbol, unknown>,
+): data is ItemData {
+  return data[itemKey] === true;
+}
+
+export type DraggableItemState =
+  | { type: 'idle' }
+  | { type: 'preview'; container: HTMLElement }
+  | { type: 'dragging' }
+  | { type: 'is-over'; closestEdge: Edge | null };

package/src/components/table/reorder_rows/item_order_context.ts

@@ -0,0 +1,27 @@
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import type { Row } from '@tanstack/react-table';
+import { createContext, useContext } from 'react';
+
+export type ReorderItemCallback = (args: {
+  startIndex: number;
+  indexOfTarget: number;
+  closestEdgeOfTarget: Edge | null;
+}) => void;
+
+export interface ItemOrderContextValue<T = unknown> {
+  items: Array<Row<T>>;
+  reorderItem: ReorderItemCallback;
+  instanceId: symbol;
+}
+
+export const itemOrderContext = createContext<ItemOrderContextValue | null>(
+  null,
+);
+
+export function useItemOrder() {
+  const context = useContext(itemOrderContext);
+  if (!context) {
+    throw new Error('useItemOrder must be used within a ListContextProvider');
+  }
+  return context;
+}

package/src/components/table/reorder_rows/item_order_provider.tsx

@@ -0,0 +1,61 @@
+import { reorder } from '@atlaskit/pragmatic-drag-and-drop/reorder';
+import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';
+import type { Row } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+
+import type { ReorderItemCallback } from './item_order_context.js';
+import { itemOrderContext } from './item_order_context.js';
+
+interface ItemOrderProviderProps<T> {
+  items: Array<Row<T>>;
+  onOrderChanged: (items: Array<Row<T>>) => void;
+  children: ReactNode;
+}
+
+export function ItemOrderProvider<T = unknown>(
+  props: ItemOrderProviderProps<T>,
+) {
+  // Isolated instances of this component from one another
+  const [instanceId] = useState(() => Symbol('table-instance-id'));
+  const { items, onOrderChanged, children } = props;
+  const reorderItem = useCallback<ReorderItemCallback>(
+    ({ startIndex, indexOfTarget, closestEdgeOfTarget }) => {
+      const finishIndex = getReorderDestinationIndex({
+        startIndex,
+        closestEdgeOfTarget,
+        indexOfTarget,
+        axis: 'vertical',
+      });
+
+      if (finishIndex === startIndex) {
+        // If there is no change, we skip the update
+        return;
+      }
+
+      onOrderChanged(
+        reorder({
+          list: items,
+          startIndex,
+          finishIndex,
+        }),
+      );
+    },
+    [items, onOrderChanged],
+  );
+
+  const value = useMemo(
+    () => ({
+      reorderItem,
+      items: items as Array<Row<unknown>>,
+      instanceId,
+    }),
+    [reorderItem, items, instanceId],
+  );
+
+  return (
+    <itemOrderContext.Provider value={value}>
+      {children}
+    </itemOrderContext.Provider>
+  );
+}

package/src/components/table/reorder_rows/table_drag_row_handler.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@blueprintjs/core';
+
+import { useTableDraggableRowContext } from './draggable_row_context.js';
+import { TableDropIndicator } from './drop_indicator.js';
+
+export function TableDragRowHandler() {
+  const { dragHandleRef, state } = useTableDraggableRowContext();
+  return (
+    <>
+      <Button
+        icon="drag-handle-horizontal"
+        type="button"
+        ref={dragHandleRef}
+        variant="minimal"
+        style={{ cursor: 'grab' }}
+      />
+      {state?.type === 'is-over' && state.closestEdge && (
+        <TableDropIndicator edge={state.closestEdge} />
+      )}
+    </>
+  );
+}

package/src/components/table/reorder_rows/use_drop_monitor.ts

@@ -0,0 +1,74 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import type { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+
+import { assert } from '../../utils/index.js';
+
+import { useDroppedItemContext } from './dropped_item_context.js';
+import { isItemData } from './item_data.js';
+import { useItemOrder } from './item_order_context.js';
+
+/**
+ * Monitor drop events.
+ * Check if they can be acted on to reorder items.
+ * @param scrollElementRef The element to auto-scroll when dragging elements.
+ * @param enabled Enable or disable the monitoring.
+ */
+export function useDropMonitor(
+  scrollElementRef: RefObject<Element>,
+  enabled: boolean,
+) {
+  const { reorderItem, items } = useItemOrder();
+  const [, setDroppedItem] = useDroppedItemContext();
+  useEffect(() => {
+    const scrollContainer = scrollElementRef.current;
+    assert(scrollContainer, 'Missing scroll container ref');
+
+    if (enabled) {
+      function canRespond({ source }: { source: ElementDragPayload }) {
+        return isItemData(source.data);
+      }
+      return combine(
+        monitorForElements({
+          canMonitor: canRespond,
+          onDrop({ location, source }) {
+            const target = location.current.dropTargets[0];
+            if (!target) {
+              return;
+            }
+
+            const sourceData = source.data;
+            const targetData = target.data;
+            if (!isItemData(sourceData) || !isItemData(targetData)) {
+              return;
+            }
+
+            const indexOfTarget = items.findIndex(
+              (item) => item.id === targetData.id,
+            );
+            if (indexOfTarget === -1) {
+              return;
+            }
+
+            const closestEdgeOfTarget = extractClosestEdge(targetData);
+
+            reorderItem({
+              startIndex: sourceData.index,
+              indexOfTarget,
+              closestEdgeOfTarget,
+            });
+            setDroppedItem(sourceData.id);
+          },
+        }),
+        autoScrollForElements({
+          canScroll: canRespond,
+          element: scrollContainer,
+        }),
+      );
+    }
+  }, [items, reorderItem, scrollElementRef, setDroppedItem, enabled]);
+}

package/src/components/table/table_body.tsx

@@ -1,23 +1,37 @@
+import { Tag } from '@blueprintjs/core';
 import type { Row, RowData } from '@tanstack/react-table';
 import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { notUndefined } from '@tanstack/react-virtual';
 import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 
+import { TableDraggableRowTr } from './reorder_rows/index.js';
 import { TableRowCell } from './table_row_cell.js';
-import type { TableRowTrProps, TableRowTrRenderer } from './table_utils.js';
+import type {
+  GetTdProps,
+  TableRowPreviewRenderer,
+  TableRowTrProps,
+  TableRowTrRenderer,
+} from './table_utils.js';
 
 interface TableBodyProps<TData extends RowData> {
   rows: Array<Row<TData>>;
+  getTdProps?: GetTdProps<TData>;
   renderRowTr: TableRowTrRenderer<TData> | undefined;
   virtualizeRows?: boolean;
   virtualizer: Virtualizer<HTMLDivElement, Element>;
+  isReorderingEnabled: boolean;
+  renderRowPreview?: TableRowPreviewRenderer<TData>;
 }
 
 export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
   const {
     rows,
-    renderRowTr = defaultRenderRowTr as TableRowTrRenderer<TData>,
+    getTdProps,
+    renderRowTr = getDefaultRenderRowTr(
+      props.isReorderingEnabled,
+      props.renderRowPreview as TableRowPreviewRenderer<unknown>,
+    ) as TableRowTrRenderer<TData>,
     virtualizer,
     virtualizeRows,
   } = props;
@@ -43,7 +57,7 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
             key={virtualItem.index}
             row={rows[virtualItem.index]}
             renderRowTr={(row) => {
-              const trProps = getTrRenderProps<TData>(row, {
+              const trProps = getTrRenderProps<TData>(row, getTdProps, {
                 ...virtualItem,
                 virtualIndex: index,
               });
@@ -65,7 +79,9 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
         <TableRow
           key={row.id}
           row={row}
-          renderRowTr={(row) => renderRowTr(getTrRenderProps(row), row)}
+          renderRowTr={(row) =>
+            renderRowTr(getTrRenderProps(row, getTdProps), row)
+          }
         />
       ))}
     </tbody>
@@ -84,10 +100,6 @@ function TableRow<TData>({
   return <Fragment>{renderRowTr(row)}</Fragment>;
 }
 
-const defaultRenderRowTr: TableRowTrRenderer<unknown> = (trProps) => (
-  <tr {...trProps} />
-);
-
 type RenderRowVirtualItem = VirtualItem & {
   /**
    * The index of the element within the virtual list being currently rendered.
@@ -97,6 +109,7 @@ type RenderRowVirtualItem = VirtualItem & {
 
 function getTrRenderProps<TData extends RowData>(
   row: Row<TData>,
+  getTdProps: GetTdProps<TData> | undefined,
   virtualItem?: RenderRowVirtualItem,
 ): TableRowTrProps {
   const index = virtualItem ? virtualItem.index : row.index;
@@ -104,9 +117,45 @@ function getTrRenderProps<TData extends RowData>(
   return {
     // index is 0-indexed, so odd rows are even indices
     className: index % 2 === 0 ? 'odd' : '',
+    style: { position: 'relative' },
     children: row
       .getVisibleCells()
-      .map((cell) => <TableRowCell key={cell.id} cell={cell} />),
+      .map((cell) => (
+        <TableRowCell<TData>
+          key={cell.id}
+          cell={cell}
+          getTdProps={getTdProps}
+        />
+      )),
     'data-row-id': row.id,
   };
 }
+
+function getDefaultRenderRowTr(
+  isReorderingEnabled: boolean,
+  renderRowPreview: TableRowPreviewRenderer<unknown> | undefined,
+): TableRowTrRenderer<unknown> {
+  if (isReorderingEnabled) {
+    return getDefaultRenderDraggableRowTr(renderRowPreview);
+  } else {
+    return defaultRenderRowTr;
+  }
+}
+
+const defaultRenderRowTr: TableRowTrRenderer<unknown> = (trProps) => (
+  <tr {...trProps} />
+);
+
+function getDefaultRenderDraggableRowTr(
+  renderRowPreview: TableRowPreviewRenderer<unknown> | undefined,
+): TableRowTrRenderer<unknown> {
+  return (trProps, row) => (
+    <TableDraggableRowTr
+      trProps={trProps}
+      row={row}
+      renderRowPreview={
+        renderRowPreview ?? ((row) => <Tag>Row {row.index + 1}</Tag>)
+      }
+    />
+  );
+}