@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
223 lines (222 loc) • 10.3 kB
JavaScript
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.n = (module)=>{
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
__webpack_require__.d(getter, {
a: getter
});
return getter;
};
})();
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
default: ()=>FileWidget_FileWidget
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const outline_namespaceObject = require("@heroicons/react/24/outline");
const external_clsx_namespaceObject = require("clsx");
var external_clsx_default = /*#__PURE__*/ __webpack_require__.n(external_clsx_namespaceObject);
const external_react_namespaceObject = require("react");
const FormDataContext_js_namespaceObject = require("../../../context/FormDataContext.js");
const FormStateContext_js_namespaceObject = require("../../../context/FormStateContext.js");
const I18nContext_js_namespaceObject = require("../../../context/I18nContext.js");
const external_FileItem_js_namespaceObject = require("./FileItem.js");
var external_FileItem_js_default = /*#__PURE__*/ __webpack_require__.n(external_FileItem_js_namespaceObject);
const FileWidget = (props)=>{
const errors = props.rawErrors;
const [files, setFiles] = (0, external_react_namespaceObject.useState)(()=>{
if (!props.value) return [];
if ("string" == typeof props.value) return [
props.value
];
return props.value;
});
const acceptsMultipleFiles = "array" === props.schema.type;
const inputRef = (0, external_react_namespaceObject.useRef)(null);
const { t } = (0, I18nContext_js_namespaceObject.useI18n)();
const [isDragging, setIsDragging] = (0, external_react_namespaceObject.useState)(false);
const { setFieldDirty } = (0, FormStateContext_js_namespaceObject.useFormState)();
const { setFormData } = (0, FormDataContext_js_namespaceObject.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);
}
};
(0, external_react_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted relative flex flex-col items-start space-y-2",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "text-nextadmin-content-inverted/50 dark:text-dark-nextadmin-content-inverted/50 text-center",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(outline_namespaceObject.CloudArrowUpIcon, {
className: "mx-auto h-8 w-8"
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "mt-4 flex flex-wrap justify-center text-sm leading-6",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
children: t("form.widgets.file_upload.label")
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
className: "pl-1",
children: t("form.widgets.file_upload.drag_and_drop")
})
]
})
]
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "flex flex-wrap gap-2",
children: files.map((file, index)=>{
if (null === file) return null;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FileItem_js_default(), {
disabled: props.disabled ?? false,
file: file,
hasError: !!errors,
onDelete: ()=>{
handleDelete(index);
}
}, `${"string" == typeof file ? file : file.name}`);
})
}),
errors && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "text-sm text-red-600 dark:text-red-400",
children: errors.join(", ")
})
]
});
};
const FileWidget_FileWidget = FileWidget;
exports["default"] = __webpack_exports__["default"];
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"default"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});