Merge pull request #1855 from AriGunawan/hotfix/fix_attachment_not_cleared

samples/react-list-form/README.md

@@ -24,8 +24,6 @@ The web part allows configuring which list to use and if a form for adding a new
 
 ![Demo](./assets/React-ListForm-Overview.gif)
 
-## Used SharePoint Framework Version
-
 ## Compatibility
 
 ![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) 
@@ -39,16 +37,21 @@ The web part allows configuring which list to use and if a form for adding a new
 - [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
 - [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
+## Prerequisites
+
+You'll need to connect to a list before you can use this sample.
+
 ## Solution
 
 | Solution        | Author(s)                                                           |
 | --------------- | -----------------------------------------------------------------   |
-| react-list-form | Dany Wyss                                                         |
+| react-list-form | [Dany Wyss](https://github.com/DanyWyss)                            |
-| react-list-form | Harsha Vardhini ([@harshagracy](https://twitter.com/harshagracy)) |
+| react-list-form | [Harsha Vardhini](https://github.com/Harshagracy) ([@harshagracy](https://twitter.com/harshagracy))   |
-| react-list-form | Ryan Schouten ([@shrpntknight](https://twitter.com/shrpntknight)) |
+| react-list-form | [Ryan Schouten](https://github.com/sharepointknight) ([@shrpntknight](https://twitter.com/shrpntknight))   |
-| react-list-form | Abderahman Moujahid                                               |
+| react-list-form | [Abderahman Moujahid](https://github.com/Abderahman88)              |
 | react-list-form | [Kman1131](https://github.com/Kman1131)                             |
-| react-list-form | Fredrik Thorild [@fthorild](https://twitter.com/fthorild)         |
+| react-list-form | [Fredrik Thorild](https://github.com/fthorild) [@fthorild](https://twitter.com/fthorild)           |
+| react-list-form | [Ari Gunawan](https://github.com/AriGunawan) ([@arigunawan3023](https://twitter.com/arigunawan3023)) |
 
 ## Version history
 
@@ -64,12 +67,7 @@ The web part allows configuring which list to use and if a form for adding a new
 | 1.0.7   | December 11, 2020  | Fix limit of lookup fields                                                                                |
 | 1.0.8   | February 7, 2021   | Fixed dragging and dropping fields                                                                        |
 | 1.0.9   | February 19, 2021  | Fixed regular expressions for text validation                                                             |
-
+| 1.0.10  | May 6, 2021        | Fixed "attachments are not cleared after submit" issue                                                    |
-## Disclaimer
-
-**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
-
----
 
 ## Minimal Path to Awesome
 
@@ -89,4 +87,19 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
 - Integrating drag and drop to provide better user experience for configuring web parts visually.
 - Using custom drop-down property editors in the property pane.
 
+## Disclaimer
+
+**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+## Support
+
+We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
+
+If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-list-form&authors=@DanyWyss, @Harshagracy, @sharepointknight, @Abderahman88, @Kman1131, @fthorild, @AriGunawan&title=react-list-form%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-list-form&authors=@DanyWyss, @Harshagracy, @sharepointknight, @Abderahman88, @Kman1131, @fthorild, @AriGunawan&title=react-list-form%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-list-form&authors=@DanyWyss, @Harshagracy, @sharepointknight, @Abderahman88, @Kman1131, @fthorild, @AriGunawan&title=react-list-form%20-%20).
+
+
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-list-form" />

samples/react-list-form/assets/sample.json

@@ -1,19 +1,19 @@
-[
 {
   "name": "pnp-sp-dev-spfx-web-parts-react-list-form",
+  "version": null,
   "source": "pnp",
   "title": "List Form Web Part",
   "shortDescription": "The React List Form web part is a web part for adding a list form to any page. It provides a working example of implementing generic SharePoint list forms using the SharePoint Framework (SPFx) and the React and Office UI Fabric libraries.",
-    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-form",
   "longDescription": [
     "The React List Form web part is a web part for adding a list form to any page. It provides a working example of implementing generic SharePoint list forms using the SharePoint Framework (SPFx) and the React and Office UI Fabric libraries."
   ],
-    "creationDateTime": "2021-02-19",
-    "updateDateTime": "2021-02-19",
   "products": [
     "SharePoint",
     "Office"
   ],
+  "categories": [
+    ""
+  ],
   "metadata": [
     {
       "key": "CLIENT-SIDE-DEV",
@@ -28,58 +28,48 @@
     {
       "type": "image",
       "order": 100,
-        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-form/assets/React-ListForm-Overview.gif",
+      "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-list-form/assets/React-ListForm-Overview.gif",
-        "alt": "List Form Web Part"
+      "alt": "List Form Web Part",
+      "slides": null
     }
   ],
   "authors": [
     {
       "gitHubAccount": "DanyWyss",
-        "company": "Ardevia",
-        "pictureUrl": "https://avatars.githubusercontent.com/u/14975743?s=460\u0026u=0270afb16a406ce4e3f3e471da850141befe9160\u0026v=4",
       "name": "Dany Wyss",
-        "twitter": "DanyWyss"
+      "company": "",
+      "pictureUrl": "https://github.com/DanyWyss.png"
     },
     {
       "gitHubAccount": "Harshagracy",
       "company": "",
-        "pictureUrl": "https://github.com/Harshagracy.png",
       "name": "Harsha Vardhini",
-        "twitter": "harshagracy"
+      "pictureUrl": "https://github.com/Harshagracy.png"
     },
     {
       "gitHubAccount": "sharepointknight",
       "company": "",
-        "pictureUrl": "https://github.com/sharepointknight.png",
+      "name": "Ryan Schouten",
-        "name": "Ryan Schouten"
+      "pictureUrl": "https://github.com/sharepointknight.png"
     },
     {
       "gitHubAccount": "Abderahman88",
       "company": "",
-        "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460\u0026u=afdd5f6681bc375ee3811482dec79824c12d8170\u0026v=4",
+      "name": "Abderahman Moujahid",
-        "name": "Abderahman Moujahid"
+      "pictureUrl": "https://github.com/Abderahman88.png"
-      },
-      {
-        "gitHubAccount": "hugoabernier",
-        "company": "Tahoe Ninjas",
-        "pictureUrl": "https://github.com/hugoabernier.png",
-        "name": "Hugo Bernier",
-        "twitter": "bernierh"
     },
     {
       "gitHubAccount": "fthorild",
-        "company": "Sogeti Sweden",
-        "pictureUrl": "https://github.com/fthorild.png",
       "name": "Fredrik Thorild",
-        "twitter": "taxonomythorild"
+      "company": "Sogeti Sweden",
+      "pictureUrl": "https://github.com/fthorild.png"
+    },
+    {
+      "gitHubAccount": "AriGunawan",
+      "name": "Ari Gunawan",
+      "company": "",
+      "pictureUrl": "https://github.com/AriGunawan.png"
     }
   ],
-    "references": [
+  "references": []
-      {
-        "name": "Build your first SharePoint client-side web part",
-        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
 }
-    ]
-  }
-]

samples/react-list-form/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "react-form-webpart-client-side-solution",
     "id": "373a20ef-dfc6-456a-95ec-171de3c94581",
-    "version": "1.0.9.0",
+    "version": "1.0.10.0",
     "title": "List form",
     "supportedLocales": [
       "en-US",

samples/react-list-form/src/webparts/listForm/components/formFields/AttachmentRender.tsx

@@ -4,6 +4,7 @@ import { Separator } from 'office-ui-fabric-react/lib/Separator';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
 import { IconNames } from '@uifabric/icons';
+import { isEqual } from '@microsoft/sp-lodash-subset';
 import { IAttachment } from "../../../../types/IAttachment";
 import { ControlMode } from '../../../../common/datatypes/ControlMode';
 
@@ -36,6 +37,16 @@ export class AttachmentRender extends React.Component<IAttachmentProps, IAttachm
     }
 
     public componentDidUpdate(prevProps: IAttachmentProps, prevState: IAttachmentState) {
+        switch (this.props.controlMode) {
+            case ControlMode.New:
+                if (!isEqual(prevProps.value, this.props.value)) {
+                    this.setState({
+                        attachments: this.props.value || [],
+                    });
+                }
+                break;
+            case ControlMode.Display:
+            case ControlMode.Edit:
                 //Component Value property got updated from List State
                 if (this.props.value
                     && this.props.value.Attachments
@@ -44,6 +55,9 @@ export class AttachmentRender extends React.Component<IAttachmentProps, IAttachm
                     && prevState.attachments.length == 0) {
                     this.setState({ attachments: this.props.value.Attachments });
                 }
+                break;
+        }
+
         if (this.state.attachments.length < prevState.attachments.length) {
             this.props.valueChanged(this.state.attachments);
         }