Merge pull request #1699 from Kman1131/master

samples/react-list-form/README.md

@@ -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
 

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.7.0",
+    "version": "1.0.8.0",
     "title": "List form",
     "supportedLocales": [
       "en-US",

samples/react-list-form/npm-shrinkwrap.json

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

samples/react-list-form/package.json

@@ -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"
   }
-}
+}

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

@@ -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>,
     ));

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

@@ -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>
                 }