@payloadcms/ui 3.0.0-beta.93 → 3.0.0-beta.94
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/elements/BulkUpload/AddFilesView/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/AddFilesView/index.js +44 -30
- package/dist/elements/BulkUpload/AddFilesView/index.js.map +1 -1
- package/dist/elements/BulkUpload/AddFilesView/index.scss +14 -1
- package/dist/elements/BulkUpload/AddingFilesView/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/AddingFilesView/index.js +7 -7
- package/dist/elements/BulkUpload/AddingFilesView/index.js.map +1 -1
- package/dist/elements/BulkUpload/DiscardWithoutSaving/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/DiscardWithoutSaving/index.js +14 -17
- package/dist/elements/BulkUpload/DiscardWithoutSaving/index.js.map +1 -1
- package/dist/elements/BulkUpload/DrawerCloseButton/index.d.ts +1 -2
- package/dist/elements/BulkUpload/DrawerCloseButton/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/DrawerCloseButton/index.js +5 -8
- package/dist/elements/BulkUpload/DrawerCloseButton/index.js.map +1 -1
- package/dist/elements/BulkUpload/EditForm/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/EditForm/index.js +31 -28
- package/dist/elements/BulkUpload/EditForm/index.js.map +1 -1
- package/dist/elements/BulkUpload/FileSidebar/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/FileSidebar/index.js +65 -55
- package/dist/elements/BulkUpload/FileSidebar/index.js.map +1 -1
- package/dist/elements/BulkUpload/FileSidebar/index.scss +4 -0
- package/dist/elements/BulkUpload/FormsManager/index.d.ts +4 -7
- package/dist/elements/BulkUpload/FormsManager/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/FormsManager/index.js +62 -36
- package/dist/elements/BulkUpload/FormsManager/index.js.map +1 -1
- package/dist/elements/BulkUpload/Header/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/Header/index.js +1 -3
- package/dist/elements/BulkUpload/Header/index.js.map +1 -1
- package/dist/elements/BulkUpload/index.d.ts +21 -5
- package/dist/elements/BulkUpload/index.d.ts.map +1 -1
- package/dist/elements/BulkUpload/index.js +148 -51
- package/dist/elements/BulkUpload/index.js.map +1 -1
- package/dist/elements/DocumentDrawer/DrawerContent.d.ts.map +1 -1
- package/dist/elements/DocumentDrawer/DrawerContent.js +18 -15
- package/dist/elements/DocumentDrawer/DrawerContent.js.map +1 -1
- package/dist/elements/DocumentDrawer/types.d.ts +1 -0
- package/dist/elements/DocumentDrawer/types.d.ts.map +1 -1
- package/dist/elements/DocumentDrawer/types.js.map +1 -1
- package/dist/elements/DraggableSortable/index.d.ts.map +1 -1
- package/dist/elements/DraggableSortable/index.js +1 -0
- package/dist/elements/DraggableSortable/index.js.map +1 -1
- package/dist/elements/Dropzone/index.d.ts +3 -3
- package/dist/elements/Dropzone/index.d.ts.map +1 -1
- package/dist/elements/Dropzone/index.js +23 -50
- package/dist/elements/Dropzone/index.js.map +1 -1
- package/dist/elements/Dropzone/index.scss +6 -23
- package/dist/elements/FileDetails/DraggableFileDetails/index.d.ts.map +1 -1
- package/dist/elements/FileDetails/DraggableFileDetails/index.js.map +1 -1
- package/dist/elements/FileDetails/StaticFileDetails/index.d.ts.map +1 -1
- package/dist/elements/FileDetails/StaticFileDetails/index.js +0 -1
- package/dist/elements/FileDetails/StaticFileDetails/index.js.map +1 -1
- package/dist/elements/FileDetails/StaticFileDetails/index.scss +1 -0
- package/dist/elements/ListDrawer/index.scss +7 -0
- package/dist/elements/ShimmerEffect/index.d.ts +3 -3
- package/dist/elements/ShimmerEffect/index.d.ts.map +1 -1
- package/dist/elements/ShimmerEffect/index.js.map +1 -1
- package/dist/elements/Thumbnail/index.d.ts +10 -6
- package/dist/elements/Thumbnail/index.d.ts.map +1 -1
- package/dist/elements/Thumbnail/index.js +84 -9
- package/dist/elements/Thumbnail/index.js.map +1 -1
- package/dist/elements/Upload/index.d.ts.map +1 -1
- package/dist/elements/Upload/index.js +59 -33
- package/dist/elements/Upload/index.js.map +1 -1
- package/dist/elements/Upload/index.scss +9 -0
- package/dist/exports/client/{CodeEditor-MTP455NO.js → CodeEditor-P66JEENA.js} +2 -2
- package/dist/exports/client/{chunk-NJHSEGFB.js → chunk-XKP472RX.js} +1 -1
- package/dist/exports/client/{chunk-NJHSEGFB.js.map → chunk-XKP472RX.js.map} +1 -1
- package/dist/exports/client/index.d.ts +3 -2
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +19 -19
- package/dist/exports/client/index.js.map +4 -4
- package/dist/fields/Upload/HasMany/index.d.ts +16 -2
- package/dist/fields/Upload/HasMany/index.d.ts.map +1 -1
- package/dist/fields/Upload/HasMany/index.js +148 -224
- package/dist/fields/Upload/HasMany/index.js.map +1 -1
- package/dist/fields/Upload/HasMany/index.scss +12 -56
- package/dist/fields/Upload/HasOne/index.d.ts +13 -9
- package/dist/fields/Upload/HasOne/index.d.ts.map +1 -1
- package/dist/fields/Upload/HasOne/index.js +30 -121
- package/dist/fields/Upload/HasOne/index.js.map +1 -1
- package/dist/fields/Upload/HasOne/index.scss +0 -68
- package/dist/fields/Upload/{HasOne/Input.d.ts → Input.d.ts} +9 -4
- package/dist/fields/Upload/Input.d.ts.map +1 -0
- package/dist/fields/Upload/Input.js +366 -0
- package/dist/fields/Upload/Input.js.map +1 -0
- package/dist/fields/Upload/RelationshipContent/index.d.ts +21 -0
- package/dist/fields/Upload/RelationshipContent/index.d.ts.map +1 -0
- package/dist/fields/Upload/RelationshipContent/index.js +135 -0
- package/dist/fields/Upload/RelationshipContent/index.js.map +1 -0
- package/dist/fields/Upload/RelationshipContent/index.scss +51 -0
- package/dist/fields/Upload/UploadCard/index.d.ts +10 -0
- package/dist/fields/Upload/UploadCard/index.d.ts.map +1 -0
- package/dist/fields/Upload/UploadCard/index.js +15 -0
- package/dist/fields/Upload/UploadCard/index.js.map +1 -0
- package/dist/fields/Upload/UploadCard/index.scss +27 -0
- package/dist/fields/Upload/index.d.ts +4 -4
- package/dist/fields/Upload/index.d.ts.map +1 -1
- package/dist/fields/Upload/index.js +85 -91
- package/dist/fields/Upload/index.js.map +1 -1
- package/dist/fields/Upload/index.scss +57 -0
- package/dist/providers/Root/index.d.ts +12 -12
- package/dist/providers/Root/index.d.ts.map +1 -1
- package/dist/providers/Root/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +5 -5
- package/dist/fields/Upload/HasOne/Input.d.ts.map +0 -1
- package/dist/fields/Upload/HasOne/Input.js +0 -324
- package/dist/fields/Upload/HasOne/Input.js.map +0 -1
- /package/dist/exports/client/{CodeEditor-MTP455NO.js.map → CodeEditor-P66JEENA.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'\nimport type { Props as DrawerProps } from '../Drawer/types.js'\n\nexport type DocumentDrawerProps = {\n readonly collectionSlug: string\n readonly drawerSlug?: string\n readonly id?: null | number | string\n readonly onSave?: DocumentInfoContext['onSave']\n} & Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n readonly children?: React.ReactNode\n readonly className?: string\n readonly collectionSlug: string\n readonly disabled?: boolean\n readonly drawerSlug?: string\n readonly id?: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [\n React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer\n React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler\n {\n closeDrawer: () => void\n drawerDepth: number\n drawerSlug: string\n isDrawerOpen: boolean\n openDrawer: () => void\n toggleDrawer: () => void\n },\n]\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { DocumentInfoContext } from '../../providers/DocumentInfo/types.js'\nimport type { Props as DrawerProps } from '../Drawer/types.js'\n\nexport type DocumentDrawerProps = {\n readonly AfterFields?: React.ReactNode\n readonly collectionSlug: string\n readonly drawerSlug?: string\n readonly id?: null | number | string\n readonly onSave?: DocumentInfoContext['onSave']\n} & Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n readonly children?: React.ReactNode\n readonly className?: string\n readonly collectionSlug: string\n readonly disabled?: boolean\n readonly drawerSlug?: string\n readonly id?: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type UseDocumentDrawer = (args: { collectionSlug: string; id?: number | string }) => [\n React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>, // drawer\n React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>, // toggler\n {\n closeDrawer: () => void\n drawerDepth: number\n drawerSlug: string\n isDrawerOpen: boolean\n openDrawer: () => void\n toggleDrawer: () => void\n },\n]\n"],"mappings":"AAuBA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DraggableSortable/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,CAAA;AAEhB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqD7C,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","DndContext","KeyboardSensor","PointerSensor","closestCenter","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","id","t0","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","coordinateGetter","sensors","t3","event","active","over","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t4","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n DndContext,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n useDroppable,\n useSensor,\n useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n const { children, className, ids, onDragEnd } = props\n\n const id = useId()\n\n const { setNodeRef } = useDroppable({\n id,\n })\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n distance: 5,\n },\n }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n )\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n const { active, over } = event\n\n if (!active || !over) return\n\n if (typeof onDragEnd === 'function') {\n onDragEnd({\n event,\n moveFromIndex: ids.findIndex((_id) => _id === active.id),\n moveToIndex: ids.findIndex((_id) => _id === over.id),\n })\n }\n },\n [onDragEnd, ids],\n )\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n id={id}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext items={ids}>\n <div className={className} ref={setNodeRef}>\n {children}\n </div>\n </SortableContext>\n </DndContext>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SACEC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL;AACP,SAASC,eAAe,EAAEC,2BAA2B,QAAQ;AAC7D,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,QAAQ;AAM1C,OAAO,MAAMC,iBAAA,GAAqCC,KAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAChD;IAAAgB,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC;EAAA,IAAgDL,KAAA;EAEhD,MAAAM,EAAA,GAAWR,KAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAEyBC,EAAA;MAAAD;IAAA;IAEpCL,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAFA;IAAAO;EAAA,IAAuBjB,YAAA,CAAagB,EAEpC;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAG2BF,EAAA;MAAAG,oBAAA;QAAAC,QAAA;MAAA;IAAA;IAIzBZ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAC0BG,EAAA;MAAAC,gBAAA,EAAApB;IAAA;IAE1BM,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EARF,MAAAe,OAAA,GAAgBvB,UAAA,CACdD,SAAA,CAAAH,aAAA,EAAyBoB,EAIzB,GACAjB,SAAA,CAAAJ,cAAA,EAA0B0B,EAE1B;EAAA,IAAAG,EAAA;EAAA,IAAAhB,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAG,GAAA;IAIAa,EAAA,GAAAC,KAAA;MACE;QAAAC,MAAA;QAAAC;MAAA,IAAyBF,KAAA;MAAA,
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","DndContext","KeyboardSensor","PointerSensor","closestCenter","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","id","t0","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","coordinateGetter","sensors","t3","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t4","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n DndContext,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n useDroppable,\n useSensor,\n useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n const { children, className, ids, onDragEnd } = props\n\n const id = useId()\n\n const { setNodeRef } = useDroppable({\n id,\n })\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n distance: 5,\n },\n }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n )\n\n const handleDragEnd = useCallback(\n (event: DragEndEvent) => {\n const { active, over } = event\n\n event.activatorEvent.stopPropagation()\n\n if (!active || !over) return\n\n if (typeof onDragEnd === 'function') {\n onDragEnd({\n event,\n moveFromIndex: ids.findIndex((_id) => _id === active.id),\n moveToIndex: ids.findIndex((_id) => _id === over.id),\n })\n }\n },\n [onDragEnd, ids],\n )\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n id={id}\n onDragEnd={handleDragEnd}\n sensors={sensors}\n >\n <SortableContext items={ids}>\n <div className={className} ref={setNodeRef}>\n {children}\n </div>\n </SortableContext>\n </DndContext>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SACEC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL;AACP,SAASC,eAAe,EAAEC,2BAA2B,QAAQ;AAC7D,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,QAAQ;AAM1C,OAAO,MAAMC,iBAAA,GAAqCC,KAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAChD;IAAAgB,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC;EAAA,IAAgDL,KAAA;EAEhD,MAAAM,EAAA,GAAWR,KAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAEyBC,EAAA;MAAAD;IAAA;IAEpCL,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAFA;IAAAO;EAAA,IAAuBjB,YAAA,CAAagB,EAEpC;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAG2BF,EAAA;MAAAG,oBAAA;QAAAC,QAAA;MAAA;IAAA;IAIzBZ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAC0BG,EAAA;MAAAC,gBAAA,EAAApB;IAAA;IAE1BM,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EARF,MAAAe,OAAA,GAAgBvB,UAAA,CACdD,SAAA,CAAAH,aAAA,EAAyBoB,EAIzB,GACAjB,SAAA,CAAAJ,cAAA,EAA0B0B,EAE1B;EAAA,IAAAG,EAAA;EAAA,IAAAhB,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAG,GAAA;IAIAa,EAAA,GAAAC,KAAA;MACE;QAAAC,MAAA;QAAAC;MAAA,IAAyBF,KAAA;MAEzBA,KAAA,CAAAG,cAAA,CAAAC,eAAA,CAAoC;MAAA,IAEhC,CAACH,MAAA,KAAWC,IAAA;QAAA;MAAA;MAAA,IAEZ,OAAOf,SAAA,KAAc;QACvBA,SAAA;UAAAa,KAAA;UAAAK,aAAA,EAEiBnB,GAAA,CAAAoB,SAAA,CAAAC,GAAA,IAAuBA,GAAA,KAAQN,MAAA,CAAAb,EAAS;UAAAoB,WAAA,EAC1CtB,GAAA,CAAAoB,SAAA,CAAAG,KAAA,IAAuBF,KAAA,KAAQL,IAAA,CAAAd,EAAO;QAAA,CACrD;MAAA;IAAA;IAEJL,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAfF,MAAA2B,aAAA,GAAsBX,EAgBJ;EAAA,IAAAY,EAAA;EAAA,IAAA5B,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,SAAAG,GAAA,IAAAH,CAAA,SAAAK,EAAA,IAAAL,CAAA,SAAA2B,aAAA,IAAA3B,CAAA,SAAAe,OAAA;IAIhBa,EAAA,GAAAC,IAAA,CAAA3C,UAAA;MAAA4C,kBAAA,EAAAzC,aAAA;MAAAgB,EAAA;MAAAD,SAAA,EAGauB,aAAA;MAAAZ,OAAA;MAAAd,QAAA,EAGX4B,IAAA,CAAApC,eAAA;QAAAsC,KAAA,EAAwB5B,GAAA;QAAAF,QAAA,EACtB4B,IAAA,CAAC;UAAA3B,SAAA;UAAA8B,GAAA,EAA+BzB,UAAA;UAAAN;QAAA,C;;;;;;;;;;;;;;SAPpC2B,E;CAaJ","ignoreList":[]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './index.scss';
|
|
3
3
|
export type Props = {
|
|
4
|
+
readonly children?: React.ReactNode;
|
|
4
5
|
readonly className?: string;
|
|
5
|
-
readonly
|
|
6
|
+
readonly dropzoneStyle?: 'default' | 'none';
|
|
6
7
|
readonly multipleFiles?: boolean;
|
|
7
8
|
readonly onChange: (e: FileList) => void;
|
|
8
|
-
readonly onPasteUrlClick?: () => void;
|
|
9
9
|
};
|
|
10
|
-
export declare
|
|
10
|
+
export declare function Dropzone({ children, className, dropzoneStyle, multipleFiles, onChange, }: Props): React.JSX.Element;
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3C,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,aAAyB,EACzB,aAAa,EACb,QAAQ,GACT,EAAE,KAAK,qBA6FP"}
|
|
@@ -1,35 +1,38 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { jsx as _jsx
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { useTranslation } from '../../providers/Translation/index.js';
|
|
6
|
-
import { Button } from '../Button/index.js';
|
|
7
5
|
import './index.scss';
|
|
8
6
|
const handleDragOver = e => {
|
|
9
7
|
e.preventDefault();
|
|
10
8
|
e.stopPropagation();
|
|
11
9
|
};
|
|
12
10
|
const baseClass = 'dropzone';
|
|
13
|
-
export
|
|
11
|
+
export function Dropzone({
|
|
12
|
+
children,
|
|
14
13
|
className,
|
|
15
|
-
|
|
14
|
+
dropzoneStyle = 'default',
|
|
16
15
|
multipleFiles,
|
|
17
|
-
onChange
|
|
18
|
-
|
|
19
|
-
}) => {
|
|
16
|
+
onChange
|
|
17
|
+
}) {
|
|
20
18
|
const dropRef = React.useRef(null);
|
|
21
19
|
const [dragging, setDragging] = React.useState(false);
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
const addFiles = React.useCallback(files => {
|
|
21
|
+
if (!multipleFiles && files.length > 1) {
|
|
22
|
+
const dataTransfer = new DataTransfer();
|
|
23
|
+
dataTransfer.items.add(files[0]);
|
|
24
|
+
onChange(dataTransfer.files);
|
|
25
|
+
} else {
|
|
26
|
+
onChange(files);
|
|
27
|
+
}
|
|
28
|
+
}, [multipleFiles, onChange]);
|
|
26
29
|
const handlePaste = React.useCallback(e => {
|
|
27
30
|
e.preventDefault();
|
|
28
31
|
e.stopPropagation();
|
|
29
32
|
if (e.clipboardData.files && e.clipboardData.files.length > 0) {
|
|
30
|
-
|
|
33
|
+
addFiles(e.clipboardData.files);
|
|
31
34
|
}
|
|
32
|
-
}, [
|
|
35
|
+
}, [addFiles]);
|
|
33
36
|
const handleDragEnter = React.useCallback(e_0 => {
|
|
34
37
|
e_0.preventDefault();
|
|
35
38
|
e_0.stopPropagation();
|
|
@@ -45,16 +48,11 @@ export const Dropzone = ({
|
|
|
45
48
|
e_2.stopPropagation();
|
|
46
49
|
setDragging(false);
|
|
47
50
|
if (e_2.dataTransfer.files && e_2.dataTransfer.files.length > 0) {
|
|
48
|
-
|
|
51
|
+
addFiles(e_2.dataTransfer.files);
|
|
49
52
|
setDragging(false);
|
|
50
53
|
e_2.dataTransfer.clearData();
|
|
51
54
|
}
|
|
52
|
-
}, [
|
|
53
|
-
const handleFileSelection = React.useCallback(e_3 => {
|
|
54
|
-
if (e_3.target.files && e_3.target.files.length > 0) {
|
|
55
|
-
onChange(e_3.target.files);
|
|
56
|
-
}
|
|
57
|
-
}, [onChange]);
|
|
55
|
+
}, [addFiles]);
|
|
58
56
|
React.useEffect(() => {
|
|
59
57
|
const div = dropRef.current;
|
|
60
58
|
if (div) {
|
|
@@ -73,36 +71,11 @@ export const Dropzone = ({
|
|
|
73
71
|
}
|
|
74
72
|
return () => null;
|
|
75
73
|
}, [handleDragEnter, handleDragLeave, handleDrop, handlePaste]);
|
|
76
|
-
const classes = [baseClass, className, dragging ? 'dragging' : ''].filter(Boolean).join(' ');
|
|
77
|
-
return /*#__PURE__*/
|
|
74
|
+
const classes = [baseClass, className, dragging ? 'dragging' : '', `dropzoneStyle--${dropzoneStyle}`].filter(Boolean).join(' ');
|
|
75
|
+
return /*#__PURE__*/_jsx("div", {
|
|
78
76
|
className: classes,
|
|
79
77
|
ref: dropRef,
|
|
80
|
-
children:
|
|
81
|
-
buttonStyle: "secondary",
|
|
82
|
-
className: `${baseClass}__file-button`,
|
|
83
|
-
onClick: () => {
|
|
84
|
-
inputRef.current.click();
|
|
85
|
-
},
|
|
86
|
-
size: "medium",
|
|
87
|
-
children: t('upload:selectFile')
|
|
88
|
-
}), typeof onPasteUrlClick === 'function' && /*#__PURE__*/_jsx(Button, {
|
|
89
|
-
buttonStyle: "secondary",
|
|
90
|
-
className: `${baseClass}__file-button`,
|
|
91
|
-
onClick: onPasteUrlClick,
|
|
92
|
-
size: "medium",
|
|
93
|
-
children: t('upload:pasteURL')
|
|
94
|
-
}), /*#__PURE__*/_jsx("input", {
|
|
95
|
-
accept: mimeTypes?.join(','),
|
|
96
|
-
"aria-hidden": "true",
|
|
97
|
-
className: `${baseClass}__hidden-input`,
|
|
98
|
-
multiple: multipleFiles,
|
|
99
|
-
onChange: handleFileSelection,
|
|
100
|
-
ref: inputRef,
|
|
101
|
-
type: "file"
|
|
102
|
-
}), /*#__PURE__*/_jsxs("p", {
|
|
103
|
-
className: `${baseClass}__label`,
|
|
104
|
-
children: [t('general:or'), " ", t('upload:dragAndDrop')]
|
|
105
|
-
})]
|
|
78
|
+
children: children
|
|
106
79
|
});
|
|
107
|
-
}
|
|
80
|
+
}
|
|
108
81
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","handleDragOver","e","preventDefault","stopPropagation","baseClass","Dropzone","children","className","dropzoneStyle","multipleFiles","onChange","dropRef","useRef","dragging","setDragging","useState","addFiles","useCallback","files","length","dataTransfer","DataTransfer","items","add","handlePaste","clipboardData","handleDragEnter","handleDragLeave","handleDrop","clearData","useEffect","div","current","addEventListener","removeEventListener","classes","filter","Boolean","join","_jsx","ref"],"sources":["../../../src/elements/Dropzone/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst handleDragOver = (e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n}\n\nconst baseClass = 'dropzone'\n\nexport type Props = {\n readonly children?: React.ReactNode\n readonly className?: string\n readonly dropzoneStyle?: 'default' | 'none'\n readonly multipleFiles?: boolean\n readonly onChange: (e: FileList) => void\n}\n\nexport function Dropzone({\n children,\n className,\n dropzoneStyle = 'default',\n multipleFiles,\n onChange,\n}: Props) {\n const dropRef = React.useRef<HTMLDivElement>(null)\n const [dragging, setDragging] = React.useState(false)\n\n const addFiles = React.useCallback(\n (files: FileList) => {\n if (!multipleFiles && files.length > 1) {\n const dataTransfer = new DataTransfer()\n dataTransfer.items.add(files[0])\n onChange(dataTransfer.files)\n } else {\n onChange(files)\n }\n },\n [multipleFiles, onChange],\n )\n\n const handlePaste = React.useCallback(\n (e: ClipboardEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (e.clipboardData.files && e.clipboardData.files.length > 0) {\n addFiles(e.clipboardData.files)\n }\n },\n [addFiles],\n )\n\n const handleDragEnter = React.useCallback((e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setDragging(true)\n }, [])\n\n const handleDragLeave = React.useCallback((e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setDragging(false)\n }, [])\n\n const handleDrop = React.useCallback(\n (e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n setDragging(false)\n\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n addFiles(e.dataTransfer.files)\n setDragging(false)\n\n e.dataTransfer.clearData()\n }\n },\n [addFiles],\n )\n\n React.useEffect(() => {\n const div = dropRef.current\n\n if (div) {\n div.addEventListener('dragenter', handleDragEnter)\n div.addEventListener('dragleave', handleDragLeave)\n div.addEventListener('dragover', handleDragOver)\n div.addEventListener('drop', handleDrop)\n div.addEventListener('paste', handlePaste)\n\n return () => {\n div.removeEventListener('dragenter', handleDragEnter)\n div.removeEventListener('dragleave', handleDragLeave)\n div.removeEventListener('dragover', handleDragOver)\n div.removeEventListener('drop', handleDrop)\n div.removeEventListener('paste', handlePaste)\n }\n }\n\n return () => null\n }, [handleDragEnter, handleDragLeave, handleDrop, handlePaste])\n\n const classes = [\n baseClass,\n className,\n dragging ? 'dragging' : '',\n `dropzoneStyle--${dropzoneStyle}`,\n ]\n .filter(Boolean)\n .join(' ')\n\n return (\n <div className={classes} ref={dropRef}>\n {children}\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,9 +4,8 @@
|
|
|
4
4
|
position: relative;
|
|
5
5
|
display: flex;
|
|
6
6
|
align-items: center;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
background: var(--theme-elevation-50);
|
|
7
|
+
padding: calc(var(--base) * .9) calc(var(--base) / 2);
|
|
8
|
+
background: transparent;
|
|
10
9
|
border: 1px dotted var(--theme-elevation-400);
|
|
11
10
|
border-radius: var(--style-radius-s);
|
|
12
11
|
height: 100%;
|
|
@@ -18,6 +17,7 @@
|
|
|
18
17
|
margin: 0;
|
|
19
18
|
display: flex;
|
|
20
19
|
justify-content: center;
|
|
20
|
+
align-items: center;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
&.dragging {
|
|
@@ -30,29 +30,12 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
&__label {
|
|
34
|
-
margin: 0;
|
|
35
|
-
text-transform: lowercase;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
&__hidden-input {
|
|
39
|
-
position: absolute;
|
|
40
|
-
pointer-events: none;
|
|
41
|
-
visibility: hidden;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
33
|
@include mid-break {
|
|
45
34
|
display: block;
|
|
46
35
|
text-align: center;
|
|
36
|
+
}
|
|
47
37
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
width: 100%;
|
|
51
|
-
max-width: 200px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&__label {
|
|
55
|
-
display: none;
|
|
56
|
-
}
|
|
38
|
+
&.dropzoneStyle--none {
|
|
39
|
+
all: unset;
|
|
57
40
|
}
|
|
58
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOzE,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOzE,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqEpE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","React","Button","Thumbnail","baseClass","DraggableSortableItem","DragHandleIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","$","collectionSlug","doc","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","t0","DocumentDrawer","DocumentDrawerToggler","t1","draggableSortableItemProps","_jsxs","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","children","_jsx","attributes","listeners","fileSrc","buttonStyle","icon","iconStyle","onClick","round","t2"],"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n collectionSlug: string\n customUploadActions?: React.ReactNode[]\n doc: {\n sizes?: FileSizes\n } & Data\n enableAdjustments?: boolean\n hasImageSizes?: boolean\n hasMany: boolean\n imageCacheTag?: string\n isSortable?: boolean\n removeItem?: (index: number) => void\n rowIndex: number\n uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n const {
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","React","Button","Thumbnail","baseClass","DraggableSortableItem","DragHandleIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","$","collectionSlug","doc","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","t0","DocumentDrawer","DocumentDrawerToggler","t1","draggableSortableItemProps","_jsxs","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","children","_jsx","attributes","listeners","fileSrc","buttonStyle","icon","iconStyle","onClick","round","t2"],"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n collectionSlug: string\n customUploadActions?: React.ReactNode[]\n doc: {\n sizes?: FileSizes\n } & Data\n enableAdjustments?: boolean\n hasImageSizes?: boolean\n hasMany: boolean\n imageCacheTag?: string\n isSortable?: boolean\n removeItem?: (index: number) => void\n rowIndex: number\n uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n const { collectionSlug, doc, imageCacheTag, isSortable, removeItem, rowIndex, uploadConfig } =\n props\n\n const { id, filename, thumbnailURL, url } = doc\n\n const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n id,\n collectionSlug,\n })\n\n return (\n <DraggableSortableItem id={id} key={id}>\n {(draggableSortableItemProps) => (\n <div\n className={[\n baseClass,\n draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n ]\n .filter(Boolean)\n .join(' ')}\n ref={draggableSortableItemProps.setNodeRef}\n style={{\n transform: draggableSortableItemProps.transform,\n transition: draggableSortableItemProps.transition,\n zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n }}\n >\n <div className={`${baseClass}--drag-wrapper`}>\n {isSortable && draggableSortableItemProps && (\n <div\n className={`${baseClass}__drag`}\n {...draggableSortableItemProps.attributes}\n {...draggableSortableItemProps.listeners}\n >\n <DragHandleIcon />\n </div>\n )}\n <Thumbnail\n className={`${baseClass}__thumbnail`}\n collectionSlug={collectionSlug}\n doc={doc}\n fileSrc={thumbnailURL || url}\n imageCacheTag={imageCacheTag}\n uploadConfig={uploadConfig}\n />\n </div>\n <div className={`${baseClass}__main-detail`}>{filename}</div>\n\n <div className={`${baseClass}__actions`}>\n <DocumentDrawer />\n <DocumentDrawerToggler>\n <EditIcon />\n </DocumentDrawerToggler>\n {removeItem && (\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__remove`}\n icon=\"x\"\n iconStyle=\"none\"\n onClick={() => removeItem(rowIndex)}\n round\n />\n )}\n </div>\n </div>\n )}\n </DraggableSortableItem>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,sBAAsB,GAAG;IACnC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,sBAAsB,GAAG;IACnC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2D9D,CAAA"}
|
|
@@ -35,7 +35,6 @@ export const StaticFileDetails = props => {
|
|
|
35
35
|
children: [/*#__PURE__*/_jsx(Thumbnail, {
|
|
36
36
|
// size="small"
|
|
37
37
|
className: `${baseClass}__thumbnail`,
|
|
38
|
-
collectionSlug: collectionSlug,
|
|
39
38
|
doc: doc,
|
|
40
39
|
fileSrc: thumbnailURL || url,
|
|
41
40
|
imageCacheTag: imageCacheTag,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","Button","Thumbnail","UploadActions","FileMeta","baseClass","StaticFileDetails","props","collectionSlug","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","_jsx","className","_jsxs","fileSrc","collection","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type StaticFileDetailsProps = {\n collectionSlug: string\n customUploadActions?: React.ReactNode[]\n doc: {\n sizes?: FileSizes\n } & Data\n enableAdjustments?: boolean\n handleRemove?: () => void\n hasImageSizes?: boolean\n imageCacheTag?: string\n uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {\n const {\n collectionSlug,\n customUploadActions,\n doc,\n enableAdjustments,\n handleRemove,\n hasImageSizes,\n imageCacheTag,\n uploadConfig,\n } = props\n\n const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n return (\n <div className={baseClass}>\n <header>\n <Thumbnail\n // size=\"small\"\n className={`${baseClass}__thumbnail`}\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","Button","Thumbnail","UploadActions","FileMeta","baseClass","StaticFileDetails","props","collectionSlug","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","_jsx","className","_jsxs","fileSrc","collection","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type StaticFileDetailsProps = {\n collectionSlug: string\n customUploadActions?: React.ReactNode[]\n doc: {\n sizes?: FileSizes\n } & Data\n enableAdjustments?: boolean\n handleRemove?: () => void\n hasImageSizes?: boolean\n imageCacheTag?: string\n uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {\n const {\n collectionSlug,\n customUploadActions,\n doc,\n enableAdjustments,\n handleRemove,\n hasImageSizes,\n imageCacheTag,\n uploadConfig,\n } = props\n\n const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n return (\n <div className={baseClass}>\n <header>\n <Thumbnail\n // size=\"small\"\n className={`${baseClass}__thumbnail`}\n doc={doc}\n fileSrc={thumbnailURL || url}\n imageCacheTag={imageCacheTag}\n uploadConfig={uploadConfig}\n />\n <div className={`${baseClass}__main-detail`}>\n <FileMeta\n collection={collectionSlug}\n filename={filename as string}\n filesize={filesize as number}\n height={height as number}\n id={id as string}\n mimeType={mimeType as string}\n url={url as string}\n width={width as number}\n />\n\n {(enableAdjustments || customUploadActions) && (\n <UploadActions\n customActions={customUploadActions}\n enableAdjustments={Boolean(enableAdjustments)}\n enablePreviewSizes={hasImageSizes && doc.filename}\n mimeType={mimeType}\n />\n )}\n </div>\n {handleRemove && (\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__remove`}\n icon=\"x\"\n iconStyle=\"with-border\"\n onClick={handleRemove}\n round\n />\n )}\n </header>\n </div>\n )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB,OAAO,MAAMC,iBAAA,GAAuDC,KAAA;EAClE,MAAM;IACJC,cAAc;IACdC,mBAAmB;IACnBC,GAAG;IACHC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,aAAa;IACbC;EAAY,CACb,GAAGR,KAAA;EAEJ,MAAM;IAAES,EAAE;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,GAAG;IAAEC;EAAK,CAAE,GAAGb,GAAA;EAE/E,oBACEc,IAAA,CAAC;IAAIC,SAAA,EAAWpB,SAAA;cACd,aAAAqB,KAAA,CAAC;8BACCF,IAAA,CAACtB,SAAA;QACC;QACAuB,SAAA,EAAW,GAAGpB,SAAA,aAAsB;QACpCK,GAAA,EAAKA,GAAA;QACLiB,OAAA,EAASN,YAAA,IAAgBC,GAAA;QACzBR,aAAA,EAAeA,aAAA;QACfC,YAAA,EAAcA;uBAEhBW,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGpB,SAAA,eAAwB;gCACzCmB,IAAA,CAACpB,QAAA;UACCwB,UAAA,EAAYpB,cAAA;UACZS,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVC,MAAA,EAAQA,MAAA;UACRH,EAAA,EAAIA,EAAA;UACJI,QAAA,EAAUA,QAAA;UACVE,GAAA,EAAKA,GAAA;UACLC,KAAA,EAAOA;YAGP,CAAAZ,iBAAA,IAAqBF,mBAAkB,kBACvCe,IAAA,CAACrB,aAAA;UACC0B,aAAA,EAAepB,mBAAA;UACfE,iBAAA,EAAmBmB,OAAA,CAAQnB,iBAAA;UAC3BoB,kBAAA,EAAoBlB,aAAA,IAAiBH,GAAA,CAAIO,QAAQ;UACjDG,QAAA,EAAUA;;UAIfR,YAAA,iBACCY,IAAA,CAACvB,MAAA;QACC+B,WAAA,EAAY;QACZP,SAAA,EAAW,GAAGpB,SAAA,UAAmB;QACjC4B,IAAA,EAAK;QACLC,SAAA,EAAU;QACVC,OAAA,EAASvB,YAAA;QACTwB,KAAK;;;;AAMjB","ignoreList":[]}
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
flex-wrap: wrap;
|
|
21
21
|
flex-grow: 1;
|
|
22
22
|
align-items: flex-start;
|
|
23
|
+
align-items: center;
|
|
23
24
|
|
|
24
25
|
button .pill {
|
|
25
26
|
pointer-events: none;
|
|
@@ -43,11 +44,17 @@
|
|
|
43
44
|
padding: 0;
|
|
44
45
|
cursor: pointer;
|
|
45
46
|
color: inherit;
|
|
47
|
+
border-radius: var(--style-radius-s);
|
|
46
48
|
|
|
47
49
|
&:focus:not(:focus-visible),
|
|
48
50
|
&:focus-within:not(:focus-visible) {
|
|
49
51
|
outline: none;
|
|
50
52
|
}
|
|
53
|
+
|
|
54
|
+
&:focus-visible {
|
|
55
|
+
outline: var(--accessibility-outline);
|
|
56
|
+
outline-offset: var(--accessibility-outline-offset);
|
|
57
|
+
}
|
|
51
58
|
|
|
52
59
|
&:disabled {
|
|
53
60
|
pointer-events: none;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import './index.scss';
|
|
3
3
|
export type ShimmerEffectProps = {
|
|
4
|
-
animationDelay?: string;
|
|
5
|
-
height?: number | string;
|
|
6
|
-
width?: number | string;
|
|
4
|
+
readonly animationDelay?: string;
|
|
5
|
+
readonly height?: number | string;
|
|
6
|
+
readonly width?: number | string;
|
|
7
7
|
};
|
|
8
8
|
export declare const ShimmerEffect: React.FC<ShimmerEffectProps>;
|
|
9
9
|
export type StaggeredShimmersProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ShimmerEffect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ShimmerEffect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqBtD,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2B9D,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","React","useDelay","ShimmerEffect","animationDelay","height","width","_jsx","className","style","StaggeredShimmers","t0","$","count","renderDelay","t1","shimmerDelay","t2","shimmerItemClassName","undefined","shimmerDelayToPass","hasDelayed","t3","children","Array","map","_","i"],"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n animationDelay?: string\n height?: number | string\n width?: number | string\n}\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n animationDelay = '0ms',\n height = '60px',\n width = '100%',\n}) => {\n return (\n <div\n className=\"shimmer-effect\"\n style={{\n height: typeof height === 'number' ? `${height}px` : height,\n width: typeof width === 'number' ? `${width}px` : width,\n }}\n >\n <div\n className=\"shimmer-effect__shine\"\n style={{\n animationDelay,\n }}\n />\n </div>\n )\n}\n\nexport type StaggeredShimmersProps = {\n className?: string\n count: number\n height?: number | string\n renderDelay?: number\n shimmerDelay?: number | string\n shimmerItemClassName?: string\n width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n className,\n count,\n height,\n renderDelay = 500,\n shimmerDelay = 25,\n shimmerItemClassName,\n width,\n}) => {\n const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n const [hasDelayed] = useDelay(renderDelay, true)\n\n if (!hasDelayed) return null\n\n return (\n <div className={className}>\n {[...Array(count)].map((_, i) => (\n <div className={shimmerItemClassName} key={i}>\n <ShimmerEffect\n animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n height={height}\n width={width}\n />\n </div>\n ))}\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,YAAYC,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAQP,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAC1DC,cAAA,GAAiB,KAAK;EACtBC,MAAA,GAAS,MAAM;EACfC,KAAA,GAAQ;AAAM,CACf;EACC,oBACEC,IAAA,CAAC;IACCC,SAAA,EAAU;IACVC,KAAA,EAAO;MACLJ,MAAA,EAAQ,OAAOA,MAAA,KAAW,WAAW,GAAGA,MAAA,IAAU,GAAGA,MAAA;MACrDC,KAAA,EAAO,OAAOA,KAAA,KAAU,WAAW,GAAGA,KAAA,IAAS,GAAGA;IACpD;cAEA,aAAAC,IAAA,CAAC;MACCC,SAAA,EAAU;MACVC,KAAA,EAAO;QACLL;MACF;;;AAIR;AAYA,OAAO,MAAMM,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAQ,SAAA;IAAAK,KAAA;IAAAR,MAAA;IAAAS,WAAA,EAAAC,EAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC,oBAAA;IAAAZ;EAAA,IAAAK,EAQnE;EAJC,MAAAG,WAAA,GAAAC,EAAiB,KAAAI,SAAA,SAAjBJ,EAAiB;EACjB,MAAAC,YAAA,GAAAC,EAAiB,KAAAE,SAAA,QAAjBF,EAAiB;EAIjB,MAAAG,kBAAA,GAA2B,OAAOJ,YAAA,KAAiB,WAAW,GAAGA,YAAA,IAAgB,GAAGA,YAAA;EACpF,OAAAK,UAAA,IAAqBnB,QAAA,CAASY,WAAA,MAAa;EAAA,KAEtCO,UAAA;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAM,oBAAA,IAAAN,CAAA,QAAAQ,kBAAA,IAAAR,CAAA,QAAAP,MAAA,IAAAO,CAAA,QAAAN,KAAA,IAAAM,CAAA,QAAAJ,SAAA;IAGHc,EAAA,GAAAf,IAAA,CAAC;MAAAC,SAAA;MAAAe,QAAA,EACE,IAAIC,KAAA,CAAMX,KAAA,GAAAY,GAAA,EAAAC,CAAA,EAAAC,CAAA,KACTpB,IAAA,CAAC;QAAAC,SAAA,EAAeU,oBAAA;QAAAK,QAAA,EACdhB,IAAA,CAAAJ,aAAA;UAAAC,cAAA,EACkB,QAAQuB,CAAA,MAAOP,kBAAA,GAAqB;UAAAf,MAAA;UAAAC;QAAA,C;SAFbqB,CAAA;IAAA,C;;;;;;;;;;;SAF/CL,E;CAYJ","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","React","useDelay","ShimmerEffect","animationDelay","height","width","_jsx","className","style","StaggeredShimmers","t0","$","count","renderDelay","t1","shimmerDelay","t2","shimmerItemClassName","undefined","shimmerDelayToPass","hasDelayed","t3","children","Array","map","_","i"],"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n readonly animationDelay?: string\n readonly height?: number | string\n readonly width?: number | string\n}\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n animationDelay = '0ms',\n height = '60px',\n width = '100%',\n}) => {\n return (\n <div\n className=\"shimmer-effect\"\n style={{\n height: typeof height === 'number' ? `${height}px` : height,\n width: typeof width === 'number' ? `${width}px` : width,\n }}\n >\n <div\n className=\"shimmer-effect__shine\"\n style={{\n animationDelay,\n }}\n />\n </div>\n )\n}\n\nexport type StaggeredShimmersProps = {\n className?: string\n count: number\n height?: number | string\n renderDelay?: number\n shimmerDelay?: number | string\n shimmerItemClassName?: string\n width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n className,\n count,\n height,\n renderDelay = 500,\n shimmerDelay = 25,\n shimmerItemClassName,\n width,\n}) => {\n const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n const [hasDelayed] = useDelay(renderDelay, true)\n\n if (!hasDelayed) return null\n\n return (\n <div className={className}>\n {[...Array(count)].map((_, i) => (\n <div className={shimmerItemClassName} key={i}>\n <ShimmerEffect\n animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n height={height}\n width={width}\n />\n </div>\n ))}\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,YAAYC,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAQP,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAC1DC,cAAA,GAAiB,KAAK;EACtBC,MAAA,GAAS,MAAM;EACfC,KAAA,GAAQ;AAAM,CACf;EACC,oBACEC,IAAA,CAAC;IACCC,SAAA,EAAU;IACVC,KAAA,EAAO;MACLJ,MAAA,EAAQ,OAAOA,MAAA,KAAW,WAAW,GAAGA,MAAA,IAAU,GAAGA,MAAA;MACrDC,KAAA,EAAO,OAAOA,KAAA,KAAU,WAAW,GAAGA,KAAA,IAAS,GAAGA;IACpD;cAEA,aAAAC,IAAA,CAAC;MACCC,SAAA,EAAU;MACVC,KAAA,EAAO;QACLL;MACF;;;AAIR;AAYA,OAAO,MAAMM,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAQ,SAAA;IAAAK,KAAA;IAAAR,MAAA;IAAAS,WAAA,EAAAC,EAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC,oBAAA;IAAAZ;EAAA,IAAAK,EAQnE;EAJC,MAAAG,WAAA,GAAAC,EAAiB,KAAAI,SAAA,SAAjBJ,EAAiB;EACjB,MAAAC,YAAA,GAAAC,EAAiB,KAAAE,SAAA,QAAjBF,EAAiB;EAIjB,MAAAG,kBAAA,GAA2B,OAAOJ,YAAA,KAAiB,WAAW,GAAGA,YAAA,IAAgB,GAAGA,YAAA;EACpF,OAAAK,UAAA,IAAqBnB,QAAA,CAASY,WAAA,MAAa;EAAA,KAEtCO,UAAA;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,KAAA,IAAAD,CAAA,QAAAM,oBAAA,IAAAN,CAAA,QAAAQ,kBAAA,IAAAR,CAAA,QAAAP,MAAA,IAAAO,CAAA,QAAAN,KAAA,IAAAM,CAAA,QAAAJ,SAAA;IAGHc,EAAA,GAAAf,IAAA,CAAC;MAAAC,SAAA;MAAAe,QAAA,EACE,IAAIC,KAAA,CAAMX,KAAA,GAAAY,GAAA,EAAAC,CAAA,EAAAC,CAAA,KACTpB,IAAA,CAAC;QAAAC,SAAA,EAAeU,oBAAA;QAAAK,QAAA,EACdhB,IAAA,CAAAJ,aAAA;UAAAC,cAAA,EACkB,QAAQuB,CAAA,MAAOP,kBAAA,GAAqB;UAAAf,MAAA;UAAAC;QAAA,C;SAFbqB,CAAA;IAAA,C;;;;;;;;;;;SAF/CL,E;CAYJ","ignoreList":[]}
|
|
@@ -10,11 +10,15 @@ export type ThumbnailProps = {
|
|
|
10
10
|
size?: 'expand' | 'large' | 'medium' | 'small';
|
|
11
11
|
uploadConfig?: SanitizedCollectionConfig['upload'];
|
|
12
12
|
};
|
|
13
|
-
export declare const useThumbnailContext: () => {
|
|
14
|
-
className: string;
|
|
15
|
-
filename: string;
|
|
16
|
-
size: string;
|
|
17
|
-
src: string;
|
|
18
|
-
};
|
|
19
13
|
export declare const Thumbnail: React.FC<ThumbnailProps>;
|
|
14
|
+
type ThumbnailComponentProps = {
|
|
15
|
+
readonly alt?: string;
|
|
16
|
+
readonly className?: string;
|
|
17
|
+
readonly fileSrc: string;
|
|
18
|
+
readonly filename: string;
|
|
19
|
+
readonly imageCacheTag?: string;
|
|
20
|
+
readonly size?: 'expand' | 'large' | 'medium' | 'small';
|
|
21
|
+
};
|
|
22
|
+
export declare function ThumbnailComponent(props: ThumbnailComponentProps): React.JSX.Element;
|
|
23
|
+
export {};
|
|
20
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAKxD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,CAAC,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkC9C,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxD,CAAA;AACD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBA+BhE"}
|
|
@@ -7,15 +7,6 @@ import './index.scss';
|
|
|
7
7
|
const baseClass = 'thumbnail';
|
|
8
8
|
import { File } from '../../graphics/File/index.js';
|
|
9
9
|
import { ShimmerEffect } from '../ShimmerEffect/index.js';
|
|
10
|
-
const ThumbnailContext = /*#__PURE__*/React.createContext({
|
|
11
|
-
className: '',
|
|
12
|
-
filename: '',
|
|
13
|
-
size: 'medium',
|
|
14
|
-
src: ''
|
|
15
|
-
});
|
|
16
|
-
export const useThumbnailContext = () => {
|
|
17
|
-
return React.useContext(ThumbnailContext);
|
|
18
|
-
};
|
|
19
10
|
export const Thumbnail = props => {
|
|
20
11
|
const $ = _c(19);
|
|
21
12
|
const {
|
|
@@ -108,4 +99,88 @@ export const Thumbnail = props => {
|
|
|
108
99
|
}
|
|
109
100
|
return t7;
|
|
110
101
|
};
|
|
102
|
+
export function ThumbnailComponent(props) {
|
|
103
|
+
const $ = _c(19);
|
|
104
|
+
const {
|
|
105
|
+
alt,
|
|
106
|
+
className: t0,
|
|
107
|
+
fileSrc,
|
|
108
|
+
filename,
|
|
109
|
+
imageCacheTag,
|
|
110
|
+
size
|
|
111
|
+
} = props;
|
|
112
|
+
const className = t0 === undefined ? "" : t0;
|
|
113
|
+
const [fileExists, setFileExists] = React.useState(undefined);
|
|
114
|
+
const t1 = `${baseClass}--size-${size || "medium"}`;
|
|
115
|
+
let t2;
|
|
116
|
+
if ($[0] !== t1 || $[1] !== className) {
|
|
117
|
+
t2 = [baseClass, t1, className];
|
|
118
|
+
$[0] = t1;
|
|
119
|
+
$[1] = className;
|
|
120
|
+
$[2] = t2;
|
|
121
|
+
} else {
|
|
122
|
+
t2 = $[2];
|
|
123
|
+
}
|
|
124
|
+
const classNames = t2.join(" ");
|
|
125
|
+
let t3;
|
|
126
|
+
let t4;
|
|
127
|
+
if ($[3] !== fileSrc) {
|
|
128
|
+
t3 = () => {
|
|
129
|
+
if (!fileSrc) {
|
|
130
|
+
setFileExists(false);
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
const img = new Image();
|
|
134
|
+
img.src = fileSrc;
|
|
135
|
+
img.onload = () => {
|
|
136
|
+
setFileExists(true);
|
|
137
|
+
};
|
|
138
|
+
img.onerror = () => {
|
|
139
|
+
setFileExists(false);
|
|
140
|
+
};
|
|
141
|
+
};
|
|
142
|
+
t4 = [fileSrc];
|
|
143
|
+
$[3] = fileSrc;
|
|
144
|
+
$[4] = t3;
|
|
145
|
+
$[5] = t4;
|
|
146
|
+
} else {
|
|
147
|
+
t3 = $[4];
|
|
148
|
+
t4 = $[5];
|
|
149
|
+
}
|
|
150
|
+
React.useEffect(t3, t4);
|
|
151
|
+
let t5;
|
|
152
|
+
if ($[6] !== fileExists || $[7] !== alt || $[8] !== filename || $[9] !== imageCacheTag || $[10] !== fileSrc || $[11] !== classNames) {
|
|
153
|
+
let t6;
|
|
154
|
+
if ($[13] !== fileExists || $[14] !== alt || $[15] !== filename || $[16] !== imageCacheTag || $[17] !== fileSrc) {
|
|
155
|
+
t6 = fileExists && _jsx("img", {
|
|
156
|
+
alt: alt || filename,
|
|
157
|
+
src: `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ""}`
|
|
158
|
+
});
|
|
159
|
+
$[13] = fileExists;
|
|
160
|
+
$[14] = alt;
|
|
161
|
+
$[15] = filename;
|
|
162
|
+
$[16] = imageCacheTag;
|
|
163
|
+
$[17] = fileSrc;
|
|
164
|
+
$[18] = t6;
|
|
165
|
+
} else {
|
|
166
|
+
t6 = $[18];
|
|
167
|
+
}
|
|
168
|
+
t5 = _jsxs("div", {
|
|
169
|
+
className: classNames,
|
|
170
|
+
children: [fileExists === undefined && _jsx(ShimmerEffect, {
|
|
171
|
+
height: "100%"
|
|
172
|
+
}), t6, fileExists === false && _jsx(File, {})]
|
|
173
|
+
});
|
|
174
|
+
$[6] = fileExists;
|
|
175
|
+
$[7] = alt;
|
|
176
|
+
$[8] = filename;
|
|
177
|
+
$[9] = imageCacheTag;
|
|
178
|
+
$[10] = fileSrc;
|
|
179
|
+
$[11] = classNames;
|
|
180
|
+
$[12] = t5;
|
|
181
|
+
} else {
|
|
182
|
+
t5 = $[12];
|
|
183
|
+
}
|
|
184
|
+
return t5;
|
|
185
|
+
}
|
|
111
186
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","ShimmerEffect","
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","React","baseClass","File","ShimmerEffect","Thumbnail","props","$","className","t0","doc","t1","fileSrc","imageCacheTag","size","undefined","t2","filename","fileExists","setFileExists","useState","t3","t4","classNames","join","t5","t6","img","Image","src","onload","onerror","useEffect","t7","t8","_jsx","alt","_jsxs","children","height","ThumbnailComponent"],"sources":["../../../src/elements/Thumbnail/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'thumbnail'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { File } from '../../graphics/File/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nexport type ThumbnailProps = {\n className?: string\n collectionSlug?: string\n doc?: Record<string, unknown>\n fileSrc?: string\n imageCacheTag?: string\n size?: 'expand' | 'large' | 'medium' | 'small'\n uploadConfig?: SanitizedCollectionConfig['upload']\n}\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n const { className = '', doc: { filename } = {}, fileSrc, imageCacheTag, size } = props\n const [fileExists, setFileExists] = React.useState(undefined)\n\n const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n React.useEffect(() => {\n if (!fileSrc) {\n setFileExists(false)\n return\n }\n\n const img = new Image()\n img.src = fileSrc\n img.onload = () => {\n setFileExists(true)\n }\n img.onerror = () => {\n setFileExists(false)\n }\n }, [fileSrc])\n\n return (\n <div className={classNames}>\n {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n {fileExists && (\n <img\n alt={filename as string}\n src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`}\n />\n )}\n {fileExists === false && <File />}\n </div>\n )\n}\n\ntype ThumbnailComponentProps = {\n readonly alt?: string\n readonly className?: string\n readonly fileSrc: string\n readonly filename: string\n readonly imageCacheTag?: string\n readonly size?: 'expand' | 'large' | 'medium' | 'small'\n}\nexport function ThumbnailComponent(props: ThumbnailComponentProps) {\n const { alt, className = '', fileSrc, filename, imageCacheTag, size } = props\n const [fileExists, setFileExists] = React.useState(undefined)\n\n const classNames = [baseClass, `${baseClass}--size-${size || 'medium'}`, className].join(' ')\n\n React.useEffect(() => {\n if (!fileSrc) {\n setFileExists(false)\n return\n }\n\n const img = new Image()\n img.src = fileSrc\n img.onload = () => {\n setFileExists(true)\n }\n img.onerror = () => {\n setFileExists(false)\n }\n }, [fileSrc])\n\n return (\n <div className={classNames}>\n {fileExists === undefined && <ShimmerEffect height=\"100%\" />}\n {fileExists && (\n <img alt={alt || filename} src={`${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}`} />\n )}\n {fileExists === false && <File />}\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|