import classNames from 'classnames' import { nanoid } from 'nanoid/non-secure' import { useCallback, useEffect, useRef, useState } from 'preact/hooks' import getFileTypeIcon from '../../utils/getFileTypeIcon.js' import ignoreEvent from '../../utils/ignoreEvent.js' import FilePreview from '../FilePreview.js' import RenderMetaFields from './RenderMetaFields.js' type $TSFixMe = any export default function FileCard(props: $TSFixMe) { const { files, fileCardFor, toggleFileCard, saveFileCard, metaFields, requiredMetaFields, openFileEditor, i18n, i18nArray, className, canEditFile, } = props const getMetaFields = () => { return typeof metaFields === 'function' ? metaFields(files[fileCardFor]) : metaFields } const file = files[fileCardFor] const computedMetaFields = getMetaFields() ?? [] const showEditButton = canEditFile(file) const storedMetaData: Record = {} computedMetaFields.forEach((field: $TSFixMe) => { storedMetaData[field.id] = file.meta[field.id] ?? '' }) const [formState, setFormState] = useState(storedMetaData) const handleSave = useCallback( (ev: $TSFixMe) => { ev.preventDefault() saveFileCard(formState, fileCardFor) }, [saveFileCard, formState, fileCardFor], ) const updateMeta = (newVal: $TSFixMe, name: $TSFixMe) => { setFormState({ ...formState, [name]: newVal, }) } const handleCancel = () => { toggleFileCard(false) } const [form] = useState(() => { const formEl = document.createElement('form') formEl.setAttribute('tabindex', '-1') formEl.id = nanoid() return formEl }) // We need to know where Uppy is being rendered const domRef = useRef(null) useEffect(() => { /** * Use the "rootNode" of whereever Uppy is rendered, falling back * to `window.document` if domRef isn't initialized for some reason */ const rootNode = domRef.current?.getRootNode() ?? (document as Node) /** * This is the case for the Light DOM and . * In these scenarios, we don't want to append a child to an * element, but to the */ if (rootNode instanceof Document) { rootNode.body.appendChild(form) } // This is the case for the Shadow DOM else if (rootNode instanceof ShadowRoot) { rootNode.appendChild(form) } // Everything else (realistically there isn't) else { rootNode.appendChild(form) } form.addEventListener('submit', handleSave) return () => { form.removeEventListener('submit', handleSave) // check if form is still in the DOM before removing if (form.parentNode) { form.parentNode.removeChild(form) } } }, [form, handleSave]) return ( // biome-ignore lint/a11y/noStaticElementInteractions: ...

{i18nArray('editing', { file: ( {file.meta ? file.meta.name : file.name} ), })}

{showEditButton && ( )}

) }