feat(ListItemAttachments): add display mode prop for Tiles and DetailsList views

Author: Ateina

src/controls/listItemAttachments/AttachmentsDisplayMode.ts

@@ -0,0 +1,14 @@
+export enum AttachmentsDisplayMode {
+  /**
+   * Display attachments as tiles/thumbnails using DocumentCard
+   */
+  Tiles = 'tiles',
+  /**
+   * Display attachments as a list using DetailsList in normal mode
+   */
+  DetailsList = 'list',
+  /**
+   * Display attachments as a compact list using DetailsList in compact mode
+   */
+  DetailsListCompact = 'listCompact'
+}

src/controls/listItemAttachments/IListItemAttachmentsProps.ts

@@ -1,4 +1,5 @@
 import { BaseComponentContext } from '@microsoft/sp-component-base';
+import { AttachmentsDisplayMode } from './AttachmentsDisplayMode';
 
 export interface IListItemAttachmentsProps {
   listId: string;
@@ -16,6 +17,10 @@ export interface IListItemAttachmentsProps {
    * Description text to display on the placeholder, below the main text and icon
    */
   description?:string;
+  /**
+ * Display mode for rendering attachments. Defaults to Tiles.
+ */
+  displayMode?: AttachmentsDisplayMode;
   /**
    * Callback function to notify parent components when attachments are modified and the item ETag changes
    * @param itemData - The updated item data including the new ETag

src/controls/listItemAttachments/ListItemAttachments.module.scss

@@ -33,6 +33,14 @@
     background-color: transparent !important;
     font-size: 15px;
   }
+
+  .detailsList {
+    .detailsListIcon {
+      vertical-align: middle;
+      max-height: 16px;
+      max-width: 16px;
+    }
+  }
 }
 
 .uploadBar {

src/controls/listItemAttachments/ListItemAttachments.tsx

@@ -1,9 +1,11 @@
 // Joao Mendes November 2018, SPFx reusable Control ListItemAttachments
 import * as React from 'react';
 import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
-import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
+import { PrimaryButton, DefaultButton, IconButton } from '@fluentui/react/lib/Button';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { Label } from "@fluentui/react/lib/Label";
+import { Link } from '@fluentui/react/lib/Link';
+import { DetailsList, DetailsListLayoutMode, SelectionMode } from '@fluentui/react/lib/DetailsList';
 import * as strings from 'ControlStrings';
 import styles from './ListItemAttachments.module.scss';
 import { UploadAttachment } from './UploadAttachment';
@@ -17,6 +19,7 @@ import {
 import { ImageFit } from '@fluentui/react/lib/Image';
 import { IListItemAttachmentsProps } from './IListItemAttachmentsProps';
 import { IListItemAttachmentsState } from './IListItemAttachmentsState';
+import { AttachmentsDisplayMode } from './AttachmentsDisplayMode';
 import SPservice from "../../services/SPService";
 import { TooltipHost } from '@fluentui/react/lib/Tooltip';
 import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
@@ -251,35 +254,26 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
   }
 
   /**
-   * Default React render method
+   * Get file extension from filename
+   * @param fileName - The file name to extract extension from
+   * @returns The file extension (without the dot) or empty string if no extension
    */
-  public render(): React.ReactElement<IListItemAttachmentsProps> {
-    const { openAttachmentsInNewWindow } = this.props;
-    return (
-      <div className={styles.ListItemAttachments}>
-        <UploadAttachment
-          listId={this.props.listId}
-          itemId={this.state.itemId}
-          disabled={this.props.disabled}
-          context={this.props.context}
-          onAttachmentUpload={this._onAttachmentUpload}
-          fireUpload={this.state.fireUpload}
-          onUploadDialogClosed={() => this.setState({ fireUpload: false })}
-          onAttachmentChange={this.props.onAttachmentChange}
-        />
-
-        {
-          this.state.showPlaceHolder ?
-            <Placeholder
-              iconName='Upload'
-              iconText={this.props.label || strings.ListItemAttachmentslPlaceHolderIconText}
-              description={this.props.description || strings.ListItemAttachmentslPlaceHolderDescription}
-              buttonLabel={strings.ListItemAttachmentslPlaceHolderButtonLabel}
-              hideButton={this.props.disabled}
-              onConfigure={() => this.setState({ fireUpload: true })} />
-            :
+  private getFileExtension(fileName: string): string {
+    const lastDotIndex = fileName.lastIndexOf('.');
+    if (lastDotIndex === -1 || lastDotIndex === fileName.length - 1) {
+      return '';
+    }
+    return fileName.substring(lastDotIndex + 1).toLowerCase();
+  }
 
-            this.state.attachments.map(file => {
+  /**
+   * Renders attachments in tile/thumbnail mode using DocumentCard components
+   * @returns JSX element containing attachment tiles
+   */
+  private renderTiles (): JSX.Element {
+    const { openAttachmentsInNewWindow } = this.props;
+    return <React.Fragment>{
+      this.state.attachments.map(file => {
               const fileName = file.FileName;
               const previewImage = this.previewImages[fileName];
               const clickDisabled = !this.state.itemId;
@@ -321,7 +315,133 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
                   </TooltipHost>
                 </div>
               );
-            })}
+            })
+          }</React.Fragment>
+  }
+
+  /**
+   * Renders attachments in list mode using DetailsList component
+   * Supports both normal and compact display modes
+   * @returns JSX element containing attachment list
+   */
+  private renderDetailsList (): JSX.Element {
+    const { displayMode, openAttachmentsInNewWindow } = this.props;
+        const columns = [
+            {
+              key: 'columnFileType',
+              name: 'File Type',
+              iconName: 'Page',
+              isIconOnly: true,
+              minWidth: 16,
+              maxWidth: 16,
+              onRender: (file: IListItemAttachmentFile) => {
+                const fileExtension = this.getFileExtension(file.FileName);
+                const previewImage = this.previewImages[file.FileName];
+                const iconUrl = previewImage?.previewImageSrc || '';
+                return (
+                  <TooltipHost content={`${fileExtension || 'file'}`}>
+                    <img src={iconUrl} className={styles.detailsListIcon} alt={`${fileExtension} file icon`} />
+                  </TooltipHost>
+                );
+              },
+            },
+            {
+              key: 'columnFileName',
+              name: 'File Name',
+              fieldName: 'FileName',
+              minWidth: 150,
+              maxWidth: 800,
+              isResizable: true,
+              onRender: (file: IListItemAttachmentFile) => {
+                const clickDisabled = !this.state.itemId;
+
+                if (clickDisabled) {
+                  return <span>{file.FileName}</span>;
+                }
+
+                if (openAttachmentsInNewWindow) {
+                  return (
+                    <Link
+                      onClick={() => window.open(`${file.ServerRelativeUrl}?web=1`, "_blank")}
+                    >
+                      {file.FileName}
+                    </Link>
+                  );
+                }
+
+                return (
+                  <Link href={`${file.ServerRelativeUrl}?web=1`}>
+                    {file.FileName}
+                  </Link>
+                );
+              }
+            },
+            { 
+              key: 'columnDeleteIcon', 
+              name: '', 
+              minWidth: 32,
+              maxWidth: 32,
+              isResizable: true,
+              onRender: (file: IListItemAttachmentFile) => {
+                return (
+                  <IconButton
+                    className={styles.detailsListIcon}
+                    iconProps={{ iconName: "Delete" }}
+                    disabled={this.props.disabled}
+                    onClick={
+                              (ev) => { 
+                                ev.preventDefault();
+                                ev.stopPropagation();
+                                this.onDeleteAttachment(file); }} />
+
+                );
+              },
+            }
+    ];
+    return <DetailsList
+            className={styles.detailsList}
+            items={this.state.attachments}
+            columns={columns}
+            selectionMode={SelectionMode.none}
+            layoutMode={DetailsListLayoutMode.justified}
+            compact={displayMode === AttachmentsDisplayMode.DetailsListCompact}
+          />
+  }
+
+  /**
+   * Default React render method
+   */
+  public render(): React.ReactElement<IListItemAttachmentsProps> {
+    const { displayMode } = this.props;
+    return (
+      <div className={styles.ListItemAttachments}>
+        <UploadAttachment
+          listId={this.props.listId}
+          itemId={this.state.itemId}
+          disabled={this.props.disabled}
+          context={this.props.context}
+          onAttachmentUpload={this._onAttachmentUpload}
+          fireUpload={this.state.fireUpload}
+          onUploadDialogClosed={() => this.setState({ fireUpload: false })}
+          onAttachmentChange={this.props.onAttachmentChange}
+        />
+
+        {
+          this.state.showPlaceHolder ?
+            <Placeholder
+              iconName='Upload'
+              iconText={this.props.label || strings.ListItemAttachmentslPlaceHolderIconText}
+              description={this.props.description || strings.ListItemAttachmentslPlaceHolderDescription}
+              buttonLabel={strings.ListItemAttachmentslPlaceHolderButtonLabel}
+              hideButton={this.props.disabled}
+              onConfigure={() => this.setState({ fireUpload: true })} />
+            :
+
+            <>
+              {(!displayMode || displayMode === AttachmentsDisplayMode.Tiles) && this.renderTiles()}
+              {(displayMode === AttachmentsDisplayMode.DetailsList || displayMode === AttachmentsDisplayMode.DetailsListCompact) && this.renderDetailsList()}
+            </>
+            }
         {!this.state.hideDialog &&
 
           <Dialog

src/controls/listItemAttachments/index.ts

@@ -4,5 +4,6 @@ export * from './IListItemAttachmentsState';
 export * from './IUploadAttachmentProps';
 export * from './IUploadAttachmentState';
 export * from './IListItemAttachmentFile';
+export * from './AttachmentsDisplayMode';
 export * from './utilities';
 export * from './ListItemAttachments';