Merge pull request #1855 from AriGunawan/hotfix/fix_attachment_not_cleared
This commit is contained in:
commit
7b502f137e
|
@ -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" />
|
||||||
|
|
|
@ -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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue