@apexcura/ui-components 0.0.11-Beta1 → 0.0.11-Beta100

package/dist/index.d.mts

@@ -7,7 +7,7 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string | number | boolean | any[];
+    value?: string | number | boolean | any[] | null;
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     classNames?: string;
@@ -17,11 +17,13 @@ type ElementType = {
     suffix?: React.ReactNode;
     maxLength?: number;
     fieldNames?: any[];
+    options?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
     dropDownOptions?: any[];
     id?: number;
     thead?: any[];
     tbody?: any[];
+    variable_data?: any[];
 };
 
 interface ElementExecuterProps$3 extends ElementType {

package/dist/index.d.ts

@@ -7,7 +7,7 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string | number | boolean | any[];
+    value?: string | number | boolean | any[] | null;
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     classNames?: string;
@@ -17,11 +17,13 @@ type ElementType = {
     suffix?: React.ReactNode;
     maxLength?: number;
     fieldNames?: any[];
+    options?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
     dropDownOptions?: any[];
     id?: number;
     thead?: any[];
     tbody?: any[];
+    variable_data?: any[];
 };
 
 interface ElementExecuterProps$3 extends ElementType {

package/dist/index.js

@@ -188,14 +188,23 @@ var SelectElement = (props) => {
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
 var RadioElement = (props) => {
+  const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
   const handleChange = (e) => {
     if (props.onChange) {
       const selectedVal = e.target.value;
       const selectedOptions = [{ id: selectedVal, value: selectedVal }];
       props.onChange(selectedOptions);
+      setIsDisabled(true);
     }
   };
-  return /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange }, "D"));
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_antd6.Radio.Group,
+    {
+      options: props.options,
+      onChange: handleChange,
+      disabled: isDisabled
+    }
+  );
 };
 
 // src/Components/Checkbox.tsx
@@ -361,34 +370,127 @@ 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 [rows, setRows] = (0, import_react13.useState)(tbody || []);
+  const onHandleRows = () => {
+    const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
+    let newRow = {
+      id: newId,
+      label: "Medicine",
+      name: "Medicine",
+      type: "text",
+      variable_data: [
+        {
+          id: 1,
+          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" },
+          SubRows: { delete: "delete", add: "plus" }
+        }
+      ]
+    };
+    setRows((prevData) => [...prevData, newRow]);
+  };
+  const onHandleDelete = (id) => {
+    setRows((prevRows) => prevRows.filter((row) => row.id !== id));
+  };
+  const onHandleSubRowsAdd = (rowIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const newSubRow = {
+            id: row.variable_data.length + 1,
+            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" },
+            SubRows: { delete: "delete", add: "plus" }
+          };
+          const updatedVariableData = [...row.variable_data, newSubRow];
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  const onHandleSubRowsDelete = (rowIndex, subIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  (0, import_react13.useEffect)(() => {
+    console.log(rows);
+  }, [rows]);
+  const renderInputElement = (element, value) => {
+    if (!element)
+      return null;
+    const { element: type, label } = element;
+    if (type === "single-select") {
+      return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2) });
+    } else if (type === "textarea") {
+      return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2) });
+    } else {
+      return null;
+    }
+  };
+  const dataSource = rows.map((eachRow, rowIndex) => {
+    const rowData = {
+      key: eachRow.id,
+      "#": rowIndex + 1
+    };
+    rowData["Medicine"] = renderInputElement(eachRow.variable_data[0].Medicine);
+    eachRow.variable_data.map((variable, subIndex) => {
+      Object.keys(variable).forEach((key) => {
+        if (key === "SubRows") {
+          rowData[`${key}`] = /* @__PURE__ */ import_react13.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
+        } else {
+          rowData[`${key}`] = renderInputElement(variable[key]);
+        }
+      });
+    });
+    rowData.actions = /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
+    return rowData;
+  });
   const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
     title: eachHeadEl.label,
     dataIndex: eachHeadEl.name,
     key: eachHeadEl.id
   })) : [];
-  const dataSource = tbody && tbody.length > 0 ? tbody.map((eachRow, index) => {
-    const variableData = eachRow.variable_data.reduce((acc, curr) => {
-      acc[curr.label] = curr.element;
-      return acc;
-    }, {});
-    return {
-      key: index.toString(),
-      ...variableData,
-      ...eachRow
-    };
-    console.log("eachRow---------", eachRow);
-    console.log("VariableData", { ...variableData });
-  }) : [];
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
+  if (!columns.some((col) => col.dataIndex === "actions")) {
+    columns.push({
+      title: "Actions",
+      dataIndex: "actions",
+      key: "actions"
+    });
+  }
+  return /* @__PURE__ */ import_react13.default.createElement(
     import_antd11.Table,
     {
       columns,
-      expandable: { defaultExpandedRowKeys: ["0"] },
-      dataSource
+      dataSource,
+      pagination: false,
+      bordered: true
     }
-  ));
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -138,27 +138,36 @@ var SelectElement = (props) => {
 };
 
 // src/Components/RadioElement.tsx
-import React6 from "react";
+import React6, { useState as useState2 } from "react";
 import { Radio } from "antd";
 var RadioElement = (props) => {
+  const [isDisabled, setIsDisabled] = useState2(props.disabled);
   const handleChange = (e) => {
     if (props.onChange) {
       const selectedVal = e.target.value;
       const selectedOptions = [{ id: selectedVal, value: selectedVal }];
       props.onChange(selectedOptions);
+      setIsDisabled(true);
     }
   };
-  return /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange }, "D"));
+  return /* @__PURE__ */ React6.createElement(
+    Radio.Group,
+    {
+      options: props.options,
+      onChange: handleChange,
+      disabled: isDisabled
+    }
+  );
 };
 
 // src/Components/Checkbox.tsx
-import React7, { useState as useState2 } from "react";
+import React7, { useState as useState3 } from "react";
 import { Checkbox, Divider } from "antd";
 var CheckboxGroup = Checkbox.Group;
 var plainOptions = ["Apple", "Pear", "Orange"];
 var defaultCheckedList = [];
 var CheckboxElement = (props) => {
-  const [checkedList, setCheckedList] = useState2(defaultCheckedList);
+  const [checkedList, setCheckedList] = useState3(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
   const handleChange = (list) => {
     setCheckedList(list);
@@ -312,36 +321,129 @@ import { Button as Button2, Flex as Flex2 } from "antd";
 var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React11.createElement(Button2, { type: "primary" }, "Primary Button"));
 
 // src/Components/AddMoreTable.tsx
-import React12 from "react";
-import { Table } from "antd";
+import React12, { useEffect, useState as useState4 } from "react";
+import { Table, Button as Button3 } from "antd";
+import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
+  const [rows, setRows] = useState4(tbody || []);
+  const onHandleRows = () => {
+    const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
+    let newRow = {
+      id: newId,
+      label: "Medicine",
+      name: "Medicine",
+      type: "text",
+      variable_data: [
+        {
+          id: 1,
+          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" },
+          SubRows: { delete: "delete", add: "plus" }
+        }
+      ]
+    };
+    setRows((prevData) => [...prevData, newRow]);
+  };
+  const onHandleDelete = (id) => {
+    setRows((prevRows) => prevRows.filter((row) => row.id !== id));
+  };
+  const onHandleSubRowsAdd = (rowIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const newSubRow = {
+            id: row.variable_data.length + 1,
+            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" },
+            SubRows: { delete: "delete", add: "plus" }
+          };
+          const updatedVariableData = [...row.variable_data, newSubRow];
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  const onHandleSubRowsDelete = (rowIndex, subIndex) => {
+    setRows((prevRows) => {
+      return prevRows.map((row, index) => {
+        if (index === rowIndex) {
+          const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
+          return {
+            ...row,
+            variable_data: updatedVariableData
+          };
+        }
+        return row;
+      });
+    });
+  };
+  useEffect(() => {
+    console.log(rows);
+  }, [rows]);
+  const renderInputElement = (element, value) => {
+    if (!element)
+      return null;
+    const { element: type, label } = element;
+    if (type === "single-select") {
+      return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2) });
+    } else if (type === "textarea") {
+      return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2) });
+    } else {
+      return null;
+    }
+  };
+  const dataSource = rows.map((eachRow, rowIndex) => {
+    const rowData = {
+      key: eachRow.id,
+      "#": rowIndex + 1
+    };
+    rowData["Medicine"] = renderInputElement(eachRow.variable_data[0].Medicine);
+    eachRow.variable_data.map((variable, subIndex) => {
+      Object.keys(variable).forEach((key) => {
+        if (key === "SubRows") {
+          rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+        } else {
+          rowData[`${key}`] = renderInputElement(variable[key]);
+        }
+      });
+    });
+    rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+    return rowData;
+  });
   const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
     title: eachHeadEl.label,
     dataIndex: eachHeadEl.name,
     key: eachHeadEl.id
   })) : [];
-  const dataSource = tbody && tbody.length > 0 ? tbody.map((eachRow, index) => {
-    const variableData = eachRow.variable_data.reduce((acc, curr) => {
-      acc[curr.label] = curr.element;
-      return acc;
-    }, {});
-    return {
-      key: index.toString(),
-      ...variableData,
-      ...eachRow
-    };
-    console.log("eachRow---------", eachRow);
-    console.log("VariableData", { ...variableData });
-  }) : [];
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+  if (!columns.some((col) => col.dataIndex === "actions")) {
+    columns.push({
+      title: "Actions",
+      dataIndex: "actions",
+      key: "actions"
+    });
+  }
+  return /* @__PURE__ */ React12.createElement(
     Table,
     {
       columns,
-      expandable: { defaultExpandedRowKeys: ["0"] },
-      dataSource
+      dataSource,
+      pagination: false,
+      bordered: true
     }
-  ));
+  );
 };
 export {
   AddMoreTable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.11-Beta1",
+  "version": "0.0.11-Beta100",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",