Updated Solution from spfx verion 1.3.2 to version 1.10

samples/react-documents-detailslist/.yo-rc.json

@@ -1,8 +1,12 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.3.2",
+    "version": "1.10.0",
     "libraryName": "react-documents",
     "libraryId": "aaecff2e-2087-4ade-bcf8-e72f89a1d933",
-    "environment": "spo"
+    "environment": "spo",
+    "isDomainIsolated": false,
+    "isCreatingSolution": true,
+    "packageManager": "npm",
+    "componentType": "webpart"
   }
 }

samples/react-documents-detailslist/config/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
   "version": "2.0",
   "bundles": {
     "search-documents-web-part": {

samples/react-documents-detailslist/config/copy-assets.json

@@ -1,4 +1,4 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
   "deployCdnPath": "temp/deploy"
 }

samples/react-documents-detailslist/config/deploy-azure-storage.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "workingDir": "./temp/deploy/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "react-documents",

samples/react-documents-detailslist/config/package-solution.json

@@ -1,8 +1,10 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "react-documents-client-side-solution",
     "id": "aaecff2e-2087-4ade-bcf8-e72f89a1d933",
+    "isDomainIsolated": false,
+    "includeClientSideAssets": true,
     "version": "1.0.0.0"
   },
   "paths": {

samples/react-documents-detailslist/config/tslint.json

@@ -1,45 +0,0 @@
-{
-  "$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
-  // Display errors as warnings
-  "displayAsWarning": true,
-  // The TSLint task may have been configured with several custom lint rules
-  // before this config file is read (for example lint rules from the tslint-microsoft-contrib
-  // project). If true, this flag will deactivate any of these rules.
-  "removeExistingRules": true,
-  // When true, the TSLint task is configured with some default TSLint "rules.":
-  "useDefaultConfigAsBase": false,
-  // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
-  // which are active, other than the list of rules below.
-  "lintConfig": {
-    // Opt-in to Lint rules which help to eliminate bugs in JavaScript
-    "rules": {
-      "class-name": false,
-      "export-name": false,
-      "forin": false,
-      "label-position": false,
-      "member-access": true,
-      "no-arg": false,
-      "no-console": false,
-      "no-construct": false,
-      "no-duplicate-case": true,
-      "no-duplicate-variable": true,
-      "no-eval": false,
-      "no-function-expression": true,
-      "no-internal-module": true,
-      "no-shadowed-variable": true,
-      "no-switch-case-fall-through": true,
-      "no-unnecessary-semicolons": true,
-      "no-unused-expression": true,
-      "no-use-before-declare": true,
-      "no-with-statement": true,
-      "semicolon": true,
-      "trailing-comma": false,
-      "typedef": false,
-      "typedef-whitespace": false,
-      "use-named-parameter": true,
-      "valid-typeof": true,
-      "variable-name": false,
-      "whitespace": false
-    }
-  }
-}

samples/react-documents-detailslist/config/write-manifests.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
   //NOTE: the cdnBasePath works with relative path; this is useful when you move the pakedge between different environments (dev, staging, prod)
   "cdnBasePath": "/sites/dev03/Style Library/CDN"
 }

samples/react-documents-detailslist/gulpfile.js

@@ -2,5 +2,6 @@
 
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
 build.initialize(gulp);

samples/react-documents-detailslist/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-documents",
   "version": "0.0.1",
+  "main": "lib/index.js",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
@@ -11,24 +12,31 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "react": "15.4.2",
+    "@microsoft/sp-core-library": "1.10.0",
-    "react-dom": "15.4.2",
+    "@microsoft/sp-lodash-subset": "1.10.0",
-    "@types/react": "15.0.38",
+    "@microsoft/sp-property-pane": "1.10.0",
-    "@types/react-dom": "0.14.18",
+    "@microsoft/sp-webpart-base": "1.10.0",
-    "@types/react-addons-shallow-compare": "0.14.17",
+    "@types/es6-promise": "0.0.33",
-    "@types/react-addons-update": "0.14.14",
+    "@types/react": "16.8.8",
-    "@types/react-addons-test-utils": "0.14.15",
+    "@types/react-dom": "16.8.3",
-    "@microsoft/sp-core-library": "~1.3.0",
+    "@types/webpack-env": "1.13.1",
-    "@microsoft/sp-webpart-base": "~1.3.0",
+    "office-ui-fabric-react": "6.189.2",
-    "@microsoft/sp-lodash-subset": "~1.3.0",
+    "react": "16.8.5",
-    "@types/webpack-env": ">=1.12.1 <1.14.0"
+    "react-dom": "16.8.5"
+  },
+  "resolutions": {
+    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.3.0",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-module-interfaces": "~1.3.0",
+    "@microsoft/sp-build-web": "1.10.0",
-    "@microsoft/sp-webpart-workbench": "~1.3.0",
+    "@microsoft/sp-module-interfaces": "1.10.0",
+    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "1.10.0",
+    "@types/chai": "3.4.34",
+    "@types/mocha": "2.2.38",
+    "ajv": "5.2.2",
     "gulp": "~3.9.1",
-    "@types/chai": ">=3.4.34 <3.6.0",
+    "tslint-microsoft-contrib": "5.0.0"
-    "@types/mocha": ">=2.2.33 <2.6.0"
   }
 }

samples/react-documents-detailslist/src/components/documentsList/component/Documents.module.scss

@@ -1,3 +1,5 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
 .documents {
 
   .container {

samples/react-documents-detailslist/src/components/documentsList/component/Documents.tsx

@@ -376,7 +376,7 @@ export default class LibraryDocuments extends React.Component<IDocumentsProps, I
       }
     });
 
-    let modifiedDocs = this.state.displayedDocuments;
+    let modifiedDocs: any = this.state.displayedDocuments;
 
     modifiedDocs = _.orderBy(
       modifiedDocs,
@@ -476,7 +476,7 @@ export default class LibraryDocuments extends React.Component<IDocumentsProps, I
 
     return {
       items: items,
-      targetElement: ev.currentTarget as HTMLElement,
+      target: ev.currentTarget as HTMLElement,
       directionalHint: DirectionalHint.bottomLeftEdge,
       gapSpace: 10,
       isBeakVisible: true,

samples/react-documents-detailslist/src/webparts/libraryDocuments/LibraryDocumentsWebPart.manifest.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
   "id": "8635c52e-cf0b-4c6d-a5ba-66f1d8d92005",
   "alias": "LibraryDocumentsWebPart",
   "componentType": "WebPart",
@@ -10,6 +10,7 @@
   // Components that allow authors to embed arbitrary script code should set this to true.
   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart"],
   "preconfiguredEntries": [
     {
       "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other

samples/react-documents-detailslist/src/webparts/libraryDocuments/LibraryDocumentsWebPart.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version, Environment, EnvironmentType } from '@microsoft/sp-core-library';
-import {
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-  BaseClientSideWebPart,
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
-
 import Documents from '../../components/documentsList/component/Documents';
 import { IDocumentsProps } from '../../components/documentsList/component/IDocumentsProps';
 

samples/react-documents-detailslist/src/webparts/searchDocuments/SearchDocumentsWebPart.manifest.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
   "id": "e7054e6c-a83c-4522-9cb1-b311381142f4",
   "alias": "SearchDocumentsWebPart",
   "componentType": "WebPart",
@@ -10,6 +10,7 @@
   // Components that allow authors to embed arbitrary script code should set this to true.
   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart"],
   "preconfiguredEntries": [
     {
       "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other

samples/react-documents-detailslist/src/webparts/searchDocuments/SearchDocumentsWebPart.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version, Environment, EnvironmentType } from '@microsoft/sp-core-library';
-import {
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-  BaseClientSideWebPart,
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
 import Documents from '../../components/documentsList/component/Documents';
 import { IDocumentsProps } from '../../components/documentsList/component/IDocumentsProps';
 import IDataProvider from '../../dataproviders/IDataProvider';

samples/react-documents-detailslist/tsconfig.json

@@ -1,16 +1,39 @@
 { 
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   "compilerOptions": {
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
+    "outDir": "lib",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
-    "module": "commonjs",
+    "module": "esnext",
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,
     "experimentalDecorators": true,
     "types": [
       "es6-promise",
-      "es6-collections",
       "webpack-env"
+    ],
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
     ]
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "lib"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ]
+ 
 }

samples/react-documents-detailslist/tslint.json

@@ -1,3 +1,30 @@
 {
-    "rulesDirectory": "./config"
+    "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+    "rules": {
+      "class-name": false,
+      "export-name": false,
+      "forin": false,
+      "label-position": false,
+      "member-access": true,
+      "no-arg": false,
+      "no-console": false,
+      "no-construct": false,
+      "no-duplicate-variable": true,
+      "no-eval": false,
+      "no-function-expression": true,
+      "no-internal-module": true,
+      "no-shadowed-variable": true,
+      "no-switch-case-fall-through": true,
+      "no-unnecessary-semicolons": true,
+      "no-unused-expression": true,
+      "no-use-before-declare": true,
+      "no-with-statement": true,
+      "semicolon": true,
+      "trailing-comma": false,
+      "typedef": false,
+      "typedef-whitespace": false,
+      "use-named-parameter": true,
+      "variable-name": false,
+      "whitespace": false
+    }
 }