Merge pull request #1855 from AriGunawan/hotfix/fix_attachment_not_cleared
This commit is contained in:
Hugo Bernier
GitHub
commit
7b502f137e
|
|
@ -24,8 +24,6 @@ The web part allows configuring which list to use and if a form for adding a new
|
|||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
|
@ -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 | Harsha Vardhini ([@harshagracy](https://twitter.com/harshagracy)) |
|
||||
| react-list-form | Ryan Schouten ([@shrpntknight](https://twitter.com/shrpntknight)) |
|
||||
| react-list-form | Abderahman Moujahid |
|
||||
| react-list-form | [Kman1131](https://github.com/Kman1131) |
|
||||
| react-list-form | Fredrik Thorild [@fthorild](https://twitter.com/fthorild) |
|
||||
| Solution | Author(s) |
|
||||
| --------------- | ----------------------------------------------------------------- |
|
||||
| react-list-form | [Dany Wyss](https://github.com/DanyWyss) |
|
||||
| react-list-form | [Harsha Vardhini](https://github.com/Harshagracy) ([@harshagracy](https://twitter.com/harshagracy)) |
|
||||
| react-list-form | [Ryan Schouten](https://github.com/sharepointknight) ([@shrpntknight](https://twitter.com/shrpntknight)) |
|
||||
| react-list-form | [Abderahman Moujahid](https://github.com/Abderahman88) |
|
||||
| react-list-form | [Kman1131](https://github.com/Kman1131) |
|
||||
| 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 |
|
||||
|
||||
## 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.**
|
||||
|
||||
---
|
||||
| 1.0.10 | May 6, 2021 | Fixed "attachments are not cleared after submit" issue |
|
||||
|
||||
## 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" />
|
||||
|
|
|
|||
|
|
@ -1,85 +1,75 @@
|
|||
[
|
||||
{
|
||||
"name": "pnp-sp-dev-spfx-web-parts-react-list-form",
|
||||
"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"
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.10.0"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-form/assets/React-ListForm-Overview.gif",
|
||||
"alt": "List Form Web Part"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "DanyWyss",
|
||||
"company": "Ardevia",
|
||||
"pictureUrl": "https://avatars.githubusercontent.com/u/14975743?s=460\u0026u=0270afb16a406ce4e3f3e471da850141befe9160\u0026v=4",
|
||||
"name": "Dany Wyss",
|
||||
"twitter": "DanyWyss"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "Harshagracy",
|
||||
"company": "",
|
||||
"pictureUrl": "https://github.com/Harshagracy.png",
|
||||
"name": "Harsha Vardhini",
|
||||
"twitter": "harshagracy"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "sharepointknight",
|
||||
"company": "",
|
||||
"pictureUrl": "https://github.com/sharepointknight.png",
|
||||
"name": "Ryan Schouten"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "Abderahman88",
|
||||
"company": "",
|
||||
"pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460\u0026u=afdd5f6681bc375ee3811482dec79824c12d8170\u0026v=4",
|
||||
"name": "Abderahman Moujahid"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
}
|
||||
],
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
{
|
||||
"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.",
|
||||
"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."
|
||||
],
|
||||
"products": [
|
||||
"SharePoint",
|
||||
"Office"
|
||||
],
|
||||
"categories": [
|
||||
""
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.10.0"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"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",
|
||||
"slides": null
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "DanyWyss",
|
||||
"name": "Dany Wyss",
|
||||
"company": "",
|
||||
"pictureUrl": "https://github.com/DanyWyss.png"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "Harshagracy",
|
||||
"company": "",
|
||||
"name": "Harsha Vardhini",
|
||||
"pictureUrl": "https://github.com/Harshagracy.png"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "sharepointknight",
|
||||
"company": "",
|
||||
"name": "Ryan Schouten",
|
||||
"pictureUrl": "https://github.com/sharepointknight.png"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "Abderahman88",
|
||||
"company": "",
|
||||
"name": "Abderahman Moujahid",
|
||||
"pictureUrl": "https://github.com/Abderahman88.png"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "fthorild",
|
||||
"name": "Fredrik Thorild",
|
||||
"company": "Sogeti Sweden",
|
||||
"pictureUrl": "https://github.com/fthorild.png"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "AriGunawan",
|
||||
"name": "Ari Gunawan",
|
||||
"company": "",
|
||||
"pictureUrl": "https://github.com/AriGunawan.png"
|
||||
}
|
||||
],
|
||||
"references": []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,14 +37,27 @@ export class AttachmentRender extends React.Component<IAttachmentProps, IAttachm
|
|||
}
|
||||
|
||||
public componentDidUpdate(prevProps: IAttachmentProps, prevState: IAttachmentState) {
|
||||
//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 });
|
||||
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
|
||||
&& 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) {
|
||||
this.props.valueChanged(this.state.attachments);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue