@apexcura/ui-components 0.0.12-Beta2 → 0.0.12-Beta20

package/dist/index.js

@@ -361,13 +361,99 @@ var ButtonElement = () => /* @__PURE__ */ import_react12.default.createElement(i
 // src/Components/AddMoreTable.tsx
 var import_react13 = __toESM(require("react"));
 var import_antd11 = require("antd");
+var import_icons2 = require("@ant-design/icons");
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
   const [tableData, setTableData] = (0, import_react13.useState)({});
+  const [rows, setRows] = (0, import_react13.useState)(tbody || []);
+  function isColumnType(column) {
+    return column.dataIndex !== void 0;
+  }
   const onHandleChange = (name, value) => {
     setTableData((prev) => ({ ...prev, [name]: value }));
     console.log(tableData);
   };
+  const onHandleRows = () => {
+    const lastRow = rows[rows.length - 1];
+    const newId = lastRow ? lastRow.id + 1 : 1;
+    let newRow = {
+      ...lastRow,
+      id: newId
+    };
+    if (newRow.variable_data && newRow.variable_data.length > 0) {
+      const updatedVariableData = newRow.variable_data.map((item, index) => {
+        const { icons, ...rest } = item;
+        return {
+          ...rest,
+          icons: { ...icons, delete: /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null) }
+        };
+      });
+      updatedVariableData[updatedVariableData.length - 1] = {
+        ...updatedVariableData[updatedVariableData.length - 1],
+        icons: { ...updatedVariableData[updatedVariableData.length - 1].icons, plus: /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null) }
+      };
+      newRow.variable_data = updatedVariableData;
+    }
+    setRows((prevData) => [...prevData, newRow]);
+  };
+  const onHandleDelete = (index) => {
+    if (rows.length > 1) {
+      const remainingRows = rows.filter((eachRow) => eachRow.id !== index);
+      setRows(remainingRows);
+    }
+  };
+  const onHandleVariableData = (rowId) => {
+    setRows((prevRows) => prevRows.map((row) => {
+      if (row.id === rowId) {
+        const newVariableDataId = row.variable_data.length > 0 ? row.variable_data[row.variable_data.length - 1].id + 1 : 1;
+        const newVariableData = {
+          id: newVariableDataId,
+          Route: {
+            label: "Route",
+            element: "single-select",
+            type: "text"
+          },
+          Dose: {
+            label: "Dose",
+            element: "single-select",
+            type: "text"
+          },
+          Frequency: {
+            label: "Frequency",
+            element: "single-select",
+            type: "text"
+          },
+          When: {
+            label: "When",
+            element: "textarea",
+            type: "text"
+          },
+          Duration: {
+            label: "Duration",
+            element: "textarea",
+            type: "text"
+          },
+          Instructions: {
+            label: "Instructions",
+            element: "textarea",
+            type: "text"
+          },
+          icons: { delete: /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null), plus: /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null) }
+        };
+        const updatedVariableData = [...row.variable_data, newVariableData];
+        updatedVariableData.forEach((data, index) => {
+          if (index === updatedVariableData.length - 1) {
+            data.icons.plus = "";
+          }
+        });
+        return {
+          ...row,
+          variable_data: updatedVariableData
+        };
+      }
+      return row;
+    }));
+  };
   const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
     title: eachHeadEl.label,
     dataIndex: eachHeadEl.name,
@@ -375,7 +461,6 @@ var AddMoreTable = (props) => {
   })) : [];
   const renderInputElement = (element) => {
     const { element: type, label } = element;
-    console.log("type....", type);
     if (type === "single-select") {
       return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
     } else if (type === "textarea") {
@@ -384,27 +469,38 @@ var AddMoreTable = (props) => {
       return null;
     }
   };
-  const dataSource = tbody && tbody.length > 0 ? tbody.map((eachRow, index) => {
+  const dataSource = rows.map((eachRow, index) => {
     const rowElements = {};
     if (eachRow.element && eachRow.label) {
       rowElements[eachRow.label] = renderInputElement(eachRow);
     }
-    const variableData = eachRow.variable_data && Array.isArray(eachRow.variable_data) ? eachRow.variable_data.reduce((acc, curr) => {
-      if (!curr.label || !curr.element) {
-        console.error(`Invalid element in row ${index}:`, curr);
-        return acc;
-      }
-      acc[curr.label] = renderInputElement(curr);
-      return acc;
-    }, {}) : {};
+    if (eachRow.variable_data && Array.isArray(eachRow.variable_data)) {
+      eachRow.variable_data.forEach((variable, varIndex) => {
+        Object.entries(variable).forEach(([key, value]) => {
+          if (value && value.element && value.label) {
+            rowElements[value.label] = renderInputElement(value);
+          }
+          if (key === "icons") {
+            rowElements[`icons_${varIndex}`] = /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("button", { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), varIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement("button", { onClick: () => onHandleVariableData(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
+          }
+        });
+      });
+    }
     return {
       key: index.toString(),
+      "#": index + 1,
       ...eachRow,
       ...rowElements,
-      ...variableData
+      actions: /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("button", { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), index === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)))
     };
-  }) : [];
-  console.log("dataSource.........", dataSource);
+  });
+  if (!columns.some((col) => isColumnType(col) && col.dataIndex === "actions")) {
+    columns.push({
+      title: "Actions",
+      dataIndex: "actions",
+      key: "actions"
+    });
+  }
   return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
     import_antd11.Table,
     {

package/dist/index.mjs

@@ -314,13 +314,99 @@ var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "s
 // src/Components/AddMoreTable.tsx
 import React12, { useState as useState3 } from "react";
 import { Table } from "antd";
+import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
   const [tableData, setTableData] = useState3({});
+  const [rows, setRows] = useState3(tbody || []);
+  function isColumnType(column) {
+    return column.dataIndex !== void 0;
+  }
   const onHandleChange = (name, value) => {
     setTableData((prev) => ({ ...prev, [name]: value }));
     console.log(tableData);
   };
+  const onHandleRows = () => {
+    const lastRow = rows[rows.length - 1];
+    const newId = lastRow ? lastRow.id + 1 : 1;
+    let newRow = {
+      ...lastRow,
+      id: newId
+    };
+    if (newRow.variable_data && newRow.variable_data.length > 0) {
+      const updatedVariableData = newRow.variable_data.map((item, index) => {
+        const { icons, ...rest } = item;
+        return {
+          ...rest,
+          icons: { ...icons, delete: /* @__PURE__ */ React12.createElement(DeleteOutlined, null) }
+        };
+      });
+      updatedVariableData[updatedVariableData.length - 1] = {
+        ...updatedVariableData[updatedVariableData.length - 1],
+        icons: { ...updatedVariableData[updatedVariableData.length - 1].icons, plus: /* @__PURE__ */ React12.createElement(PlusOutlined, null) }
+      };
+      newRow.variable_data = updatedVariableData;
+    }
+    setRows((prevData) => [...prevData, newRow]);
+  };
+  const onHandleDelete = (index) => {
+    if (rows.length > 1) {
+      const remainingRows = rows.filter((eachRow) => eachRow.id !== index);
+      setRows(remainingRows);
+    }
+  };
+  const onHandleVariableData = (rowId) => {
+    setRows((prevRows) => prevRows.map((row) => {
+      if (row.id === rowId) {
+        const newVariableDataId = row.variable_data.length > 0 ? row.variable_data[row.variable_data.length - 1].id + 1 : 1;
+        const newVariableData = {
+          id: newVariableDataId,
+          Route: {
+            label: "Route",
+            element: "single-select",
+            type: "text"
+          },
+          Dose: {
+            label: "Dose",
+            element: "single-select",
+            type: "text"
+          },
+          Frequency: {
+            label: "Frequency",
+            element: "single-select",
+            type: "text"
+          },
+          When: {
+            label: "When",
+            element: "textarea",
+            type: "text"
+          },
+          Duration: {
+            label: "Duration",
+            element: "textarea",
+            type: "text"
+          },
+          Instructions: {
+            label: "Instructions",
+            element: "textarea",
+            type: "text"
+          },
+          icons: { delete: /* @__PURE__ */ React12.createElement(DeleteOutlined, null), plus: /* @__PURE__ */ React12.createElement(PlusOutlined, null) }
+        };
+        const updatedVariableData = [...row.variable_data, newVariableData];
+        updatedVariableData.forEach((data, index) => {
+          if (index === updatedVariableData.length - 1) {
+            data.icons.plus = "";
+          }
+        });
+        return {
+          ...row,
+          variable_data: updatedVariableData
+        };
+      }
+      return row;
+    }));
+  };
   const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
     title: eachHeadEl.label,
     dataIndex: eachHeadEl.name,
@@ -328,7 +414,6 @@ var AddMoreTable = (props) => {
   })) : [];
   const renderInputElement = (element) => {
     const { element: type, label } = element;
-    console.log("type....", type);
     if (type === "single-select") {
       return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
     } else if (type === "textarea") {
@@ -337,27 +422,38 @@ var AddMoreTable = (props) => {
       return null;
     }
   };
-  const dataSource = tbody && tbody.length > 0 ? tbody.map((eachRow, index) => {
+  const dataSource = rows.map((eachRow, index) => {
     const rowElements = {};
     if (eachRow.element && eachRow.label) {
       rowElements[eachRow.label] = renderInputElement(eachRow);
     }
-    const variableData = eachRow.variable_data && Array.isArray(eachRow.variable_data) ? eachRow.variable_data.reduce((acc, curr) => {
-      if (!curr.label || !curr.element) {
-        console.error(`Invalid element in row ${index}:`, curr);
-        return acc;
-      }
-      acc[curr.label] = renderInputElement(curr);
-      return acc;
-    }, {}) : {};
+    if (eachRow.variable_data && Array.isArray(eachRow.variable_data)) {
+      eachRow.variable_data.forEach((variable, varIndex) => {
+        Object.entries(variable).forEach(([key, value]) => {
+          if (value && value.element && value.label) {
+            rowElements[value.label] = renderInputElement(value);
+          }
+          if (key === "icons") {
+            rowElements[`icons_${varIndex}`] = /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("button", { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), varIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement("button", { onClick: () => onHandleVariableData(eachRow.id) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+          }
+        });
+      });
+    }
     return {
       key: index.toString(),
+      "#": index + 1,
       ...eachRow,
       ...rowElements,
-      ...variableData
+      actions: /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("button", { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), index === rows.length - 1 && /* @__PURE__ */ React12.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)))
     };
-  }) : [];
-  console.log("dataSource.........", dataSource);
+  });
+  if (!columns.some((col) => isColumnType(col) && col.dataIndex === "actions")) {
+    columns.push({
+      title: "Actions",
+      dataIndex: "actions",
+      key: "actions"
+    });
+  }
   return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
     Table,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.12-Beta2",
+  "version": "0.0.12-Beta20",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",