honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1699 from Kman1131/master

This commit is contained in:
Hugo Bernier 2021-02-11 00:46:02 -05:00 committed by GitHub
parent b68dfa4c2e aa55d23c1d
commit e7110d587a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
samples/react-list-form/README.md
View File

@ -26,7 +26,13 @@ The web part allows configuring which list to use and if a form for adding a new
## Used SharePoint Framework Version
![SPFx 1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
## Compatibility
![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js LTS 8.x | LTS 10.x](https://img.shields.io/badge/Node.js-LTS%208.x%20%7C%20LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
## Applies to
@ -41,6 +47,7 @@ The web part allows configuring which list to use and if a form for adding a new
| 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)
## Version history
@ -54,6 +61,7 @@ The web part allows configuring which list to use and if a form for adding a new
| 1.0.5 | September 26, 2020 | Fix date handling problems and redirect after edit |
| 1.0.6 | October 8, 2020 | Added support for cascading lookup fields |
| 1.0.7 | December 11, 2020 | Fix limit of lookup fields |
| 1.0.8 | February 7, 2021 | Fixed dragging and dropping fields |
## Disclaimer

2
samples/react-list-form/config/package-solution.json
View File

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

2
samples/react-list-form/npm-shrinkwrap.json generated
View File

@ -1,6 +1,6 @@
{
"name": "react-form-webpart",
"version": "1.0.4",
"version": "1.0.6",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

4
samples/react-list-form/package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-form-webpart",
"version": "1.0.6",
"version": "1.0.8",
"private": true,
"engines": {
"node": ">=0.10.0"
@ -45,4 +45,4 @@
"gulp": "~3.9.1",
"tslint-microsoft-contrib": "5.0.0"
}
}
}

13
samples/react-list-form/src/webparts/listForm/components/DraggableComponent.tsx
View File

@ -2,10 +2,9 @@ import * as React from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import { findDOMNode } from 'react-dom';
import { css } from 'office-ui-fabric-react/lib/Utilities';
import styles from './DraggableComponent.module.scss';
import * as strings from 'ListFormStrings';
import { Icon } from 'office-ui-fabric-react';
const dragSource = {
beginDrag(props: IDraggableComponentProps) {
@ -18,15 +17,13 @@ const dragSource = {
endDrag(props: IDraggableComponentProps, monitor) {
const { key: droppedKey, originalIndex } = monitor.getItem();
const didDrop = monitor.didDrop();
if (!didDrop) {
props.moveField(droppedKey, originalIndex);
props.moveField(droppedKey, props.index);
}
},
};
const dragTarget = {
hover(props: IDraggableComponentProps, monitor) {
const { key: draggedKey } = monitor.getItem();
if (draggedKey !== props.itemKey) {
@ -66,10 +63,12 @@ export default class DraggableComponent extends React.Component<IDraggableCompon
{children}
<div className={css(styles.toolbar)}>
<button type='button' className={css('ard-draggableComponent', styles.button)} title={strings.MoveField} >
<i className='ms-Icon ms-Icon--Move'></i>
<Icon iconName="Move" />
</button>
<button type='button' className={css('ard-draggableComponent', styles.button)} title={strings.RemoveField}
onClick={() => this.props.removeField(this.props.index)}><i className='ms-Icon ms-Icon--Delete'></i></button>
onClick={() => this.props.removeField(this.props.index)}>
<Icon iconName='Delete' />
</button>
</div>
</div>,
));

3
samples/react-list-form/src/webparts/listForm/components/ListForm.tsx
View File

@ -28,6 +28,7 @@ import * as strings from 'ListFormStrings';
import styles from './ListForm.module.scss';
import { Validate } from '@microsoft/sp-core-library';
import { Icon } from 'office-ui-fabric-react';
/*************************************************************************************
* React Component to render a SharePoint list form on any page.
@ -97,7 +98,7 @@ class ListForm extends React.Component<IListFormProps, IListFormState> {
<DefaultButton aria-haspopup='true' aria-label={strings.AddNewFieldAction} className={styles.addFieldToolbox}
title={strings.AddNewFieldAction} menuProps={menuProps} data-is-focusable='false' >
<div className={styles.addFieldToolboxPlusButton}>
<i aria-hidden='true' className='ms-Icon ms-Icon--CircleAdditionSolid' />
<Icon iconName='CircleAdditionSolid' />
</div>
</DefaultButton>
}