@aokiapp/rjsf-mantine-theme
Version:
Mantine theme, fields and widgets for react-jsonschema-form
200 lines (195 loc) • 6.47 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 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(Array.from(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 } = props;
const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
const handleChange = react.useCallback(
(event) => {
if (!event.target.files) {
return;
}
processFiles(event.target.files).then((filesInfoEvent) => {
const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
if (multiple) {
onChange(value.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]
);
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "armt-widget-file", children: /* @__PURE__ */ jsxRuntime.jsxs(fileInfoCtx.Provider, { value: { filesInfo, onRemove: rmFile, preview: options.filePreview ?? false }, children: [
/* @__PURE__ */ jsxRuntime.jsx(
BaseInputTemplate,
{
...props,
disabled: disabled || readonly,
type: "file",
required: value ? false : required,
onChangeOverride: handleChange,
value: "",
accept: options.accept ? String(options.accept) : void 0
}
),
/* @__PURE__ */ jsxRuntime.jsx(FilesInfo, {})
] }) });
}
exports.default = FileWidget;
//# sourceMappingURL=FileWidget.cjs.map