@oslokommune/punkt-react 16.13.3 → 16.15.0

package/src/components/fileupload/QueueDisplay.tsx

@@ -1,96 +1,53 @@
 import classNames from 'classnames'
 import { FC, useMemo } from 'react'
 
+import { isImageFileLike, mergeFilesAndTransfers } from 'shared-utils/fileupload'
+
 import { useImagePreview, useOperationState } from './hooks'
-import { getProgressState, QueueItemContent } from './QueueItemContent'
+import { buildOperationContext, getProgressState, QueueItemContent } from './QueueItemContent'
 import { FilenameRenderer, ImagePreviewModal, ThumbnailRenderer } from './Subcomponents'
 import { TruncateContext } from './Truncate'
-import { TFileAndTransfer, FileItem, TFileItemList, TFileTransfer, TItemRenderer, TQueueItemOperation } from './types'
-
-const isImageFile = (item: TFileAndTransfer): boolean => {
-  if (item.file.type?.startsWith('image/')) return true
-  return /\.(jpe?g|png|gif|webp|heic|heif|bmp|svg)$/i.test(item.file.name || '')
-}
+import {
+  TFileAndTransfer,
+  TFileId,
+  TFileItemList,
+  TFileTransfer,
+  TItemRenderer,
+  TQueueItemOperation,
+  TQueueOperationContext,
+} 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[],
   uploadStrategy: 'form' | 'custom',
-): TFileAndTransfer[] => {
-  return useMemo(() => {
-    const mapped = files.map((fileItem: FileItem) => {
-      const transfer = transfers.find((t) => t.fileId === fileItem.fileId)
-      return {
-        ...fileItem,
-        progress: transfer?.progress ?? (uploadStrategy === 'form' ? 'done' : '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, uploadStrategy])
-}
-
-// ============================================
-// Helper: Filter previewable images
-// ============================================
+): TFileAndTransfer[] =>
+  useMemo(
+    () => mergeFilesAndTransfers(files, transfers, uploadStrategy) as TFileAndTransfer[],
+    [files, transfers, uploadStrategy],
+  )
 
 /** Returns only uploaded images (used for the preview modal). */
-const usePreviewableImages = (filesAndTransfers: TFileAndTransfer[], enabled: boolean): TFileAndTransfer[] => {
-  return useMemo(() => {
+const usePreviewableImages = (filesAndTransfers: TFileAndTransfer[], enabled: boolean): TFileAndTransfer[] =>
+  useMemo(() => {
     if (!enabled) return []
-    return filesAndTransfers.filter((item) => item.progress === 'done' && isImageFile(item))
+    return filesAndTransfers.filter((item) => item.progress === 'done' && isImageFileLike(item))
   }, [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
-  /** Upload mode decides default queue state when no transfer exists. */
   uploadStrategy?: 'form' | 'custom'
+  disabled?: boolean
+  inputName: string
+  buildAttributeAccessors: (fileId: TFileId) => Pick<TQueueOperationContext, 'getAttribute' | 'setAttribute'>
 }
 
-// ============================================
-// QueueDisplay Component
-// ============================================
-
 export const QueueDisplay: FC<IQueueDisplay> = ({
   files,
   cancelTransfer,
@@ -100,12 +57,13 @@ export const QueueDisplay: FC<IQueueDisplay> = ({
   truncateTail,
   enableImagePreview = false,
   uploadStrategy = 'form',
+  disabled = false,
+  inputName,
+  buildAttributeAccessors,
 }) => {
-  // Transform data
   const filesAndTransfers = useFilesAndTransfers(files, transfers, uploadStrategy)
   const previewableImages = usePreviewableImages(filesAndTransfers, enableImagePreview)
 
-  // State management
   const operationState = useOperationState(queueItemOperations)
   const preview = useImagePreview(previewableImages)
 
@@ -113,39 +71,55 @@ export const QueueDisplay: FC<IQueueDisplay> = ({
     <>
       <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>
-          ))}
+          {filesAndTransfers.map((transferItem) => {
+            const activatedOperation = operationState.getActivated(transferItem.fileId)
+            const commonContentProps = {
+              transferItem,
+              operations: queueItemOperations,
+              activatedOperation,
+              inputName,
+              disabled,
+              onActivate: operationState.activate,
+              onClose: operationState.close,
+              buildAttributeAccessors,
+            }
+
+            return (
+              <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((operation) => (
+                    <span key={`${operation.id}-${transferItem.fileId}`}>
+                      {operation.renderHidden!(
+                        buildOperationContext({ operation, ...commonContentProps }),
+                      )}
+                    </span>
+                  ))}
+
+                <QueueItemContent
+                  {...commonContentProps}
+                  ItemRenderer={ItemRenderer}
+                  enableImagePreview={enableImagePreview}
+                  onCancelTransfer={cancelTransfer}
+                  onOpenPreview={preview.open}
+                />
+              </li>
+            )
+          })}
         </TruncateContext.Provider>
       </ul>
 
-      {/* Image preview modal */}
       {enableImagePreview && previewableImages.length > 0 && (
         <ImagePreviewModal
-          ref={preview.modalRef}
+          modalRef={preview.modalRef}
           isOpen={preview.isOpen}
           images={previewableImages}
           currentIndex={preview.currentIndex}
@@ -157,9 +131,7 @@ export const QueueDisplay: FC<IQueueDisplay> = ({
   )
 }
 
-// ============================================
-// ItemRenderers Export
-// ============================================
+export { getProgressState } // preserved for backwards import compatibility
 
 export const ItemRenderers: Record<string, TItemRenderer> = {
   filename: FilenameRenderer,

package/src/components/fileupload/QueueItemContent.tsx

@@ -1,109 +1,120 @@
-import { FC, ReactNode } from 'react'
+import { FC } from 'react'
+
+import {
+  getProgressState as sharedGetProgressState,
+  isImageFileLike,
+  type TProgressState,
+} from 'shared-utils/fileupload'
 
 import { PktIcon } from '..'
 import { OperationButton, TransferError, TransferInProgress } from './Subcomponents'
-import { TFileAndTransfer, TFileId, TItemRenderer, TQueueItemOperation, TTransferItemInProgress } from './types'
-
-const isImageFile = (item: TFileAndTransfer): boolean => {
-  if (item.file.type?.startsWith('image/')) return true
-  return /\.(jpe?g|png|gif|webp|heic|heif|bmp|svg)$/i.test(item.file.name || '')
-}
-
-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[]
+import {
+  TFileAndTransfer,
+  TFileId,
+  TItemRenderer,
+  TQueueItemOperation,
+  TQueueOperationContext,
+  TTransferItemInProgress,
+} from './types'
+
+/**
+ * Re-export so that external consumers who imported `getProgressState` from
+ * this module keep working. Internal code should prefer the shared import.
+ */
+export const getProgressState = (progress: TFileAndTransfer['progress']): TProgressState =>
+  sharedGetProgressState(progress)
+
+/** Build a stable `TQueueOperationContext` for the given file + operation pair. */
+export const buildOperationContext = ({
+  operation,
+  transferItem,
+  inputName,
+  disabled,
+  activatedOperation,
+  onActivate,
+  onClose,
+  buildAttributeAccessors,
+}: {
+  operation: TQueueItemOperation
+  transferItem: TFileAndTransfer
+  inputName: string
+  disabled: boolean
   activatedOperation?: TQueueItemOperation
   onActivate: (fileId: TFileId, operation: TQueueItemOperation) => void
-  transferItem: TFileAndTransfer
+  onClose: (fileId: TFileId) => void
+  buildAttributeAccessors: (fileId: TFileId) => Pick<TQueueOperationContext, 'getAttribute' | 'setAttribute'>
+}): TQueueOperationContext => {
+  const accessors = buildAttributeAccessors(transferItem.fileId)
+  return {
+    file: transferItem,
+    inputName,
+    disabled,
+    isActive: activatedOperation?.id === operation.id,
+    activate: () => onActivate(transferItem.fileId, operation),
+    close: () => onClose(transferItem.fileId),
+    getAttribute: accessors.getAttribute,
+    setAttribute: accessors.setAttribute,
+  }
 }
 
-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 {
+interface ICommonContentProps {
+  transferItem: TFileAndTransfer
   operations: TQueueItemOperation[]
   activatedOperation?: TQueueItemOperation
+  inputName: string
+  disabled: boolean
   onActivate: (fileId: TFileId, operation: TQueueItemOperation) => void
-  transferItem: TFileAndTransfer
+  onClose: (fileId: TFileId) => void
+  buildAttributeAccessors: (fileId: TFileId) => Pick<TQueueOperationContext, 'getAttribute' | 'setAttribute'>
 }
 
-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>
-      ))}
-  </>
-)
+const buildContextsForOperations = (
+  operations: TQueueItemOperation[],
+  props: ICommonContentProps,
+): Array<{ operation: TQueueItemOperation; context: TQueueOperationContext }> =>
+  operations.map((operation) => ({
+    operation,
+    context: buildOperationContext({ operation, ...props }),
+  }))
+
+export const OperationActions: FC<ICommonContentProps> = (props) => {
+  const contexts = buildContextsForOperations(props.operations, props)
+  return (
+    <div className="pkt-fileupload__queue-display__item__actions">
+      {contexts
+        .filter(({ operation }) => operation.id !== props.activatedOperation?.id)
+        .map(({ operation, context }) => (
+          <OperationButton key={operation.id} operation={operation} context={context} />
+        ))}
+    </div>
+  )
+}
 
-// ============================================
-// IdleStateContent - Renders content for idle/done state
-// ============================================
+export const OperationContents: FC<ICommonContentProps> = (props) => {
+  const contexts = buildContextsForOperations(props.operations, props)
+  return (
+    <>
+      {contexts
+        .filter(({ operation }) => operation.renderContent)
+        .map(({ operation, context }) => (
+          <div className="pkt-fileupload__queue-display__item__operation-content" key={operation.id}>
+            {operation.renderContent!(context)}
+          </div>
+        ))}
+    </>
+  )
+}
 
-interface IIdleStateContent {
-  transferItem: TFileAndTransfer
-  activatedOperation?: TQueueItemOperation
-  operations: TQueueItemOperation[]
+interface IIdleStateContent extends ICommonContentProps {
   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)
+export const IdleStateContent: FC<IIdleStateContent> = (props) => {
+  const { transferItem, activatedOperation, operations, ItemRenderer, onPreviewClick } = props
+  const activeContext = activatedOperation
+    ? buildOperationContext({ operation: activatedOperation, ...props })
+    : undefined
 
   // When any operation UI is active (rename inline or comments extended), hide all action buttons.
   const hasOperationUIActive = activatedOperation?.renderInlineUI || activatedOperation?.renderExtendedUI
@@ -111,11 +122,11 @@ export const IdleStateContent: FC<IIdleStateContent> = ({
 
   return (
     <>
-      {activatedOperation?.renderInlineUI ? (
+      {activatedOperation?.renderInlineUI && activeContext ? (
         <>
           <PktIcon name="document-text" className="pkt-fileupload__queue-display__item__icon" />
           <div className="pkt-fileupload__queue-display__item__inline-ui">
-            {activatedOperation.renderInlineUI(transferItem, closeUI)}
+            {activatedOperation.renderInlineUI(activeContext)}
           </div>
         </>
       ) : (
@@ -123,82 +134,56 @@ export const IdleStateContent: FC<IIdleStateContent> = ({
       )}
 
       {visibleOperations.length > 0 && (
-        <OperationActions
-          operations={visibleOperations}
-          activatedOperation={activatedOperation}
-          onActivate={onActivate}
-          transferItem={transferItem}
-        />
+        <OperationActions {...props} operations={visibleOperations} />
       )}
 
-      <OperationContents
-        operations={operations}
-        activatedOperation={activatedOperation}
-        onActivate={onActivate}
-        transferItem={transferItem}
-      />
+      <OperationContents {...props} />
 
-      {activatedOperation?.renderExtendedUI && (
+      {activatedOperation?.renderExtendedUI && activeContext && (
         <div className="pkt-fileupload__queue-display__item__expanded-operation-ui">
-          {activatedOperation.renderExtendedUI(transferItem, closeUI)}
+          {activatedOperation.renderExtendedUI(activeContext)}
         </div>
       )}
     </>
   )
 }
 
-// ============================================
-// QueueItemContent - Main content renderer based on state
-// ============================================
-
-interface IQueueItemContent {
-  transferItem: TFileAndTransfer
-  activatedOperation?: TQueueItemOperation
-  operations: TQueueItemOperation[]
+interface IQueueItemContent extends ICommonContentProps {
   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' && isImageFile(transferItem)
+export const QueueItemContent: FC<IQueueItemContent> = (props) => {
+  const { transferItem, enableImagePreview, onCancelTransfer, onOpenPreview, disabled } = props
+  const state = sharedGetProgressState(transferItem.progress)
+  const isPreviewable = enableImagePreview && transferItem.progress === 'done' && isImageFileLike(transferItem)
 
   switch (state) {
     case 'in-progress':
       return (
         <TransferInProgress
-          aria-live="off"
           transferItem={transferItem as TTransferItemInProgress}
           cancelTransfer={() => onCancelTransfer(transferItem.fileId)}
+          disabled={disabled}
         />
       )
     case 'error':
-      return <TransferError transferItem={transferItem} onRemove={() => onCancelTransfer(transferItem.fileId)} />
+      return (
+        <TransferError
+          transferItem={transferItem}
+          onRemove={() => onCancelTransfer(transferItem.fileId)}
+          disabled={disabled}
+        />
+      )
     case 'idle':
       return (
         <IdleStateContent
-          transferItem={transferItem}
-          activatedOperation={activatedOperation}
-          operations={operations}
-          ItemRenderer={ItemRenderer}
-          onActivate={onActivate}
-          onClose={onClose}
+          {...props}
           onPreviewClick={isPreviewable ? () => onOpenPreview(transferItem.fileId) : undefined}
         />
       )
   }
 }
+