React-datatable: Added list attachment support

samples/react-datatable/.gitignore

@@ -35,3 +35,4 @@ obj
 *.cer
 # .PEM Certificates
 *.pem
+*.scss.d.ts

samples/react-datatable/fast-serve/config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json",
+  "cli": {
+    "isLibraryComponent": false
+  }
+}

samples/react-datatable/fast-serve/webpack.extend.js

@@ -0,0 +1,24 @@
+/*
+* User webpack settings file. You can add your own settings here.
+* Changes from this file will be merged into the base webpack configuration file.
+* This file will not be overwritten by the subsequent spfx-fast-serve calls.
+*/
+
+// you can add your project related webpack configuration here, it will be merged using webpack-merge module
+// i.e. plugins: [new webpack.Plugin()]
+const webpackConfig = {
+
+}
+
+// for even more fine-grained control, you can apply custom webpack settings using below function
+const transformConfig = function (initialWebpackConfig) {
+  // transform the initial webpack config here, i.e.
+  // initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.
+
+  return initialWebpackConfig;
+}
+
+module.exports = {
+  webpackConfig,
+  transformConfig
+}

samples/react-datatable/gulpfile.js

@@ -13,4 +13,10 @@ build.rig.getTasks = function () {
   return result;
 };
 
+/* fast-serve */
+const { addFastServe } = require("spfx-fast-serve-helpers");
+addFastServe(build);
+/* end of fast-serve */
+
 build.initialize(require('gulp'));
+

samples/react-datatable/package.json

@@ -9,7 +9,8 @@
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
-    "test": "gulp test"
+    "test": "gulp test",
+    "serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
@@ -39,6 +40,7 @@
     "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",
     "@types/webpack-env": "1.14.0",
-    "@types/es6-promise": "0.0.33"
+    "@types/es6-promise": "0.0.33",
+    "spfx-fast-serve-helpers": "~1.14.0"
   }
 }

samples/react-datatable/src/shared/common/RenderImageOrLink/RenderImageOrLink.tsx

@@ -30,7 +30,7 @@ export function RenderImageOrLink(props: IImageOrLinkProps) {
                         alt={description}
                         height={50}
                         width={50}
-                        onClick={() => window.location.href =  url }
+                        onClick={() => window.location.href = url}
                         imageFit={ImageFit.cover}
                     />
                 ) :
@@ -40,5 +40,4 @@ export function RenderImageOrLink(props: IImageOrLinkProps) {
             )
         }
     </>;
-
 }

samples/react-datatable/src/shared/service/SPService.ts

@@ -25,7 +25,7 @@ export class SPService {
                         expandQuery.push(selectedFields[i].key);
                         break;
                     case 'SP.Field':
-                        selectQuery.push('Attachments,AttachmentFiles');
+                        selectQuery.push('AttachmentFiles');
                         expandQuery.push('AttachmentFiles');
                         break;
                     default:
@@ -54,7 +54,7 @@ export class SPService {
             const allFields: any[] = await sp.web.lists
                 .getById(selectedList)
                 .fields
-                .filter("Hidden eq false and ReadOnlyField eq false and Title ne 'Content Type' and Title ne 'Attachments'")
+                .filter("Hidden eq false and ReadOnlyField eq false and Title ne 'Content Type'")
                 .get();
             return allFields;
         }

samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx

@@ -7,14 +7,14 @@ import { SPService } from '../../../shared/service/SPService';
 import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
 import { DisplayMode } from '@microsoft/sp-core-library';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
-import { Link, Text } from 'office-ui-fabric-react';
 import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
 import { ExportListItemsToCSV } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSV';
 import { ExportListItemsToPDF } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDF';
 import { Pagination } from '../../../shared/common/Pagination/Pagination';
 import { RenderImageOrLink } from '../../../shared/common/RenderImageOrLink/RenderImageOrLink';
-import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDetailsListProps, IColumn, MessageBar, SelectionMode } from 'office-ui-fabric-react';
+import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDetailsListProps, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
+import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
 import { pdfCellFormatter } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter';
 import { csvCellFormatter } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter';
 import { IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
@@ -66,7 +66,14 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
       /** Format list items for data grid */
       listItems = listItems && listItems.map(item => ({
         id: item.Id, ...fields.reduce((ob, f) => {
-          ob[f.key] = item[f.key] ? this.formatColumnValue(item[f.key], f.fieldType) : '-';
+          if (f.key === "Attachments") {
+            ob[f.key] = this.formatColumnValue(item["AttachmentFiles"], f.fieldType);
+          }
+          else {
+            if (item[f.key]) {
+              ob[f.key] = this.formatColumnValue(item[f.key], f.fieldType);
+            }
+          }
           return ob;
         }, {})
       }));
@@ -88,7 +95,6 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
     this.props.context.propertyPane.open();
   }
 
-
   public formatColumnValue(value: any, type: string) {
     if (!value) {
       return value;
@@ -128,6 +134,9 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
       case 'SP.FieldLocation':
         value = JSON.parse(value).DisplayName;
         break;
+      case 'SP.Field':
+        value = value?.map(v => <><RenderImageOrLink key={v['odata.id']} url={v['ServerRelativeUrl']} description={v['FileName']}></RenderImageOrLink><br /></>);
+        break;
       default:
         break;
     }