@aokiapp/rjsf-mantine-corporate
Version:
Corporational variant of theme, based on @aokiapp/rjsf-mantine-theme
227 lines (222 loc) • 7.82 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var utils = require('@rjsf/utils');
var core = require('@mantine/core');
var dropzone = require('@mantine/dropzone');
var iconsReact = require('@tabler/icons-react');
function addNameToDataURL(dataURL, name) {
if (dataURL === null) {
return null;
}
return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
}
function processFile(file) {
const { name, size, type } = file;
return new Promise((resolve, reject) => {
const reader = new window.FileReader();
reader.onerror = reject;
reader.onload = (event) => {
if (typeof event.target?.result === "string") {
resolve({
dataURL: addNameToDataURL(event.target.result, name),
name,
size,
type
});
} else {
resolve({
dataURL: null,
name,
size,
type
});
}
};
reader.readAsDataURL(file);
});
}
function processFiles(files) {
return Promise.all(files.map(processFile));
}
const fileInfoCtx = react.createContext(null);
function FileInfoPreview({ fileInfo }) {
const { preview } = react.useContext(fileInfoCtx);
const { dataURL, type, name } = fileInfo;
if (!dataURL) {
return null;
}
if (preview && type.indexOf("image") !== -1) {
return /* @__PURE__ */ jsxRuntime.jsx(core.Image, { src: dataURL, alt: name });
}
let IconComponent;
switch (type) {
case "application/pdf":
case "application/x-pdf":
IconComponent = iconsReact.IconPdf;
break;
case "image/svg+xml":
case "image/svg":
IconComponent = iconsReact.IconFile;
break;
case "image/png":
case "image/jpeg":
case "image/gif":
case "image/bmp":
IconComponent = iconsReact.IconPhoto;
break;
case "application/zip":
case "application/x-zip-compressed":
case "application/x-gzip":
case "application/x-tar":
case "application/x-bzip":
case "application/x-bzip2":
case "application/x-7z-compressed":
case "application/x-rar-compressed":
IconComponent = iconsReact.IconFileZip;
break;
case "text/plain":
IconComponent = iconsReact.IconFileTypeTxt;
break;
case "text/html":
case "application/xhtml+xml":
case "application/xml":
case "application/json":
case "application/javascript":
IconComponent = iconsReact.IconCode;
break;
case "application/octet-stream":
IconComponent = iconsReact.IconFileDigit;
break;
default:
IconComponent = iconsReact.IconFile;
break;
}
return /* @__PURE__ */ jsxRuntime.jsxs(
core.Box,
{
style: {
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column"
},
children: [
/* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 30 }),
/* @__PURE__ */ jsxRuntime.jsx(core.Badge, { variant: "outline", children: type })
]
}
);
}
function convertUnitPrefix(size) {
const prefixes = ["B", "KB", "MB", "GB", "TB"];
const index = Math.floor(Math.log(size) / Math.log(1024));
return `${(size / Math.pow(1024, index)).toFixed(2)} ${prefixes[index]}`;
}
function FilesInfo() {
const { filesInfo, onRemove } = react.useContext(fileInfoCtx);
if (filesInfo.length === 0) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(core.Group, { m: "sm", children: filesInfo.map((fileInfo, key) => {
const { name, size } = fileInfo;
const rmFile = () => onRemove(key);
return /* @__PURE__ */ jsxRuntime.jsxs(core.Card, { shadow: "sm", padding: "xs", radius: "md", w: 200, withBorder: true, children: [
/* @__PURE__ */ jsxRuntime.jsx(core.Card.Section, { children: /* @__PURE__ */ jsxRuntime.jsx(core.AspectRatio, { ratio: 2, maw: 240, mx: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(FileInfoPreview, { fileInfo }) }) }),
/* @__PURE__ */ jsxRuntime.jsx(core.Text, { fw: 600, truncate: "end", children: name }),
/* @__PURE__ */ jsxRuntime.jsxs(core.Group, { gap: "xs", justify: "space-between", children: [
/* @__PURE__ */ jsxRuntime.jsx(core.Badge, { color: "blue", variant: "light", children: convertUnitPrefix(size) }),
/* @__PURE__ */ jsxRuntime.jsx(core.CloseButton, { onClick: rmFile })
] })
] }, key);
}) });
}
function extractFileInfo(dataURLs) {
return dataURLs.filter((dataURL) => dataURL).map((dataURL) => {
const { blob, name } = utils.dataURItoBlob(dataURL);
return {
dataURL,
name,
size: blob.size,
type: blob.type
};
});
}
function FileWidget(props) {
const { disabled, readonly, required, multiple, onChange, value, options, registry, schema, hideLabel, label, id } = props;
const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
const DescriptionFieldTemplate = utils.getTemplate(
"DescriptionFieldTemplate",
registry,
options
);
const handleChange = react.useCallback(
(files) => {
if (!files || files.length === 0) {
return;
}
processFiles(files).then((filesInfoEvent) => {
const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
if (multiple) {
onChange(value.filter((e) => !!e).concat(newValue[0]));
} else {
onChange(newValue[0]);
}
});
},
[multiple, value, onChange]
);
const filesInfo = react.useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
const rmFile = react.useCallback(
(index) => {
if (multiple) {
const newValue = value.filter((_, i) => i !== index);
onChange(newValue);
} else {
onChange(void 0);
}
},
[multiple, value, onChange]
);
let accept = options.accept ?? void 0;
if (accept && !Array.isArray(accept) && typeof accept !== "object") {
console.warn("accept must be string[] or Record<string, string[]>. ignoring...");
accept = void 0;
}
const description = options.description || schema.description;
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(fileInfoCtx.Provider, { value: { filesInfo, onRemove: rmFile, preview: options.filePreview ?? true }, children: [
label && !hideLabel && /* @__PURE__ */ jsxRuntime.jsx(TitleFieldTemplate, { id, title: label, required, schema, registry }),
description && !hideLabel && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(id),
description: props.description,
registry,
schema
}
),
/* @__PURE__ */ jsxRuntime.jsx(
dropzone.Dropzone,
{
accept,
onDrop: handleChange,
disabled: disabled || readonly,
maxSize: (
// @ts-expect-error strict type check rarely need for this easy case, as long as the schema is correct
options.maxSize || schema.maxLength || schema.items?.maxLength
),
multiple,
children: /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { gap: "0", align: "center", children: [
/* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xl", fw: 700, children: "\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7\u3057\u3066\u304F\u3060\u3055\u3044" }),
/* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", children: "\u307E\u305F\u306F\u3001\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E\u3059\u308B" })
] })
}
),
/* @__PURE__ */ jsxRuntime.jsx(FilesInfo, {})
] }) });
}
exports.default = FileWidget;
//# sourceMappingURL=FileWidget.cjs.map