simplify
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
import { useCallback, useEffect, useRef } from 'react';
|
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||||
import type { DragEvent } from 'react';
|
import type { DragEvent } from 'react';
|
||||||
import { isPlainObject } from '../../utils/typeGuards';
|
|
||||||
|
|
||||||
type Identifier = string | number;
|
type Identifier = string | number;
|
||||||
type FolderIdentifier = Identifier | 'root';
|
type FolderIdentifier = string | 'root';
|
||||||
|
type FolderInput = FolderIdentifier | number;
|
||||||
|
|
||||||
interface DocumentLike {
|
interface DocumentLike {
|
||||||
id?: Identifier | null;
|
id?: Identifier | null;
|
||||||
@@ -24,7 +24,7 @@ type HandleEntrySelectionFn = (
|
|||||||
interface UseDocumentDragHandlersOptions {
|
interface UseDocumentDragHandlersOptions {
|
||||||
selectedEntries: string[];
|
selectedEntries: string[];
|
||||||
selectedDocumentIds: Identifier[];
|
selectedDocumentIds: Identifier[];
|
||||||
selectedFolderIds: FolderIdentifier[];
|
selectedFolderIds: FolderInput[];
|
||||||
applySelection: ApplySelectionFn;
|
applySelection: ApplySelectionFn;
|
||||||
handleEntrySelection: HandleEntrySelectionFn;
|
handleEntrySelection: HandleEntrySelectionFn;
|
||||||
documentLookup: Map<Identifier, DocumentLike>;
|
documentLookup: Map<Identifier, DocumentLike>;
|
||||||
@@ -49,6 +49,10 @@ const useDocumentDragHandlers = ({
|
|||||||
documentsViewMode,
|
documentsViewMode,
|
||||||
}: UseDocumentDragHandlersOptions) => {
|
}: UseDocumentDragHandlersOptions) => {
|
||||||
const dragPreviewRef = useRef<HTMLDivElement | null>(null);
|
const dragPreviewRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const normalizedFolderIds = useMemo(
|
||||||
|
() => selectedFolderIds.map((id) => (id === 'root' ? 'root' : String(id))) as FolderIdentifier[],
|
||||||
|
[selectedFolderIds],
|
||||||
|
);
|
||||||
|
|
||||||
const destroyDragPreview = useCallback(() => {
|
const destroyDragPreview = useCallback(() => {
|
||||||
const node = dragPreviewRef.current;
|
const node = dragPreviewRef.current;
|
||||||
@@ -61,7 +65,7 @@ const useDocumentDragHandlers = ({
|
|||||||
useEffect(() => destroyDragPreview, [destroyDragPreview]);
|
useEffect(() => destroyDragPreview, [destroyDragPreview]);
|
||||||
|
|
||||||
const createDragPreview = useCallback(
|
const createDragPreview = useCallback(
|
||||||
({ documents = [], folders = [] }: { documents?: DocumentLike[]; folders?: Array<FolderIdentifier | Identifier> } = {}) => {
|
({ documents = [], folders = [] }: { documents?: DocumentLike[]; folders?: FolderIdentifier[] } = {}) => {
|
||||||
destroyDragPreview();
|
destroyDragPreview();
|
||||||
|
|
||||||
const docEntries = (documents || []).filter(Boolean);
|
const docEntries = (documents || []).filter(Boolean);
|
||||||
@@ -145,17 +149,7 @@ const useDocumentDragHandlers = ({
|
|||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const payload = item.payload;
|
const payload = item.payload;
|
||||||
const folderId = (() => {
|
const folderId = payload as FolderIdentifier;
|
||||||
if (isPlainObject(payload) && 'id' in payload) {
|
|
||||||
return (payload as { id?: FolderIdentifier }).id ?? null;
|
|
||||||
}
|
|
||||||
const maybeTrim = (payload as { trim?: () => string })?.trim;
|
|
||||||
if (typeof maybeTrim === 'function') {
|
|
||||||
const nextValue = maybeTrim.call(payload);
|
|
||||||
return nextValue || null;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
})();
|
|
||||||
const rowEl = folderId
|
const rowEl = folderId
|
||||||
? (document.getElementById(`folder-row-${folderId}`)
|
? (document.getElementById(`folder-row-${folderId}`)
|
||||||
|| document.getElementById(`folder-card-${folderId}`))
|
|| document.getElementById(`folder-card-${folderId}`))
|
||||||
@@ -300,28 +294,29 @@ const useDocumentDragHandlers = ({
|
|||||||
);
|
);
|
||||||
|
|
||||||
const handleFolderDragStart = useCallback(
|
const handleFolderDragStart = useCallback(
|
||||||
(event: DragEvent<HTMLElement>, folderId: FolderIdentifier) => {
|
(event: DragEvent<HTMLElement>, folderId: FolderInput) => {
|
||||||
if (folderId === 'root') {
|
const normalizedFolderId: FolderIdentifier = folderId === 'root' ? 'root' : String(folderId);
|
||||||
|
if (normalizedFolderId === 'root') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
const folderKey = resolveFolderRowKey(folderId);
|
const folderKey = resolveFolderRowKey(normalizedFolderId);
|
||||||
const isAlreadySelected = folderKey ? selectedEntries.includes(folderKey) : false;
|
const isAlreadySelected = folderKey ? selectedEntries.includes(folderKey) : false;
|
||||||
|
|
||||||
let effectiveFolderSelection: FolderIdentifier[] = selectedFolderIds;
|
let effectiveFolderSelection: FolderIdentifier[] = normalizedFolderIds;
|
||||||
let effectiveDocumentSelection: Identifier[] = selectedDocumentIds;
|
let effectiveDocumentSelection: Identifier[] = selectedDocumentIds;
|
||||||
|
|
||||||
if (!isAlreadySelected && folderKey) {
|
if (!isAlreadySelected && folderKey) {
|
||||||
effectiveFolderSelection = [folderId];
|
effectiveFolderSelection = [normalizedFolderId];
|
||||||
effectiveDocumentSelection = [];
|
effectiveDocumentSelection = [];
|
||||||
handleEntrySelection(folderKey, { preventDefault: () => {} });
|
handleEntrySelection(folderKey, { preventDefault: () => {} });
|
||||||
}
|
}
|
||||||
|
|
||||||
const uniqueFolders = effectiveFolderSelection.length
|
const uniqueFolders = effectiveFolderSelection.length
|
||||||
? Array.from(new Set(effectiveFolderSelection.filter(Boolean)))
|
? Array.from(new Set(effectiveFolderSelection.filter(Boolean)))
|
||||||
: [folderId];
|
: [normalizedFolderId];
|
||||||
|
|
||||||
setDraggedFolderId(folderId);
|
setDraggedFolderId(normalizedFolderId);
|
||||||
if (effectiveDocumentSelection.length) {
|
if (effectiveDocumentSelection.length) {
|
||||||
setDraggedDocumentIds(effectiveDocumentSelection);
|
setDraggedDocumentIds(effectiveDocumentSelection);
|
||||||
}
|
}
|
||||||
@@ -360,7 +355,7 @@ const useDocumentDragHandlers = ({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
selectedFolderIds,
|
normalizedFolderIds,
|
||||||
selectedEntries,
|
selectedEntries,
|
||||||
selectedDocumentIds,
|
selectedDocumentIds,
|
||||||
handleEntrySelection,
|
handleEntrySelection,
|
||||||
|
|||||||
Reference in New Issue
Block a user