@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
178 lines (177 loc) • 7.89 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { CloudArrowUpIcon } from "@heroicons/react/24/outline";
import external_clsx_default from "clsx";
import { useEffect, useRef, useState } from "react";
import { useFormData } from "../../../context/FormDataContext.mjs";
import { useFormState } from "../../../context/FormStateContext.mjs";
import { useI18n } from "../../../context/I18nContext.mjs";
import external_FileItem_mjs_default from "./FileItem.mjs";
const FileWidget = (props)=>{
const errors = props.rawErrors;
const [files, setFiles] = useState(()=>{
if (!props.value) return [];
if ("string" == typeof props.value) return [
props.value
];
return props.value;
});
const acceptsMultipleFiles = "array" === props.schema.type;
const inputRef = useRef(null);
const { t } = useI18n();
const [isDragging, setIsDragging] = useState(false);
const { setFieldDirty } = useFormState();
const { setFormData } = useFormData();
const handleFileChange = (event)=>{
const selectedFiles = event.target.files;
if (selectedFiles) {
setFieldDirty(props.name);
setFiles((old)=>{
if (!acceptsMultipleFiles) return [
selectedFiles[0]
];
const newArray = [
...old,
...Array.from(selectedFiles)
];
if (props.schema?.maxItems) return newArray.slice(0, props.schema.maxItems);
return newArray;
});
}
};
const handleDelete = (index)=>{
const stateFiles = files;
setFiles((old)=>{
if (!acceptsMultipleFiles) return [];
const newFiles = [
...old
];
newFiles.splice(index, 1);
return newFiles;
});
setFieldDirty(props.name);
setFormData((old)=>{
const newFormData = {
...old
};
if (Array.isArray(props.value)) newFormData[props.name] = stateFiles.filter((val, i)=>i !== index && "string" == typeof val);
else newFormData[props.name] = [
null
];
return newFormData;
});
};
const handleDrop = (event)=>{
if (!props.disabled) {
event.preventDefault();
setFieldDirty(props.name);
setFiles((old)=>{
if (acceptsMultipleFiles) {
const newArray = [
...old,
...Array.from(event.dataTransfer.files)
];
if (props.schema?.maxItems) return newArray.slice(0, props.schema.maxItems);
return newArray;
}
return [
event.dataTransfer.files[0]
];
});
setIsDragging(false);
}
};
useEffect(()=>{
const dataTransfer = new DataTransfer();
files.forEach((file)=>{
if ("string" == typeof file) return;
if (null !== file) dataTransfer.items.add(file);
});
if (inputRef.current) inputRef.current.files = dataTransfer.files;
}, [
files
]);
return /*#__PURE__*/ jsxs("div", {
className: "text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted relative flex flex-col items-start space-y-2",
children: [
/*#__PURE__*/ jsx("div", {
className: external_clsx_default("border-nextadmin-border-default dark:border-dark-nextadmin-border-default hover:bg-nextadmin-background-subtle hover:dark:bg-dark-nextadmin-background-subtle relative flex w-full justify-center rounded-lg border-2 border-dashed px-6 py-10", {
"bg-dark-nextadmin-background-subtle": isDragging,
"opacity-50": props.disabled
}),
onDrop: handleDrop,
onDragOver: (evt)=>{
if (!props.disabled) evt.preventDefault();
},
onDragEnter: (evt)=>{
if (!props.disabled) {
evt.preventDefault();
setIsDragging(true);
}
},
onDragLeave: (evt)=>{
if (!props.disabled) {
evt.preventDefault();
setIsDragging(false);
}
},
children: /*#__PURE__*/ jsxs("div", {
className: "text-nextadmin-content-inverted/50 dark:text-dark-nextadmin-content-inverted/50 text-center",
children: [
/*#__PURE__*/ jsx(CloudArrowUpIcon, {
className: "mx-auto h-8 w-8"
}),
/*#__PURE__*/ jsxs("div", {
className: "mt-4 flex flex-wrap justify-center text-sm leading-6",
children: [
/*#__PURE__*/ jsxs("label", {
htmlFor: props.id,
className: external_clsx_default("text-nextadmin-primary-600 hover:text-nextadmin-primary-500 rounded-md font-semibold focus-visible:outline-none"),
children: [
/*#__PURE__*/ jsx("span", {
children: t("form.widgets.file_upload.label")
}),
/*#__PURE__*/ jsx("input", {
type: "file",
className: external_clsx_default("absolute inset-0 h-full w-full opacity-0", props.disabled ? "point-event-none cursor-not-allowed" : "cursor-pointer"),
ref: inputRef,
id: props.id,
disabled: props.disabled,
required: acceptsMultipleFiles ? false : props.required && null === props.value,
name: props.name,
onChange: handleFileChange,
multiple: acceptsMultipleFiles
})
]
}),
/*#__PURE__*/ jsx("p", {
className: "pl-1",
children: t("form.widgets.file_upload.drag_and_drop")
})
]
})
]
})
}),
/*#__PURE__*/ jsx("div", {
className: "flex flex-wrap gap-2",
children: files.map((file, index)=>{
if (null === file) return null;
return /*#__PURE__*/ jsx(external_FileItem_mjs_default, {
disabled: props.disabled ?? false,
file: file,
hasError: !!errors,
onDelete: ()=>{
handleDelete(index);
}
}, `${"string" == typeof file ? file : file.name}`);
})
}),
errors && /*#__PURE__*/ jsx("div", {
className: "text-sm text-red-600 dark:text-red-400",
children: errors.join(", ")
})
]
});
};
const FileWidget_FileWidget = FileWidget;
export { FileWidget_FileWidget as default };