@oslokommune/punkt-react 16.13.3 → 16.15.0

package/src/components/fileupload/Subcomponents.tsx

@@ -1,14 +1,23 @@
-import { forwardRef, ForwardedRef, useEffect, useState } from 'react'
+import { RefObject, useEffect, useState } from 'react'
+
+import { getDisplayFilename, trapTabInside } from 'shared-utils/fileupload'
 
 import { PktButton, PktIcon, PktProgressbar } from '..'
 import { PktModal } from '../modal/Modal'
 import { Truncate } from './Truncate'
-import { TFileAndTransfer, TItemRenderer, TQueueItemOperation, TTransferItemInProgress } from './types'
+import { TFileAndTransfer, TQueueItemOperation, TQueueOperationContext, TTransferItemInProgress } from './types'
 import { formatFileSize } from './utils'
 
-const CancelTransferButton = (props: { onClick: () => void; label?: string; ariaLabel?: string }) => (
+const CancelTransferButton = (props: {
+  onClick: () => void
+  label?: string
+  ariaLabel?: string
+  disabled?: boolean
+}) => (
   <button
+    type="button"
     onClick={props.onClick}
+    disabled={props.disabled}
     className="pkt-fileupload__queue-display__item__cancel-button"
     aria-label={props.ariaLabel || 'Avbryt opplasting'}
   >
@@ -16,30 +25,20 @@ const CancelTransferButton = (props: { onClick: () => void; label?: string; aria
   </button>
 )
 
-const LoadingText = () => {
-  const [dotCount, setDotCount] = useState(1)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDotCount((prev) => (prev >= 3 ? 1 : prev + 1))
-    }, 400)
-
-    return () => clearInterval(interval)
-  }, [])
-
-  return (
-    <span className="pkt-fileupload__queue-display__item__loading-text" aria-label="Laster opp fil">
-      Laster opp{'.'.repeat(dotCount)}
-    </span>
-  )
-}
+const LoadingText = () => (
+  <span className="pkt-fileupload__queue-display__item__loading-text" aria-label="Laster opp fil">
+    Laster opp
+  </span>
+)
 
 export const TransferInProgress = ({
   cancelTransfer,
   transferItem,
+  disabled = false,
 }: {
   transferItem: TTransferItemInProgress
   cancelTransfer: () => void
+  disabled?: boolean
 }) => {
   const showProgressBar = transferItem.showProgress ?? transferItem.progress !== 0
 
@@ -51,9 +50,13 @@ export const TransferInProgress = ({
         aria-hidden="true"
       />
       <p className="pkt-fileupload__queue-display__item__title" aria-label="Filnavn">
-        <Truncate>{transferItem.attributes['targetFilename']}</Truncate>
+        <Truncate>{getDisplayFilename(transferItem)}</Truncate>
+        <span className="pkt-fileupload__queue-display__item__filesize">
+          {' '}
+          ({formatFileSize(transferItem.file.size)})
+        </span>
       </p>
-      <CancelTransferButton onClick={cancelTransfer} />
+      <CancelTransferButton onClick={cancelTransfer} disabled={disabled} />
       {showProgressBar ? (
         <>
           <PktProgressbar
@@ -63,9 +66,6 @@ export const TransferInProgress = ({
             statusPlacement={'following'}
             className="pkt-fileupload__queue-display__item__progress"
           />
-          <span className="pkt-fileupload__queue-display__item__filesize">
-            {formatFileSize(transferItem.file.size)}
-          </span>
           <span className="pkt-fileupload__queue-display__item__percentage" aria-hidden="true">
             {`${Math.round(transferItem.progress * 100)}%`}
           </span>
@@ -77,13 +77,27 @@ export const TransferInProgress = ({
   )
 }
 
+const TitleWithSize = ({ transferItem }: { transferItem: TFileAndTransfer }) => (
+  <p className="pkt-fileupload__queue-display__item__title">
+    <Truncate>{getDisplayFilename(transferItem)}</Truncate>
+    {transferItem.file && (
+      <span className="pkt-fileupload__queue-display__item__filesize">
+        {' '}
+        ({formatFileSize(transferItem.file.size)})
+      </span>
+    )}
+  </p>
+)
+
 // Error state with progress bar (when showProgress was true during upload)
 const TransferErrorWithProgress = ({
   transferItem,
   onRemove,
+  disabled,
 }: {
   transferItem: TFileAndTransfer
   onRemove: () => void
+  disabled?: boolean
 }) => {
   // Use lastProgress to show where the upload failed (default to 100% if not available)
   const progressValue = (transferItem.lastProgress ?? 1) * 100
@@ -95,10 +109,13 @@ const TransferErrorWithProgress = ({
         name="alert-error"
         aria-hidden="true"
       />
-      <p className="pkt-fileupload__queue-display__item__title">
-        <Truncate>{transferItem.attributes['targetFilename']}</Truncate>
-      </p>
-      <CancelTransferButton onClick={onRemove} label="Fjern" ariaLabel="Fjern fil som feilet under opplasting" />
+      <TitleWithSize transferItem={transferItem} />
+      <CancelTransferButton
+        onClick={onRemove}
+        label="Fjern"
+        ariaLabel="Fjern fil som feilet under opplasting"
+        disabled={disabled}
+      />
       <PktProgressbar
         valueCurrent={progressValue}
         statusType={'none'}
@@ -106,7 +123,6 @@ const TransferErrorWithProgress = ({
         statusPlacement={'following'}
         className="pkt-fileupload__queue-display__item__progress pkt-fileupload__queue-display__item__progress--error"
       />
-      <span className="pkt-fileupload__queue-display__item__filesize">{formatFileSize(transferItem.file.size)}</span>
       {transferItem.errorMessage && (
         <span className="pkt-fileupload__queue-display__item__error-message">{transferItem.errorMessage}</span>
       )}
@@ -118,9 +134,11 @@ const TransferErrorWithProgress = ({
 const TransferErrorIndeterminate = ({
   transferItem,
   onRemove,
+  disabled,
 }: {
   transferItem: TFileAndTransfer
   onRemove: () => void
+  disabled?: boolean
 }) => (
   <>
     <PktIcon
@@ -128,10 +146,13 @@ const TransferErrorIndeterminate = ({
       name="alert-error"
       aria-hidden="true"
     />
-    <p className="pkt-fileupload__queue-display__item__title">
-      <Truncate>{transferItem.attributes['targetFilename']}</Truncate>
-    </p>
-    <CancelTransferButton onClick={onRemove} label="Fjern" ariaLabel="Fjern fil som feilet under opplasting" />
+    <TitleWithSize transferItem={transferItem} />
+    <CancelTransferButton
+      onClick={onRemove}
+      label="Fjern"
+      ariaLabel="Fjern fil som feilet under opplasting"
+      disabled={disabled}
+    />
     {transferItem.errorMessage && (
       <span className="pkt-fileupload__queue-display__item__error-message">{transferItem.errorMessage}</span>
     )}
@@ -139,41 +160,46 @@ const TransferErrorIndeterminate = ({
 )
 
 // Main error component - chooses display based on showProgress
-export const TransferError = ({ transferItem, onRemove }: { transferItem: TFileAndTransfer; onRemove: () => void }) => {
+export const TransferError = ({
+  transferItem,
+  onRemove,
+  disabled,
+}: {
+  transferItem: TFileAndTransfer
+  onRemove: () => void
+  disabled?: boolean
+}) => {
   // If showProgress was true, show error with progress bar, otherwise show indeterminate error
   if (transferItem.showProgress) {
-    return <TransferErrorWithProgress transferItem={transferItem} onRemove={onRemove} />
+    return <TransferErrorWithProgress transferItem={transferItem} onRemove={onRemove} disabled={disabled} />
   }
-  return <TransferErrorIndeterminate transferItem={transferItem} onRemove={onRemove} />
+  return <TransferErrorIndeterminate transferItem={transferItem} onRemove={onRemove} disabled={disabled} />
 }
 export const OperationButton = ({
   operation,
-  onActivate,
-  transferItem,
+  context,
 }: {
   operation: TQueueItemOperation
-  onActivate: (fileId: string, operation: TQueueItemOperation) => void
-  transferItem: TFileAndTransfer
+  context: TQueueOperationContext
 }) => {
-  const title = typeof operation.title === 'function' ? operation.title(transferItem) : operation.title
+  const title = typeof operation.title === 'function' ? operation.title(context.file) : operation.title
 
   // Don't render button if title is empty (e.g., comment exists, show icons instead)
   if (!title) return null
 
   const onClick = () => {
     if (operation.renderInlineUI || operation.renderExtendedUI) {
-      onActivate(transferItem.fileId, operation)
-    }
-    if (operation.onClick) {
-      operation.onClick(transferItem)
+      context.activate()
     }
+    operation.onClick?.(context)
   }
   return (
     <button
       type="button"
       className={'pkt-fileupload__queue-display__item__operation'}
       onClick={onClick}
-      aria-label={typeof operation.ariaLabel === 'function' ? operation.ariaLabel(transferItem) : operation.ariaLabel}
+      disabled={context.disabled}
+      aria-label={typeof operation.ariaLabel === 'function' ? operation.ariaLabel(context.file) : operation.ariaLabel}
     >
       {title}
     </button>
@@ -192,10 +218,7 @@ export const FilenameRenderer = ({
       className="pkt-fileupload__queue-display__item__icon pkt-icon--medium"
       aria-hidden="true"
     />
-    <p className={'pkt-fileupload__queue-display__item__title'}>
-      <Truncate>{transferItem.attributes['targetFilename']}</Truncate>
-    </p>
-    <span className="pkt-fileupload__queue-display__item__filesize">{formatFileSize(transferItem.file.size)}</span>
+    <TitleWithSize transferItem={transferItem} />
   </>
 )
 
@@ -262,9 +285,9 @@ export const ThumbnailRenderer = ({
         )}
         {img}
       </PktButton>
-      <Truncate className={'pkt-fileupload__queue-display__item__thumbnail__title'}>
-        {transferItem.attributes['targetFilename']}
-      </Truncate>
+      <span className="pkt-fileupload__queue-display__item__thumbnail__title">
+        <Truncate>{transferItem.attributes['targetFilename']}</Truncate>
+      </span>
     </div>
   )
 }
@@ -277,107 +300,115 @@ interface IImagePreviewModal {
   currentIndex: number
   onClose: () => void
   onNavigate: (direction: 'prev' | 'next') => void
+  modalRef: RefObject<HTMLDialogElement>
 }
 
-export const ImagePreviewModal = forwardRef(
-  ({ isOpen, images, currentIndex, onClose, onNavigate }: IImagePreviewModal, ref: ForwardedRef<HTMLDialogElement>) => {
-    const [imageUrl, setImageUrl] = useState<string | null>(null)
-    const [imageLoadFailed, setImageLoadFailed] = useState(false)
-    const currentImage = images[currentIndex]
-    const hasMultipleImages = images.length > 1
+export const ImagePreviewModal = ({
+  isOpen,
+  images,
+  currentIndex,
+  onClose,
+  onNavigate,
+  modalRef,
+}: IImagePreviewModal) => {
+  const [imageUrl, setImageUrl] = useState<string | null>(null)
+  const [imageLoadFailed, setImageLoadFailed] = useState(false)
+  const currentImage = images[currentIndex]
+  const hasMultipleImages = images.length > 1
 
-    useEffect(() => {
-      setImageLoadFailed(false)
+  useEffect(() => {
+    setImageLoadFailed(false)
 
-      if (currentImage && currentImage.file.type.startsWith('image/')) {
-        const url = URL.createObjectURL(currentImage.file)
-        setImageUrl(url)
-        return () => URL.revokeObjectURL(url)
+    if (currentImage && currentImage.file.type.startsWith('image/')) {
+      const url = URL.createObjectURL(currentImage.file)
+      setImageUrl(url)
+      return () => URL.revokeObjectURL(url)
+    }
+    setImageUrl(null)
+  }, [currentImage])
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Tab') {
+        trapTabInside(event, modalRef.current)
+        return
       }
-      setImageUrl(null)
-    }, [currentImage])
-
-    // Keyboard navigation
-    useEffect(() => {
-      if (!isOpen) return
-
-      const handleKeyDown = (e: KeyboardEvent) => {
-        switch (e.key) {
-          case 'ArrowLeft':
-            e.preventDefault()
-            onNavigate('prev')
-            break
-          case 'ArrowRight':
-            e.preventDefault()
-            onNavigate('next')
-            break
-          case 'Escape':
-            e.preventDefault()
-            onClose()
-            break
-        }
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault()
+          onNavigate('prev')
+          break
+        case 'ArrowRight':
+          event.preventDefault()
+          onNavigate('next')
+          break
+        case 'Escape':
+          event.preventDefault()
+          onClose()
+          break
       }
+    }
 
-      window.addEventListener('keydown', handleKeyDown)
-      return () => window.removeEventListener('keydown', handleKeyDown)
-    }, [isOpen, onNavigate, onClose])
-
-    if (!currentImage) return null
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isOpen, onNavigate, onClose, modalRef])
 
-    return (
-      <PktModal
-        ref={ref}
-        headingText={currentImage.attributes['targetFilename']}
-        closeOnBackdropClick
-        className="pkt-fileupload__image-preview-modal"
-      >
-        <div className="pkt-fileupload__image-preview">
-          {hasMultipleImages && (
-            <PktButton
-              variant="icon-only"
-              iconName="chevron-thin-left"
-              skin="secondary"
-              size="small"
-              className="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--prev"
-              onClick={() => onNavigate('prev')}
-              aria-label={`Forrige bilde ${currentIndex} / ${images.length}`}
-            />
-          )}
+  if (!currentImage) return null
 
-          <div className="pkt-fileupload__image-preview__content">
-            {imageUrl && !imageLoadFailed ? (
-              <img
-                src={imageUrl}
-                alt={`${currentImage.attributes['targetFilename']} - ${currentIndex + 1} av ${images.length}`}
-                className="pkt-fileupload__image-preview__image"
-                onError={() => setImageLoadFailed(true)}
-              />
-            ) : (
-              <PktIcon name="picture" className="pkt-fileupload__queue-display__item__icon pkt-icon--medium" />
-            )}
-          </div>
-
-          {hasMultipleImages && (
-            <span className="pkt-fileupload__image-preview__counter">
-              {currentIndex + 1} / {images.length}
-            </span>
-          )}
+  return (
+    <PktModal
+      ref={modalRef}
+      headingText={currentImage.attributes['targetFilename']}
+      closeOnBackdropClick
+      className="pkt-fileupload__image-preview-modal"
+      onClose={onClose}
+    >
+      <div className="pkt-fileupload__image-preview">
+        {hasMultipleImages && (
+          <PktButton
+            variant="icon-only"
+            iconName="chevron-thin-left"
+            skin="secondary"
+            size="medium"
+            className="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--prev"
+            onClick={() => onNavigate('prev')}
+            aria-label={`Forrige bilde ${currentIndex} / ${images.length}`}
+          />
+        )}
 
-          {hasMultipleImages && (
-            <PktButton
-              variant="icon-only"
-              iconName="chevron-thin-right"
-              skin="secondary"
-              size="small"
-              className="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--next"
-              onClick={() => onNavigate('next')}
-              aria-label={`Neste bilde ${currentIndex + 2} / ${images.length}`}
+        <div className="pkt-fileupload__image-preview__content">
+          {imageUrl && !imageLoadFailed ? (
+            <img
+              src={imageUrl}
+              alt={`${currentImage.attributes['targetFilename']} - ${currentIndex + 1} av ${images.length}`}
+              className="pkt-fileupload__image-preview__image"
+              onError={() => setImageLoadFailed(true)}
             />
+          ) : (
+            <PktIcon name="picture" className="pkt-fileupload__queue-display__item__icon pkt-icon--medium" />
           )}
         </div>
-      </PktModal>
-    )
-  },
-)
 
-ImagePreviewModal.displayName = 'ImagePreviewModal'
+        {hasMultipleImages && (
+          <span className="pkt-fileupload__image-preview__counter">
+            {currentIndex + 1} / {images.length}
+          </span>
+        )}
+
+        {hasMultipleImages && (
+          <PktButton
+            variant="icon-only"
+            iconName="chevron-thin-right"
+            skin="secondary"
+            size="medium"
+            className="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--next"
+            onClick={() => onNavigate('next')}
+            aria-label={`Neste bilde ${currentIndex + 2} / ${images.length}`}
+          />
+        )}
+      </div>
+    </PktModal>
+  )
+}