@maas/payload-plugin-media-cloud 0.0.34 → 0.0.36
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.
- package/dist/adapter/storageAdapter.mjs +10 -2
- package/dist/adapter/storageAdapter.mjs.map +1 -1
- package/dist/collectionHooks/afterChange.mjs +1 -1
- package/dist/collectionHooks/afterChange.mjs.map +1 -1
- package/dist/components/folderFileCard/folderFileCard.mjs +13 -1
- package/dist/components/folderFileCard/folderFileCard.mjs.map +1 -1
- package/dist/components/gridContext/gridContext.mjs +52 -51
- package/dist/components/gridContext/gridContext.mjs.map +1 -1
- package/dist/components/gridView/gridView.mjs +96 -13
- package/dist/components/gridView/gridView.mjs.map +1 -1
- package/dist/components/itemCardGrid/itemCardGrid.mjs +15 -5
- package/dist/components/itemCardGrid/itemCardGrid.mjs.map +1 -1
- package/dist/components/muxPreview/muxPreview.mjs +9 -1
- package/dist/components/muxPreview/muxPreview.mjs.map +1 -1
- package/dist/components/uploadHandler/uploadHandler.mjs.map +1 -1
- package/dist/components/uploadManager/uploadManager.mjs +101 -5
- package/dist/components/uploadManager/uploadManager.mjs.map +1 -1
- package/dist/fields/path.mjs +5 -1
- package/dist/fields/path.mjs.map +1 -1
- package/dist/types/index.d.mts +3 -0
- package/dist/utils/buildThumbnailURL.mjs +1 -1
- package/dist/utils/buildThumbnailURL.mjs.map +1 -1
- package/dist/utils/defaultOptions.mjs +2 -1
- package/dist/utils/defaultOptions.mjs.map +1 -1
- package/dist/utils/file.d.mts +2 -2
- package/dist/utils/file.mjs.map +1 -1
- package/dist/utils/mux.d.mts +3 -3
- package/dist/utils/mux.mjs.map +1 -1
- package/dist/utils/tus.d.mts +3 -3
- package/dist/utils/tus.mjs.map +1 -1
- package/package.json +3 -1
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
import { MediaCloudErrors } from "../types/errors.mjs";
|
|
1
2
|
import { getHandleUpload } from "./handleUpload.mjs";
|
|
3
|
+
import { useMagicError } from "../error-handler/dist/index.mjs";
|
|
2
4
|
import { getHandleDelete } from "./handleDelete.mjs";
|
|
3
5
|
import { getStaticHandler } from "./staticHandler.mjs";
|
|
4
6
|
|
|
5
7
|
//#region src/adapter/storageAdapter.ts
|
|
8
|
+
const magicError = useMagicError({ prefix: "PLUGIN-MEDIA-CLOUD" });
|
|
6
9
|
/**
|
|
7
10
|
* Creates the storage adapter for media cloud plugin
|
|
8
11
|
* @param args - The arguments for creating the storage adapter
|
|
@@ -12,7 +15,9 @@ import { getStaticHandler } from "./staticHandler.mjs";
|
|
|
12
15
|
* @returns An Adapter function that returns a GeneratedAdapter configuration
|
|
13
16
|
*/
|
|
14
17
|
function getStorageAdapter(args) {
|
|
15
|
-
const { getS3Store, getMuxClient } = args;
|
|
18
|
+
const { getS3Store, getMuxClient, pluginOptions } = args;
|
|
19
|
+
const collection = pluginOptions.collection;
|
|
20
|
+
magicError.assert(collection, MediaCloudErrors.COLLECTION_REQUIRED);
|
|
16
21
|
return () => ({
|
|
17
22
|
name: "media-cloud",
|
|
18
23
|
clientUploads: true,
|
|
@@ -21,7 +26,10 @@ function getStorageAdapter(args) {
|
|
|
21
26
|
getS3Store,
|
|
22
27
|
getMuxClient
|
|
23
28
|
}),
|
|
24
|
-
staticHandler: getStaticHandler({
|
|
29
|
+
staticHandler: getStaticHandler({
|
|
30
|
+
getS3Store,
|
|
31
|
+
collection
|
|
32
|
+
})
|
|
25
33
|
});
|
|
26
34
|
}
|
|
27
35
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"storageAdapter.mjs","names":[],"sources":["../../src/adapter/storageAdapter.ts"],"sourcesContent":["import { getHandleUpload } from './handleUpload'\nimport { getHandleDelete } from './handleDelete'\nimport { getStaticHandler } from './staticHandler'\n\nimport type {\n Adapter,\n GeneratedAdapter,\n} from '@payloadcms/plugin-cloud-storage/types'\nimport type { Mux } from '@mux/mux-node'\nimport type { MediaCloudPluginOptions } from '../types'\nimport type { S3Store } from '../tus/stores/s3/s3Store'\n\ninterface StorageAdapterArgs {\n pluginOptions: MediaCloudPluginOptions\n getS3Store: () => S3Store\n getMuxClient: () => Mux\n}\n\n/**\n * Creates the storage adapter for media cloud plugin\n * @param args - The arguments for creating the storage adapter\n * @param args.pluginOptions - The media cloud plugin options\n * @param args.getS3Store - Function that returns an S3 client instance\n * @param args.getMuxClient - Function that returns a Mux client instance\n * @returns An Adapter function that returns a GeneratedAdapter configuration\n */\nexport function getStorageAdapter(args: StorageAdapterArgs): Adapter {\n const { getS3Store, getMuxClient } = args\n\n return (): GeneratedAdapter => ({\n name: 'media-cloud',\n clientUploads: true,\n handleUpload: getHandleUpload(),\n handleDelete: getHandleDelete({ getS3Store, getMuxClient }),\n staticHandler: getStaticHandler({ getS3Store }),\n })\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"storageAdapter.mjs","names":["magicError: UseMagicErrorReturn"],"sources":["../../src/adapter/storageAdapter.ts"],"sourcesContent":["import { getHandleUpload } from './handleUpload'\nimport { getHandleDelete } from './handleDelete'\nimport { getStaticHandler } from './staticHandler'\n\nimport { useMagicError, type UseMagicErrorReturn } from '@maas/error-handler'\nimport { MediaCloudErrors } from '../types/errors'\n\nimport type {\n Adapter,\n GeneratedAdapter,\n} from '@payloadcms/plugin-cloud-storage/types'\nimport type { Mux } from '@mux/mux-node'\nimport type { MediaCloudPluginOptions } from '../types'\nimport type { S3Store } from '../tus/stores/s3/s3Store'\n\ninterface StorageAdapterArgs {\n pluginOptions: MediaCloudPluginOptions\n getS3Store: () => S3Store\n getMuxClient: () => Mux\n}\n\nconst magicError: UseMagicErrorReturn = useMagicError({\n prefix: 'PLUGIN-MEDIA-CLOUD',\n})\n\n/**\n * Creates the storage adapter for media cloud plugin\n * @param args - The arguments for creating the storage adapter\n * @param args.pluginOptions - The media cloud plugin options\n * @param args.getS3Store - Function that returns an S3 client instance\n * @param args.getMuxClient - Function that returns a Mux client instance\n * @returns An Adapter function that returns a GeneratedAdapter configuration\n */\nexport function getStorageAdapter(args: StorageAdapterArgs): Adapter {\n const { getS3Store, getMuxClient, pluginOptions } = args\n\n const collection = pluginOptions.collection\n magicError.assert(collection, MediaCloudErrors.COLLECTION_REQUIRED)\n\n return (): GeneratedAdapter => ({\n name: 'media-cloud',\n clientUploads: true,\n handleUpload: getHandleUpload(),\n handleDelete: getHandleDelete({ getS3Store, getMuxClient }),\n staticHandler: getStaticHandler({ getS3Store, collection }),\n })\n}\n"],"mappings":";;;;;;;AAqBA,MAAMA,aAAkC,cAAc,EACpD,QAAQ,sBACT,CAAC;;;;;;;;;AAUF,SAAgB,kBAAkB,MAAmC;CACnE,MAAM,EAAE,YAAY,cAAc,kBAAkB;CAEpD,MAAM,aAAa,cAAc;AACjC,YAAW,OAAO,YAAY,iBAAiB,oBAAoB;AAEnE,eAAgC;EAC9B,MAAM;EACN,eAAe;EACf,cAAc,iBAAiB;EAC/B,cAAc,gBAAgB;GAAE;GAAY;GAAc,CAAC;EAC3D,eAAe,iBAAiB;GAAE;GAAY;GAAY,CAAC;EAC5D"}
|
|
@@ -21,7 +21,7 @@ const afterChangeHook = async ({ collection, doc, previousDoc, req }) => {
|
|
|
21
21
|
if (!doc.thumbnail || previousDoc?.path !== doc.path) {
|
|
22
22
|
const thumbnail = buildThumbnailURL({
|
|
23
23
|
storage: doc.storage,
|
|
24
|
-
playbackId: doc.storage === "mux" ? doc.
|
|
24
|
+
playbackId: doc.storage === "mux" ? doc.mux.playbackId : void 0,
|
|
25
25
|
s3Key: doc.storage === "s3" ? doc.path ?? doc.filename : void 0,
|
|
26
26
|
s3Store
|
|
27
27
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"afterChange.mjs","names":["afterChangeHook: CollectionAfterChangeHook"],"sources":["../../src/collectionHooks/afterChange.ts"],"sourcesContent":["import { buildThumbnailURL } from '../utils/buildThumbnailURL'\nimport { s3Store } from '../plugin'\nimport { MediaCloudErrors } from '../types/errors'\nimport { useErrorHandler } from '../hooks/useErrorHandler'\n\nimport type { CollectionAfterChangeHook } from 'payload'\n\nexport const afterChangeHook: CollectionAfterChangeHook = async ({\n collection,\n doc,\n previousDoc,\n req,\n}) => {\n const { throwError } = useErrorHandler()\n\n // Move asset in S3 if path has changed\n if (doc.path !== previousDoc?.path) {\n if (doc.storage === 's3' && s3Store) {\n try {\n const oldKey = previousDoc?.path ?? previousDoc?.filename\n const newKey = doc.path\n\n await s3Store.copy(oldKey, newKey)\n } catch (error) {\n throwError({ ...MediaCloudErrors.S3_MOVE_ERROR, cause: error })\n }\n }\n }\n\n // Handle thumbnail\n if (!doc.thumbnail || previousDoc?.path !== doc.path) {\n const thumbnail = buildThumbnailURL({\n storage: doc.storage,\n playbackId: doc.storage === 'mux' ? doc.
|
|
1
|
+
{"version":3,"file":"afterChange.mjs","names":["afterChangeHook: CollectionAfterChangeHook"],"sources":["../../src/collectionHooks/afterChange.ts"],"sourcesContent":["import { buildThumbnailURL } from '../utils/buildThumbnailURL'\nimport { s3Store } from '../plugin'\nimport { MediaCloudErrors } from '../types/errors'\nimport { useErrorHandler } from '../hooks/useErrorHandler'\n\nimport type { CollectionAfterChangeHook } from 'payload'\n\nexport const afterChangeHook: CollectionAfterChangeHook = async ({\n collection,\n doc,\n previousDoc,\n req,\n}) => {\n const { throwError } = useErrorHandler()\n\n // Move asset in S3 if path has changed\n if (doc.path !== previousDoc?.path) {\n if (doc.storage === 's3' && s3Store) {\n try {\n const oldKey = previousDoc?.path ?? previousDoc?.filename\n const newKey = doc.path\n\n await s3Store.copy(oldKey, newKey)\n } catch (error) {\n throwError({ ...MediaCloudErrors.S3_MOVE_ERROR, cause: error })\n }\n }\n }\n\n // Handle thumbnail\n if (!doc.thumbnail || previousDoc?.path !== doc.path) {\n const thumbnail = buildThumbnailURL({\n storage: doc.storage,\n playbackId: doc.storage === 'mux' ? doc.mux.playbackId : undefined,\n s3Key: doc.storage === 's3' ? (doc.path ?? doc.filename) : undefined,\n s3Store,\n })\n\n req.payload.update({\n collection: collection.slug,\n id: doc.id,\n data: { thumbnail },\n })\n }\n\n return doc\n}\n"],"mappings":";;;;;;AAOA,MAAaA,kBAA6C,OAAO,EAC/D,YACA,KACA,aACA,UACI;CACJ,MAAM,EAAE,eAAe,iBAAiB;AAGxC,KAAI,IAAI,SAAS,aAAa,MAC5B;MAAI,IAAI,YAAY,QAAQ,QAC1B,KAAI;GACF,MAAM,SAAS,aAAa,QAAQ,aAAa;GACjD,MAAM,SAAS,IAAI;AAEnB,SAAM,QAAQ,KAAK,QAAQ,OAAO;WAC3B,OAAO;AACd,cAAW;IAAE,GAAG,iBAAiB;IAAe,OAAO;IAAO,CAAC;;;AAMrE,KAAI,CAAC,IAAI,aAAa,aAAa,SAAS,IAAI,MAAM;EACpD,MAAM,YAAY,kBAAkB;GAClC,SAAS,IAAI;GACb,YAAY,IAAI,YAAY,QAAQ,IAAI,IAAI,aAAa;GACzD,OAAO,IAAI,YAAY,OAAQ,IAAI,QAAQ,IAAI,WAAY;GAC3D;GACD,CAAC;AAEF,MAAI,QAAQ,OAAO;GACjB,YAAY,WAAW;GACvB,IAAI,IAAI;GACR,MAAM,EAAE,WAAW;GACpB,CAAC;;AAGJ,QAAO"}
|
|
@@ -2,6 +2,7 @@ import { useGrid } from "../gridContext/gridContext.mjs";
|
|
|
2
2
|
import { c } from "react/compiler-runtime";
|
|
3
3
|
import { useSelection } from "@payloadcms/ui";
|
|
4
4
|
import { FolderFileCard } from "@payloadcms/ui/elements/FolderView/FolderFileCard";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
|
|
6
7
|
//#region src/components/folderFileCard/folderFileCard.tsx
|
|
7
8
|
function ContextFolderFileCard(props) {
|
|
@@ -55,7 +56,18 @@ function ContextFolderFileCard(props) {
|
|
|
55
56
|
} else t4 = $[12];
|
|
56
57
|
let t5;
|
|
57
58
|
if ($[13] !== className || $[14] !== isFocused || $[15] !== isSelected || $[16] !== item.id || $[17] !== item.thumbnailURL || $[18] !== item.title || $[19] !== t2 || $[20] !== t3 || $[21] !== t4) {
|
|
58
|
-
t5 =
|
|
59
|
+
t5 = /* @__PURE__ */ jsx(FolderFileCard, {
|
|
60
|
+
className,
|
|
61
|
+
id: t1,
|
|
62
|
+
isFocused,
|
|
63
|
+
isSelected,
|
|
64
|
+
itemKey: t2,
|
|
65
|
+
previewUrl: item.thumbnailURL,
|
|
66
|
+
title: item.title,
|
|
67
|
+
type: "file",
|
|
68
|
+
onClick: t3,
|
|
69
|
+
onKeyDown: t4
|
|
70
|
+
});
|
|
59
71
|
$[13] = className;
|
|
60
72
|
$[14] = isFocused;
|
|
61
73
|
$[15] = isSelected;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"folderFileCard.mjs","names":["useMemo","FolderFileCard","useSelection","useGrid","
|
|
1
|
+
{"version":3,"file":"folderFileCard.mjs","names":["useMemo","FolderFileCard","useSelection","useGrid","jsx","_jsx","ContextFolderFileCard","props","$","_c","className","index","item","focusedItemIndex","onItemClick","onItemKeyPress","selectedIDs","t0","id","includes","isSelected","isFocused","t1","t2","toString","t3","event","t4","event_0","t5","thumbnailURL","title","itemKey","previewUrl","type","onClick","onKeyDown"],"sources":["../../../src/components/folderFileCard/folderFileCard.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { FolderFileCard } from '@payloadcms/ui/elements/FolderView/FolderFileCard'\nimport { useSelection } from '@payloadcms/ui'\nimport { useGrid } from '../gridContext/gridContext'\n\nimport type { MappedDocument } from '../gridView/gridView'\n\ntype ContextCardProps = {\n readonly className?: string\n readonly index: number\n readonly item: MappedDocument\n}\n\nexport function ContextFolderFileCard(props: ContextCardProps) {\n const { className, index, item } = props\n\n const { focusedItemIndex, onItemClick, onItemKeyPress } = useGrid()\n const { selectedIDs } = useSelection()\n\n const isSelected = useMemo(\n () => selectedIDs.includes(item.id),\n [selectedIDs, item.id]\n )\n\n const isFocused = useMemo(\n () => focusedItemIndex === index,\n [focusedItemIndex, index]\n )\n\n return (\n <FolderFileCard\n className={className}\n id={item.id}\n isFocused={isFocused}\n isSelected={isSelected}\n itemKey={item.id.toString()}\n previewUrl={item.thumbnailURL}\n title={item.title}\n type={'file'}\n onClick={(event) => {\n void onItemClick({ event, index, item })\n }}\n onKeyDown={(event) => {\n void onItemKeyPress({ event, index, item })\n }}\n />\n )\n}\n"],"mappings":";;;;;;;AAaA,SAAOM,sBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CACL,MAAA,EAAAC,WAAAC,OAAAC,SAAmCL;CAEnC,MAAA,EAAAM,kBAAAC,aAAAC,mBAA0DZ,SAAS;CACnE,MAAA,EAAAa,gBAAwBd,cAAc;CAAA,IAAAe;AAAA,KAAAT,EAAA,OAAAI,KAAAM,MAAAV,EAAA,OAAAQ,aAAA;AAG9BC,OAAAD,YAAWG,SAAUP,KAAIM,GAAI;AAAAV,IAAA,KAAAI,KAAAM;AAAAV,IAAA,KAAAQ;AAAAR,IAAA,KAAAS;OAAAA,MAAAT,EAAA;CADrC,MAAAY,aACQH;CAIR,MAAAI,YACQR,qBAAqBF;CAOrB,MAAAW,KAAAV,KAAIM;CAAG,IAAAK;AAAA,KAAAf,EAAA,OAAAI,KAAAM,IAAA;AAGFK,OAAAX,KAAIM,GAAGM,UAAW;AAAAhB,IAAA,KAAAI,KAAAM;AAAAV,IAAA,KAAAe;OAAAA,MAAAf,EAAA;CAAA,IAAAiB;AAAA,KAAAjB,EAAA,OAAAG,SAAAH,EAAA,OAAAI,QAAAJ,EAAA,OAAAM,aAAA;AAIlBW,QAAAC,UAAA;AACFZ,eAAY;IAAAY;IAAAf;IAAAC;IAAsB,CAAC;;AACzCJ,IAAA,KAAAG;AAAAH,IAAA,KAAAI;AAAAJ,IAAA,KAAAM;AAAAN,IAAA,KAAAiB;OAAAA,MAAAjB,EAAA;CAAA,IAAAmB;AAAA,KAAAnB,EAAA,OAAAG,SAAAH,EAAA,QAAAI,QAAAJ,EAAA,QAAAO,gBAAA;AACUY,QAAAC,YAAA;AACJb,kBAAe;IAAAW,OAAEA;IAAKf;IAAAC;IAAe,CAAC;;AAC5CJ,IAAA,KAAAG;AAAAH,IAAA,MAAAI;AAAAJ,IAAA,MAAAO;AAAAP,IAAA,MAAAmB;OAAAA,MAAAnB,EAAA;CAAA,IAAAqB;AAAA,KAAArB,EAAA,QAAAE,aAAAF,EAAA,QAAAa,aAAAb,EAAA,QAAAY,cAAAZ,EAAA,QAAAI,KAAAM,MAAAV,EAAA,QAAAI,KAAAkB,gBAAAtB,EAAA,QAAAI,KAAAmB,SAAAvB,EAAA,QAAAe,MAAAf,EAAA,QAAAiB,MAAAjB,EAAA,QAAAmB,IAAA;AAdHE,OAAAxB,oBAACJ,gBAAc;GACFS;GACPQ,IAAAI;GACOD;GACCD;GACHY,SAAAT;GACGU,YAAArB,KAAIkB;GACTC,OAAAnB,KAAImB;GACLG,MAAA;GACGC,SAAAV;GAGEW,WAAAT;GAGZ,CAAC;AAAAnB,IAAA,MAAAE;AAAAF,IAAA,MAAAa;AAAAb,IAAA,MAAAY;AAAAZ,IAAA,MAAAI,KAAAM;AAAAV,IAAA,MAAAI,KAAAkB;AAAAtB,IAAA,MAAAI,KAAAmB;AAAAvB,IAAA,MAAAe;AAAAf,IAAA,MAAAiB;AAAAjB,IAAA,MAAAmB;AAAAnB,IAAA,MAAAqB;OAAAA,MAAArB,EAAA;AAAA,QAfFqB"}
|
|
@@ -5,9 +5,10 @@ import { useRouter } from "next/navigation";
|
|
|
5
5
|
import { useConfig, useRouteTransition, useSelection } from "@payloadcms/ui";
|
|
6
6
|
import { formatAdminURL } from "payload/shared";
|
|
7
7
|
import { useDrawerDepth } from "@payloadcms/ui/elements/Drawer";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
9
|
|
|
9
10
|
//#region src/components/gridContext/gridContext.tsx
|
|
10
|
-
const Context = React.createContext({
|
|
11
|
+
const Context = /* @__PURE__ */ React.createContext({
|
|
11
12
|
docs: [],
|
|
12
13
|
clearSelections: () => {},
|
|
13
14
|
onItemClick: () => void 0,
|
|
@@ -165,56 +166,56 @@ function GridProvider(props) {
|
|
|
165
166
|
totalCount
|
|
166
167
|
]);
|
|
167
168
|
const [lastClickedItem, setLastClickedItem] = React.useState();
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
event_0.
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
169
|
+
return /* @__PURE__ */ jsx(Context, {
|
|
170
|
+
value: {
|
|
171
|
+
clearSelections,
|
|
172
|
+
docs,
|
|
173
|
+
focusedItemIndex,
|
|
174
|
+
onItemClick: React.useCallback(({ event: event_0, item: clickedItem }) => {
|
|
175
|
+
let doubleClicked = false;
|
|
176
|
+
const isCtrlPressed_0 = event_0.ctrlKey || event_0.metaKey;
|
|
177
|
+
const isShiftPressed_0 = event_0.shiftKey;
|
|
178
|
+
const isCurrentlySelected_0 = selectedIDs.includes(clickedItem.id);
|
|
179
|
+
const currentItemIndex_0 = docs.findIndex((item_4) => item_4.id === clickedItem.id);
|
|
180
|
+
switch (true) {
|
|
181
|
+
case allowMultiSelection && isCtrlPressed_0:
|
|
182
|
+
event_0.preventDefault();
|
|
183
|
+
updateSelections({ indexes: docs.reduce((acc_2, item_5, idx_1) => {
|
|
184
|
+
if (item_5.id === clickedItem.id) {
|
|
185
|
+
if (!isCurrentlySelected_0) acc_2.push(idx_1);
|
|
186
|
+
} else if (selectedIDs.includes(item_5.id)) acc_2.push(idx_1);
|
|
187
|
+
return acc_2;
|
|
188
|
+
}, []) });
|
|
189
|
+
break;
|
|
190
|
+
case allowMultiSelection && isShiftPressed_0:
|
|
191
|
+
if (currentItemIndex_0 !== -1) updateSelections({ indexes: handleShiftSelection(currentItemIndex_0) });
|
|
192
|
+
break;
|
|
193
|
+
default: {
|
|
194
|
+
const now = Date.now();
|
|
195
|
+
doubleClicked = now - (lastClickTime.current ?? 0) < 400 && lastClickedItem?.id === clickedItem.id;
|
|
196
|
+
lastClickTime.current = now;
|
|
197
|
+
if (!doubleClicked) updateSelections({ indexes: isCurrentlySelected_0 && selectedIDs.length === 1 ? [] : [currentItemIndex_0] });
|
|
198
|
+
break;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
setLastClickedItem(clickedItem);
|
|
202
|
+
if (doubleClicked) navigateAfterSelection({
|
|
203
|
+
collectionSlug: clickedItem.relationTo,
|
|
204
|
+
docID: clickedItem.id
|
|
205
|
+
});
|
|
206
|
+
}, [
|
|
207
|
+
docs,
|
|
208
|
+
allowMultiSelection,
|
|
209
|
+
getItem,
|
|
210
|
+
updateSelections,
|
|
211
|
+
navigateAfterSelection,
|
|
212
|
+
handleShiftSelection
|
|
213
|
+
]),
|
|
214
|
+
onItemKeyPress,
|
|
215
|
+
setFocusedItemIndex
|
|
216
|
+
},
|
|
217
|
+
children
|
|
218
|
+
});
|
|
218
219
|
}
|
|
219
220
|
function useGrid() {
|
|
220
221
|
const context = React.use(Context);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gridContext.mjs","names":["React","useRouter","formatAdminURL","useDrawerDepth","useConfig","useRouteTransition","useSelection","FolderSortKeys","MappedDocument","OnItemClickArgs","event","MouseEvent","index","item","OnItemKeyPressArgs","KeyboardEvent","GridContextValue","docs","clearSelections","onItemClick","args","onItemKeyPress","setFocusedItemIndex","Dispatch","SetStateAction","focusedItemIndex","Context","createContext","undefined","GridProviderProps","allowMultiSelection","children","ReactNode","search","sort","GridProvider","props","config","drawerDepth","router","startRouteTransition","setSelection","selectedIDs","currentlySelectedIndexes","useRef","Set","useState","lastClickTime","totalCount","length","useCallback","current","getItem","id","find","doc","navigateAfterSelection","collectionSlug","docID","push","adminRoute","routes","admin","path","handleShiftSelection","targetIndex","existingIndexes","reduce","acc","idx","includes","firstSelectedIndex","Math","min","lastSelectedIndex","max","isWithinBounds","anchorIndex","distanceToFirst","abs","distanceToLast","startIndex","endIndex","newRangeIndexes","Array","from","_","i","mappedSet","updateSelections","indexes","newSelectedIDs","add","forEach","currentItem","code","ctrlKey","metaKey","shiftKey","isShiftPressed","isCtrlPressed","isCurrentlySelected","currentItemIndex","findIndex","preventDefault","isBackward","newItemIndex","selectedIndexes","relationTo","prevIndex","nextIndex","lastClickedItem","setLastClickedItem","clickedItem","doubleClicked","now","Date","useGrid","context","use","Error"],"sources":["../../../src/components/gridContext/gridContext.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { useRouter } from 'next/navigation'\nimport { formatAdminURL } from 'payload/shared'\n\nimport { useDrawerDepth } from '@payloadcms/ui/elements/Drawer'\nimport { useConfig, useRouteTransition, useSelection } from '@payloadcms/ui'\n\nimport type { FolderSortKeys } from 'payload'\nimport type { MappedDocument } from '../gridView/gridView'\ninterface OnItemClickArgs {\n event: React.MouseEvent\n index: number\n item: MappedDocument\n}\n\ninterface OnItemKeyPressArgs {\n event: React.KeyboardEvent\n index: number\n item: MappedDocument\n}\n\nexport type GridContextValue = {\n docs?: MappedDocument[]\n clearSelections: () => void\n onItemClick: (args: OnItemClickArgs) => void\n onItemKeyPress: (args: OnItemKeyPressArgs) => void\n setFocusedItemIndex: React.Dispatch<React.SetStateAction<number>>\n focusedItemIndex: number\n}\n\nconst Context = React.createContext<GridContextValue>({\n docs: [],\n clearSelections: () => {},\n onItemClick: () => undefined,\n onItemKeyPress: () => undefined,\n setFocusedItemIndex: () => -1,\n focusedItemIndex: -1,\n})\n\nexport type GridProviderProps = {\n readonly allowMultiSelection?: boolean\n /**\n * Children to render inside the provider\n */\n readonly children: React.ReactNode\n /**\n * All documents in the current folder\n */\n readonly docs: MappedDocument[]\n /**\n * The intial search query\n */\n readonly search?: string\n /**\n * The sort order of the documents\n *\n * @example\n * `name` for descending\n * `-name` for ascending\n */\n readonly sort?: FolderSortKeys\n}\nexport function GridProvider(props: GridProviderProps) {\n const { allowMultiSelection = true, children, docs } = props\n\n const { config } = useConfig()\n const drawerDepth = useDrawerDepth()\n const router = useRouter()\n const { startRouteTransition } = useRouteTransition()\n\n const { setSelection, selectedIDs } = useSelection()\n const currentlySelectedIndexes = React.useRef(new Set<number>())\n\n const [focusedItemIndex, setFocusedItemIndex] = React.useState(-1)\n const lastClickTime = React.useRef<null | number>(null)\n const totalCount = docs.length\n\n const clearSelections = React.useCallback(() => {\n setFocusedItemIndex(-1)\n\n currentlySelectedIndexes.current = new Set()\n }, [])\n\n const getItem = React.useCallback(\n (id: string | number) => {\n return docs.find((doc) => doc.id === id)\n },\n [docs]\n )\n\n const navigateAfterSelection = React.useCallback(\n ({\n collectionSlug,\n docID,\n }: {\n collectionSlug: string\n docID?: number | string\n }) => {\n if (drawerDepth === 1) {\n // not in a drawer (default is 1)\n if (collectionSlug) {\n // clicked on document, take the user to the documet view\n startRouteTransition(() => {\n router.push(\n formatAdminURL({\n adminRoute: config.routes.admin,\n path: `/collections/${collectionSlug}/${docID}`,\n })\n )\n clearSelections()\n })\n }\n } else {\n clearSelections()\n }\n },\n [\n clearSelections,\n config.routes.admin,\n drawerDepth,\n getItem,\n router,\n startRouteTransition,\n ]\n )\n\n const handleShiftSelection = React.useCallback(\n (targetIndex: number) => {\n // Find existing selection boundaries\n const existingIndexes = docs.reduce((acc, item, idx) => {\n if (selectedIDs.includes(item.id)) {\n acc.push(idx)\n }\n return acc\n }, [] as number[])\n\n if (existingIndexes.length === 0) {\n // No existing selection, just select target\n return [targetIndex]\n }\n\n const firstSelectedIndex = Math.min(...existingIndexes)\n const lastSelectedIndex = Math.max(...existingIndexes)\n const isWithinBounds =\n targetIndex >= firstSelectedIndex && targetIndex <= lastSelectedIndex\n\n // Choose anchor based on whether we're contracting or extending\n let anchorIndex = targetIndex\n if (isWithinBounds) {\n // Contracting: if target is at a boundary, use target as anchor\n // Otherwise, use furthest boundary to maintain opposite edge\n if (\n targetIndex === firstSelectedIndex ||\n targetIndex === lastSelectedIndex\n ) {\n anchorIndex = targetIndex\n } else {\n const distanceToFirst = Math.abs(targetIndex - firstSelectedIndex)\n const distanceToLast = Math.abs(targetIndex - lastSelectedIndex)\n anchorIndex =\n distanceToFirst >= distanceToLast\n ? firstSelectedIndex\n : lastSelectedIndex\n }\n } else {\n // Extending: use closest boundary\n const distanceToFirst = Math.abs(targetIndex - firstSelectedIndex)\n const distanceToLast = Math.abs(targetIndex - lastSelectedIndex)\n anchorIndex =\n distanceToFirst <= distanceToLast\n ? firstSelectedIndex\n : lastSelectedIndex\n }\n\n // Create range from anchor to target\n const startIndex = Math.min(anchorIndex, targetIndex)\n const endIndex = Math.max(anchorIndex, targetIndex)\n const newRangeIndexes = Array.from(\n { length: endIndex - startIndex + 1 },\n (_, i) => startIndex + i\n )\n\n if (isWithinBounds) {\n // Contracting: replace with new range\n return newRangeIndexes\n } else {\n // Extending: union with existing\n const mappedSet = new Set([...existingIndexes, ...newRangeIndexes])\n return Array.from(mappedSet)\n }\n },\n [docs, selectedIDs]\n )\n\n const updateSelections = React.useCallback(\n ({ indexes }: { indexes: number[] }) => {\n const { newSelectedIDs } = docs.reduce(\n (acc, item, index) => {\n if (indexes.includes(index)) {\n acc.newSelectedIDs.add(item.id)\n }\n return acc\n },\n {\n newSelectedIDs: new Set<string | number>(),\n }\n )\n\n // Clear previous selection in global selection context\n selectedIDs.forEach((id) => {\n setSelection(id)\n })\n\n // Update selection in global selection context\n newSelectedIDs.forEach((id) => {\n const item = getItem(id)\n if (item) {\n setSelection(item.id)\n }\n })\n },\n [docs, getItem, setSelection]\n )\n\n const onItemKeyPress: GridContextValue['onItemKeyPress'] = React.useCallback(\n ({ event, item: currentItem }) => {\n const { code, ctrlKey, metaKey, shiftKey } = event\n\n const isShiftPressed = shiftKey\n const isCtrlPressed = ctrlKey || metaKey\n const isCurrentlySelected = selectedIDs.includes(currentItem.id)\n const currentItemIndex = docs.findIndex(\n (item) => item.id === currentItem.id\n )\n\n switch (code) {\n case 'ArrowDown':\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'ArrowUp': {\n event.preventDefault()\n\n if (currentItemIndex === -1) {\n break\n }\n\n const isBackward = code === 'ArrowLeft' || code === 'ArrowUp'\n const newItemIndex = isBackward\n ? currentItemIndex - 1\n : currentItemIndex + 1\n\n if (newItemIndex < 0 || newItemIndex > totalCount - 1) {\n // out of bounds, keep current selection\n return\n }\n\n setFocusedItemIndex(newItemIndex)\n\n if (isCtrlPressed) {\n break\n }\n\n if (isShiftPressed && allowMultiSelection) {\n const selectedIndexes = handleShiftSelection(newItemIndex)\n updateSelections({ indexes: selectedIndexes })\n return\n }\n\n // Single selection without shift\n if (!isShiftPressed) {\n // const newItem = allItems[newItemIndex]\n updateSelections({ indexes: [newItemIndex] })\n }\n\n break\n }\n case 'Enter': {\n if (selectedIDs.length === 1) {\n // setFocusedItemIndex(undefined)\n navigateAfterSelection({\n collectionSlug: currentItem.relationTo,\n docID: currentItem.id,\n })\n return\n }\n break\n }\n case 'Escape': {\n clearSelections()\n break\n }\n case 'KeyA': {\n if (allowMultiSelection && isCtrlPressed) {\n event.preventDefault()\n setFocusedItemIndex(totalCount - 1)\n updateSelections({\n indexes: Array.from({ length: totalCount }, (_, i) => i),\n })\n }\n break\n }\n case 'Space': {\n if (allowMultiSelection && isShiftPressed) {\n event.preventDefault()\n updateSelections({\n indexes: docs.reduce((acc, item, idx) => {\n if (item.id === currentItem.id) {\n if (isCurrentlySelected) {\n return acc\n } else {\n acc.push(idx)\n }\n } else if (selectedIDs.includes(item.id)) {\n acc.push(idx)\n }\n return acc\n }, [] as number[]),\n })\n } else {\n event.preventDefault()\n updateSelections({\n indexes: isCurrentlySelected ? [] : [currentItemIndex],\n })\n }\n break\n }\n case 'Tab': {\n if (allowMultiSelection && isShiftPressed) {\n const prevIndex = currentItemIndex - 1\n if (prevIndex < 0 && selectedIDs.length > 0) {\n setFocusedItemIndex(prevIndex)\n }\n } else {\n const nextIndex = currentItemIndex + 1\n if (nextIndex === totalCount && selectedIDs.length > 0) {\n setFocusedItemIndex(totalCount - 1)\n }\n }\n break\n }\n }\n },\n [\n selectedIDs,\n docs,\n allowMultiSelection,\n handleShiftSelection,\n updateSelections,\n navigateAfterSelection,\n clearSelections,\n totalCount,\n ]\n )\n\n // Track last clicked item for double-click detection\n const [lastClickedItem, setLastClickedItem] = React.useState<\n MappedDocument | undefined\n >()\n\n const onItemClick: GridContextValue['onItemClick'] = React.useCallback(\n ({ event, item: clickedItem }) => {\n let doubleClicked: boolean = false\n const isCtrlPressed = event.ctrlKey || event.metaKey\n const isShiftPressed = event.shiftKey\n const isCurrentlySelected = selectedIDs.includes(clickedItem.id)\n const currentItemIndex = docs.findIndex(\n (item) => item.id === clickedItem.id\n )\n\n switch (true) {\n case allowMultiSelection && isCtrlPressed: {\n event.preventDefault()\n const indexes = docs.reduce((acc, item, idx) => {\n if (item.id === clickedItem.id) {\n if (!isCurrentlySelected) {\n acc.push(idx)\n }\n } else if (selectedIDs.includes(item.id)) {\n acc.push(idx)\n }\n return acc\n }, [] as number[])\n\n updateSelections({ indexes })\n break\n }\n case allowMultiSelection && isShiftPressed: {\n if (currentItemIndex !== -1) {\n const selectedIndexes = handleShiftSelection(currentItemIndex)\n updateSelections({ indexes: selectedIndexes })\n }\n break\n }\n default: {\n const now = Date.now()\n doubleClicked =\n now - (lastClickTime.current ?? 0) < 400 &&\n lastClickedItem?.id === clickedItem.id\n lastClickTime.current = now\n\n if (!doubleClicked) {\n updateSelections({\n indexes:\n isCurrentlySelected && selectedIDs.length === 1\n ? []\n : [currentItemIndex],\n })\n }\n break\n }\n }\n\n // Update last clicked item to determine double clicks\n setLastClickedItem(clickedItem)\n\n if (doubleClicked) {\n navigateAfterSelection({\n collectionSlug: clickedItem.relationTo,\n docID: clickedItem.id,\n })\n }\n },\n [\n docs,\n allowMultiSelection,\n getItem,\n updateSelections,\n navigateAfterSelection,\n handleShiftSelection,\n ]\n )\n\n return (\n <Context\n value={{\n clearSelections,\n docs,\n focusedItemIndex,\n onItemClick,\n onItemKeyPress,\n setFocusedItemIndex,\n }}\n >\n {children}\n </Context>\n )\n}\n\nexport function useGrid(): GridContextValue {\n const context = React.use(Context)\n\n if (context === undefined) {\n throw new Error('useGrid must be used within a GridProvider')\n }\n\n return context\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"gridContext.mjs","names":["React","useRouter","formatAdminURL","useDrawerDepth","useConfig","useRouteTransition","useSelection","jsx","_jsx","Context","createContext","docs","clearSelections","onItemClick","undefined","onItemKeyPress","setFocusedItemIndex","focusedItemIndex","GridProvider","props","allowMultiSelection","children","config","drawerDepth","router","startRouteTransition","setSelection","selectedIDs","currentlySelectedIndexes","useRef","Set","useState","lastClickTime","totalCount","length","useCallback","current","getItem","id","find","doc","navigateAfterSelection","collectionSlug","docID","push","adminRoute","routes","admin","path","handleShiftSelection","targetIndex","existingIndexes","reduce","acc","item","idx","includes","firstSelectedIndex","Math","min","lastSelectedIndex","max","isWithinBounds","anchorIndex","distanceToFirst","abs","distanceToLast","startIndex","endIndex","newRangeIndexes","Array","from","_","i","mappedSet","updateSelections","indexes","newSelectedIDs","index","add","forEach","event","currentItem","code","ctrlKey","metaKey","shiftKey","isShiftPressed","isCtrlPressed","isCurrentlySelected","currentItemIndex","findIndex","preventDefault","isBackward","newItemIndex","selectedIndexes","relationTo","prevIndex","nextIndex","lastClickedItem","setLastClickedItem","clickedItem","doubleClicked","now","Date","value","useGrid","context","use","Error"],"sources":["../../../src/components/gridContext/gridContext.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { useRouter } from 'next/navigation'\nimport { formatAdminURL } from 'payload/shared'\n\nimport { useDrawerDepth } from '@payloadcms/ui/elements/Drawer'\nimport { useConfig, useRouteTransition, useSelection } from '@payloadcms/ui'\n\nimport type { FolderSortKeys } from 'payload'\nimport type { MappedDocument } from '../gridView/gridView'\ninterface OnItemClickArgs {\n event: React.MouseEvent\n index: number\n item: MappedDocument\n}\n\ninterface OnItemKeyPressArgs {\n event: React.KeyboardEvent\n index: number\n item: MappedDocument\n}\n\nexport type GridContextValue = {\n docs?: MappedDocument[]\n clearSelections: () => void\n onItemClick: (args: OnItemClickArgs) => void\n onItemKeyPress: (args: OnItemKeyPressArgs) => void\n setFocusedItemIndex: React.Dispatch<React.SetStateAction<number>>\n focusedItemIndex: number\n}\n\nconst Context = React.createContext<GridContextValue>({\n docs: [],\n clearSelections: () => {},\n onItemClick: () => undefined,\n onItemKeyPress: () => undefined,\n setFocusedItemIndex: () => -1,\n focusedItemIndex: -1,\n})\n\nexport type GridProviderProps = {\n readonly allowMultiSelection?: boolean\n /**\n * Children to render inside the provider\n */\n readonly children: React.ReactNode\n /**\n * All documents in the current folder\n */\n readonly docs: MappedDocument[]\n /**\n * The intial search query\n */\n readonly search?: string\n /**\n * The sort order of the documents\n *\n * @example\n * `name` for descending\n * `-name` for ascending\n */\n readonly sort?: FolderSortKeys\n}\nexport function GridProvider(props: GridProviderProps) {\n const { allowMultiSelection = true, children, docs } = props\n\n const { config } = useConfig()\n const drawerDepth = useDrawerDepth()\n const router = useRouter()\n const { startRouteTransition } = useRouteTransition()\n\n const { setSelection, selectedIDs } = useSelection()\n const currentlySelectedIndexes = React.useRef(new Set<number>())\n\n const [focusedItemIndex, setFocusedItemIndex] = React.useState(-1)\n const lastClickTime = React.useRef<null | number>(null)\n const totalCount = docs.length\n\n const clearSelections = React.useCallback(() => {\n setFocusedItemIndex(-1)\n\n currentlySelectedIndexes.current = new Set()\n }, [])\n\n const getItem = React.useCallback(\n (id: string | number) => {\n return docs.find((doc) => doc.id === id)\n },\n [docs]\n )\n\n const navigateAfterSelection = React.useCallback(\n ({\n collectionSlug,\n docID,\n }: {\n collectionSlug: string\n docID?: number | string\n }) => {\n if (drawerDepth === 1) {\n // not in a drawer (default is 1)\n if (collectionSlug) {\n // clicked on document, take the user to the documet view\n startRouteTransition(() => {\n router.push(\n formatAdminURL({\n adminRoute: config.routes.admin,\n path: `/collections/${collectionSlug}/${docID}`,\n })\n )\n clearSelections()\n })\n }\n } else {\n clearSelections()\n }\n },\n [\n clearSelections,\n config.routes.admin,\n drawerDepth,\n getItem,\n router,\n startRouteTransition,\n ]\n )\n\n const handleShiftSelection = React.useCallback(\n (targetIndex: number) => {\n // Find existing selection boundaries\n const existingIndexes = docs.reduce((acc, item, idx) => {\n if (selectedIDs.includes(item.id)) {\n acc.push(idx)\n }\n return acc\n }, [] as number[])\n\n if (existingIndexes.length === 0) {\n // No existing selection, just select target\n return [targetIndex]\n }\n\n const firstSelectedIndex = Math.min(...existingIndexes)\n const lastSelectedIndex = Math.max(...existingIndexes)\n const isWithinBounds =\n targetIndex >= firstSelectedIndex && targetIndex <= lastSelectedIndex\n\n // Choose anchor based on whether we're contracting or extending\n let anchorIndex = targetIndex\n if (isWithinBounds) {\n // Contracting: if target is at a boundary, use target as anchor\n // Otherwise, use furthest boundary to maintain opposite edge\n if (\n targetIndex === firstSelectedIndex ||\n targetIndex === lastSelectedIndex\n ) {\n anchorIndex = targetIndex\n } else {\n const distanceToFirst = Math.abs(targetIndex - firstSelectedIndex)\n const distanceToLast = Math.abs(targetIndex - lastSelectedIndex)\n anchorIndex =\n distanceToFirst >= distanceToLast\n ? firstSelectedIndex\n : lastSelectedIndex\n }\n } else {\n // Extending: use closest boundary\n const distanceToFirst = Math.abs(targetIndex - firstSelectedIndex)\n const distanceToLast = Math.abs(targetIndex - lastSelectedIndex)\n anchorIndex =\n distanceToFirst <= distanceToLast\n ? firstSelectedIndex\n : lastSelectedIndex\n }\n\n // Create range from anchor to target\n const startIndex = Math.min(anchorIndex, targetIndex)\n const endIndex = Math.max(anchorIndex, targetIndex)\n const newRangeIndexes = Array.from(\n { length: endIndex - startIndex + 1 },\n (_, i) => startIndex + i\n )\n\n if (isWithinBounds) {\n // Contracting: replace with new range\n return newRangeIndexes\n } else {\n // Extending: union with existing\n const mappedSet = new Set([...existingIndexes, ...newRangeIndexes])\n return Array.from(mappedSet)\n }\n },\n [docs, selectedIDs]\n )\n\n const updateSelections = React.useCallback(\n ({ indexes }: { indexes: number[] }) => {\n const { newSelectedIDs } = docs.reduce(\n (acc, item, index) => {\n if (indexes.includes(index)) {\n acc.newSelectedIDs.add(item.id)\n }\n return acc\n },\n {\n newSelectedIDs: new Set<string | number>(),\n }\n )\n\n // Clear previous selection in global selection context\n selectedIDs.forEach((id) => {\n setSelection(id)\n })\n\n // Update selection in global selection context\n newSelectedIDs.forEach((id) => {\n const item = getItem(id)\n if (item) {\n setSelection(item.id)\n }\n })\n },\n [docs, getItem, setSelection]\n )\n\n const onItemKeyPress: GridContextValue['onItemKeyPress'] = React.useCallback(\n ({ event, item: currentItem }) => {\n const { code, ctrlKey, metaKey, shiftKey } = event\n\n const isShiftPressed = shiftKey\n const isCtrlPressed = ctrlKey || metaKey\n const isCurrentlySelected = selectedIDs.includes(currentItem.id)\n const currentItemIndex = docs.findIndex(\n (item) => item.id === currentItem.id\n )\n\n switch (code) {\n case 'ArrowDown':\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'ArrowUp': {\n event.preventDefault()\n\n if (currentItemIndex === -1) {\n break\n }\n\n const isBackward = code === 'ArrowLeft' || code === 'ArrowUp'\n const newItemIndex = isBackward\n ? currentItemIndex - 1\n : currentItemIndex + 1\n\n if (newItemIndex < 0 || newItemIndex > totalCount - 1) {\n // out of bounds, keep current selection\n return\n }\n\n setFocusedItemIndex(newItemIndex)\n\n if (isCtrlPressed) {\n break\n }\n\n if (isShiftPressed && allowMultiSelection) {\n const selectedIndexes = handleShiftSelection(newItemIndex)\n updateSelections({ indexes: selectedIndexes })\n return\n }\n\n // Single selection without shift\n if (!isShiftPressed) {\n // const newItem = allItems[newItemIndex]\n updateSelections({ indexes: [newItemIndex] })\n }\n\n break\n }\n case 'Enter': {\n if (selectedIDs.length === 1) {\n // setFocusedItemIndex(undefined)\n navigateAfterSelection({\n collectionSlug: currentItem.relationTo,\n docID: currentItem.id,\n })\n return\n }\n break\n }\n case 'Escape': {\n clearSelections()\n break\n }\n case 'KeyA': {\n if (allowMultiSelection && isCtrlPressed) {\n event.preventDefault()\n setFocusedItemIndex(totalCount - 1)\n updateSelections({\n indexes: Array.from({ length: totalCount }, (_, i) => i),\n })\n }\n break\n }\n case 'Space': {\n if (allowMultiSelection && isShiftPressed) {\n event.preventDefault()\n updateSelections({\n indexes: docs.reduce((acc, item, idx) => {\n if (item.id === currentItem.id) {\n if (isCurrentlySelected) {\n return acc\n } else {\n acc.push(idx)\n }\n } else if (selectedIDs.includes(item.id)) {\n acc.push(idx)\n }\n return acc\n }, [] as number[]),\n })\n } else {\n event.preventDefault()\n updateSelections({\n indexes: isCurrentlySelected ? [] : [currentItemIndex],\n })\n }\n break\n }\n case 'Tab': {\n if (allowMultiSelection && isShiftPressed) {\n const prevIndex = currentItemIndex - 1\n if (prevIndex < 0 && selectedIDs.length > 0) {\n setFocusedItemIndex(prevIndex)\n }\n } else {\n const nextIndex = currentItemIndex + 1\n if (nextIndex === totalCount && selectedIDs.length > 0) {\n setFocusedItemIndex(totalCount - 1)\n }\n }\n break\n }\n }\n },\n [\n selectedIDs,\n docs,\n allowMultiSelection,\n handleShiftSelection,\n updateSelections,\n navigateAfterSelection,\n clearSelections,\n totalCount,\n ]\n )\n\n // Track last clicked item for double-click detection\n const [lastClickedItem, setLastClickedItem] = React.useState<\n MappedDocument | undefined\n >()\n\n const onItemClick: GridContextValue['onItemClick'] = React.useCallback(\n ({ event, item: clickedItem }) => {\n let doubleClicked: boolean = false\n const isCtrlPressed = event.ctrlKey || event.metaKey\n const isShiftPressed = event.shiftKey\n const isCurrentlySelected = selectedIDs.includes(clickedItem.id)\n const currentItemIndex = docs.findIndex(\n (item) => item.id === clickedItem.id\n )\n\n switch (true) {\n case allowMultiSelection && isCtrlPressed: {\n event.preventDefault()\n const indexes = docs.reduce((acc, item, idx) => {\n if (item.id === clickedItem.id) {\n if (!isCurrentlySelected) {\n acc.push(idx)\n }\n } else if (selectedIDs.includes(item.id)) {\n acc.push(idx)\n }\n return acc\n }, [] as number[])\n\n updateSelections({ indexes })\n break\n }\n case allowMultiSelection && isShiftPressed: {\n if (currentItemIndex !== -1) {\n const selectedIndexes = handleShiftSelection(currentItemIndex)\n updateSelections({ indexes: selectedIndexes })\n }\n break\n }\n default: {\n const now = Date.now()\n doubleClicked =\n now - (lastClickTime.current ?? 0) < 400 &&\n lastClickedItem?.id === clickedItem.id\n lastClickTime.current = now\n\n if (!doubleClicked) {\n updateSelections({\n indexes:\n isCurrentlySelected && selectedIDs.length === 1\n ? []\n : [currentItemIndex],\n })\n }\n break\n }\n }\n\n // Update last clicked item to determine double clicks\n setLastClickedItem(clickedItem)\n\n if (doubleClicked) {\n navigateAfterSelection({\n collectionSlug: clickedItem.relationTo,\n docID: clickedItem.id,\n })\n }\n },\n [\n docs,\n allowMultiSelection,\n getItem,\n updateSelections,\n navigateAfterSelection,\n handleShiftSelection,\n ]\n )\n\n return (\n <Context\n value={{\n clearSelections,\n docs,\n focusedItemIndex,\n onItemClick,\n onItemKeyPress,\n setFocusedItemIndex,\n }}\n >\n {children}\n </Context>\n )\n}\n\nexport function useGrid(): GridContextValue {\n const context = React.use(Context)\n\n if (context === undefined) {\n throw new Error('useGrid must be used within a GridProvider')\n }\n\n return context\n}\n"],"mappings":"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"}
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
import { GridProvider } from "../gridContext/gridContext.mjs";
|
|
4
4
|
import { ItemCardGrid } from "../itemCardGrid/itemCardGrid.mjs";
|
|
5
5
|
import { c } from "react/compiler-runtime";
|
|
6
|
-
import
|
|
6
|
+
import { Fragment, useEffect } from "react";
|
|
7
7
|
import { useRouter } from "next/navigation";
|
|
8
8
|
import { getTranslation } from "@payloadcms/translations";
|
|
9
9
|
import { Gutter, ListControls, ListHeader, ListSelection, PageControls, SelectMany, SelectionProvider, useBulkUpload, useConfig, useListDrawerContext, useListQuery, useModal, useStepNav, useTranslation, useWindowInfo } from "@payloadcms/ui";
|
|
10
10
|
import { DefaultListViewTabs } from "@payloadcms/ui/elements/DefaultListViewTabs";
|
|
11
11
|
import { formatAdminURL } from "payload/shared";
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
13
|
import "./gridView.css";
|
|
13
14
|
|
|
14
15
|
//#region src/components/gridView/gridView.tsx
|
|
@@ -139,7 +140,11 @@ function GridView(props) {
|
|
|
139
140
|
const t11 = `grid-view grid-view--${collectionSlug}`;
|
|
140
141
|
let t12;
|
|
141
142
|
if ($[35] !== collectionConfig.disableBulkEdit || $[36] !== disableBulkDelete || $[37] !== disableBulkEdit || $[38] !== i18n || $[39] !== labels?.plural || $[40] !== smallBreak) {
|
|
142
|
-
t12 = !smallBreak &&
|
|
143
|
+
t12 = !smallBreak && /* @__PURE__ */ jsx(ListSelection, {
|
|
144
|
+
disableBulkDelete,
|
|
145
|
+
disableBulkEdit: collectionConfig.disableBulkEdit ?? disableBulkEdit,
|
|
146
|
+
label: getTranslation(labels?.plural, i18n)
|
|
147
|
+
}, "list-selection");
|
|
143
148
|
$[35] = collectionConfig.disableBulkEdit;
|
|
144
149
|
$[36] = disableBulkDelete;
|
|
145
150
|
$[37] = disableBulkEdit;
|
|
@@ -150,7 +155,11 @@ function GridView(props) {
|
|
|
150
155
|
} else t12 = $[41];
|
|
151
156
|
let t13;
|
|
152
157
|
if ($[42] !== collectionConfig || $[43] !== config) {
|
|
153
|
-
t13 =
|
|
158
|
+
t13 = /* @__PURE__ */ jsx(DefaultListViewTabs, {
|
|
159
|
+
collectionConfig,
|
|
160
|
+
config,
|
|
161
|
+
viewType: "list"
|
|
162
|
+
}, "default-list-actions");
|
|
154
163
|
$[42] = collectionConfig;
|
|
155
164
|
$[43] = config;
|
|
156
165
|
$[44] = t13;
|
|
@@ -175,7 +184,23 @@ function GridView(props) {
|
|
|
175
184
|
} else t15 = $[50];
|
|
176
185
|
let t16;
|
|
177
186
|
if ($[51] !== Description || $[52] !== collectionConfig || $[53] !== disableBulkDelete || $[54] !== disableBulkEdit || $[55] !== hasCreatePermission || $[56] !== hasDeletePermission || $[57] !== i18n || $[58] !== isBulkUploadEnabled || $[59] !== isTrashEnabled || $[60] !== newDocumentURL || $[61] !== openBulkUpload || $[62] !== smallBreak || $[63] !== t14 || $[64] !== t15 || $[65] !== viewType) {
|
|
178
|
-
t16 =
|
|
187
|
+
t16 = /* @__PURE__ */ jsx(ListHeader, {
|
|
188
|
+
Actions: t14,
|
|
189
|
+
collectionConfig,
|
|
190
|
+
Description,
|
|
191
|
+
disableBulkDelete,
|
|
192
|
+
disableBulkEdit,
|
|
193
|
+
hasCreatePermission,
|
|
194
|
+
hasDeletePermission,
|
|
195
|
+
i18n,
|
|
196
|
+
isBulkUploadEnabled,
|
|
197
|
+
isTrashEnabled,
|
|
198
|
+
newDocumentURL,
|
|
199
|
+
onBulkUploadSuccess: t15,
|
|
200
|
+
openBulkUpload,
|
|
201
|
+
smallBreak,
|
|
202
|
+
viewType
|
|
203
|
+
});
|
|
179
204
|
$[51] = Description;
|
|
180
205
|
$[52] = collectionConfig;
|
|
181
206
|
$[53] = disableBulkDelete;
|
|
@@ -195,14 +220,33 @@ function GridView(props) {
|
|
|
195
220
|
} else t16 = $[66];
|
|
196
221
|
let t17;
|
|
197
222
|
if ($[67] !== collectionConfig || $[68] !== collectionSlug) {
|
|
198
|
-
t17 =
|
|
223
|
+
t17 = /* @__PURE__ */ jsx(ListControls, {
|
|
224
|
+
collectionConfig,
|
|
225
|
+
collectionSlug,
|
|
226
|
+
enableColumns: false
|
|
227
|
+
});
|
|
199
228
|
$[67] = collectionConfig;
|
|
200
229
|
$[68] = collectionSlug;
|
|
201
230
|
$[69] = t17;
|
|
202
231
|
} else t17 = $[69];
|
|
203
232
|
let t18;
|
|
204
233
|
if ($[70] !== adminRoute || $[71] !== collectionSlug || $[72] !== docs.length || $[73] !== hasCreatePermission || $[74] !== i18n || $[75] !== labels?.plural || $[76] !== labels?.singular || $[77] !== mappedDocs || $[78] !== newDocumentURL || $[79] !== router || $[80] !== viewType) {
|
|
205
|
-
t18 = docs.length === 0 ?
|
|
234
|
+
t18 = docs.length === 0 ? /* @__PURE__ */ jsxs("div", {
|
|
235
|
+
className: "grid-view__no-results",
|
|
236
|
+
children: [/* @__PURE__ */ jsx("p", { children: i18n.t(viewType === "trash" ? "general:noTrashResults" : "general:noResults", { label: getTranslation(labels?.plural, i18n) }) }), hasCreatePermission && newDocumentURL && /* @__PURE__ */ jsx("div", {
|
|
237
|
+
className: "grid-view__no-results__actions",
|
|
238
|
+
children: /* @__PURE__ */ jsx("button", {
|
|
239
|
+
type: "button",
|
|
240
|
+
onClick: () => router.push(newDocumentURL),
|
|
241
|
+
className: "grid-view__create-link btn btn--icon-style-without-border btn--size-small btn--withoutPopup btn--style-pill btn--withoutPopup",
|
|
242
|
+
children: i18n.t("general:createNewLabel", { label: getTranslation(labels?.singular, i18n) })
|
|
243
|
+
})
|
|
244
|
+
})]
|
|
245
|
+
}) : /* @__PURE__ */ jsx(ItemCardGrid, {
|
|
246
|
+
items: mappedDocs,
|
|
247
|
+
adminRoute,
|
|
248
|
+
collectionSlug
|
|
249
|
+
});
|
|
206
250
|
$[70] = adminRoute;
|
|
207
251
|
$[71] = collectionSlug;
|
|
208
252
|
$[72] = docs.length;
|
|
@@ -218,7 +262,21 @@ function GridView(props) {
|
|
|
218
262
|
} else t18 = $[81];
|
|
219
263
|
let t19;
|
|
220
264
|
if ($[82] !== beforeActions || $[83] !== collectionConfig || $[84] !== disableBulkDelete || $[85] !== disableBulkEdit || $[86] !== docs.length || $[87] !== i18n || $[88] !== onBulkSelect || $[89] !== smallBreak) {
|
|
221
|
-
t19 = docs?.length > 0 &&
|
|
265
|
+
t19 = docs?.length > 0 && /* @__PURE__ */ jsx(PageControls, {
|
|
266
|
+
AfterPageControls: smallBreak ? /* @__PURE__ */ jsxs("div", {
|
|
267
|
+
className: "grid-view__list-selection",
|
|
268
|
+
children: [/* @__PURE__ */ jsx(ListSelection, {
|
|
269
|
+
collectionConfig,
|
|
270
|
+
disableBulkDelete,
|
|
271
|
+
disableBulkEdit,
|
|
272
|
+
label: getTranslation(collectionConfig.labels.plural, i18n)
|
|
273
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
274
|
+
className: "grid-view__list-selection-actions",
|
|
275
|
+
children: typeof onBulkSelect === "function" ? beforeActions ? [...beforeActions, /* @__PURE__ */ jsx(SelectMany, { onClick: onBulkSelect }, "select-many")] : [/* @__PURE__ */ jsx(SelectMany, { onClick: onBulkSelect }, "select-many")] : beforeActions
|
|
276
|
+
})]
|
|
277
|
+
}) : null,
|
|
278
|
+
collectionConfig
|
|
279
|
+
});
|
|
222
280
|
$[82] = beforeActions;
|
|
223
281
|
$[83] = collectionConfig;
|
|
224
282
|
$[84] = disableBulkDelete;
|
|
@@ -231,7 +289,17 @@ function GridView(props) {
|
|
|
231
289
|
} else t19 = $[90];
|
|
232
290
|
let t20;
|
|
233
291
|
if ($[91] !== AfterListTable || $[92] !== BeforeListTable || $[93] !== t16 || $[94] !== t17 || $[95] !== t18 || $[96] !== t19) {
|
|
234
|
-
t20 =
|
|
292
|
+
t20 = /* @__PURE__ */ jsxs(Gutter, {
|
|
293
|
+
className: "grid-view__wrapper collection-list__wrap",
|
|
294
|
+
children: [
|
|
295
|
+
t16,
|
|
296
|
+
t17,
|
|
297
|
+
BeforeListTable,
|
|
298
|
+
t18,
|
|
299
|
+
t19,
|
|
300
|
+
AfterListTable
|
|
301
|
+
]
|
|
302
|
+
});
|
|
235
303
|
$[91] = AfterListTable;
|
|
236
304
|
$[92] = BeforeListTable;
|
|
237
305
|
$[93] = t16;
|
|
@@ -242,7 +310,11 @@ function GridView(props) {
|
|
|
242
310
|
} else t20 = $[97];
|
|
243
311
|
let t21;
|
|
244
312
|
if ($[98] !== AfterList || $[99] !== BeforeList || $[100] !== t20) {
|
|
245
|
-
t21 =
|
|
313
|
+
t21 = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
314
|
+
BeforeList,
|
|
315
|
+
t20,
|
|
316
|
+
AfterList
|
|
317
|
+
] });
|
|
246
318
|
$[98] = AfterList;
|
|
247
319
|
$[99] = BeforeList;
|
|
248
320
|
$[100] = t20;
|
|
@@ -250,21 +322,32 @@ function GridView(props) {
|
|
|
250
322
|
} else t21 = $[101];
|
|
251
323
|
let t22;
|
|
252
324
|
if ($[102] !== t11 || $[103] !== t21) {
|
|
253
|
-
t22 =
|
|
325
|
+
t22 = /* @__PURE__ */ jsx("div", {
|
|
326
|
+
className: t11,
|
|
327
|
+
children: t21
|
|
328
|
+
});
|
|
254
329
|
$[102] = t11;
|
|
255
330
|
$[103] = t21;
|
|
256
331
|
$[104] = t22;
|
|
257
332
|
} else t22 = $[104];
|
|
258
333
|
let t23;
|
|
259
334
|
if ($[105] !== mappedDocs || $[106] !== t22) {
|
|
260
|
-
t23 =
|
|
335
|
+
t23 = /* @__PURE__ */ jsx(GridProvider, {
|
|
336
|
+
allowMultiSelection: true,
|
|
337
|
+
docs: mappedDocs,
|
|
338
|
+
children: t22
|
|
339
|
+
});
|
|
261
340
|
$[105] = mappedDocs;
|
|
262
341
|
$[106] = t22;
|
|
263
342
|
$[107] = t23;
|
|
264
343
|
} else t23 = $[107];
|
|
265
344
|
let t24;
|
|
266
345
|
if ($[108] !== docs || $[109] !== t10 || $[110] !== t23) {
|
|
267
|
-
t24 =
|
|
346
|
+
t24 = /* @__PURE__ */ jsx(SelectionProvider, {
|
|
347
|
+
docs,
|
|
348
|
+
totalDocs: t10,
|
|
349
|
+
children: t23
|
|
350
|
+
});
|
|
268
351
|
$[108] = docs;
|
|
269
352
|
$[109] = t10;
|
|
270
353
|
$[110] = t23;
|
|
@@ -273,8 +356,8 @@ function GridView(props) {
|
|
|
273
356
|
return t24;
|
|
274
357
|
}
|
|
275
358
|
function _temp(doc) {
|
|
276
|
-
if (doc?.storage === "mux" && doc?.mux?.playbackId) return `https://image.mux.com/${doc.mux.playbackId}/thumbnail.jpg?width=400&height=400&fit_mode=pad`;
|
|
277
359
|
if (doc?.thumbnailURL) return doc.thumbnailURL;
|
|
360
|
+
if (doc?.storage === "mux" && doc?.mux?.playbackId) return `https://image.mux.com/${doc.mux.playbackId}/thumbnail.jpg?width=400&height=400&fit_mode=pad`;
|
|
278
361
|
}
|
|
279
362
|
var gridView_default = GridView;
|
|
280
363
|
|