{"version":3,"file":"index.js","names":["c","_c","useModal","useWindowInfo","isImage","React","SelectInput","ChevronIcon","XIcon","useConfig","useTranslation","AnimateHeight","Button","Drawer","ErrorPill","Pill","ShimmerEffect","createThumbnail","Thumbnail","Actions","AddFilesView","useFormsManager","useBulkUpload","addMoreFilesDrawerSlug","baseClass","FileSidebar","$","activeIndex","addFiles","forms","isInitializing","removeFile","setActiveIndex","totalErrorCount","initialFiles","initialForms","maxFiles","i18n","t","closeModal","openModal","showFiles","setShowFiles","useState","breakpoints","t0","indexToRemove","handleRemoveFile","t1","filelist","handleAddFiles","getFileSize","_temp","totalFileCount","length","collectionSlug","bulkUploadCollectionSlug","selectableCollections","setCollectionSlug","getEntityConfig","t2","t3","filter","Boolean","t4","join","t5","m","t6","Symbol","for","_temp2","t7","t8","t9","index_0","errorCount","formID","formState","currentFile","file","value","_jsxs","className","index","children","onClick","type","_jsx","SidebarThumbnail","title","name","File","count","isClearable","onChange","e","val","options","map","coll","config","label","labels","singular","slug","path","required","withMessage","size","buttonStyle","direction","gutter","Header","onCancel","onDrop","height","Array","from","_temp3","file_0","animationDelay","prev","i","Math","floor","log","decimals","formattedSize","pow","toFixed","thumbnailURL","setThumbnailURL","isLoading","setIsLoading","useEffect","isCancelled","generateThumbnail","url","_","disableInlineStyles","fileSrc"],"sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { isImage } from 'payload/shared'\nimport React from 'react'\n\nimport { SelectInput } from '../../../fields/Select/Input.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { AnimateHeight } from '../../AnimateHeight/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Drawer } from '../../Drawer/index.js'\nimport { ErrorPill } from '../../ErrorPill/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { ShimmerEffect } from '../../ShimmerEffect/index.js'\nimport { createThumbnail } from '../../Thumbnail/createThumbnail.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { Actions } from '../ActionsBar/index.js'\nimport { AddFilesView } from '../AddFilesView/index.js'\nimport './index.scss'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport { useBulkUpload } from '../index.js'\n\nconst addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files'\n\nconst baseClass = 'file-selections'\n\nexport function FileSidebar() {\n const {\n activeIndex,\n addFiles,\n forms,\n isInitializing,\n removeFile,\n setActiveIndex,\n totalErrorCount,\n } = useFormsManager()\n const { initialFiles, initialForms, maxFiles } = useBulkUpload()\n const { i18n, t } = useTranslation()\n const { closeModal, openModal } = useModal()\n const [showFiles, setShowFiles] = React.useState(false)\n const { breakpoints } = useWindowInfo()\n\n const handleRemoveFile = React.useCallback(\n (indexToRemove: number) => {\n removeFile(indexToRemove)\n },\n [removeFile],\n )\n\n const handleAddFiles = React.useCallback(\n (filelist: FileList) => {\n void addFiles(filelist)\n closeModal(addMoreFilesDrawerSlug)\n },\n [addFiles, closeModal],\n )\n\n const getFileSize = React.useCallback((file: File) => {\n const size = file.size\n const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))\n const decimals = i > 1 ? 1 : 0\n const formattedSize =\n (size / Math.pow(1024, i)).toFixed(decimals) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]\n return formattedSize\n }, [])\n\n const totalFileCount = isInitializing\n ? (initialFiles?.length ?? initialForms?.length)\n : forms.length\n\n const {\n collectionSlug: bulkUploadCollectionSlug,\n selectableCollections,\n setCollectionSlug,\n } = useBulkUpload()\n\n const { getEntityConfig } = useConfig()\n\n return (\n
\n 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}\n >\n {totalFileCount}{' '}\n {t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}\n \n
\n