@aokiapp/rjsf-mantine-corporate
Version:
Corporational variant of theme, based on @aokiapp/rjsf-mantine-theme
185 lines • 8.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useCallback, useContext, useMemo } from 'react';
import { dataURItoBlob, getTemplate, descriptionId, } from '@rjsf/utils';
import { Badge, Card, Group, Text, Image, Box, AspectRatio, CloseButton, Stack } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconCode, IconFile, IconFileDigit, IconFileTypeTxt, IconFileZip, IconPdf, IconPhoto, } from '@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) => {
var _a;
if (typeof ((_a = event.target) === null || _a === void 0 ? void 0 : _a.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 = createContext(null);
function FileInfoPreview({ fileInfo }) {
const { preview } = useContext(fileInfoCtx);
const { dataURL, type, name } = fileInfo;
if (!dataURL) {
return null;
}
if (preview && type.indexOf('image') !== -1) {
return _jsx(Image, { src: dataURL, alt: name });
}
let IconComponent;
switch (type) {
case 'application/pdf':
case 'application/x-pdf':
IconComponent = IconPdf;
break;
case 'image/svg+xml':
case 'image/svg':
IconComponent = IconFile;
break;
case 'image/png':
case 'image/jpeg':
case 'image/gif':
case 'image/bmp':
IconComponent = 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 = IconFileZip;
break;
case 'text/plain':
IconComponent = IconFileTypeTxt;
break;
case 'text/html':
case 'application/xhtml+xml':
case 'application/xml':
case 'application/json':
case 'application/javascript':
IconComponent = IconCode;
break;
case 'application/octet-stream':
IconComponent = IconFileDigit;
break;
default:
IconComponent = IconFile;
break;
}
return (_jsxs(Box, { style: {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}, children: [_jsx(IconComponent, { size: 30 }), _jsx(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 } = useContext(fileInfoCtx);
if (filesInfo.length === 0) {
return null;
}
return (_jsx(Group, { m: 'sm', children: filesInfo.map((fileInfo, key) => {
const { name, size } = fileInfo;
const rmFile = () => onRemove(key);
return (_jsxs(Card, { shadow: 'sm', padding: 'xs', radius: 'md', w: 200, withBorder: true, children: [_jsx(Card.Section, { children: _jsx(AspectRatio, { ratio: 2, maw: 240, mx: 'auto', children: _jsx(FileInfoPreview, { fileInfo: fileInfo }) }) }), _jsx(Text, { fw: 600, truncate: 'end', children: name }), _jsxs(Group, { gap: 'xs', justify: 'space-between', children: [_jsx(Badge, { color: 'blue', variant: 'light', children: convertUnitPrefix(size) }), _jsx(CloseButton, { onClick: rmFile })] })] }, key));
}) }));
}
function extractFileInfo(dataURLs) {
return dataURLs
.filter((dataURL) => dataURL)
.map((dataURL) => {
const { blob, name } = dataURItoBlob(dataURL);
return {
dataURL,
name: name,
size: blob.size,
type: blob.type,
};
});
}
/**
* The `FileWidget` is a widget for rendering file upload fields.
* It is typically used with a string property with data-url format.
*/
function FileWidget(props) {
var _a, _b, _c;
const { disabled, readonly, required, multiple, onChange, value, options, registry, schema, hideLabel, label, id } = props;
const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
const handleChange = useCallback((files) => {
if (!files || files.length === 0) {
return;
}
// Due to variances in themes, dealing with multiple files for the array case now happens one file at a time.
// This is because we don't pass `multiple` into the `BaseInputTemplate` anymore. Instead, we deal with the single
// file in each event and concatenate them together ourselves
processFiles(files).then((filesInfoEvent) => {
const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
if (multiple) {
// filter out null, somewhat null is contained
onChange(value.filter((e) => !!e).concat(newValue[0]));
}
else {
onChange(newValue[0]);
}
});
}, [multiple, value, onChange]);
const filesInfo = useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
const rmFile = useCallback((index) => {
if (multiple) {
const newValue = value.filter((_, i) => i !== index);
onChange(newValue);
}
else {
onChange(undefined);
}
}, [multiple, value, onChange]);
// accept is not string[] and Record<string, string[]
let accept = (_a = options.accept) !== null && _a !== void 0 ? _a : undefined;
// accept must be string[] or Record<string, string[]>
// if not, it will be error
if (accept && !Array.isArray(accept) && typeof accept !== 'object') {
console.warn('accept must be string[] or Record<string, string[]>. ignoring...');
accept = undefined;
}
const description = options.description || schema.description;
return (_jsx("div", { children: _jsxs(fileInfoCtx.Provider, { value: { filesInfo, onRemove: rmFile, preview: (_b = options.filePreview) !== null && _b !== void 0 ? _b : true }, children: [label && !hideLabel && (_jsx(TitleFieldTemplate, { id: id, title: label, required: required, schema: schema, registry: registry })), description && !hideLabel && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: props.description, registry: registry, schema: schema })), _jsx(Dropzone, { accept: 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 || ((_c = schema.items) === null || _c === void 0 ? void 0 : _c.maxLength), multiple: multiple, children: _jsxs(Stack, { gap: '0', align: 'center', children: [_jsx(Text, { size: 'xl', fw: 700, children: "\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7\u3057\u3066\u304F\u3060\u3055\u3044" }), _jsx(Text, { size: 'sm', children: "\u307E\u305F\u306F\u3001\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E\u3059\u308B" })] }) }), _jsx(FilesInfo, {})] }) }));
}
export default FileWidget;
//# sourceMappingURL=FileWidget.js.map