docs: 🔥 doc update

README.md

@@ -1,6 +1,57 @@
-## Drag and Drop Widget
-
-## Usage
+<h1 align="center">Drag and Drop Widget for Mendix</h1>
+
+<p align="center">
+   A Drag and Drop Widget for Mendix (with Touch Support for Mobile Devices)
+    <br>
+    <br>
+  <a href="">
+    <img alt="License: MIT" src="https://img.shields.io/badge/Status-Production-blue" target="_blank" />
+  </a>
+  <a href="">
+    <img alt="License: MIT" src="https://img.shields.io/github/issues/ahwelgemoed/drag-and-drop-mendix-widget" target="_blank" />
+  </a>
+  <a href="">
+    <img alt="GitHub issues" src="https://img.shields.io/github/release/ahwelgemoed/drag-and-drop-mendix-widget" target="_blank" />
+  </a>
+  <a href="https://appstore.home.mendix.com/link/modeler/">
+    <img alt="GitHub issues" src="https://img.shields.io/badge/Studio%20version-8.12%2B-blue.svg" target="_blank" />
+  </a>
+  <a href="https://docs.mendix.com/developerportal/app-store/app-store-content-support">
+    <img alt="GitHub issues" src="https://img.shields.io/badge/Support-Community%20(no%20active%20support)-orange.svg" target="_blank" />
+  </a>
+  <a href="/LICENSE">
+    <img alt="License: MIT" src="https://img.shields.io/badge/license-Apache%202.0-orange.svg" target="_blank" />
+  </a>
+  <br>
+
+</p>
+<p align="center">
+ <img  align="center" alt="headerIMG" src="./assets/simpleList.gif" target="_blank" />
+  <br>
+
+ <img  align="center" alt="headerIMG" src="./assets/widgetToWidget.gif" target="_blank" />
+</p>
+
+Some key features:
+
+-   Sort a list.
+-   Drag from one List to another, using enum to divide between Lists.
+-   Drag from one entity to another _(alpha)_
+
+#### Demo Here
+
+The idea behind it:
+
+You wrap all the drag and droppable widgets into one containing dataview that is connected to a simple non persistable
+entity with one string attribute. This is used to manage state between the widgets. For every colum you want you
+implement one Widget and configure it as set out below. this will give you the ability to order horizontally inside a
+colum and vertically (drag between one widget and another).
+
+<p align="center">
+<h3>Usage</h3>
+ <img  align="center" alt="headerIMG" src="./assets/p1.png" target="_blank" />
+ <img  align="center" alt="headerIMG" src="./assets/p2.png" target="_blank" />
+</p>
 
 | Object list group     | List         | List of items to Show cards for                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | --------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -28,23 +79,23 @@ We provide some pre-created actions that you should implement and configure.
 
             -   Configure the 3 Strings:
 
-                -   `nonPersitabileModelName` - Model name of the Non Persistable Model (i.e:
-                    `DragAndDropWidget.SimpleListState`)
+                -   nonPersistableModelName - Model name of the Non Persistable Model (i.e:
+                    DragAndDropWidget.SimpleListState)
 
-                -   `nonPersistableAttName` - Attribute name of the Non Persistable Model (i.e: `json`)
+                -   nonPersistableAttName - Attribute name of the Non Persistable Model (i.e: json)
 
-                -   `persitableOrderAtt` - Attribute name used to 'sort' the Persistable Model (i.e: `Order`)
+                -   persistableOrderAtt - Attribute name used to 'sort' the Persistable Model (i.e: Order)
 
     -   Then copy over the Javascript Action in the folder `Javascript_Actions` called `Same_Col_Drop_JS` and configure
-        the nanoflow to use it.
+        the nanoflow to use it, by setting the incoming parameters to that that you created in the nano flow.
 
-    This action does some cool stuff: It parses the Json coming in from the React Widget, Loops offer the array of
-    mxObjects then fetched that object on very iteration Updates the order attribute and then commits this.
+    This action does some interesting stuff: It parses the Json coming in from the React Widget, Loops offer the array
+    of mxObjects then fetched that object on very iteration Updates the order attribute and then commits this.
 
     The React Widget handles the sorting after the Mendix dev sets it once. All objects in that list will have new
     updated order values, after the initial drop. Thus what ever is selected as the 'order' value, must not be unique.
     The order is also seen as irrelevant to the end user and should never be displayed to them. It has been build in
-    such a way that the React State and MEndix state should never run out of sync with each other, and seems robust.
+    such a way that the React State and Mendix state should never run out of sync with each other, and seems robust.
 
 ### Different Column Drop
 
@@ -53,23 +104,53 @@ Is called by THAT widget when another widget drops an Object into it.
 -   Same Datasource _(Same Entity)_
 
     -   After importing the Commons File Find the Folder called `nanoflows` in the `draganddrop` folder. Use the
-        nanoflow called `Same_Col_Drop_NF`. Copy it into your project and start setting it up.
+        nanoflow called `Diff_Col_Drop_NF`. Copy it into your project and start setting it up.
 
             -   Configure the incoming data to be that of your non-persistable data source you wrapped the widget in.
 
-            -   Configure the 3 Strings:
+            -   Configure the 4 Strings:
 
-                -   `nonPersitabileModelName` - Model name of the Non Persistable Model (i.e:
-                    `DragAndDropWidget.SimpleListState`)
+                -   nonPersistableModelName - Model name of the Non Persistable Model (i.e:
+                    DragAndDropWidget.SimpleListState)
 
-                -   `nonPersistableAttName` - Attribute name of the Non Persistable Model (i.e: `json`)
+                -   nonPersistableAttName - Attribute name of the Non Persistable Model (i.e: `json`)
 
-                -   `persitableOrderAtt` - Attribute name used to 'sort' the Persistable Model (i.e: `Order`)
+                -   persistableOrderAtt - Attribute name used to 'sort' the Persistable Model (i.e: `Order`)
 
-    -   Then copy over the Javascript Action in the folder `Javascript_Actions` called `Same_Col_Drop_JS` and configure
-        the nanoflow to use it.
+                -   persistableAttName - Attribute name used to 'filter' the Persistable Model (i.e: `Status`)
+
+    -   Then copy over the Javascript Action in the folder `Javascript_Actions` called `Diff_Col_Drop_JS` and configure
+        the nanoflow to use it, by setting the incoming parameters to that that you created in the nano flow.
+
+*   Different Datasource _(Different Entity)_
+
+    This feature is currently in alpha stages. but there is a working demo and will be documented when there is more
+    confedince in this feature.
+
+## Styling
+
+The Widget exposes 3 Classnames you can use to style the list items:
+
+-   `drag-and-drop__is-over` : Classname added when draggable item is hovering over this item
+
+-   `drag-and-drop__is-dragging` : Classname added to draggable item
+
+-   `drag-and-drop__empty-list` : Classname added to an Empty Widget _(no data in column)_
 
-    This action does some cool stuff: It parses the Json coming in from the React Widget, Loops offer the array of
-    mxObjects then fetched that object on very iteration Updates the order attribute and then commits this.
+## Screenshots
 
--   Different Datasource _(Different Entity)_
+<p align="center">
+ <h4>Modeler Look</h4>
+ <img  align="center" alt="headerIMG" src="./assets/mxOverview.png" target="_blank" />
+ <br>
+ <h4>Web Look</h4>
+ <img  align="center" alt="headerIMG" src="./assets/widgetToWidget.gif" target="_blank" />
+ <h4>Incoming Data (Nano- or Microflow)</h4>
+ <img  align="center" alt="headerIMG" src="./assets/get_mf.png" target="_blank" />
+ <h4>Create Non Persistable Data (Nano- or Microflow)</h4>
+ <img  align="center" alt="headerIMG" src="./assets/non_state.png" target="_blank" />
+ <h4>Same Column Drop (Nanoflow)</h4>
+ <img  align="center" alt="headerIMG" src="./assets/Same_Col_Drop_NF.png" target="_blank" />
+ <h4>Different Column Drop (Nanoflow)</h4>
+ <img  align="center" alt="headerIMG" src="./assets/Diff_Col_Drop_NF.png" target="_blank" />
+</p>

package.json

@@ -25,7 +25,7 @@
     "devDependencies": {
         "@mendix/pluggable-widgets-tools": "^8.12.0",
         "@types/big.js": "^4.0.5",
-        "@types/classnames": "^2.2.4",
+        "@types/classnames": "^2.2.11",
         "@types/react": "~16.9.0",
         "@types/react-dom": "~16.9.0"
     },

src/Draganddropwidget.xml

@@ -10,29 +10,29 @@
         <propertyGroup caption="General">
             <property key="uuid" type="string">
                 <caption>UUID/Status</caption>
-                <description>Unique Identifyer for Dragable Colum, or If same DS the Enum on what to Filter on (Read Docs)</description>
+                <description>Unique identifyer for dragable colum, or if same datasource the entry of the enum to filter on (Read Docs)</description>
             </property>
 
             <property key="dataSourceName" type="string">
                 <caption>Data Source Name</caption>
-                <description>Text Name of the DS</description>
+                <description>Text name of the datasource</description>
             </property>
 
             <property key="incomingData" type="datasource" isList="true">
-                <caption>In Coming Data</caption>
-                <description>List of entry objects that are used to populate the Dragable column</description>
+                <caption>Data</caption>
+                <description>Nanoflow or Microflow of flitered and sorted data to display</description>
             </property>
 
             <property key="dropDataAttr" type="attribute">
                 <caption>Non Persistable Data</caption>
-                <description>JSON String</description>
+                <description>Non persistable attribute to use for widget state</description>
                 <attributeTypes>
                     <attributeType name="String"/>
                 </attributeTypes>
             </property>
         </propertyGroup>
 
-        <propertyGroup caption="Drop Actions">
+        <propertyGroup caption="Drag/Drop Actions">
             <property key="onDropAction" type="action">
                 <caption>Same Column Drop</caption>
                 <description>Nanoflow to trigger if data comes in from the same column</description>

src/components/DragCard.tsx

@@ -1,5 +1,6 @@
 import { createElement, useRef } from "react";
 import { useDrag, useDrop, DragObjectWithType, DragSourceMonitor } from "react-dnd";
+import classnames from "classnames";
 import { DragCardType, ListOfSortableItemsType } from "./types";
 
 const DragCard = ({ children, item, index, reorderAfterDrop, listOfSortableItems }: DragCardType) => {
@@ -65,15 +66,20 @@ const DragCard = ({ children, item, index, reorderAfterDrop, listOfSortableItems
             index
         },
         collect: monitor => ({
-            isDragging: monitor.isDragging()
+            isDragging: monitor.isDragging(),
+            canDrag: monitor.canDrag()
         })
     });
-
     drag(drop(ref));
 
+    const customClassNames = classnames({
+        "drag-and-drop__is-over": isOver,
+        "drag-and-drop__is-dragging": isDragging
+    });
+
     return (
         <div
-            className={isDragging ? "isDragging" : ""}
+            className={customClassNames}
             style={{
                 padding: "0.5rem 1rem",
                 marginBottom: ".5rem",

src/components/DragInit.tsx

@@ -20,7 +20,7 @@ function Column({ listOfSortableItems, content, reorderAfterDrop, emptyData }: D
                 })
             ) : (
                 <DragCard reorderAfterDrop={reorderAfterDrop} item={undefined} index={0}>
-                    <div>{emptyData}</div>
+                    <div className={"drag-and-drop__empty-list"}>{emptyData}</div>
                 </DragCard>
             )}
         </div>

yarn.lock

@@ -1616,7 +1616,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/classnames@^2.2.4":
+"@types/classnames@^2.2.11":
   version "2.2.11"
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
   integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==