@navikt/ds-react 6.2.0 → 6.3.0

package/src/form/file-upload/parts/item/Item.tsx

@@ -0,0 +1,165 @@
+import cl from "clsx";
+import React, { MouseEvent, forwardRef } from "react";
+import { ExclamationmarkTriangleIcon } from "@navikt/aksel-icons";
+import { BodyShort } from "../../../../typography";
+import { OverridableComponent } from "../../../../util";
+import { useFileUploadTranslation } from "../../FileUpload.context";
+import { useI18n } from "../../i18n/i18n.context";
+import { ComponentTranslation } from "../../i18n/i18n.types";
+import { FileItem } from "./Item.types";
+import ItemButton from "./ItemButton";
+import ItemIcon from "./ItemIcon";
+import ItemName from "./ItemName";
+import { formatFileSize } from "./utils/format-file-size";
+
+export interface FileItemBaseProps {
+  /**
+   * Overrides html-tag
+   * @default "div"
+   */
+  as?: "div" | "li";
+  /**
+   * Either a native File or file metadata.
+   */
+  file: FileItem;
+  /**
+   * onClick on the file name.
+   * @note If this and `href` is not set and the `file` prop is a native file, onClick will download the file.
+   */
+  onFileClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  /**
+   * href on the file name.
+   * @note If this and `onFileClick` is not set and the `file` prop is a native file, onClick will download the file.
+   */
+  href?: string;
+  /**
+   * Error message relating to the item.
+   */
+  error?: string;
+  /**
+   * Status "downloading" and "uploading" displays a loading indicator.
+   * @default "idle"
+   */
+  status?: "downloading" | "uploading" | "idle";
+  /**
+   * i18n-API for customizing texts and labels
+   */
+  translations?: ComponentTranslation<"FileUpload">["item"];
+  onRetry?: (event: MouseEvent<HTMLButtonElement>) => void;
+  onDelete?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+type FileItemActionDelete = {
+  onDelete: (event: MouseEvent<HTMLButtonElement>) => void;
+  itemAction: "delete";
+};
+
+type FileItemActionRetry = {
+  onRetry: (event: MouseEvent<HTMLButtonElement>) => void;
+  itemAction: "retry";
+};
+
+type FileItemActionNone = {
+  itemAction?: "none";
+};
+
+type FileItemConditionalProps =
+  | FileItemActionDelete
+  | FileItemActionRetry
+  | FileItemActionNone;
+
+export type FileUploadItemProps = FileItemBaseProps &
+  FileItemConditionalProps &
+  React.HTMLAttributes<HTMLDivElement>;
+
+export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        as: Component = "div",
+        file,
+        status = "idle",
+        onDelete,
+        onRetry,
+        error,
+        className,
+        href,
+        onFileClick,
+        itemAction = "delete",
+        translations,
+        ...rest
+      },
+      ref,
+    ) => {
+      const context = useFileUploadTranslation(false);
+      const translate = useI18n(
+        "FileUpload",
+        { item: translations },
+        context?.translations,
+      );
+
+      const showError = !!error && status === "idle";
+
+      function getStatusText() {
+        if (status === "uploading") {
+          return translate("item.uploading");
+        }
+        if (status === "downloading") {
+          return translate("item.downloading");
+        }
+        return formatFileSize(file);
+      }
+
+      return (
+        <Component
+          ref={ref}
+          {...rest}
+          className={cl("navds-file-item", className, {
+            "navds-file-item--error": showError,
+          })}
+        >
+          <div className="navds-file-item__inner">
+            <ItemIcon
+              isLoading={status !== "idle"}
+              file={file}
+              showError={showError}
+            />
+            <div className="navds-file-item__file-info">
+              <ItemName file={file} href={href} onClick={onFileClick} />
+              <BodyShort as="div" size="small">
+                {getStatusText()}
+              </BodyShort>
+              <div
+                className="navds-file-item__error"
+                aria-relevant="additions removals"
+                aria-live="polite"
+              >
+                {showError && (
+                  <BodyShort
+                    size="small"
+                    className="navds-file-item__error-content"
+                  >
+                    <ExclamationmarkTriangleIcon aria-hidden />
+                    {error}
+                  </BodyShort>
+                )}
+              </div>
+            </div>
+
+            {status === "idle" && (
+              <ItemButton
+                file={file}
+                onRetry={onRetry}
+                onDelete={onDelete}
+                action={itemAction}
+                retryTitle={translate("item.retryButtonTitle")}
+                deleteTitle={translate("item.deleteButtonTitle")}
+              />
+            )}
+          </div>
+        </Component>
+      );
+    },
+  );
+
+export default Item;

package/src/form/file-upload/parts/item/Item.types.ts

@@ -0,0 +1,6 @@
+export interface FileMetadata {
+  name: string;
+  size?: number;
+}
+
+export type FileItem = FileMetadata | File;

package/src/form/file-upload/parts/item/ItemButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ArrowsCirclepathIcon, TrashIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../../button";
+import { FileItem } from "./Item.types";
+
+interface Props {
+  file: FileItem;
+  onRetry?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  action: "delete" | "retry" | "none";
+  retryTitle: string;
+  deleteTitle: string;
+}
+
+const ItemButton = ({
+  onRetry,
+  onDelete,
+  action,
+  retryTitle,
+  deleteTitle,
+}: Props) => {
+  if (action === "none") {
+    return null;
+  }
+
+  if (onRetry && action === "retry") {
+    return (
+      <Button
+        className="navds-file-item__button"
+        type="button"
+        variant="tertiary-neutral"
+        onClick={onRetry}
+        icon={<ArrowsCirclepathIcon title={retryTitle} />}
+      />
+    );
+  }
+  if (onDelete && action === "delete") {
+    return (
+      <Button
+        className="navds-file-item__button"
+        type="button"
+        variant="tertiary-neutral"
+        onClick={onDelete}
+        icon={<TrashIcon title={deleteTitle} />}
+      />
+    );
+  }
+
+  return null;
+};
+
+export default ItemButton;

package/src/form/file-upload/parts/item/ItemIcon.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import {
+  FileCsvIcon,
+  FileExcelIcon,
+  FileIcon,
+  FileImageIcon,
+  FilePdfIcon,
+  FileTextIcon,
+  FileWordIcon,
+  FileXMarkIcon,
+} from "@navikt/aksel-icons";
+import { Loader } from "../../../../loader";
+import { FileItem } from "./Item.types";
+
+interface ItemIconProps {
+  isLoading?: boolean;
+  file: FileItem;
+  showError: boolean;
+}
+
+const iconProps = {
+  fontSize: "2rem",
+  "aria-hidden": true,
+};
+
+function ItemIcon({ isLoading, file, showError }: ItemIconProps) {
+  if (isLoading) {
+    return (
+      <div className="navds-file-item__icon navds-file-item__icon--loading">
+        <Loader size="large" />
+      </div>
+    );
+  } else if (showError) {
+    return (
+      <div className="navds-file-item__icon">
+        <FileXMarkIcon {...iconProps} />
+      </div>
+    );
+  }
+  return (
+    <div className="navds-file-item__icon">
+      <Icon file={file} />
+    </div>
+  );
+}
+
+function Icon({ file }: { file: FileItem }) {
+  const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
+
+  switch (extension) {
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+    case "webp":
+      return <FileImageIcon {...iconProps} />;
+    case "pdf":
+      return <FilePdfIcon {...iconProps} />;
+    case "txt":
+      return <FileTextIcon {...iconProps} />;
+    case "csv":
+      return <FileCsvIcon {...iconProps} />;
+    case "xls":
+    case "xlsx":
+      return <FileExcelIcon {...iconProps} />;
+    case "doc":
+    case "docx":
+      return <FileWordIcon {...iconProps} />;
+    default:
+      return <FileIcon {...iconProps} />;
+  }
+}
+
+export default ItemIcon;

package/src/form/file-upload/parts/item/ItemName.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Link } from "../../../../link";
+import { FileItem } from "./Item.types";
+import { downloadFile } from "./utils/download-file";
+import { isNativeFile } from "./utils/file-type-checker";
+
+interface Props {
+  file: FileItem;
+  href?: string;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+const ItemName = ({ file, href, onClick }: Props) => {
+  if (onClick && href) {
+    return (
+      <Link href={href} onClick={onClick}>
+        {file.name}
+      </Link>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <Link
+        href="#"
+        onClick={(event) => {
+          event.preventDefault();
+          onClick(event);
+        }}
+      >
+        {file.name}
+      </Link>
+    );
+  }
+
+  if (href) {
+    return <Link href={href}>{file.name}</Link>;
+  }
+
+  if (isNativeFile(file)) {
+    return (
+      <Link
+        href="#"
+        download={file.name}
+        onClick={(event) => {
+          event.preventDefault();
+          downloadFile(file);
+        }}
+      >
+        {file.name}
+      </Link>
+    );
+  }
+
+  return <span>{file.name}</span>;
+};
+
+export default ItemName;

package/src/form/file-upload/parts/item/utils/download-file.ts

@@ -0,0 +1,9 @@
+export const downloadFile = (file: File): void => {
+  const a = document.createElement("a");
+  const url = URL.createObjectURL(file);
+  a.href = url;
+  a.download = file.name;
+  a.click();
+
+  URL.revokeObjectURL(url);
+};

package/src/form/file-upload/parts/item/utils/file-type-checker.ts

@@ -0,0 +1,4 @@
+import { FileItem } from "../Item.types";
+
+export const isNativeFile = (fileItem: FileItem): fileItem is File =>
+  "lastModified" in fileItem;

package/src/form/file-upload/parts/item/utils/format-file-size.test.ts

@@ -0,0 +1,76 @@
+import { formatFileSize } from "./format-file-size";
+
+describe("format-file-size", () => {
+  describe("with native File", () => {
+    it('returns "0,01 MB" when file size is less than 0,01 MB', () => {
+      const file = new File(["abc"], "file.txt");
+
+      expect(formatFileSize(file)).toBe("0,01 MB");
+    });
+
+    it('returns "0,29 MB" when file size is 0,29 MB', () => {
+      const file = new File(["abc".repeat(99_999)], "file.txt");
+
+      expect(formatFileSize(file)).toBe("0,29 MB");
+    });
+
+    it('returns "> 500 MB" when file size is more than 500 MB', () => {
+      const file = createLargeMockFile(600_000_000);
+
+      expect(formatFileSize(file)).toBe("> 500 MB");
+    });
+  });
+
+  describe("with MetadataFile", () => {
+    it("returns null when file size is undefined", () => {
+      const file = {
+        name: "myfile.txt",
+      };
+
+      expect(formatFileSize(file)).toBeNull();
+    });
+    it('returns "0,01 MB" when file size is less than 0,01 MB', () => {
+      const file = {
+        name: "myfile.txt",
+        size: 1,
+      };
+
+      expect(formatFileSize(file)).toBe("0,01 MB");
+    });
+
+    it('returns "0,96 MB" when file size is 0,96 MB', () => {
+      const file = {
+        name: "myfile.txt",
+        size: 999_999,
+      };
+
+      expect(formatFileSize(file)).toBe("0,96 MB");
+    });
+
+    it('returns "> 500 MB" when file size is more than 500 MB', () => {
+      const file = {
+        name: "myfile.txt",
+        size: 600_000_000,
+      };
+
+      expect(formatFileSize(file)).toBe("> 500 MB");
+    });
+  });
+});
+
+function createLargeMockFile(sizeInBytes: number): File {
+  const chunkSize = 1024 * 1024; // 1MB chunk size
+  const chunks: Uint8Array[] = [];
+
+  for (let i = 0; i < sizeInBytes; i += chunkSize) {
+    const size = Math.min(chunkSize, sizeInBytes - i);
+    const chunk = new Uint8Array(size);
+    chunk.fill("a".charCodeAt(0));
+    chunks.push(chunk);
+  }
+
+  const blob = new Blob(chunks, { type: "text/plain" });
+  return new File([blob], "largeMockFile.txt", {
+    type: "text/plain",
+  });
+}

package/src/form/file-upload/parts/item/utils/format-file-size.ts

@@ -0,0 +1,25 @@
+import { FileItem } from "../Item.types";
+
+const MAX_MEGA_BYTES = 500;
+
+export function formatFileSize(file: FileItem): string | null {
+  if (!file.size) {
+    return null;
+  }
+  const megaBytes = file.size / (1024 * 1024);
+
+  if (megaBytes <= MAX_MEGA_BYTES) {
+    return formatter.format(megaBytes);
+  }
+
+  return `> ${MAX_MEGA_BYTES} MB`;
+}
+
+const formatter = new Intl.NumberFormat("nb-NO", {
+  style: "unit",
+  unit: "megabyte",
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+  // @ts-expect-error - Looks like roundingMode hasn't been added to TypeScript yet
+  roundingMode: "ceil",
+});

package/src/form/file-upload/useFileUpload.ts

@@ -0,0 +1,54 @@
+import { useRef } from "react";
+import { useMergeRefs } from "../../util/hooks";
+import { FileUploadBaseProps } from "./FileUpload.types";
+import { validateFiles } from "./utils/validate-files";
+
+export interface UseFileUploadProps
+  extends Omit<FileUploadBaseProps, "fileLimit"> {
+  ref: React.ForwardedRef<HTMLInputElement>;
+  disabled?: boolean;
+}
+
+export const useFileUpload = ({
+  ref,
+  accept,
+  onSelect,
+  validator,
+  maxSizeInBytes,
+  disabled,
+}: UseFileUploadProps) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const mergedRef = useMergeRefs(inputRef, ref);
+
+  const upload = (fileList: FileList) => {
+    const { files, partitionedFiles } = validateFiles(
+      Array.from(fileList),
+      accept,
+      validator,
+      maxSizeInBytes,
+    );
+
+    onSelect(files, partitionedFiles);
+  };
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const fileList = event.target.files;
+    if (!fileList) {
+      return;
+    }
+
+    if (!disabled) {
+      upload(fileList);
+    }
+
+    // Resets the value to make it is possible to upload the same file several consecutive times
+    event.target.value = "";
+  };
+
+  return {
+    upload,
+    onChange,
+    inputRef,
+    mergedRef,
+  };
+};

package/src/form/file-upload/utils/is-accepted-file-type.test.ts

@@ -0,0 +1,69 @@
+import { isAcceptedFileType } from "./is-accepted-file-type";
+
+const txtFile = () =>
+  new File(["foo"], "foo.txt", {
+    type: "text/plain",
+  });
+
+describe("isAcceptedFileType", () => {
+  test("returns true when accept is undefined", () => {
+    expect(isAcceptedFileType(txtFile(), undefined)).toBe(true);
+  });
+
+  test("returns true when accept is empty string", () => {
+    expect(isAcceptedFileType(txtFile(), "")).toBe(true);
+  });
+
+  test("returns true when file matches accepted extensions", () => {
+    expect(isAcceptedFileType(txtFile(), ".txt, .pdf")).toBe(true);
+  });
+
+  test("works as expected when there is no space after comma in accept", () => {
+    expect(isAcceptedFileType(txtFile(), ".txt,.pdf")).toBe(true);
+  });
+
+  test("returns false when file does not match the accepted extensions", () => {
+    expect(isAcceptedFileType(txtFile(), ".xlsx, .pdf")).toBe(false);
+  });
+
+  test("returns true when file matches the accepted exact mime types", () => {
+    expect(isAcceptedFileType(txtFile(), "application/pdf, text/plain")).toBe(
+      true,
+    );
+  });
+
+  test("returns false when file does not the accepted exact mime types", () => {
+    expect(isAcceptedFileType(txtFile(), "application/pdf, text/csv")).toBe(
+      false,
+    );
+  });
+
+  test("returns true when file matches the accepted wildcard mime types", () => {
+    expect(isAcceptedFileType(txtFile(), "application/*, text/*")).toBe(true);
+  });
+
+  test("returns false when file does not the accepted wildcard mime types", () => {
+    expect(isAcceptedFileType(txtFile(), "application/*, image/*")).toBe(false);
+  });
+
+  test("returns true if matches extension, but not exact or wildcard mime type", () => {
+    expect(
+      isAcceptedFileType(txtFile(), "application/*, image/*, .txt, audio/mpeg"),
+    ).toBe(true);
+  });
+
+  test("returns true if matches exact mime type, but not extension or wildcard mime type", () => {
+    expect(
+      isAcceptedFileType(
+        txtFile(),
+        "application/*, text/plain, .jpg, audio/mpeg",
+      ),
+    ).toBe(true);
+  });
+
+  test("returns true if matches wildcard mime type, but not extension or exact mime type", () => {
+    expect(
+      isAcceptedFileType(txtFile(), "application/*, text/*, .jpg, audio/mpeg"),
+    ).toBe(true);
+  });
+});

package/src/form/file-upload/utils/is-accepted-file-type.ts

@@ -0,0 +1,25 @@
+export function isAcceptedFileType(
+  file: File,
+  accept: string | undefined,
+): boolean {
+  if (!accept) {
+    return true;
+  }
+  const mimeType = file.type;
+  const acceptedTypes = accept.split(",");
+
+  return acceptedTypes.some((type) => {
+    const validType = type.trim();
+    const isExtensionType = validType.startsWith(".");
+    const isWildcardMimeType = validType.endsWith("/*");
+
+    if (isExtensionType) {
+      return file.name.toLowerCase().endsWith(validType.toLowerCase());
+    } else if (isWildcardMimeType) {
+      const baseMimeType = mimeType.replace(/\/.*$/, "");
+      const baseValidType = validType.replace(/\/.*$/, "");
+      return baseMimeType === baseValidType;
+    }
+    return mimeType === validType;
+  });
+}

package/src/form/file-upload/utils/is-accepted-size.test.ts

@@ -0,0 +1,26 @@
+import { isAcceptedSize } from "./is-accepted-size";
+
+describe("isAcceptedSize", () => {
+  it("should return true if maxSize is less than or equal to 0", () => {
+    const file = new File([new Array(5000).join("a")], "filename.txt", {
+      type: "text/plain",
+    });
+    expect(isAcceptedSize(file, -1)).toBe(true);
+    expect(isAcceptedSize(file, 0)).toBe(true);
+  });
+
+  it("should return true if file size is less than or equal to maxSize", () => {
+    const file = new File([new Array(5000).join("a")], "filename.txt", {
+      type: "text/plain",
+    });
+    expect(isAcceptedSize(file, 5000)).toBe(true);
+    expect(isAcceptedSize(file, 6000)).toBe(true);
+  });
+
+  it("should return false if file size is greater than maxSize", () => {
+    const file = new File([new Array(5000).join("a")], "filename.txt", {
+      type: "text/plain",
+    });
+    expect(isAcceptedSize(file, 4000)).toBe(false);
+  });
+});

package/src/form/file-upload/utils/is-accepted-size.ts

@@ -0,0 +1,7 @@
+export function isAcceptedSize(file: File, maxSize: number = -1): boolean {
+  if (maxSize <= 0 || file.size <= maxSize) {
+    return true;
+  }
+
+  return false;
+}