react-sdndk - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "react-sdndk",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Pluggable components to add a trello-like kanban board to your application",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -26,3 +26,3 @@ # React SDnDK
 
-## Usage
+## Created
 
@@ -48,3 +48,3 @@ The module contains 3 types of entities:
 
-### Creation `Board`
+### Creation `Column`
 ```ts
@@ -103,3 +103,83 @@ import React from 'react';
 
+## Usage
+
+```ts
+const App: React.FC = () => {
+  const [cards, setCards] = React.useState<
+    (CardDataType & { content: React.ReactNode })[]
+    >([
+      {
+        id: "1",
+        colId: "1",
+        content: "card 1 col 1"
+      },
+      {
+        id: "2",
+        colId: "2",
+        content: "card 2 col 2"
+      },
+      {
+        id: "12",
+        colId: "1",
+        content: "card 3 col 1"
+      },
+    ]);
+
+    const swapCard = (target: CardDataType, current: CardDataType) => {
+      let targetIndex = -1, currentIndex = -1;
+      cards.forEach(({ id }, index) => {
+        if(id === target.id) targetIndex = index;
+        if(id === current.id) currentIndex = index;
+      })
+
+      if(targetIndex === -1 || currentIndex === -1) {
+        return;
+      }
+
+      setCards((prev) => {
+        const prevCards = [...prev];
+        [prevCards[targetIndex], prevCards[currentIndex]] = 
+          [prevCards[currentIndex], prevCards[targetIndex]];
+        return prevCards;
+      })
+    }
+
+  const entryCard = (card: CardDataType, col: string) => {
+    setCards((prev) => {
+      const target = prev.find(({ id }) =>  id === card.id);
+      const index = prev.indexOf(target);
+
+      if(!target || index < 0) {
+        return;
+      }
+
+      const newCards = [...prev];
+      newCards[index].colId = col;
+
+      return newCards;
+    })
+  } 
+
+  return <Board>
+    <Column id="1" onCardEntry={entryCard}>
+      {cards
+        .filter(({ colId }) => colId === "1")
+        .map(({ id, colId, content }) => (
+          <Card key={id} id={id} colId={colId} onCardDrop={swapCard}>{content}</Card>
+        ))}
+    </Column>
+    <Column id="2" onCardEntry={entryCard}>
+      {cards
+        .filter(({ colId }) => colId === "2")
+        .map(({ id, colId, content }) => (
+          <Card key={id} id={id} colId={colId} onCardDrop={swapCard}>{content}</Card>
+        ))}
+    </Column>
+  </Board>;
+}
+
+export default App;
+```
+
 ### License
 MIT

No alert changes

Improved metrics

Total package byte prevSize

12331

18.5%

Number of lines in readme file

182

78.43%

No dependency changes