@aokiapp/rjsf-mantine-theme/lib/widgets/FileWidget.mjs

Mantine theme, fields and widgets for react-jsonschema-form

import { jsx, jsxs } from 'react/jsx-runtime';
import { createContext, useCallback, useMemo, useContext } from 'react';
import { getTemplate, dataURItoBlob } from '@rjsf/utils';
import { Group, Card, AspectRatio, Text, Badge, CloseButton, Image, Box } from '@mantine/core';
import { IconFile, IconFileDigit, IconCode, IconFileTypeTxt, IconFileZip, IconPhoto, IconPdf } 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) => {
      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 = 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 /* @__PURE__ */ 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 /* @__PURE__ */ jsxs(
    Box,
    {
      style: {
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column"
      },
      children: [
        /* @__PURE__ */ jsx(IconComponent, { size: 30 }),
        /* @__PURE__ */ 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 /* @__PURE__ */ jsx(Group, { m: "sm", children: filesInfo.map((fileInfo, key) => {
    const { name, size } = fileInfo;
    const rmFile = () => onRemove(key);
    return /* @__PURE__ */ jsxs(Card, { shadow: "sm", padding: "xs", radius: "md", w: 200, withBorder: true, children: [
      /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 2, maw: 240, mx: "auto", children: /* @__PURE__ */ jsx(FileInfoPreview, { fileInfo }) }) }),
      /* @__PURE__ */ jsx(Text, { fw: 600, truncate: "end", children: name }),
      /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", children: [
        /* @__PURE__ */ jsx(Badge, { color: "blue", variant: "light", children: convertUnitPrefix(size) }),
        /* @__PURE__ */ jsx(CloseButton, { onClick: rmFile })
      ] })
    ] }, key);
  }) });
}
function extractFileInfo(dataURLs) {
  return dataURLs.filter((dataURL) => dataURL).map((dataURL) => {
    const { blob, name } = 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 = getTemplate("BaseInputTemplate", registry, options);
  const handleChange = 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 = 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(void 0);
      }
    },
    [multiple, value, onChange]
  );
  return /* @__PURE__ */ jsx("div", { className: "armt-widget-file", children: /* @__PURE__ */ jsxs(fileInfoCtx.Provider, { value: { filesInfo, onRemove: rmFile, preview: options.filePreview ?? false }, children: [
    /* @__PURE__ */ jsx(
      BaseInputTemplate,
      {
        ...props,
        disabled: disabled || readonly,
        type: "file",
        required: value ? false : required,
        onChangeOverride: handleChange,
        value: "",
        accept: options.accept ? String(options.accept) : void 0
      }
    ),
    /* @__PURE__ */ jsx(FilesInfo, {})
  ] }) });
}

export { FileWidget as default };
//# sourceMappingURL=FileWidget.mjs.map