payload-nested-docs-page-tree 1.4.3 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,13 +2,6 @@
|
|
|
2
2
|
}
|
|
3
3
|
|
|
4
4
|
.root :global(.pages-hierarchy-table) {
|
|
5
|
-
--pages-tree-shade-rgb: 0 0 0;
|
|
6
|
-
--pages-tree-shade-1: rgb(var(--pages-tree-shade-rgb) / 0.03);
|
|
7
|
-
--pages-tree-shade-2: rgb(var(--pages-tree-shade-rgb) / 0.06);
|
|
8
|
-
--pages-tree-shade-3: rgb(var(--pages-tree-shade-rgb) / 0.08);
|
|
9
|
-
--pages-tree-shade-4: rgb(var(--pages-tree-shade-rgb) / 0.1);
|
|
10
|
-
--pages-tree-shade-5: rgb(var(--pages-tree-shade-rgb) / 0.14);
|
|
11
|
-
--pages-tree-shade-6: rgb(var(--pages-tree-shade-rgb) / 0.16);
|
|
12
5
|
overflow: visible;
|
|
13
6
|
position: relative;
|
|
14
7
|
}
|
|
@@ -72,6 +65,10 @@
|
|
|
72
65
|
border-radius: 0;
|
|
73
66
|
}
|
|
74
67
|
|
|
68
|
+
.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'] td) {
|
|
69
|
+
border-top: 1px solid var(--theme-elevation-100);
|
|
70
|
+
}
|
|
71
|
+
|
|
75
72
|
.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort']),
|
|
76
73
|
.root :global(.pages-hierarchy-table .table td.cell-_pageTreeOrderSort) {
|
|
77
74
|
inline-size: 2rem;
|
|
@@ -109,59 +106,6 @@
|
|
|
109
106
|
margin-inline-start: -2rem;
|
|
110
107
|
}
|
|
111
108
|
|
|
112
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])) {
|
|
113
|
-
background: var(--pages-tree-shade-1);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])) {
|
|
117
|
-
background: var(--pages-tree-shade-2);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])) {
|
|
121
|
-
background: var(--pages-tree-shade-3);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])) {
|
|
125
|
-
background: var(--pages-tree-shade-4);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])) {
|
|
129
|
-
background: var(--pages-tree-shade-5);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
|
|
133
|
-
background: var(--pages-tree-shade-6);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])),
|
|
137
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])),
|
|
138
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])),
|
|
139
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])),
|
|
140
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])),
|
|
141
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
|
|
142
|
-
border-radius: var(--style-radius-s);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:first-child),
|
|
146
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:first-child),
|
|
147
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:first-child),
|
|
148
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:first-child),
|
|
149
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:first-child),
|
|
150
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:first-child) {
|
|
151
|
-
border-bottom-left-radius: inherit;
|
|
152
|
-
border-top-left-radius: inherit;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:last-child),
|
|
156
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:last-child),
|
|
157
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:last-child),
|
|
158
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:last-child),
|
|
159
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:last-child),
|
|
160
|
-
.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:last-child) {
|
|
161
|
-
border-bottom-right-radius: inherit;
|
|
162
|
-
border-top-right-radius: inherit;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
109
|
.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
|
|
166
110
|
box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
|
|
167
111
|
}
|
|
@@ -182,10 +126,6 @@
|
|
|
182
126
|
box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
|
|
183
127
|
}
|
|
184
128
|
|
|
185
|
-
:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table) {
|
|
186
|
-
--pages-tree-shade-rgb: 255 255 255;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
129
|
:global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
|
|
190
130
|
background: rgb(232 236 241 / 0.72);
|
|
191
131
|
box-shadow: 0 0 0 1px rgb(232 236 241 / 0.22);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useDraggable } from '@dnd-kit/core';
|
|
4
|
-
import { ChevronIcon,
|
|
4
|
+
import { ChevronIcon, useListQuery } from '@payloadcms/ui';
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { usePageTree, usePageTreeRowDnd } from './PageTreeContext.js';
|
|
7
7
|
const HOME_PAGE_SLUG = 'home';
|
|
@@ -114,7 +114,39 @@ export function PageTreeTitleCell({ children, doc, homeIndicatorEnabled }) {
|
|
|
114
114
|
},
|
|
115
115
|
ref: rowDnd?.orderHandleRef,
|
|
116
116
|
type: "button",
|
|
117
|
-
children: /*#__PURE__*/
|
|
117
|
+
children: /*#__PURE__*/ _jsxs("svg", {
|
|
118
|
+
width: "20",
|
|
119
|
+
height: "20",
|
|
120
|
+
viewBox: "0 0 20 20",
|
|
121
|
+
fill: "none",
|
|
122
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
123
|
+
children: [
|
|
124
|
+
/*#__PURE__*/ _jsx("path", {
|
|
125
|
+
d: "M7.125 6C7.95343 6 8.625 5.32843 8.625 4.5C8.625 3.67157 7.95343 3 7.125 3C6.29657 3 5.625 3.67157 5.625 4.5C5.625 5.32843 6.29657 6 7.125 6Z",
|
|
126
|
+
fill: "black"
|
|
127
|
+
}),
|
|
128
|
+
/*#__PURE__*/ _jsx("path", {
|
|
129
|
+
d: "M7.125 12C7.95343 12 8.625 11.3284 8.625 10.5C8.625 9.67157 7.95343 9 7.125 9C6.29657 9 5.625 9.67157 5.625 10.5C5.625 11.3284 6.29657 12 7.125 12Z",
|
|
130
|
+
fill: "black"
|
|
131
|
+
}),
|
|
132
|
+
/*#__PURE__*/ _jsx("path", {
|
|
133
|
+
d: "M7.125 18C7.95343 18 8.625 17.3284 8.625 16.5C8.625 15.6716 7.95343 15 7.125 15C6.29657 15 5.625 15.6716 5.625 16.5C5.625 17.3284 6.29657 18 7.125 18Z",
|
|
134
|
+
fill: "black"
|
|
135
|
+
}),
|
|
136
|
+
/*#__PURE__*/ _jsx("path", {
|
|
137
|
+
d: "M12.875 6C13.7034 6 14.375 5.32843 14.375 4.5C14.375 3.67157 13.7034 3 12.875 3C12.0466 3 11.375 3.67157 11.375 4.5C11.375 5.32843 12.0466 6 12.875 6Z",
|
|
138
|
+
fill: "black"
|
|
139
|
+
}),
|
|
140
|
+
/*#__PURE__*/ _jsx("path", {
|
|
141
|
+
d: "M12.875 12C13.7034 12 14.375 11.3284 14.375 10.5C14.375 9.67157 13.7034 9 12.875 9C12.0466 9 11.375 9.67157 11.375 10.5C11.375 11.3284 12.0466 12 12.875 12Z",
|
|
142
|
+
fill: "black"
|
|
143
|
+
}),
|
|
144
|
+
/*#__PURE__*/ _jsx("path", {
|
|
145
|
+
d: "M12.875 18C13.7034 18 14.375 17.3284 14.375 16.5C14.375 15.6716 13.7034 15 12.875 15C12.0466 15 11.375 15.6716 11.375 16.5C11.375 17.3284 12.0466 18 12.875 18Z",
|
|
146
|
+
fill: "black"
|
|
147
|
+
})
|
|
148
|
+
]
|
|
149
|
+
})
|
|
118
150
|
}) : null,
|
|
119
151
|
canMoveDocs && parentMoveEnabled ? /*#__PURE__*/ _jsx("button", {
|
|
120
152
|
...parentMoveDrag.attributes,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/PageTreeTitleCell.tsx"],"sourcesContent":["'use client'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { ChevronIcon, DragHandleIcon, useListQuery } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { PageTreeDoc } from '../utilities/pageTree.js'\n\nimport { usePageTree, usePageTreeRowDnd } from './PageTreeContext.js'\n\nconst HOME_PAGE_SLUG = 'home'\n\nfunction isHomePageDoc(doc: PageTreeDoc): boolean {\n return doc.__pageTreeParentID === null && doc.slug?.trim() === HOME_PAGE_SLUG\n}\n\nfunction normalizeSort(value: string | string[] | undefined): string | undefined {\n return Array.isArray(value) ? value[0] : value\n}\n\nfunction ParentMoveHandleIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n className=\"icon icon--drag-handle\"\n fill=\"none\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n width=\"20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n className=\"stroke\"\n d=\"M13.75 4.25L6.25 15.75\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeWidth=\"2.25\"\n />\n </svg>\n )\n}\n\nfunction HomeIndicatorIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n className=\"pages-hierarchy-cell__home-icon\"\n fill=\"none\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n width=\"14\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2.5 7L7 3L11.5 7V13.5H2.5V7Z\"\n stroke=\"currentColor\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nexport function PageTreeTitleCell({\n children,\n doc,\n homeIndicatorEnabled,\n}: {\n children: React.ReactNode\n doc: PageTreeDoc\n homeIndicatorEnabled: boolean\n}) {\n const {\n activeDragRowID,\n canMoveDocs,\n collapsedIDs,\n parentMoveEnabled,\n pendingMoveRowID,\n toggleRow,\n } = usePageTree()\n const rowDnd = usePageTreeRowDnd()\n const { orderableFieldName, query = {} } = useListQuery()\n const depth = doc.__pageTreeDepth\n const hasChildren = doc.__pageTreeHasChildren\n const shadeLevel = Math.min(doc.__pageTreeShadeLevel, 6)\n const rowID = doc.__pageTreeID\n const isCollapsed = hasChildren && collapsedIDs.has(rowID)\n const dragIsDisabled = !canMoveDocs || !rowID || pendingMoveRowID !== null\n const showHomeIcon = homeIndicatorEnabled && isHomePageDoc(doc)\n const parentMoveDrag = useDraggable({\n id: `page-drag:${rowID}`,\n data: {\n dragType: 'move',\n rowID,\n },\n disabled: dragIsDisabled,\n })\n const querySort = normalizeSort(query.sort)\n const showOrderableHandle =\n canMoveDocs &&\n Boolean(orderableFieldName) &&\n (querySort === orderableFieldName || querySort === `-${orderableFieldName}`)\n const isActiveDragRow = activeDragRowID === rowID\n const isDragging = parentMoveDrag.isDragging || rowDnd?.isOrderDragging || isActiveDragRow\n\n return (\n <div\n className=\"pages-hierarchy-cell\"\n data-row-dragging={isDragging ? 'true' : 'false'}\n data-tree-depth={depth}\n data-tree-has-children={hasChildren ? 'true' : 'false'}\n data-tree-home={showHomeIcon ? 'true' : undefined}\n data-tree-shade-level={shadeLevel}\n style={{ '--pages-tree-depth': String(depth) } as React.CSSProperties}\n >\n {hasChildren ? (\n <button\n aria-expanded={!isCollapsed}\n aria-label={isCollapsed ? 'Expand nested items' : 'Collapse nested items'}\n className=\"pages-hierarchy-cell__toggle\"\n onClick={(event) => {\n event.preventDefault()\n event.stopPropagation()\n toggleRow(rowID)\n }}\n type=\"button\"\n >\n <ChevronIcon\n className={[\n 'pages-hierarchy-cell__chevron',\n isCollapsed ? 'pages-hierarchy-cell__chevron--collapsed' : '',\n ]\n .filter(Boolean)\n .join(' ')}\n />\n </button>\n ) : (\n <span className=\"pages-hierarchy-cell__spacer\" />\n )}\n {showOrderableHandle ? (\n <button\n {...(rowDnd?.orderHandleAttributes ?? {})}\n {...(rowDnd?.orderHandleListeners ?? {})}\n aria-label=\"Reorder document within this parent\"\n className={[\n 'pages-hierarchy-cell__drag-handle',\n 'pages-hierarchy-cell__drag-handle--orderable',\n rowDnd?.isOrderDragging || isActiveDragRow\n ? 'pages-hierarchy-cell__drag-handle--active'\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n disabled={dragIsDisabled || !rowDnd}\n onClick={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n ref={rowDnd?.orderHandleRef}\n type=\"button\"\n >\n <DragHandleIcon />\n </button>\n ) : null}\n {canMoveDocs && parentMoveEnabled ? (\n <button\n {...parentMoveDrag.attributes}\n {...parentMoveDrag.listeners}\n aria-label=\"Move document under another page\"\n className={[\n 'pages-hierarchy-cell__drag-handle',\n 'pages-hierarchy-cell__drag-handle--parent',\n parentMoveDrag.isDragging || isActiveDragRow\n ? 'pages-hierarchy-cell__drag-handle--active'\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n disabled={dragIsDisabled}\n onClick={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n ref={parentMoveDrag.setNodeRef}\n type=\"button\"\n >\n <ParentMoveHandleIcon />\n </button>\n ) : null}\n <span className=\"pages-hierarchy-cell__content\">\n {showHomeIcon ? <HomeIndicatorIcon /> : null}\n {children}\n </span>\n </div>\n )\n}\n"],"names":["useDraggable","ChevronIcon","DragHandleIcon","useListQuery","React","usePageTree","usePageTreeRowDnd","HOME_PAGE_SLUG","isHomePageDoc","doc","__pageTreeParentID","slug","trim","normalizeSort","value","Array","isArray","ParentMoveHandleIcon","svg","aria-hidden","className","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeWidth","HomeIndicatorIcon","strokeLinejoin","PageTreeTitleCell","children","homeIndicatorEnabled","activeDragRowID","canMoveDocs","collapsedIDs","parentMoveEnabled","pendingMoveRowID","toggleRow","rowDnd","orderableFieldName","query","depth","__pageTreeDepth","hasChildren","__pageTreeHasChildren","shadeLevel","Math","min","__pageTreeShadeLevel","rowID","__pageTreeID","isCollapsed","has","dragIsDisabled","showHomeIcon","parentMoveDrag","id","data","dragType","disabled","querySort","sort","showOrderableHandle","Boolean","isActiveDragRow","isDragging","isOrderDragging","div","data-row-dragging","data-tree-depth","data-tree-has-children","data-tree-home","undefined","data-tree-shade-level","style","String","button","aria-expanded","aria-label","onClick","event","preventDefault","stopPropagation","type","filter","join","span","orderHandleAttributes","orderHandleListeners","ref","orderHandleRef","attributes","listeners","setNodeRef"],"mappings":"AAAA;;AAEA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,SAASC,WAAW,EAAEC,cAAc,EAAEC,YAAY,QAAQ,iBAAgB;AAC1E,OAAOC,WAAW,QAAO;AAIzB,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,uBAAsB;AAErE,MAAMC,iBAAiB;AAEvB,SAASC,cAAcC,GAAgB;IACrC,OAAOA,IAAIC,kBAAkB,KAAK,QAAQD,IAAIE,IAAI,EAAEC,WAAWL;AACjE;AAEA,SAASM,cAAcC,KAAoC;IACzD,OAAOC,MAAMC,OAAO,CAACF,SAASA,KAAK,CAAC,EAAE,GAAGA;AAC3C;AAEA,SAASG;IACP,qBACE,KAACC;QACCC,eAAY;QACZC,WAAU;QACVC,MAAK;QACLC,QAAO;QACPC,SAAQ;QACRC,OAAM;QACNC,OAAM;kBAEN,cAAA,KAACC;YACCN,WAAU;YACVO,GAAE;YACFC,QAAO;YACPC,eAAc;YACdC,aAAY;;;AAIpB;AAEA,SAASC;IACP,qBACE,KAACb;QACCC,eAAY;QACZC,WAAU;QACVC,MAAK;QACLC,QAAO;QACPC,SAAQ;QACRC,OAAM;QACNC,OAAM;kBAEN,cAAA,KAACC;YACCC,GAAE;YACFC,QAAO;YACPI,gBAAe;;;AAIvB;AAEA,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRzB,GAAG,EACH0B,oBAAoB,EAKrB;IACC,MAAM,EACJC,eAAe,EACfC,WAAW,EACXC,YAAY,EACZC,iBAAiB,EACjBC,gBAAgB,EAChBC,SAAS,EACV,GAAGpC;IACJ,MAAMqC,SAASpC;IACf,MAAM,EAAEqC,kBAAkB,EAAEC,QAAQ,CAAC,CAAC,EAAE,GAAGzC;IAC3C,MAAM0C,QAAQpC,IAAIqC,eAAe;IACjC,MAAMC,cAActC,IAAIuC,qBAAqB;IAC7C,MAAMC,aAAaC,KAAKC,GAAG,CAAC1C,IAAI2C,oBAAoB,EAAE;IACtD,MAAMC,QAAQ5C,IAAI6C,YAAY;IAC9B,MAAMC,cAAcR,eAAeT,aAAakB,GAAG,CAACH;IACpD,MAAMI,iBAAiB,CAACpB,eAAe,CAACgB,SAASb,qBAAqB;IACtE,MAAMkB,eAAevB,wBAAwB3B,cAAcC;IAC3D,MAAMkD,iBAAiB3D,aAAa;QAClC4D,IAAI,CAAC,UAAU,EAAEP,OAAO;QACxBQ,MAAM;YACJC,UAAU;YACVT;QACF;QACAU,UAAUN;IACZ;IACA,MAAMO,YAAYnD,cAAc+B,MAAMqB,IAAI;IAC1C,MAAMC,sBACJ7B,eACA8B,QAAQxB,uBACPqB,CAAAA,cAAcrB,sBAAsBqB,cAAc,CAAC,CAAC,EAAErB,oBAAoB,AAAD;IAC5E,MAAMyB,kBAAkBhC,oBAAoBiB;IAC5C,MAAMgB,aAAaV,eAAeU,UAAU,IAAI3B,QAAQ4B,mBAAmBF;IAE3E,qBACE,MAACG;QACCnD,WAAU;QACVoD,qBAAmBH,aAAa,SAAS;QACzCI,mBAAiB5B;QACjB6B,0BAAwB3B,cAAc,SAAS;QAC/C4B,kBAAgBjB,eAAe,SAASkB;QACxCC,yBAAuB5B;QACvB6B,OAAO;YAAE,sBAAsBC,OAAOlC;QAAO;;YAE5CE,4BACC,KAACiC;gBACCC,iBAAe,CAAC1B;gBAChB2B,cAAY3B,cAAc,wBAAwB;gBAClDnC,WAAU;gBACV+D,SAAS,CAACC;oBACRA,MAAMC,cAAc;oBACpBD,MAAME,eAAe;oBACrB7C,UAAUY;gBACZ;gBACAkC,MAAK;0BAEL,cAAA,KAACtF;oBACCmB,WAAW;wBACT;wBACAmC,cAAc,6CAA6C;qBAC5D,CACEiC,MAAM,CAACrB,SACPsB,IAAI,CAAC;;+BAIZ,KAACC;gBAAKtE,WAAU;;YAEjB8C,oCACC,KAACc;gBACE,GAAItC,QAAQiD,yBAAyB,CAAC,CAAC;gBACvC,GAAIjD,QAAQkD,wBAAwB,CAAC,CAAC;gBACvCV,cAAW;gBACX9D,WAAW;oBACT;oBACA;oBACAsB,QAAQ4B,mBAAmBF,kBACvB,8CACA;iBACL,CACEoB,MAAM,CAACrB,SACPsB,IAAI,CAAC;gBACR1B,UAAUN,kBAAkB,CAACf;gBAC7ByC,SAAS,CAACC;oBACRA,MAAMC,cAAc;oBACpBD,MAAME,eAAe;gBACvB;gBACAO,KAAKnD,QAAQoD;gBACbP,MAAK;0BAEL,cAAA,KAACrF;iBAED;YACHmC,eAAeE,kCACd,KAACyC;gBACE,GAAGrB,eAAeoC,UAAU;gBAC5B,GAAGpC,eAAeqC,SAAS;gBAC5Bd,cAAW;gBACX9D,WAAW;oBACT;oBACA;oBACAuC,eAAeU,UAAU,IAAID,kBACzB,8CACA;iBACL,CACEoB,MAAM,CAACrB,SACPsB,IAAI,CAAC;gBACR1B,UAAUN;gBACV0B,SAAS,CAACC;oBACRA,MAAMC,cAAc;oBACpBD,MAAME,eAAe;gBACvB;gBACAO,KAAKlC,eAAesC,UAAU;gBAC9BV,MAAK;0BAEL,cAAA,KAACtE;iBAED;0BACJ,MAACyE;gBAAKtE,WAAU;;oBACbsC,6BAAe,KAAC3B,yBAAuB;oBACvCG;;;;;AAIT"}
|
|
1
|
+
{"version":3,"sources":["../../src/components/PageTreeTitleCell.tsx"],"sourcesContent":["'use client'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { ChevronIcon, useListQuery } from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { PageTreeDoc } from '../utilities/pageTree.js'\n\nimport { usePageTree, usePageTreeRowDnd } from './PageTreeContext.js'\n\nconst HOME_PAGE_SLUG = 'home'\n\nfunction isHomePageDoc(doc: PageTreeDoc): boolean {\n return doc.__pageTreeParentID === null && doc.slug?.trim() === HOME_PAGE_SLUG\n}\n\nfunction normalizeSort(value: string | string[] | undefined): string | undefined {\n return Array.isArray(value) ? value[0] : value\n}\n\nfunction ParentMoveHandleIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n className=\"icon icon--drag-handle\"\n fill=\"none\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n width=\"20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n className=\"stroke\"\n d=\"M13.75 4.25L6.25 15.75\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeWidth=\"2.25\"\n />\n </svg>\n )\n}\n\nfunction HomeIndicatorIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n className=\"pages-hierarchy-cell__home-icon\"\n fill=\"none\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n width=\"14\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M2.5 7L7 3L11.5 7V13.5H2.5V7Z\"\n stroke=\"currentColor\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\nexport function PageTreeTitleCell({\n children,\n doc,\n homeIndicatorEnabled,\n}: {\n children: React.ReactNode\n doc: PageTreeDoc\n homeIndicatorEnabled: boolean\n}) {\n const {\n activeDragRowID,\n canMoveDocs,\n collapsedIDs,\n parentMoveEnabled,\n pendingMoveRowID,\n toggleRow,\n } = usePageTree()\n const rowDnd = usePageTreeRowDnd()\n const { orderableFieldName, query = {} } = useListQuery()\n const depth = doc.__pageTreeDepth\n const hasChildren = doc.__pageTreeHasChildren\n const shadeLevel = Math.min(doc.__pageTreeShadeLevel, 6)\n const rowID = doc.__pageTreeID\n const isCollapsed = hasChildren && collapsedIDs.has(rowID)\n const dragIsDisabled = !canMoveDocs || !rowID || pendingMoveRowID !== null\n const showHomeIcon = homeIndicatorEnabled && isHomePageDoc(doc)\n const parentMoveDrag = useDraggable({\n id: `page-drag:${rowID}`,\n data: {\n dragType: 'move',\n rowID,\n },\n disabled: dragIsDisabled,\n })\n const querySort = normalizeSort(query.sort)\n const showOrderableHandle =\n canMoveDocs &&\n Boolean(orderableFieldName) &&\n (querySort === orderableFieldName || querySort === `-${orderableFieldName}`)\n const isActiveDragRow = activeDragRowID === rowID\n const isDragging = parentMoveDrag.isDragging || rowDnd?.isOrderDragging || isActiveDragRow\n\n return (\n <div\n className=\"pages-hierarchy-cell\"\n data-row-dragging={isDragging ? 'true' : 'false'}\n data-tree-depth={depth}\n data-tree-has-children={hasChildren ? 'true' : 'false'}\n data-tree-home={showHomeIcon ? 'true' : undefined}\n data-tree-shade-level={shadeLevel}\n style={{ '--pages-tree-depth': String(depth) } as React.CSSProperties}\n >\n {hasChildren ? (\n <button\n aria-expanded={!isCollapsed}\n aria-label={isCollapsed ? 'Expand nested items' : 'Collapse nested items'}\n className=\"pages-hierarchy-cell__toggle\"\n onClick={(event) => {\n event.preventDefault()\n event.stopPropagation()\n toggleRow(rowID)\n }}\n type=\"button\"\n >\n <ChevronIcon\n className={[\n 'pages-hierarchy-cell__chevron',\n isCollapsed ? 'pages-hierarchy-cell__chevron--collapsed' : '',\n ]\n .filter(Boolean)\n .join(' ')}\n />\n </button>\n ) : (\n <span className=\"pages-hierarchy-cell__spacer\" />\n )}\n {showOrderableHandle ? (\n <button\n {...(rowDnd?.orderHandleAttributes ?? {})}\n {...(rowDnd?.orderHandleListeners ?? {})}\n aria-label=\"Reorder document within this parent\"\n className={[\n 'pages-hierarchy-cell__drag-handle',\n 'pages-hierarchy-cell__drag-handle--orderable',\n rowDnd?.isOrderDragging || isActiveDragRow\n ? 'pages-hierarchy-cell__drag-handle--active'\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n disabled={dragIsDisabled || !rowDnd}\n onClick={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n ref={rowDnd?.orderHandleRef}\n type=\"button\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7.125 6C7.95343 6 8.625 5.32843 8.625 4.5C8.625 3.67157 7.95343 3 7.125 3C6.29657 3 5.625 3.67157 5.625 4.5C5.625 5.32843 6.29657 6 7.125 6Z\" fill=\"black\"/>\n <path d=\"M7.125 12C7.95343 12 8.625 11.3284 8.625 10.5C8.625 9.67157 7.95343 9 7.125 9C6.29657 9 5.625 9.67157 5.625 10.5C5.625 11.3284 6.29657 12 7.125 12Z\" fill=\"black\"/>\n <path d=\"M7.125 18C7.95343 18 8.625 17.3284 8.625 16.5C8.625 15.6716 7.95343 15 7.125 15C6.29657 15 5.625 15.6716 5.625 16.5C5.625 17.3284 6.29657 18 7.125 18Z\" fill=\"black\"/>\n <path d=\"M12.875 6C13.7034 6 14.375 5.32843 14.375 4.5C14.375 3.67157 13.7034 3 12.875 3C12.0466 3 11.375 3.67157 11.375 4.5C11.375 5.32843 12.0466 6 12.875 6Z\" fill=\"black\"/>\n <path d=\"M12.875 12C13.7034 12 14.375 11.3284 14.375 10.5C14.375 9.67157 13.7034 9 12.875 9C12.0466 9 11.375 9.67157 11.375 10.5C11.375 11.3284 12.0466 12 12.875 12Z\" fill=\"black\"/>\n <path d=\"M12.875 18C13.7034 18 14.375 17.3284 14.375 16.5C14.375 15.6716 13.7034 15 12.875 15C12.0466 15 11.375 15.6716 11.375 16.5C11.375 17.3284 12.0466 18 12.875 18Z\" fill=\"black\"/>\n </svg>\n </button>\n ) : null}\n {canMoveDocs && parentMoveEnabled ? (\n <button\n {...parentMoveDrag.attributes}\n {...parentMoveDrag.listeners}\n aria-label=\"Move document under another page\"\n className={[\n 'pages-hierarchy-cell__drag-handle',\n 'pages-hierarchy-cell__drag-handle--parent',\n parentMoveDrag.isDragging || isActiveDragRow\n ? 'pages-hierarchy-cell__drag-handle--active'\n : '',\n ]\n .filter(Boolean)\n .join(' ')}\n disabled={dragIsDisabled}\n onClick={(event) => {\n event.preventDefault()\n event.stopPropagation()\n }}\n ref={parentMoveDrag.setNodeRef}\n type=\"button\"\n >\n <ParentMoveHandleIcon />\n </button>\n ) : null}\n <span className=\"pages-hierarchy-cell__content\">\n {showHomeIcon ? <HomeIndicatorIcon /> : null}\n {children}\n </span>\n </div>\n )\n}\n"],"names":["useDraggable","ChevronIcon","useListQuery","React","usePageTree","usePageTreeRowDnd","HOME_PAGE_SLUG","isHomePageDoc","doc","__pageTreeParentID","slug","trim","normalizeSort","value","Array","isArray","ParentMoveHandleIcon","svg","aria-hidden","className","fill","height","viewBox","width","xmlns","path","d","stroke","strokeLinecap","strokeWidth","HomeIndicatorIcon","strokeLinejoin","PageTreeTitleCell","children","homeIndicatorEnabled","activeDragRowID","canMoveDocs","collapsedIDs","parentMoveEnabled","pendingMoveRowID","toggleRow","rowDnd","orderableFieldName","query","depth","__pageTreeDepth","hasChildren","__pageTreeHasChildren","shadeLevel","Math","min","__pageTreeShadeLevel","rowID","__pageTreeID","isCollapsed","has","dragIsDisabled","showHomeIcon","parentMoveDrag","id","data","dragType","disabled","querySort","sort","showOrderableHandle","Boolean","isActiveDragRow","isDragging","isOrderDragging","div","data-row-dragging","data-tree-depth","data-tree-has-children","data-tree-home","undefined","data-tree-shade-level","style","String","button","aria-expanded","aria-label","onClick","event","preventDefault","stopPropagation","type","filter","join","span","orderHandleAttributes","orderHandleListeners","ref","orderHandleRef","attributes","listeners","setNodeRef"],"mappings":"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"}
|