Merge pull request #1855 from AriGunawan/hotfix/fix_attachment_not_cleared

This commit is contained in:
Hugo Bernier 2021-05-17 12:14:05 -04:00 committed by GitHub
commit 7b502f137e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 126 additions and 109 deletions

View File

@ -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) ![Demo](./assets/React-ListForm-Overview.gif)
## Used SharePoint Framework Version
## Compatibility ## Compatibility
![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) ![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) - [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) - [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
| Solution | Author(s) | | 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 | [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 ## 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.7 | December 11, 2020 | Fix limit of lookup fields |
| 1.0.8 | February 7, 2021 | Fixed dragging and dropping 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.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 ## 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. - Integrating drag and drop to provide better user experience for configuring web parts visually.
- Using custom drop-down property editors in the property pane. - 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" /> <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-list-form" />

View File

@ -1,85 +1,75 @@
[ {
{ "name": "pnp-sp-dev-spfx-web-parts-react-list-form",
"name": "pnp-sp-dev-spfx-web-parts-react-list-form", "version": null,
"source": "pnp", "source": "pnp",
"title": "List Form Web Part", "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.", "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": [
"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."
"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." ],
], "products": [
"creationDateTime": "2021-02-19", "SharePoint",
"updateDateTime": "2021-02-19", "Office"
"products": [ ],
"SharePoint", "categories": [
"Office" ""
], ],
"metadata": [ "metadata": [
{ {
"key": "CLIENT-SIDE-DEV", "key": "CLIENT-SIDE-DEV",
"value": "React" "value": "React"
}, },
{ {
"key": "SPFX-VERSION", "key": "SPFX-VERSION",
"value": "1.10.0" "value": "1.10.0"
} }
], ],
"thumbnails": [ "thumbnails": [
{ {
"type": "image", "type": "image",
"order": 100, "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": [ ],
{ "authors": [
"gitHubAccount": "DanyWyss", {
"company": "Ardevia", "gitHubAccount": "DanyWyss",
"pictureUrl": "https://avatars.githubusercontent.com/u/14975743?s=460\u0026u=0270afb16a406ce4e3f3e471da850141befe9160\u0026v=4", "name": "Dany Wyss",
"name": "Dany Wyss", "company": "",
"twitter": "DanyWyss" "pictureUrl": "https://github.com/DanyWyss.png"
}, },
{ {
"gitHubAccount": "Harshagracy", "gitHubAccount": "Harshagracy",
"company": "", "company": "",
"pictureUrl": "https://github.com/Harshagracy.png", "name": "Harsha Vardhini",
"name": "Harsha Vardhini", "pictureUrl": "https://github.com/Harshagracy.png"
"twitter": "harshagracy" },
}, {
{ "gitHubAccount": "sharepointknight",
"gitHubAccount": "sharepointknight", "company": "",
"company": "", "name": "Ryan Schouten",
"pictureUrl": "https://github.com/sharepointknight.png", "pictureUrl": "https://github.com/sharepointknight.png"
"name": "Ryan Schouten" },
}, {
{ "gitHubAccount": "Abderahman88",
"gitHubAccount": "Abderahman88", "company": "",
"company": "", "name": "Abderahman Moujahid",
"pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460\u0026u=afdd5f6681bc375ee3811482dec79824c12d8170\u0026v=4", "pictureUrl": "https://github.com/Abderahman88.png"
"name": "Abderahman Moujahid" },
}, {
{ "gitHubAccount": "fthorild",
"gitHubAccount": "hugoabernier", "name": "Fredrik Thorild",
"company": "Tahoe Ninjas", "company": "Sogeti Sweden",
"pictureUrl": "https://github.com/hugoabernier.png", "pictureUrl": "https://github.com/fthorild.png"
"name": "Hugo Bernier", },
"twitter": "bernierh" {
}, "gitHubAccount": "AriGunawan",
{ "name": "Ari Gunawan",
"gitHubAccount": "fthorild", "company": "",
"company": "Sogeti Sweden", "pictureUrl": "https://github.com/AriGunawan.png"
"pictureUrl": "https://github.com/fthorild.png", }
"name": "Fredrik Thorild", ],
"twitter": "taxonomythorild" "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"
}
]
}
]

View File

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

View File

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