@jobber/components-native 0.101.11 → 0.102.0

package/src/FormatFile/utils/mapFileTypeToIconName.ts

@@ -0,0 +1,42 @@
+import type { IconNames } from "@jobber/design";
+import { getFileCategory } from "./getFileCategory";
+
+interface FileTypeToIconNameParams {
+  readonly fileName?: string;
+  readonly fileType?: string;
+}
+
+/**
+ * Pick the file-type icon name for a given file. Today the design system
+ * exposes brand-named icons (`word`, `excel`) which double-duty as the
+ * generic "document" / "spreadsheet" indicators; when generic icons land
+ * in `@jobber/design`, the mapping below is the one place that needs to
+ * change.
+ *
+ * The actual file-type detection lives in `getFileCategory` so consumers
+ * that need a generic category name (e.g. for accessibility labels or
+ * filter UI) do not have to thread brand vocabulary through their copy.
+ */
+export function mapFileTypeToIconName({
+  fileName,
+  fileType,
+}: FileTypeToIconNameParams): IconNames {
+  if (!fileName && !fileType) {
+    return "alert";
+  }
+
+  switch (getFileCategory({ fileName, fileType })) {
+    case "pdf":
+      return "pdf";
+    case "document":
+      return "word";
+    case "spreadsheet":
+      return "excel";
+    case "video":
+      return "videoFile";
+    case "image":
+    case "other":
+    default:
+      return "file";
+  }
+}

package/src/FormatFile/utils/sanitizeFileName.test.ts

@@ -0,0 +1,25 @@
+import { sanitizeFileName } from "./sanitizeFileName";
+
+describe("sanitizeFileName", () => {
+  it("returns an empty string when input is undefined", () => {
+    expect(sanitizeFileName(undefined)).toBe("");
+  });
+
+  it("returns the input unchanged when no newlines are present", () => {
+    expect(sanitizeFileName("report.pdf")).toBe("report.pdf");
+  });
+
+  it("collapses a single embedded \\n into a space", () => {
+    expect(sanitizeFileName("first\nsecond.txt")).toBe("first second.txt");
+  });
+
+  it("collapses runs of CR / LF into a single space", () => {
+    expect(sanitizeFileName("first\r\n\r\nsecond.txt")).toBe(
+      "first second.txt",
+    );
+  });
+
+  it("leaves spaces unchanged", () => {
+    expect(sanitizeFileName("with spaces.pdf")).toBe("with spaces.pdf");
+  });
+});

package/src/FormatFile/utils/sanitizeFileName.ts

@@ -0,0 +1,9 @@
+/**
+ * Collapse CR / LF in a filename to a single space so embedded line breaks
+ * never reach the rendered `Text` and cause vertical layout drift.
+ */
+export function sanitizeFileName(name?: string): string {
+  if (!name) return "";
+
+  return name.replace(/[\r\n]+/g, " ");
+}

package/src/FormatFile/utils/truncateFileNameForLine.test.ts

@@ -0,0 +1,61 @@
+import { truncateFileNameForLine } from "./truncateFileNameForLine";
+
+describe("truncateFileNameForLine", () => {
+  it("returns an empty string when the input is undefined", () => {
+    expect(truncateFileNameForLine(undefined)).toBe("");
+  });
+
+  it("returns the name unchanged when it fits inside the budget", () => {
+    expect(truncateFileNameForLine("report.pdf")).toBe("report.pdf");
+  });
+
+  it("preserves a short extension and truncates the stem with a middle ellipsis", () => {
+    expect(truncateFileNameForLine("file-sample_2_dx.docx")).toBe(
+      "file-samp….docx",
+    );
+  });
+
+  it("preserves an uncommon extension like .fodt", () => {
+    expect(truncateFileNameForLine("very-long-name-for-document.fodt")).toBe(
+      "very-long….fodt",
+    );
+  });
+
+  it("preserves longer extensions like .numbers", () => {
+    expect(truncateFileNameForLine("quarterly-budget.numbers")).toBe(
+      "quarte….numbers",
+    );
+  });
+
+  it("treats overly long trailing tokens as not-an-extension and tail truncates", () => {
+    expect(truncateFileNameForLine("file.verylongextensionname")).toBe(
+      "file.verylonge…",
+    );
+  });
+
+  it("truncates a URL-shaped filename with no detectable extension using a tail ellipsis", () => {
+    expect(truncateFileNameForLine("vertopal.com/converter")).toBe(
+      "vertopal.com/c…",
+    );
+  });
+
+  it("falls back to tail truncation when the extension cannot fit", () => {
+    const long = "a".repeat(50) + ".verylongextension";
+    expect(truncateFileNameForLine(long, 24)).toMatch(/^a+…$/);
+  });
+
+  it("respects a caller-supplied maxLength", () => {
+    expect(truncateFileNameForLine("report.pdf", 6)).toBe("r….pdf");
+  });
+
+  it("returns a name shorter than the budget unchanged regardless of extension", () => {
+    expect(truncateFileNameForLine("notes.txt")).toBe("notes.txt");
+    expect(truncateFileNameForLine("a/b/c")).toBe("a/b/c");
+  });
+
+  it("clamps maxLength to a sensible minimum to preserve the single-line guarantee", () => {
+    expect(truncateFileNameForLine("report.pdf", 0)).toBe("r…");
+    expect(truncateFileNameForLine("report.pdf", -5)).toBe("r…");
+    expect(truncateFileNameForLine("report.pdf", 1)).toBe("r…");
+  });
+});

package/src/FormatFile/utils/truncateFileNameForLine.ts

@@ -0,0 +1,68 @@
+const DEFAULT_MAX_LENGTH = 15;
+const MIN_MAX_LENGTH = 2;
+const ELLIPSIS = "…";
+
+/**
+ * Maximum total length (including the leading dot) of a trailing token that
+ * we are willing to treat as a file extension. 10 covers every real-world
+ * extension this package routes to a recognisable icon (`.numbers`, `.fodt`,
+ * `.docx`, `.xlsx`, etc.) while rejecting accidental long suffixes from
+ * URL-shaped filenames. Chained pseudo-extensions like `.tar.gz` collapse
+ * to the trailing portion (`.gz`), which is the common-sense user
+ * expectation.
+ */
+const MAX_EXTENSION_LENGTH = 10;
+
+/**
+ * Truncate a filename so it fits a single line in the small file-type tile.
+ *
+ * Why this exists: on Android, RN's `Text` with `numberOfLines={1}` does not
+ * always enforce single-line layout for URL-shaped strings with no
+ * whitespace (e.g. `vertopal.com/converter`). They wrap to a second line
+ * which then bleeds outside the rounded tile border. Pre-truncating in JS
+ * guarantees the rendered string is short enough that single-line wrapping
+ * is never required.
+ *
+ * The truncation preserves the trailing file extension when one is
+ * detectable so the file type stays visible at a glance (examples below
+ * use the default 15-character budget):
+ *   `vertopal.com/converter`        → `vertopal.com/c…`
+ *   `file-sample_2_dx.docx`         → `file-samp….docx`
+ *   `quarterly-budget.numbers`      → `quarte….numbers`
+ *   `report.pdf`                    → `report.pdf` (unchanged)
+ *   `embedded\nname.txt`            → caller should pass through
+ *                                     `sanitizeFileName` first
+ *
+ * `maxLength` is clamped to a sensible minimum of 2 so a caller passing
+ * `0` or a negative value cannot violate the single-line guarantee.
+ */
+// eslint-disable-next-line max-statements
+export function truncateFileNameForLine(
+  name?: string,
+  maxLength = DEFAULT_MAX_LENGTH,
+): string {
+  if (!name) return "";
+
+  const budget = Math.max(MIN_MAX_LENGTH, Math.floor(maxLength));
+  if (name.length <= budget) return name;
+
+  const lastDot = name.lastIndexOf(".");
+  const extensionLength = name.length - lastDot;
+  const hasExtension =
+    lastDot > 0 &&
+    lastDot < name.length - 1 &&
+    extensionLength <= MAX_EXTENSION_LENGTH;
+
+  if (!hasExtension) {
+    return name.slice(0, budget - 1) + ELLIPSIS;
+  }
+
+  const extension = name.slice(lastDot);
+  const stemBudget = budget - extension.length - 1;
+
+  if (stemBudget <= 0) {
+    return name.slice(0, budget - 1) + ELLIPSIS;
+  }
+
+  return name.slice(0, stemBudget) + ELLIPSIS + extension;
+}

package/src/ThumbnailList/__snapshots__/ThumbnailList.test.tsx.snap

@@ -92,6 +92,7 @@ exports[`renders a thumbnail component with attachments 1`] = `
             }
           >
             <Image
+              onError={[Function]}
               onLoadEnd={[Function]}
               onLoadStart={[Function]}
               resizeMode="cover"