vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 21:10:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add drag state to item table

Browse Source
This commit is contained in:
jeffvli
2025-11-09 01:03:25 -08:00
parent ad409fecfa
commit d7e2ec0860
5 changed files with 152 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/item-table-list-column.module.css
+4
View File
@@ -115,6 +115,10 @@
}
}
.container.data-row.dragging {
opacity: 0.5;
}
.container.data-row > * {
position: relative;
z-index: 2;
src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+112 -2
View File
@@ -1,3 +1,4 @@
import { useMergedRef } from '@mantine/hooks';
import clsx from 'clsx';
import React, { CSSProperties, ReactNode, useEffect, useRef } from 'react';
import { CellComponentProps } from 'react-window-v2';
@@ -5,6 +6,7 @@ import { CellComponentProps } from 'react-window-v2';
import styles from './item-table-list-column.module.css';
import i18n from '/@/i18n/i18n';
import { getDraggedItems } from '/@/renderer/components/item-list/helpers/get-dragged-items';
import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
import { ArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/artists-column';
@@ -29,9 +31,11 @@ import { TitleColumn } from '/@/renderer/components/item-list/item-table-list/co
import { TitleCombinedColumn } from '/@/renderer/components/item-list/item-table-list/columns/title-combined-column';
import { TableItemProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
import { ItemControls, ItemListItem } from '/@/renderer/components/item-list/types';
import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
import { Icon } from '/@/shared/components/icon/icon';
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Text } from '/@/shared/components/text/text';
import { DragTarget, DragTargetMap } from '/@/shared/types/drag-and-drop';
import { TableColumn } from '/@/shared/types/types';
export interface ItemTableListColumn extends CellComponentProps<TableItemProps> {}
@@ -145,6 +149,58 @@ export const TableColumnTextContainer = (
? props.internalState.isSelected((item as any).id)
: false;
const shouldEnableDrag = !!props.enableDrag && isDataRow && !!item;
const { isDragging: isDraggingLocal, ref: dragRef } = useDragDrop<HTMLDivElement>({
drag: {
getId: () => {
if (!item || !isDataRow) {
return [];
}
const draggedItems = getDraggedItems(
item as any,
props.itemType,
props.internalState,
);
return draggedItems.map((draggedItem) => draggedItem.id);
},
getItem: () => {
if (!item || !isDataRow) {
return [];
}
return [item];
},
onDragStart: () => {
if (!item || !isDataRow || !props.internalState) {
return;
}
const draggedItems = getDraggedItems(
item as any,
props.itemType,
props.internalState,
);
props.internalState.setDragging(draggedItems);
},
onDrop: () => {
if (props.internalState) {
props.internalState.setDragging([]);
}
},
target: DragTargetMap[props.itemType] || DragTarget.GENERIC,
},
isEnabled: shouldEnableDrag,
});
const isDragging =
item && typeof item === 'object' && 'id' in item && props.internalState
? props.internalState.isDragging((item as any).id)
: isDraggingLocal;
const mergedRef = useMergedRef(containerRef, shouldEnableDrag ? dragRef : null);
useEffect(() => {
if (!isDataRow || !containerRef.current) return;
@@ -203,6 +259,7 @@ export const TableColumnTextContainer = (
[styles.center]: props.columns[props.columnIndex].align === 'center',
[styles.compact]: props.size === 'compact',
[styles.dataRow]: isDataRow,
[styles.dragging]: isDataRow && isDragging,
[styles.large]: props.size === 'large',
[styles.left]: props.columns[props.columnIndex].align === 'start',
[styles.paddingLg]: props.cellPadding === 'lg',
@@ -219,7 +276,7 @@ export const TableColumnTextContainer = (
})}
data-row-index={isDataRow ? props.rowIndex : undefined}
onClick={handleCellClick}
ref={containerRef}
ref={mergedRef}
style={props.style}
>
<Text
@@ -254,6 +311,58 @@ export const TableColumnContainer = (
? props.internalState.isSelected((item as any).id)
: false;
const shouldEnableDrag = !!props.enableDrag && isDataRow && !!item;
const { isDragging: isDraggingLocal, ref: dragRef } = useDragDrop<HTMLDivElement>({
drag: {
getId: () => {
if (!item || !isDataRow) {
return [];
}
const draggedItems = getDraggedItems(
item as any,
props.itemType,
props.internalState,
);
return draggedItems.map((draggedItem) => draggedItem.id);
},
getItem: () => {
if (!item || !isDataRow) {
return [];
}
return [item];
},
onDragStart: () => {
if (!item || !isDataRow || !props.internalState) {
return;
}
const draggedItems = getDraggedItems(
item as any,
props.itemType,
props.internalState,
);
props.internalState.setDragging(draggedItems);
},
onDrop: () => {
if (props.internalState) {
props.internalState.setDragging([]);
}
},
target: DragTargetMap[props.itemType] || DragTarget.GENERIC,
},
isEnabled: shouldEnableDrag,
});
const isDragging =
item && typeof item === 'object' && 'id' in item && props.internalState
? props.internalState.isDragging((item as any).id)
: isDraggingLocal;
const mergedRef = useMergedRef(containerRef, shouldEnableDrag ? dragRef : null);
useEffect(() => {
if (!isDataRow || !containerRef.current) return;
@@ -312,6 +421,7 @@ export const TableColumnContainer = (
[styles.center]: props.columns[props.columnIndex].align === 'center',
[styles.compact]: props.size === 'compact',
[styles.dataRow]: isDataRow,
[styles.dragging]: isDataRow && isDragging,
[styles.large]: props.size === 'large',
[styles.left]: props.columns[props.columnIndex].align === 'start',
[styles.paddingLg]: props.cellPadding === 'lg',
@@ -328,7 +438,7 @@ export const TableColumnContainer = (
})}
data-row-index={isDataRow ? props.rowIndex : undefined}
onClick={handleCellClick}
ref={containerRef}
ref={mergedRef}
style={{ ...props.containerStyle, ...props.style }}
>
{props.children}
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+20 -2
View File
@@ -1,5 +1,6 @@
// Component adapted from https://github.com/bvaughn/react-window/issues/826
import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
import { useMergedRef } from '@mantine/hooks';
import clsx from 'clsx';
import debounce from 'lodash/debounce';
@@ -23,8 +24,8 @@ import { ExpandedListContainer } from '/@/renderer/components/item-list/expanded
import { ExpandedListItem } from '/@/renderer/components/item-list/expanded-list-item';
import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
import {
ItemListStateItem,
ItemListStateActions,
ItemListStateItem,
useItemListState,
} from '/@/renderer/components/item-list/helpers/item-list-state';
import { parseTableColumns } from '/@/renderer/components/item-list/helpers/parse-table-columns';
@@ -42,6 +43,7 @@ interface VirtualizedTableGridProps {
controls: ItemControls;
data: unknown[];
enableAlternateRowColors: boolean;
enableDrag?: boolean;
enableExpansion: boolean;
enableHeader: boolean;
enableHorizontalBorders: boolean;
@@ -77,6 +79,7 @@ const VirtualizedTableGrid = React.memo(
controls,
data,
enableAlternateRowColors,
enableDrag,
enableExpansion,
enableHeader,
enableHorizontalBorders,
@@ -115,6 +118,7 @@ const VirtualizedTableGrid = React.memo(
controls,
data: enableHeader ? [null, ...data] : data,
enableAlternateRowColors,
enableDrag,
enableExpansion,
enableHeader,
enableHorizontalBorders,
@@ -134,6 +138,7 @@ const VirtualizedTableGrid = React.memo(
enableHeader,
data,
enableAlternateRowColors,
enableDrag,
enableExpansion,
enableHorizontalBorders,
enableRowHoverHighlight,
@@ -414,6 +419,7 @@ export interface TableItemProps {
controls: ItemControls;
data: ItemTableListProps['data'];
enableAlternateRowColors?: ItemTableListProps['enableAlternateRowColors'];
enableDrag?: ItemTableListProps['enableDrag'];
enableExpansion?: ItemTableListProps['enableExpansion'];
enableHeader?: ItemTableListProps['enableHeader'];
enableHorizontalBorders?: ItemTableListProps['enableHorizontalBorders'];
@@ -434,6 +440,7 @@ interface ItemTableListProps {
currentPage?: number;
data: unknown[];
enableAlternateRowColors?: boolean;
enableDrag?: boolean;
enableExpansion?: boolean;
enableHeader?: boolean;
enableHorizontalBorders?: boolean;
@@ -461,6 +468,7 @@ export const ItemTableList = ({
currentPage,
data,
enableAlternateRowColors = false,
enableDrag = true,
enableExpansion = true,
enableHeader = true,
enableHorizontalBorders = false,
@@ -677,10 +685,19 @@ export const ItemTableList = ({
elements: { viewport: root.firstElementChild as HTMLElement },
target: root,
});
if (enableDrag) {
autoScrollForElements({
canScroll: () => true,
element: root.firstElementChild as HTMLElement,
getAllowedAxis: () => 'vertical',
getConfiguration: () => ({ maxScrollSpeed: 'fast' }),
});
}
}
return undefined;
}, [initialize]);
}, [enableDrag, initialize]);
useEffect(() => {
const header = pinnedRowRef.current?.childNodes[0] as HTMLDivElement;
@@ -1266,6 +1283,7 @@ export const ItemTableList = ({
controls={controls}
data={data}
enableAlternateRowColors={enableAlternateRowColors}
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}