@oslokommune/punkt-react 15.0.4 → 15.2.0

package/src/components/fileupload/QueueDisplay.tsx

@@ -0,0 +1,155 @@
+import classNames from 'classnames'
+import { FC, useMemo } from 'react'
+
+import { useImagePreview, useOperationState } from './hooks'
+import { getProgressState, QueueItemContent } from './QueueItemContent'
+import { FilenameRenderer, ImagePreviewModal, ThumbnailRenderer } from './Subcomponents'
+import { TruncateContext } from './Truncate'
+import { TFileAndTransfer, FileItem, TFileItemList, TFileTransfer, TItemRenderer, TQueueItemOperation } from './types'
+
+// ============================================
+// Helper: Transform files with transfer status
+// ============================================
+
+/**
+ * Combine `files` with their transfer state (`transfers`) and sort by priority.
+ *
+ * Sort order:
+ * - in-progress first
+ * - then errors
+ * - then everything else
+ */
+const useFilesAndTransfers = (files: TFileItemList, transfers: TFileTransfer[]): TFileAndTransfer[] => {
+  return useMemo(() => {
+    const mapped = files.map((fileItem: FileItem) => {
+      const transfer = transfers.find((t) => t.fileId === fileItem.fileId)
+      return {
+        ...fileItem,
+        progress: transfer?.progress ?? 'queued',
+        errorMessage: transfer?.errorMessage,
+        showProgress: transfer?.showProgress,
+        lastProgress: transfer?.lastProgress,
+      }
+    })
+
+    // Sort order: in-progress first, then errors, then the rest
+    const priority = { 'in-progress': 0, error: 1, idle: 2 } as const
+    return mapped.sort((a, b) => priority[getProgressState(a.progress)] - priority[getProgressState(b.progress)])
+  }, [files, transfers])
+}
+
+// ============================================
+// Helper: Filter previewable images
+// ============================================
+
+/** Returns only uploaded images (used for the preview modal). */
+const usePreviewableImages = (filesAndTransfers: TFileAndTransfer[], enabled: boolean): TFileAndTransfer[] => {
+  return useMemo(() => {
+    if (!enabled) return []
+    return filesAndTransfers.filter((item) => item.progress === 'done' && item.file.type.startsWith('image/'))
+  }, [filesAndTransfers, enabled])
+}
+
+// ============================================
+// QueueDisplay Props
+// ============================================
+
+/**
+ * Queue list renderer for `PktFileUpload`.
+ *
+ * This component is UI-only; state changes are handled via callbacks / operations passed in.
+ */
+interface IQueueDisplay {
+  /** Called when the user cancels/removes a file (also used to cancel transfers). */
+  cancelTransfer: (fileItemId: string) => void
+  /** Transfer states used for `uploadStrategy="custom"`. */
+  transfers?: TFileTransfer[]
+  /** Current file items. */
+  files: TFileItemList
+  /** Operations (rename/comment/remove/etc) rendered per queue item. */
+  queueItemOperations?: TQueueItemOperation[]
+  /** Custom renderer for each queue item (defaults to filename renderer). */
+  ItemRenderer?: TItemRenderer
+  /** Number of trailing characters to keep when truncating long filenames. */
+  truncateTail?: number
+  /** Enable image preview modal (only affects thumbnail view). */
+  enableImagePreview?: boolean
+}
+
+// ============================================
+// QueueDisplay Component
+// ============================================
+
+export const QueueDisplay: FC<IQueueDisplay> = ({
+  files,
+  cancelTransfer,
+  transfers = [],
+  queueItemOperations = [],
+  ItemRenderer = FilenameRenderer,
+  truncateTail,
+  enableImagePreview = false,
+}) => {
+  // Transform data
+  const filesAndTransfers = useFilesAndTransfers(files, transfers)
+  const previewableImages = usePreviewableImages(filesAndTransfers, enableImagePreview)
+
+  // State management
+  const operationState = useOperationState(queueItemOperations)
+  const preview = useImagePreview(previewableImages)
+
+  return (
+    <>
+      <ul className="pkt-fileupload__queue-display">
+        <TruncateContext.Provider value={{ tail: truncateTail }}>
+          {filesAndTransfers.map((transferItem) => (
+            <li
+              key={transferItem.fileId}
+              className={classNames('pkt-fileupload__queue-display__item', {
+                'pkt-fileupload__queue-display__item--in-progress': typeof transferItem.progress === 'number',
+                [`pkt-fileupload__queue-display__item--${transferItem.progress}`]:
+                  typeof transferItem.progress === 'string',
+              })}
+            >
+              {/* Hidden inputs for form submission */}
+              {queueItemOperations.filter((op) => op.renderHidden).map((op) => op.renderHidden!(transferItem))}
+
+              {/* Main content based on state */}
+              <QueueItemContent
+                transferItem={transferItem}
+                activatedOperation={operationState.getActivated(transferItem.fileId)}
+                operations={queueItemOperations}
+                ItemRenderer={ItemRenderer}
+                enableImagePreview={enableImagePreview}
+                onActivate={operationState.activate}
+                onClose={operationState.close}
+                onCancelTransfer={cancelTransfer}
+                onOpenPreview={preview.open}
+              />
+            </li>
+          ))}
+        </TruncateContext.Provider>
+      </ul>
+
+      {/* Image preview modal */}
+      {enableImagePreview && previewableImages.length > 0 && (
+        <ImagePreviewModal
+          ref={preview.modalRef}
+          isOpen={preview.isOpen}
+          images={previewableImages}
+          currentIndex={preview.currentIndex}
+          onClose={preview.close}
+          onNavigate={preview.navigate}
+        />
+      )}
+    </>
+  )
+}
+
+// ============================================
+// ItemRenderers Export
+// ============================================
+
+export const ItemRenderers: Record<string, TItemRenderer> = {
+  filename: FilenameRenderer,
+  thumbnail: ThumbnailRenderer,
+}

package/src/components/fileupload/QueueItemContent.tsx

@@ -0,0 +1,200 @@
+import { FC, ReactNode } from 'react'
+
+import { PktIcon } from '..'
+import { OperationButton, TransferError, TransferInProgress } from './Subcomponents'
+import { TFileAndTransfer, TFileId, TItemRenderer, TQueueItemOperation, TTransferItemInProgress } from './types'
+
+type TProgressState = 'in-progress' | 'error' | 'idle'
+
+export const getProgressState = (progress: TFileAndTransfer['progress']): TProgressState => {
+  if (typeof progress === 'number') return 'in-progress'
+  if (progress === 'error') return 'error'
+  return 'idle'
+}
+
+// ============================================
+// OperationActions - Renders action buttons for a file
+// ============================================
+
+interface IOperationActions {
+  operations: TQueueItemOperation[]
+  activatedOperation?: TQueueItemOperation
+  onActivate: (fileId: TFileId, operation: TQueueItemOperation) => void
+  transferItem: TFileAndTransfer
+}
+
+export const OperationActions: FC<IOperationActions> = ({
+  operations,
+  activatedOperation,
+  onActivate,
+  transferItem,
+}) => (
+  <div className="pkt-fileupload__queue-display__item__actions">
+    {operations
+      .filter((op) => !activatedOperation || op.symbol !== activatedOperation.symbol)
+      .map((operation) => (
+        <OperationButton
+          key={operation.symbol.toString()}
+          operation={operation}
+          onActivate={onActivate}
+          transferItem={transferItem}
+        />
+      ))}
+  </div>
+)
+
+// ============================================
+// OperationContents - Renders operation content areas
+// ============================================
+
+interface IOperationContents {
+  operations: TQueueItemOperation[]
+  activatedOperation?: TQueueItemOperation
+  onActivate: (fileId: TFileId, operation: TQueueItemOperation) => void
+  transferItem: TFileAndTransfer
+}
+
+export const OperationContents: FC<IOperationContents> = ({
+  operations,
+  activatedOperation,
+  onActivate,
+  transferItem,
+}) => (
+  <>
+    {operations
+      .filter((op) => op.renderContent)
+      .map((operation) => (
+        <div className="pkt-fileupload__queue-display__item__operation-content" key={operation.symbol.toString()}>
+          {operation.renderContent!(
+            transferItem,
+            () => onActivate(transferItem.fileId, operation),
+            activatedOperation?.symbol === operation.symbol,
+          )}
+        </div>
+      ))}
+  </>
+)
+
+// ============================================
+// IdleStateContent - Renders content for idle/done state
+// ============================================
+
+interface IIdleStateContent {
+  transferItem: TFileAndTransfer
+  activatedOperation?: TQueueItemOperation
+  operations: TQueueItemOperation[]
+  ItemRenderer: TItemRenderer
+  onActivate: (fileId: TFileId, operation: TQueueItemOperation) => void
+  onClose: (fileId: TFileId) => void
+  onPreviewClick?: () => void
+}
+
+export const IdleStateContent: FC<IIdleStateContent> = ({
+  transferItem,
+  activatedOperation,
+  operations,
+  ItemRenderer,
+  onActivate,
+  onClose,
+  onPreviewClick,
+}) => {
+  const closeUI = () => onClose(transferItem.fileId)
+
+  // When any operation UI is active (rename inline or comments extended), hide all action buttons.
+  const hasOperationUIActive = activatedOperation?.renderInlineUI || activatedOperation?.renderExtendedUI
+  const visibleOperations = hasOperationUIActive ? [] : operations
+
+  return (
+    <>
+      {activatedOperation?.renderInlineUI ? (
+        <>
+          <PktIcon name="document-text" className="pkt-fileupload__queue-display__item__icon" />
+          <div className="pkt-fileupload__queue-display__item__inline-ui">
+            {activatedOperation.renderInlineUI(transferItem, closeUI)}
+          </div>
+        </>
+      ) : (
+        <ItemRenderer transferItem={transferItem} queueItemOperations={operations} onPreviewClick={onPreviewClick} />
+      )}
+
+      {visibleOperations.length > 0 && (
+        <OperationActions
+          operations={visibleOperations}
+          activatedOperation={activatedOperation}
+          onActivate={onActivate}
+          transferItem={transferItem}
+        />
+      )}
+
+      <OperationContents
+        operations={operations}
+        activatedOperation={activatedOperation}
+        onActivate={onActivate}
+        transferItem={transferItem}
+      />
+
+      {activatedOperation?.renderExtendedUI && (
+        <div className="pkt-fileupload__queue-display__item__expanded-operation-ui">
+          {activatedOperation.renderExtendedUI(transferItem, closeUI)}
+        </div>
+      )}
+    </>
+  )
+}
+
+// ============================================
+// QueueItemContent - Main content renderer based on state
+// ============================================
+
+interface IQueueItemContent {
+  transferItem: TFileAndTransfer
+  activatedOperation?: TQueueItemOperation
+  operations: TQueueItemOperation[]
+  ItemRenderer: TItemRenderer
+  enableImagePreview: boolean
+  onActivate: (fileId: TFileId, operation: TQueueItemOperation) => void
+  onClose: (fileId: TFileId) => void
+  onCancelTransfer: (fileId: string) => void
+  onOpenPreview: (fileId: TFileId) => void
+}
+
+export const QueueItemContent: FC<IQueueItemContent> = ({
+  transferItem,
+  activatedOperation,
+  operations,
+  ItemRenderer,
+  enableImagePreview,
+  onActivate,
+  onClose,
+  onCancelTransfer,
+  onOpenPreview,
+}) => {
+  const state = getProgressState(transferItem.progress)
+  const isPreviewable =
+    enableImagePreview && transferItem.progress === 'done' && transferItem.file.type.startsWith('image/')
+
+  switch (state) {
+    case 'in-progress':
+      return (
+        <TransferInProgress
+          aria-live="off"
+          transferItem={transferItem as TTransferItemInProgress}
+          cancelTransfer={() => onCancelTransfer(transferItem.fileId)}
+        />
+      )
+    case 'error':
+      return <TransferError transferItem={transferItem} onRemove={() => onCancelTransfer(transferItem.fileId)} />
+    case 'idle':
+      return (
+        <IdleStateContent
+          transferItem={transferItem}
+          activatedOperation={activatedOperation}
+          operations={operations}
+          ItemRenderer={ItemRenderer}
+          onActivate={onActivate}
+          onClose={onClose}
+          onPreviewClick={isPreviewable ? () => onOpenPreview(transferItem.fileId) : undefined}
+        />
+      )
+  }
+}