typescript

2025-11-13 01:07:55 +01:00
parent b812d748ea
commit ada089c05b
147 changed files with 7427 additions and 2534 deletions
@@ -0,0 +1,183 @@
+import React, { useMemo } from 'react';
+import DesktopPreviewCard from './DesktopPreviewCard';
+import { resolveCorrespondents } from '../documents/correspondents';
+import { getTagColorStyle } from '../utils/colors';
+import { preventAll } from './events';
+
+type DocumentLike = {
+  id?: string | number;
+  title?: string;
+  tags?: Array<{ id?: string | number; label?: string; color?: string | null }>;
+  [key: string]: unknown;
+};
+
+interface PendingRemovalTag {
+  docId?: string | number;
+  tagId?: string | number;
+}
+
+interface DesktopDocumentCardProps {
+  doc: DocumentLike;
+  style?: React.CSSProperties;
+  shouldLoad?: boolean;
+  dragging?: boolean;
+  matchesFilter?: boolean;
+  tagTargetActive?: boolean;
+  tagTargetPending?: boolean;
+  selected?: boolean;
+  docTagTokens?: string;
+  ensureAssetUrl?: (...args: any[]) => Promise<unknown>;
+  getDocumentAsset?: (...args: any[]) => unknown;
+  handleNavigatorSnapshot?: (...args: any[]) => void;
+  cardPointerHandlers?: React.HTMLAttributes<HTMLDivElement>;
+  onDocumentOpen?: (id: string | number) => void;
+  onTagDragEnter?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
+  onTagDragOver?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
+  onTagDragLeave?: (event: React.DragEvent<HTMLDivElement>, docId: string | number) => void;
+  onTagDrop?: (event: React.DragEvent<HTMLDivElement>, doc: DocumentLike) => void;
+  onDocTagPointerDown?: (event: React.PointerEvent<HTMLElement>, doc: DocumentLike, tag: any) => void;
+  onDocTagDragStart?: (event: React.DragEvent<HTMLElement>, doc: DocumentLike, tag: any) => void;
+  onDocTagDrag?: (event: React.DragEvent<HTMLElement>) => void;
+  onDocTagDragEnd?: (event: React.DragEvent<HTMLElement>) => void;
+  pendingRemovalTag?: PendingRemovalTag | null;
+  registerNode?: (node: HTMLDivElement | null) => void;
+}
+
+const DesktopDocumentCard: React.FC<DesktopDocumentCardProps> = ({
+  doc,
+  style,
+  shouldLoad,
+  dragging,
+  matchesFilter,
+  tagTargetActive,
+  tagTargetPending,
+  selected,
+  docTagTokens,
+  ensureAssetUrl,
+  getDocumentAsset,
+  handleNavigatorSnapshot,
+  cardPointerHandlers,
+  onDocumentOpen,
+  onTagDragEnter,
+  onTagDragOver,
+  onTagDragLeave,
+  onTagDrop,
+  onDocTagPointerDown,
+  onDocTagDragStart,
+  onDocTagDrag,
+  onDocTagDragEnd,
+  pendingRemovalTag,
+  registerNode,
+}) => {
+  const correspondents = useMemo(() => resolveCorrespondents(doc), [doc]);
+  const tags = Array.isArray(doc?.tags) ? doc.tags : [];
+
+  const itemClasses = ['desk-item'];
+  if (dragging) itemClasses.push('is-dragging');
+  if (tagTargetActive) itemClasses.push('is-tag-target');
+  if (tagTargetPending) itemClasses.push('is-tag-pending');
+  if (!matchesFilter) itemClasses.push('is-filtered-out');
+  if (selected) itemClasses.push('is-selected');
+
+  const ariaHidden = matchesFilter ? undefined : 'true';
+  const dataTagIds = docTagTokens || undefined;
+
+  return (
+    <div
+      key={doc.id}
+      className={itemClasses.join(' ')}
+      style={style}
+      role="button"
+      data-doc-id={doc.id}
+      data-tag-ids={dataTagIds}
+      aria-hidden={ariaHidden}
+      ref={registerNode ?? undefined}
+      {...cardPointerHandlers}
+      onDragEnter={(event) => {
+        if (doc?.id == null) {
+          return;
+        }
+        onTagDragEnter?.(event, doc.id);
+      }}
+      onDragOver={(event) => {
+        if (doc?.id == null) {
+          return;
+        }
+        onTagDragOver?.(event, doc.id);
+      }}
+      onDragLeave={(event) => {
+        if (doc?.id == null) {
+          return;
+        }
+        onTagDragLeave?.(event, doc.id);
+      }}
+      onDrop={(event) => {
+        onTagDrop?.(event, doc);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          preventAll(event);
+          onDocumentOpen?.(doc.id);
+        }
+      }}
+    >
+      <div className="desk-item__body">
+        <DesktopPreviewCard
+          doc={doc}
+          title={doc.title}
+          ensureAssetUrl={ensureAssetUrl}
+          getDocumentAsset={getDocumentAsset}
+          onNavigatorSnapshot={handleNavigatorSnapshot}
+          shouldLoad={shouldLoad}
+        />
+        {correspondents.length > 0 && (
+          <div className="desk-item__correspondents" aria-hidden="true">
+            {correspondents.map((correspondent) => (
+              <span
+                key={correspondent.key}
+                className="badge desk-correspondent-chip"
+                title={correspondent.name}
+              >
+                <span className="desk-correspondent-chip__label">{correspondent.name}</span>
+              </span>
+            ))}
+          </div>
+        )}
+        {tags.length > 0 && (
+          <div className="desk-item__tags" aria-hidden="true">
+            {tags.map((tag) => {
+              if (pendingRemovalTag && pendingRemovalTag.docId === doc.id && pendingRemovalTag.tagId === tag.id) {
+                return null;
+              }
+              const colorStyle = getTagColorStyle(tag.color);
+              const pendingRemoval =
+                pendingRemovalTag && pendingRemovalTag.docId === doc.id && pendingRemovalTag.tagId === tag.id;
+              const tagClasses = ['badge', 'tag-chip', 'tag-chip--draggable'];
+              if (pendingRemoval) tagClasses.push('tag-chip--tear-pending');
+              return (
+                <span
+                  key={tag.id}
+                  className={tagClasses.join(' ')}
+                  style={colorStyle || undefined}
+                  title={tag.label}
+                  draggable
+                  data-desk-tag-chip="true"
+                  onPointerDownCapture={(event) => {
+                    onDocTagPointerDown?.(event, doc, tag);
+                  }}
+                  onDragStart={(event) => onDocTagDragStart?.(event, doc, tag)}
+                  onDrag={onDocTagDrag}
+                  onDragEnd={(event) => onDocTagDragEnd?.(event)}
+                >
+                  <span className="tag-chip__label">{tag.label}</span>
+                </span>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(DesktopDocumentCard);