DHTMLX · serhiipylypchuk1991 · Jun 25, 2024 · Jun 25, 2024 · Jun 25, 2024 · Jun 25, 2024
diff --git a/README.md b/README.md
@@ -2,8 +2,7 @@
 
 [![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)
 
-
-![DHTMLX Kanban with React Demo](https://raw.githubusercontent.com/DHTMLX/react-kanban-demo/master/kanban.png)
+![DHTMLX Kanban with React Demo](kanban.png)
 
 ## How to start
 

diff --git a/kanban.png b/kanban.png
diff --git a/public/index.html b/public/index.html
@@ -6,10 +6,9 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<meta name="theme-color" content="#000000">
 
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 
-	<title>XBS :: React</title>
+	<title>DHX Kanban React</title>
 </head>
 
 <body>

diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,9 @@
-import "./styles.css";
-
 import Kanban from "./Kanban";
 import { getData } from "./data";
 
 function App() {
-  const { columns, cards } = getData();
-  return <Kanban columns={columns} cards={cards} />;
+  const { cards, columns, rows, cardShape } = getData();
+  return <Kanban columns={columns} cards={cards} rows={rows} cardShape={cardShape} />;
 }
 
 export default App;
diff --git a/src/Kanban.jsx b/src/Kanban.jsx
@@ -1,18 +1,51 @@
 import { useEffect, useRef } from "react";
-import { Kanban } from "@dhx/trial-kanban";
+import { Kanban, Toolbar, defaultEditorShape } from "@dhx/trial-kanban";
 import "@dhx/trial-kanban/dist/kanban.css";
 
-export default function KanbanView(props) {
-  let container = useRef();
+export default function KanbanComponent(props) {
+  let kanban_container = useRef();
+  let toolbar_container = useRef();
 
   useEffect(() => {
-    new Kanban(container.current, {
+    const kanban = new Kanban(kanban_container.current, {
       columns: props.columns,
       cards: props.cards,
+      rows: props.rows,
+      rowKey: "type",
+      cardShape: props.cardShape,
+      editorShape: [
+        ...defaultEditorShape, // import default config for editorShape
+        {
+          type: "links",
+          key: "links",
+          label: "Links"
+        },
+        {
+          type: "comments",
+          key: "comments",
+          label: "Comments",
+          config: {
+            placement: "editor"
+          }
+        }
+      ],
+      currentUser: 1,
+      // other configuration properties
+    });
+
+    const toolbar = new Toolbar(toolbar_container.current, {
+      api: kanban.api,
+      // other configuration properties
     });
 
-    return () => (container.current.innerHTML = "");
+    return () => {
+      kanban.destructor();
+      toolbar.destructor();
+    };
   }, []);
 
-  return <div ref={container} style={{ width: "100%", height: "100%" }}></div>;
+  return  <div className="component_container">
+            <div ref={toolbar_container}></div>
+            <div ref={kanban_container} className="widget"></div>
+          </div>
 }
diff --git a/src/data.js b/src/data.js
@@ -3,29 +3,31 @@ export function getData() {
     {
       id: 1,
       label: "Steve Smith",
-      avatar: "../assets/user.jpg",
+      avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg",
     },
     {
       id: 2,
       label: "Aaron Long",
-      avatar: "../assets/user-2.jpg",
+      avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg",
     },
     {
       id: 3,
       label: "Angela Allen",
-      avatar: "../assets/user-3.jpg",
+      avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-3.jpg",
     },
     {
       id: 4,
       label: "Angela Long",
-      avatar: "../assets/user-4.jpg",
-    },
+      avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-4.jpg",
+    }
   ];
 
   const cardShape = {
     label: true,
     description: true,
     progress: true,
+    comments: true,
+    votes: true,
     start_date: true,
     end_date: true,
     users: {
@@ -35,9 +37,9 @@ export function getData() {
     priority: {
       show: true,
       values: [
-        { id: 1, color: "#FF5252", label: "high" },
-        { id: 2, color: "#FFC975", label: "medium" },
-        { id: 3, color: "#65D3B3", label: "low" },
+        { id: 1, color: "#FF5252", label: "High", value: 1 },
+        { id: 2, color: "#FFC975", label: "Medium", value: 2 },
+        { id: 3, color: "#65D3B3", label: "Low", value: 3 },
       ],
     },
     color: true,
@@ -46,15 +48,6 @@ export function getData() {
     attached: false,
   };
 
-  const editorShape = [
-    {
-      type: "multiselect",
-      key: "users",
-      label: "Users",
-      options: users,
-    },
-  ];
-
   const columns = [
     {
       label: "Backlog",
@@ -95,8 +88,26 @@ export function getData() {
       users: [3, 2],
       column: "backlog",
       type: "feature",
+      comments: [
+        {
+          id: 1,
+          userId: 1,
+          cardId: 1,
+          text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays. ",
+          date: new Date(),
+        },
+        {
+          id: 2,
+          userId: 2,
+          cardId: 1,
+          text: "Hi, Aaron. I am sure that that's exactly what is thought best out there in Dunwall. Let's just do what we are supposed to do to get the result.",
+          date: new Date(),
+        },
+      ],
+      votes: [1, 3, 4],
     },
     {
+      id: 2,
       label: "Archive the cards/boards ",
       priority: 3,
       color: "#58C3FE",
@@ -106,6 +117,7 @@ export function getData() {
       type: "feature",
     },
     {
+      id: 3,
       label: "Searching and filtering",
       priority: 1,
       color: "#58C3FE",
@@ -116,6 +128,7 @@ export function getData() {
       type: "task",
     },
     {
+      id: 4,
       label: "Set the tasks priorities",
       color: "#FFC975",
       start_date: new Date("12/21/2020"),
@@ -126,14 +139,15 @@ export function getData() {
       attached: [
         {
           isCover: true,
-          coverURL: "../assets/img-1.jpg",
-          previewURL: "../assets/img-1.jpg",
-          url: "../assets/img-1.jpg",
+          coverURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
+          previewURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
+          url: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
           name: "img-1.jpg",
         },
       ],
     },
     {
+      id: 5,
       label: "Custom icons",
       color: "#65D3B3",
       start_date: new Date("01/07/2021"),
@@ -142,6 +156,7 @@ export function getData() {
       type: "task",
     },
     {
+      id: 6,
       label: "Integration with Gantt",
       color: "#FFC975",
       start_date: new Date("12/21/2020"),
@@ -151,6 +166,7 @@ export function getData() {
       type: "task",
     },
     {
+      id: 7,
       label: "Drag and drop",
       priority: 1,
       color: "#58C3FE",
@@ -160,6 +176,7 @@ export function getData() {
       type: "feature",
     },
     {
+      id: 8,
       label: "Adding images",
       color: "#58C3FE",
       users: [4],
@@ -168,14 +185,15 @@ export function getData() {
       attached: [
         {
           isCover: true,
-          coverURL: "../assets/img-2.jpg",
-          previewURL: "../assets/img-2.jpg",
-          url: "../assets/img-2.jpg",
+          coverURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
+          previewURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
+          url: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
           name: "img-2.jpg",
         },
       ],
     },
     {
+      id: 9,
       label: "Create cards and lists from the UI and from code",
       priority: 3,
       color: "#65D3B3",
@@ -185,14 +203,15 @@ export function getData() {
       type: "feature",
     },
     {
-      id: 5,
+      id: 10,
       label: "Draw swimlanes",
       color: "#FFC975",
       users: [2],
       column: "done",
       type: "feature",
     },
     {
+      id: 11,
       label: "Progress bar",
       priority: 1,
       color: "#FFC975",
@@ -210,6 +229,5 @@ export function getData() {
     cards,
     users,
     cardShape,
-    editorShape,
   };
 }
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,19 @@
+/* specify styles for initial page */
+html,
+body,
+#root {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+/* specify styles for Kanban and Toolbar container*/
+.component_container {
+  height: 100%; 
+  margin: 0 auto;
+}
+
+/* specify styles for Kanban container*/
+.widget {
+    height: calc(100% - 56px);
+}
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,11 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-import App from "./App";
-
-const rootElement = document.getElementById("root");
-const root = createRoot(rootElement);
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
 
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <StrictMode>
+  <React.StrictMode>
     <App />
-  </StrictMode>
+  </React.StrictMode>
 );
diff --git a/src/styles.css b/src/styles.css