@lotics/ui 5.7.0 → 5.9.0

package/src/uploading_thumbnail.tsx

@@ -0,0 +1,212 @@
+// UploadingThumbnail — the in-flight upload tile (loading / paused / retrying /
+// error states). Pure: reuses the file display primitives (DocumentCard,
+// MediaCard, RemoveButton) and is i18n-free (status text comes in via `labels`).
+// Pairs with FileGrid, which interleaves these with completed FileThumbnails.
+
+import { Icon } from "./icon";
+import { Text } from "./text";
+import { IconButton } from "./icon_button";
+import { colors } from "./colors";
+import { DocumentCard, MediaCard, RemoveButton, getMediaIcon } from "./file_thumbnail";
+import { ActivityIndicator, Image, StyleSheet, View } from "react-native";
+import { isImageMimeType } from "./mime";
+
+/** In-flight upload states (everything except a completed file). */
+export type UploadStatus = "preparing" | "queued" | "uploading" | "paused_offline" | "retrying" | "error";
+
+/** Status text for the non-happy-path states. i18n-free defaults (English); the
+ *  Lotics host injects translations. The common `uploading` state stays text-free
+ *  (a spinner is self-evident) — only states that need attention get a word. */
+export interface UploadStatusLabels {
+  /** Upload paused because the device is offline. Default "Paused". */
+  paused?: string;
+  /** Upload is being retried. Default "Retrying". */
+  retrying?: string;
+  /** Upload failed but can be retried. Default "Upload failed". */
+  failed?: string;
+  /** Upload failed and retry is futile (dead file ref / empty bytes — re-pick). Default "Can't upload". */
+  unavailable?: string;
+  /** Accessible label on the retry control. Default "Retry upload". */
+  retry?: string;
+}
+
+interface UploadingThumbnailProps {
+  filename: string;
+  mimeType: string;
+  previewUrl?: string;
+  status: UploadStatus;
+  /** True when retry would hit the same failure on the same input: the picker
+   * File reference is dead (Android SAF eviction) or the file has zero bytes
+   * (empty clipboard paste). The user must re-pick or re-copy the file. */
+  staleFile?: boolean;
+  /** Explicit pixel size. When omitted, fills container. */
+  size?: number;
+  onRemove?: () => void;
+  onRetry?: () => void;
+  labels?: UploadStatusLabels;
+}
+
+/** Below this tile size the status word can't fit — show the icon/spinner alone. */
+const LABEL_MIN_SIZE = 72;
+
+/**
+ * Displays a file during upload with loading/error states.
+ */
+export function UploadingThumbnail(props: UploadingThumbnailProps) {
+  const { filename, mimeType, previewUrl, status, staleFile, size, onRemove, onRetry, labels } = props;
+  const compact = size !== undefined && size < LABEL_MIN_SIZE;
+
+  const rootStyle =
+    size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
+
+  const overlay = (
+    <UploadOverlay
+      status={status}
+      staleFile={staleFile === true}
+      compact={compact}
+      labels={labels}
+      onRetry={onRetry}
+    />
+  );
+
+  if (isImageMimeType(mimeType) && previewUrl) {
+    return (
+      <View style={[styles.uploadingContainer, rootStyle]}>
+        <Image source={{ uri: previewUrl }} style={styles.uploadingImage} resizeMode="cover" />
+        {overlay}
+        {onRemove && <RemoveButton onPress={onRemove} />}
+      </View>
+    );
+  }
+
+  const mediaIcon = getMediaIcon(mimeType);
+
+  return (
+    <View style={rootStyle}>
+      {mediaIcon !== undefined ? (
+        <MediaCard mimeType={mimeType} filename={filename} icon={mediaIcon} overlay={overlay} />
+      ) : (
+        <DocumentCard mimeType={mimeType} filename={filename} overlay={overlay} />
+      )}
+      {onRemove && <RemoveButton onPress={onRemove} />}
+    </View>
+  );
+}
+
+function UploadOverlay(props: {
+  status: UploadStatus;
+  staleFile: boolean;
+  compact: boolean;
+  labels?: UploadStatusLabels;
+  onRetry?: () => void;
+}) {
+  const { status, staleFile, compact, labels, onRetry } = props;
+
+  if (status === "preparing" || status === "queued" || status === "uploading") {
+    return (
+      <View style={styles.overlay} pointerEvents="none">
+        <ActivityIndicator size="small" color={colors.white} />
+      </View>
+    );
+  }
+
+  if (status === "paused_offline") {
+    return (
+      <OverlayStack compact={compact} label={labels?.paused ?? "Paused"}>
+        <Icon name="pause" size={20} color={colors.white} />
+      </OverlayStack>
+    );
+  }
+
+  if (status === "retrying") {
+    return (
+      <OverlayStack compact={compact} label={labels?.retrying ?? "Retrying"}>
+        <ActivityIndicator size="small" color={colors.white} />
+      </OverlayStack>
+    );
+  }
+
+  // error, retry is futile — the user must re-pick the file
+  if (staleFile) {
+    return (
+      <OverlayStack tone="error" compact={compact} label={labels?.unavailable ?? "Can't upload"}>
+        <Icon name="circle-alert" size={20} color={colors.white} />
+      </OverlayStack>
+    );
+  }
+
+  // error, retryable
+  return (
+    <View style={[styles.overlay, styles.overlayError]} pointerEvents="box-none">
+      <View style={styles.stack}>
+        {onRetry && (
+          <IconButton
+            icon="rotate-cw"
+            size={compact ? "sm" : "md"}
+            elevated
+            accessibilityLabel={labels?.retry ?? "Retry upload"}
+            onPress={(e) => {
+              e.stopPropagation();
+              onRetry();
+            }}
+          />
+        )}
+        {!compact && <OverlayLabel>{labels?.failed ?? "Upload failed"}</OverlayLabel>}
+      </View>
+    </View>
+  );
+}
+
+function OverlayStack(props: { tone?: "error"; compact: boolean; label: string; children: React.ReactNode }) {
+  return (
+    <View style={[styles.overlay, props.tone === "error" && styles.overlayError]} pointerEvents="none">
+      <View style={styles.stack}>
+        {props.children}
+        {!props.compact && <OverlayLabel>{props.label}</OverlayLabel>}
+      </View>
+    </View>
+  );
+}
+
+function OverlayLabel({ children }: { children: string }) {
+  return (
+    <Text size="xs" weight="medium" color="inverted" numberOfLines={2} style={styles.overlayLabel} userSelect="none">
+      {children}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  uploadingContainer: {
+    position: "relative",
+  },
+  uploadingImage: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 10,
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 10,
+    backgroundColor: "rgba(24, 24, 27, 0.55)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 8,
+  },
+  // Error states get a red wash — the at-a-glance "this didn't work" signal —
+  // dark enough that the white label + elevated retry button stay legible.
+  overlayError: {
+    backgroundColor: "rgba(153, 27, 27, 0.66)",
+  },
+  stack: {
+    alignItems: "center",
+    gap: 6,
+  },
+  overlayLabel: {
+    textAlign: "center",
+  },
+});

package/src/hover_action.tsx

@@ -1,54 +0,0 @@
-import { View, ViewStyle } from "react-native";
-import { ReactNode, useState, useCallback } from "react";
-import { useScreenSize } from "./use_screen_size";
-
-interface HoverActionProps {
-  children: ReactNode;
-  /** Content to show on hover (e.g., IconButton with Popover) */
-  action: ReactNode;
-  /** Additional condition for showing the action (combined with hover state) */
-  visible?: boolean;
-  hover?: boolean;
-
-  /** Style for the outer wrapper */
-  style?: ViewStyle;
-}
-
-export function HoverAction(props: HoverActionProps) {
-  const { children, action, visible = true, hover = true, style } = props;
-  const [hovered, setHovered] = useState(false);
-  const screenSize = useScreenSize();
-
-  // Disable hover on small screens (mobile) to prevent tap issues
-  const enableHover = hover && !screenSize.small;
-
-  const handleMouseEnter = useCallback(() => setHovered(true), []);
-  const handleMouseLeave = useCallback(() => setHovered(false), []);
-
-  return (
-    <View
-      style={[{ position: "relative" }, style]}
-      {...(enableHover
-        ? {
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-          }
-        : {})}
-    >
-      {children}
-      {(hovered || !enableHover) && visible && (
-        <View
-          style={{
-            position: "absolute",
-            zIndex: 1,
-            top: "50%",
-            transform: [{ translateY: "-50%" }],
-            right: 8,
-          }}
-        >
-          {action}
-        </View>
-      )}
-    </View>
-  );
-}