Skip to content

Commit 0216710

Browse files
JarrodMFleschJarrodMFlesch
committed
code structure updates
1 parent 21b3d4e commit 0216710

File tree

15 files changed

+788
-788
lines changed

15 files changed

+788
-788
lines changed

‎packages/next/src/views/CollectionTreeView/buildView.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ import type {
44
ListQuery,
55
TreeViewClientProps,
66
} from 'payload'
7+
import type { TreeViewItemKey } from 'payload/shared'
78

89
import { DefaultCollectionTreeView, HydrateAuthProvider } from '@payloadcms/ui'
910
import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'
10-
import { getTreeViewResultsComponentAndData, upsertPreferences } from '@payloadcms/ui/rsc'
11+
import { getTreeViewResultsComponentAndData } from '@payloadcms/ui/rsc'
1112

1213
import { getPreferences } from '../../utilities/getPreferences.js'
1314

@@ -117,7 +118,9 @@ export const buildCollectionTreeView = async (
117118
disableBulkDelete,
118119
disableBulkEdit,
119120
enableRowSelections,
120-
expandedItemIDs: preferences?.value.expandedIDs || [],
121+
expandedItemKeys: (preferences?.value.expandedIDs || []).map<TreeViewItemKey>(
122+
(id) => `${collectionSlug}-${id}`,
123+
),
121124
items,
122125
parentFieldName: '_parentDoc',
123126
search,

‎packages/payload/src/admin/views/treeViewList.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { ServerProps } from '../../config/types.js'
22
import type { FolderBreadcrumb, FolderSortKeys } from '../../folders/types.js'
33
import type { SanitizedCollectionConfig } from '../../index.js'
4-
import type { TreeViewItem } from '../../treeView/types.js'
4+
import type { TreeViewItem, TreeViewItemKey } from '../../treeView/types.js'
55
export type TreeViewSlots = {
66
AfterTreeViewList?: React.ReactNode
77
AfterTreeViewListTable?: React.ReactNode
@@ -25,7 +25,7 @@ export type TreeViewClientProps = {
2525
disableBulkDelete?: boolean
2626
disableBulkEdit?: boolean
2727
enableRowSelections?: boolean
28-
expandedItemIDs?: (number | string)[]
28+
expandedItemKeys?: TreeViewItemKey[]
2929
items: TreeViewItem[]
3030
parentFieldName: string
3131
search?: string

‎packages/payload/src/treeView/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export type TreeViewItemKey = `${string}-${number | string}`
2323
export type TreeViewItem = {
2424
hasChildren?: boolean
2525
itemKey: TreeViewItemKey
26+
parentItemKey: TreeViewItemKey | undefined
2627
relationTo: CollectionSlug
2728
value: {
2829
createdAt?: string

‎packages/payload/src/treeView/utils/formatTreeViewDocumentItem.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ export function formatTreeViewDocumentItem({ relationTo, useAsTitle, value }: Ar
3939
return {
4040
hasChildren: true,
4141
itemKey: `${relationTo}-${value.id}`,
42+
parentItemKey:
43+
'parentID' in itemValue &&
44+
(typeof itemValue.parentID === 'string' || typeof itemValue.parentID === 'number')
45+
? `${relationTo}-${itemValue.parentID}`
46+
: undefined,
4247
relationTo,
4348
value: itemValue,
4449
}

‎packages/payload/src/treeView/utils/getTreeViewData.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ export const getTreeViewData = async ({
6060
value: doc,
6161
}),
6262
)
63-
console.log('docs', result)
6463

6564
// Identify parent IDs and potential leaf nodes
6665
const parentIDsInResult = new Set<number | string>()

‎packages/ui/src/elements/TreeView/NestedSectionsTable/Row/index.tsx‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22

3-
import type { SectionRow } from '../index.js'
3+
import type { ItemKey, SectionRow } from '../types.js'
44

55
import { ChevronIcon } from '../../../../icons/Chevron/index.js'
66
import { DragHandleIcon } from '../../../../icons/DragHandle/index.js'
@@ -41,21 +41,28 @@ interface DivTableRowProps {
4141
placement?: string
4242
targetItem: null | SectionRow
4343
}) => void
44-
onFocusChange?: (focusedIndex: number) => void
45-
onRowClick: ({ event, row }: { event: React.MouseEvent<HTMLElement>; row: SectionRow }) => void
44+
onFocusChange: (focusedIndex: number) => void
4645
onRowDrag: (params: { event: PointerEvent; item: null | SectionRow }) => void
47-
onRowKeyPress?: (params: { event: React.KeyboardEvent; row: SectionRow }) => void
46+
onRowKeyPress: (params: { event: React.KeyboardEvent; row: SectionRow }) => void
47+
onSelectionChange: (params: {
48+
itemKey: `${string}-${number | string}`
49+
options: {
50+
ctrlKey: boolean
51+
metaKey: boolean
52+
shiftKey: boolean
53+
}
54+
}) => void
4855
openItemIDs?: Set<number | string>
4956
rowItem: SectionRow
5057
segmentWidth: number
51-
selectedRowIDs: (number | string)[]
58+
selectedItemKeys: Set<ItemKey>
5259
startOffset: number
5360
targetItems: (null | SectionRow)[]
5461
targetParentID: null | number | string
55-
toggleRow: (docID: number | string) => void
62+
toggleRowExpand: (docID: number | string) => void
5663
}
5764

58-
export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
65+
export const Row: React.FC<DivTableRowProps> = ({
5966
absoluteRowIndex,
6067
columns,
6168
dropContextName,
@@ -73,17 +80,17 @@ export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
7380
loadingRowIDs,
7481
onDroppableHover,
7582
onFocusChange,
76-
onRowClick,
7783
onRowDrag,
7884
onRowKeyPress,
85+
onSelectionChange,
7986
openItemIDs,
8087
rowItem,
8188
segmentWidth,
82-
selectedRowIDs,
89+
selectedItemKeys,
8390
startOffset,
8491
targetItems,
8592
targetParentID,
86-
toggleRow,
93+
toggleRowExpand: toggleRow,
8794
}) => {
8895
const isOdd = absoluteRowIndex % 2 === 1
8996
const isFocused = focusedRowIndex !== undefined && focusedRowIndex === absoluteRowIndex
@@ -99,9 +106,13 @@ export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
99106
const { actionNames, dataAttributeName, handleClick } = useActionDelegation({
100107
actions: {
101108
selectRow: (event) => {
102-
onRowClick({
103-
event: event as React.MouseEvent<HTMLElement>,
104-
row: rowItem,
109+
onSelectionChange({
110+
itemKey: rowItem.rowID,
111+
options: {
112+
ctrlKey: event.ctrlKey || event.metaKey,
113+
metaKey: event.ctrlKey || event.metaKey,
114+
shiftKey: event.shiftKey,
115+
},
105116
})
106117
},
107118
toggleExpand: () => {
@@ -129,26 +140,16 @@ export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
129140
.join(' ')}
130141
onClick={handleClick}
131142
onFocus={(e) => {
132-
// Update focus index when row receives focus via tab, only if it's a valid focusable row
133-
// Only update if the row itself is being focused, not a child element (like the chevron button)
134-
if (
135-
focusedRowIndex !== absoluteRowIndex &&
136-
onFocusChange &&
137-
e.target === e.currentTarget
138-
) {
143+
if (e.target === e.currentTarget && focusedRowIndex !== absoluteRowIndex) {
139144
onFocusChange(absoluteRowIndex)
140145
}
141146
}}
142-
onKeyDown={
143-
onRowKeyPress
144-
? (event) => {
145-
onRowKeyPress({ event, row: rowItem })
146-
}
147-
: undefined
148-
}
147+
onKeyDown={(event) => {
148+
if (event.target === event.currentTarget) {
149+
onRowKeyPress({ event, row: rowItem })
150+
}
151+
}}
149152
onMouseDown={(e) => {
150-
// Prevent focus on mouse click to avoid the flash of focused state
151-
// Focus should only be triggered via keyboard navigation
152153
e.preventDefault()
153154
}}
154155
ref={rowRef}
@@ -158,24 +159,26 @@ export const NestedSectionsTableRow: React.FC<DivTableRowProps> = ({
158159
<div className={baseClass}>
159160
<div className={`${baseClass}__cell`} ref={firstCellRef}>
160161
<div className={`${baseClass}__actions`}>
161-
<DraggableWithClick
162-
attributes={{
163-
tabIndex: -1,
164-
}}
165-
className={`${baseClass}__drag-handler`}
166-
disabled={
167-
hasSelectedAncestor ||
168-
(selectedRowIDs.length > 1 && !selectedRowIDs.includes(rowItem.rowID))
169-
}
170-
onDrag={(event) => {
171-
onRowDrag({
172-
event,
173-
item: rowItem,
174-
})
175-
}}
176-
>
177-
<DragHandleIcon />
178-
</DraggableWithClick>
162+
{!hasSelectedAncestor ? (
163+
<DraggableWithClick
164+
attributes={{
165+
tabIndex: -1,
166+
}}
167+
className={`${baseClass}__drag-handler`}
168+
disabled={
169+
hasSelectedAncestor ||
170+
(selectedItemKeys.size > 1 && !selectedItemKeys.has(rowItem.rowID))
171+
}
172+
onDrag={(event) => {
173+
onRowDrag({
174+
event,
175+
item: rowItem,
176+
})
177+
}}
178+
>
179+
<DragHandleIcon />
180+
</DraggableWithClick>
181+
) : null}
179182
</div>
180183
</div>
181184

0 commit comments

Comments
 (0)