@apexcura/ui-components 0.0.12-Beta22 → 0.0.12-Beta24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +5 -1
  2. package/dist/index.d.ts +5 -1
  3. package/dist/index.js +120 -115
  4. package/dist/index.mjs +126 -121
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,13 +1,14 @@
1
1
  import React$1 from 'react';
2
2
 
3
3
  type ElementType = {
4
+ className: string | undefined;
4
5
  placeholder?: string;
5
6
  addonBefore?: React.ReactNode;
6
7
  defaultValue?: string;
7
8
  disabled?: boolean;
8
9
  prefix?: React.ReactNode;
9
10
  type?: string;
10
- value?: string | number | boolean | any[];
11
+ value?: string | number | boolean | any[] | null;
11
12
  status?: "error" | "warning";
12
13
  styles?: React.CSSProperties;
13
14
  classNames?: string;
@@ -17,12 +18,15 @@ type ElementType = {
17
18
  suffix?: React.ReactNode;
18
19
  maxLength?: number;
19
20
  fieldNames?: any[];
21
+ options?: any[];
20
22
  onChange?: (value: string | number | boolean | any[]) => void;
21
23
  dropDownOptions?: any[];
22
24
  id?: number;
23
25
  thead?: any[];
24
26
  tbody?: any[];
25
27
  variable_data?: any[];
28
+ optionType?: string;
29
+ selectedClassName?: string;
26
30
  };
27
31
 
28
32
  interface ElementExecuterProps$3 extends ElementType {
package/dist/index.d.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  import React$1 from 'react';
2
2
 
3
3
  type ElementType = {
4
+ className: string | undefined;
4
5
  placeholder?: string;
5
6
  addonBefore?: React.ReactNode;
6
7
  defaultValue?: string;
7
8
  disabled?: boolean;
8
9
  prefix?: React.ReactNode;
9
10
  type?: string;
10
- value?: string | number | boolean | any[];
11
+ value?: string | number | boolean | any[] | null;
11
12
  status?: "error" | "warning";
12
13
  styles?: React.CSSProperties;
13
14
  classNames?: string;
@@ -17,12 +18,15 @@ type ElementType = {
17
18
  suffix?: React.ReactNode;
18
19
  maxLength?: number;
19
20
  fieldNames?: any[];
21
+ options?: any[];
20
22
  onChange?: (value: string | number | boolean | any[]) => void;
21
23
  dropDownOptions?: any[];
22
24
  id?: number;
23
25
  thead?: any[];
24
26
  tbody?: any[];
25
27
  variable_data?: any[];
28
+ optionType?: string;
29
+ selectedClassName?: string;
26
30
  };
27
31
 
28
32
  interface ElementExecuterProps$3 extends ElementType {
package/dist/index.js CHANGED
@@ -188,14 +188,36 @@ var SelectElement = (props) => {
188
188
  var import_react6 = __toESM(require("react"));
189
189
  var import_antd6 = require("antd");
190
190
  var RadioElement = (props) => {
191
+ const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
192
+ const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
193
+ let optionType;
194
+ if (props.optionType === "button") {
195
+ optionType = props.optionType;
196
+ }
191
197
  const handleChange = (e) => {
198
+ const selectedVal = e.target.value;
199
+ const selectedOptions = [{ id: selectedVal, value: selectedVal }];
200
+ setSelectedValue(selectedVal);
201
+ setIsDisabled(true);
192
202
  if (props.onChange) {
193
- const selectedVal = e.target.value;
194
- const selectedOptions = [{ id: selectedVal, value: selectedVal }];
195
203
  props.onChange(selectedOptions);
196
204
  }
197
205
  };
198
- 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"));
206
+ console.log(props.options);
207
+ const radioOptions = props.options && props.options.map((option) => ({
208
+ ...option,
209
+ className: selectedValue === option.value ? option.selectedClassName : option.className,
210
+ disabled: isDisabled
211
+ }));
212
+ return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement("h6", null, "joikdf"), /* @__PURE__ */ import_react6.default.createElement(
213
+ import_antd6.Radio.Group,
214
+ {
215
+ options: radioOptions,
216
+ onChange: handleChange,
217
+ optionType,
218
+ className: props.className ? props.className : ""
219
+ }
220
+ ));
199
221
  };
200
222
 
201
223
  // src/Components/Checkbox.tsx
@@ -364,145 +386,128 @@ var import_antd11 = require("antd");
364
386
  var import_icons2 = require("@ant-design/icons");
365
387
  var AddMoreTable = (props) => {
366
388
  const { thead, tbody } = props;
367
- const [tableData, setTableData] = (0, import_react13.useState)({});
368
389
  const [rows, setRows] = (0, import_react13.useState)(tbody || []);
369
- function isColumnType(column) {
370
- return column.dataIndex !== void 0;
371
- }
372
- const onHandleChange = (name, value) => {
373
- setTableData((prev) => ({ ...prev, [name]: value }));
374
- console.log(tableData);
375
- };
376
390
  const onHandleRows = () => {
377
- const lastRow = rows[rows.length - 1];
378
- const newId = lastRow ? lastRow.id + 1 : 1;
391
+ const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
379
392
  let newRow = {
380
- ...lastRow,
381
- id: newId
393
+ id: newId,
394
+ label: "Medicine",
395
+ name: "Medicine",
396
+ type: "text",
397
+ variable_data: [
398
+ {
399
+ id: 1,
400
+ Route: { label: "Route", element: "single-select", type: "text" },
401
+ Dose: { label: "Dose", element: "single-select", type: "text" },
402
+ Frequency: { label: "Frequency", element: "single-select", type: "text" },
403
+ When: { label: "When", element: "textarea", type: "text" },
404
+ Duration: { label: "Duration", element: "textarea", type: "text" },
405
+ Instructions: { label: "Instructions", element: "textarea", type: "text" },
406
+ SubRows: { delete: "delete", add: "plus" }
407
+ }
408
+ ]
382
409
  };
383
- if (newRow.variable_data && newRow.variable_data.length > 0) {
384
- const updatedVariableData = newRow.variable_data.map((item, index) => {
385
- const { icons, ...rest } = item;
386
- return {
387
- ...rest,
388
- icons: { delete: "", plus: index === newRow.variable_data.length - 1 ? "" : void 0 }
389
- };
390
- });
391
- newRow.variable_data = updatedVariableData;
392
- }
393
410
  setRows((prevData) => [...prevData, newRow]);
394
411
  };
395
- const onHandleDelete = (index) => {
396
- if (rows.length > 1) {
397
- const remainingRows = rows.filter((eachRow) => eachRow.id !== index);
398
- setRows(remainingRows);
399
- }
412
+ const onHandleDelete = (id) => {
413
+ setRows((prevRows) => prevRows.filter((row) => row.id !== id));
400
414
  };
401
- const onHandleVariableData = (rowId) => {
402
- setRows((prevRows) => prevRows.map((row) => {
403
- if (row.id === rowId) {
404
- const newVariableDataId = row.variable_data.length > 0 ? row.variable_data[row.variable_data.length - 1].id + 1 : 1;
405
- const newVariableData = {
406
- id: newVariableDataId,
407
- Route: {
408
- label: "Route",
409
- element: "single-select",
410
- type: "text"
411
- },
412
- Dose: {
413
- label: "Dose",
414
- element: "single-select",
415
- type: "text"
416
- },
417
- Frequency: {
418
- label: "Frequency",
419
- element: "single-select",
420
- type: "text"
421
- },
422
- When: {
423
- label: "When",
424
- element: "textarea",
425
- type: "text"
426
- },
427
- Duration: {
428
- label: "Duration",
429
- element: "textarea",
430
- type: "text"
431
- },
432
- Instructions: {
433
- label: "Instructions",
434
- element: "textarea",
435
- type: "text"
436
- },
437
- icons: { delete: "delete", plus: "plus" }
438
- };
439
- const updatedVariableData = [...row.variable_data, newVariableData].map((item, index, array) => ({
440
- ...item,
441
- icons: { delete: "delete", plus: index === array.length - 1 ? "plus" : void 0 }
442
- }));
443
- return {
444
- ...row,
445
- variable_data: updatedVariableData
446
- };
447
- }
448
- return row;
449
- }));
415
+ const onHandleSubRowsAdd = (rowIndex) => {
416
+ setRows((prevRows) => {
417
+ return prevRows.map((row, index) => {
418
+ if (index === rowIndex) {
419
+ const newSubRow = {
420
+ id: row.variable_data.length + 1,
421
+ Route: { label: "Route", element: "single-select", type: "text" },
422
+ Dose: { label: "Dose", element: "single-select", type: "text" },
423
+ Frequency: { label: "Frequency", element: "single-select", type: "text" },
424
+ When: { label: "When", element: "textarea", type: "text" },
425
+ Duration: { label: "Duration", element: "textarea", type: "text" },
426
+ Instructions: { label: "Instructions", element: "textarea", type: "text" },
427
+ SubRows: { delete: "delete", add: "plus" }
428
+ };
429
+ const updatedVariableData = [...row.variable_data, newSubRow];
430
+ return {
431
+ ...row,
432
+ variable_data: updatedVariableData
433
+ };
434
+ }
435
+ return row;
436
+ });
437
+ });
450
438
  };
451
- const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
452
- title: eachHeadEl.label,
453
- dataIndex: eachHeadEl.name,
454
- key: eachHeadEl.id
455
- })) : [];
456
- const renderInputElement = (element) => {
439
+ const onHandleSubRowsDelete = (rowIndex, subIndex) => {
440
+ setRows((prevRows) => {
441
+ return prevRows.map((row, index) => {
442
+ if (index === rowIndex) {
443
+ const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
444
+ return {
445
+ ...row,
446
+ variable_data: updatedVariableData
447
+ };
448
+ }
449
+ return row;
450
+ });
451
+ });
452
+ };
453
+ (0, import_react13.useEffect)(() => {
454
+ console.log(rows);
455
+ }, [rows]);
456
+ const renderInputElement = (element, value) => {
457
+ if (!element)
458
+ return null;
457
459
  const { element: type, label } = element;
458
460
  if (type === "single-select") {
459
- return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
461
+ return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0 });
460
462
  } else if (type === "textarea") {
461
- return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value) => onHandleChange(label, value) });
463
+ return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0 });
462
464
  } else {
463
465
  return null;
464
466
  }
465
467
  };
466
- const dataSource = rows.map((eachRow, index) => {
467
- const rowElements = {};
468
- if (eachRow.element && eachRow.label) {
469
- rowElements[eachRow.label] = renderInputElement(eachRow);
470
- }
471
- if (eachRow.variable_data && Array.isArray(eachRow.variable_data)) {
472
- eachRow.variable_data.forEach((variable, varIndex) => {
473
- Object.entries(variable).forEach(([key, value]) => {
474
- if (value && value.element && value.label) {
475
- rowElements[value.label] = renderInputElement(value);
476
- }
477
- if (key === "icons") {
478
- rowElements[`icons_${varIndex}`] = /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("button", { onClick: () => onHandleDelete(eachRow.id) }, "delete"), varIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement("button", { onClick: () => onHandleVariableData(eachRow.id) }, "plus"));
479
- }
480
- });
481
- });
482
- }
483
- return {
484
- key: index.toString(),
485
- "#": index + 1,
486
- ...eachRow,
487
- ...rowElements,
488
- 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)))
468
+ const dataSource = rows.map((eachRow, rowIndex) => {
469
+ const rowData = {
470
+ key: eachRow.id,
471
+ "#": rowIndex + 1,
472
+ "Medicine": renderInputElement({
473
+ element: eachRow.element,
474
+ label: eachRow.label
475
+ })
489
476
  };
477
+ rowData["Medicine"] = renderInputElement(eachRow.variable_data[0].Medicine);
478
+ eachRow.variable_data.map((variable, subIndex) => {
479
+ Object.keys(variable).forEach((key) => {
480
+ if (key === "SubRows") {
481
+ 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)));
482
+ } else {
483
+ rowData[`${key}`] = renderInputElement(variable[key]);
484
+ }
485
+ });
486
+ });
487
+ 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)));
488
+ return rowData;
490
489
  });
491
- if (!columns.some((col) => isColumnType(col) && col.dataIndex === "actions")) {
490
+ const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
491
+ title: eachHeadEl.label,
492
+ dataIndex: eachHeadEl.name,
493
+ key: eachHeadEl.id
494
+ })) : [];
495
+ if (!columns.some((col) => col.dataIndex === "actions")) {
492
496
  columns.push({
493
497
  title: "Actions",
494
498
  dataIndex: "actions",
495
499
  key: "actions"
496
500
  });
497
501
  }
498
- return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
502
+ return /* @__PURE__ */ import_react13.default.createElement(
499
503
  import_antd11.Table,
500
504
  {
501
505
  columns,
502
- expandable: { defaultExpandedRowKeys: ["0"] },
503
- dataSource
506
+ dataSource,
507
+ pagination: false,
508
+ bordered: true
504
509
  }
505
- ));
510
+ );
506
511
  };
507
512
  // Annotate the CommonJS export names for ESM import in node:
508
513
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -138,27 +138,49 @@ var SelectElement = (props) => {
138
138
  };
139
139
 
140
140
  // src/Components/RadioElement.tsx
141
- import React6 from "react";
141
+ import React6, { useState as useState2 } from "react";
142
142
  import { Radio } from "antd";
143
143
  var RadioElement = (props) => {
144
+ const [isDisabled, setIsDisabled] = useState2(props.disabled);
145
+ const [selectedValue, setSelectedValue] = useState2(props.value);
146
+ let optionType;
147
+ if (props.optionType === "button") {
148
+ optionType = props.optionType;
149
+ }
144
150
  const handleChange = (e) => {
151
+ const selectedVal = e.target.value;
152
+ const selectedOptions = [{ id: selectedVal, value: selectedVal }];
153
+ setSelectedValue(selectedVal);
154
+ setIsDisabled(true);
145
155
  if (props.onChange) {
146
- const selectedVal = e.target.value;
147
- const selectedOptions = [{ id: selectedVal, value: selectedVal }];
148
156
  props.onChange(selectedOptions);
149
157
  }
150
158
  };
151
- 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"));
159
+ console.log(props.options);
160
+ const radioOptions = props.options && props.options.map((option) => ({
161
+ ...option,
162
+ className: selectedValue === option.value ? option.selectedClassName : option.className,
163
+ disabled: isDisabled
164
+ }));
165
+ return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("h6", null, "joikdf"), /* @__PURE__ */ React6.createElement(
166
+ Radio.Group,
167
+ {
168
+ options: radioOptions,
169
+ onChange: handleChange,
170
+ optionType,
171
+ className: props.className ? props.className : ""
172
+ }
173
+ ));
152
174
  };
153
175
 
154
176
  // src/Components/Checkbox.tsx
155
- import React7, { useState as useState2 } from "react";
177
+ import React7, { useState as useState3 } from "react";
156
178
  import { Checkbox, Divider } from "antd";
157
179
  var CheckboxGroup = Checkbox.Group;
158
180
  var plainOptions = ["Apple", "Pear", "Orange"];
159
181
  var defaultCheckedList = [];
160
182
  var CheckboxElement = (props) => {
161
- const [checkedList, setCheckedList] = useState2(defaultCheckedList);
183
+ const [checkedList, setCheckedList] = useState3(defaultCheckedList);
162
184
  const checkAll = plainOptions.length === checkedList.length;
163
185
  const handleChange = (list) => {
164
186
  setCheckedList(list);
@@ -312,150 +334,133 @@ import { Button as Button2, Flex as Flex2 } from "antd";
312
334
  var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React11.createElement(Button2, { type: "primary" }, "Primary Button"));
313
335
 
314
336
  // src/Components/AddMoreTable.tsx
315
- import React12, { useState as useState3 } from "react";
316
- import { Table } from "antd";
337
+ import React12, { useEffect, useState as useState4 } from "react";
338
+ import { Table, Button as Button3 } from "antd";
317
339
  import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
318
340
  var AddMoreTable = (props) => {
319
341
  const { thead, tbody } = props;
320
- const [tableData, setTableData] = useState3({});
321
- const [rows, setRows] = useState3(tbody || []);
322
- function isColumnType(column) {
323
- return column.dataIndex !== void 0;
324
- }
325
- const onHandleChange = (name, value) => {
326
- setTableData((prev) => ({ ...prev, [name]: value }));
327
- console.log(tableData);
328
- };
342
+ const [rows, setRows] = useState4(tbody || []);
329
343
  const onHandleRows = () => {
330
- const lastRow = rows[rows.length - 1];
331
- const newId = lastRow ? lastRow.id + 1 : 1;
344
+ const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
332
345
  let newRow = {
333
- ...lastRow,
334
- id: newId
346
+ id: newId,
347
+ label: "Medicine",
348
+ name: "Medicine",
349
+ type: "text",
350
+ variable_data: [
351
+ {
352
+ id: 1,
353
+ Route: { label: "Route", element: "single-select", type: "text" },
354
+ Dose: { label: "Dose", element: "single-select", type: "text" },
355
+ Frequency: { label: "Frequency", element: "single-select", type: "text" },
356
+ When: { label: "When", element: "textarea", type: "text" },
357
+ Duration: { label: "Duration", element: "textarea", type: "text" },
358
+ Instructions: { label: "Instructions", element: "textarea", type: "text" },
359
+ SubRows: { delete: "delete", add: "plus" }
360
+ }
361
+ ]
335
362
  };
336
- if (newRow.variable_data && newRow.variable_data.length > 0) {
337
- const updatedVariableData = newRow.variable_data.map((item, index) => {
338
- const { icons, ...rest } = item;
339
- return {
340
- ...rest,
341
- icons: { delete: "", plus: index === newRow.variable_data.length - 1 ? "" : void 0 }
342
- };
343
- });
344
- newRow.variable_data = updatedVariableData;
345
- }
346
363
  setRows((prevData) => [...prevData, newRow]);
347
364
  };
348
- const onHandleDelete = (index) => {
349
- if (rows.length > 1) {
350
- const remainingRows = rows.filter((eachRow) => eachRow.id !== index);
351
- setRows(remainingRows);
352
- }
365
+ const onHandleDelete = (id) => {
366
+ setRows((prevRows) => prevRows.filter((row) => row.id !== id));
353
367
  };
354
- const onHandleVariableData = (rowId) => {
355
- setRows((prevRows) => prevRows.map((row) => {
356
- if (row.id === rowId) {
357
- const newVariableDataId = row.variable_data.length > 0 ? row.variable_data[row.variable_data.length - 1].id + 1 : 1;
358
- const newVariableData = {
359
- id: newVariableDataId,
360
- Route: {
361
- label: "Route",
362
- element: "single-select",
363
- type: "text"
364
- },
365
- Dose: {
366
- label: "Dose",
367
- element: "single-select",
368
- type: "text"
369
- },
370
- Frequency: {
371
- label: "Frequency",
372
- element: "single-select",
373
- type: "text"
374
- },
375
- When: {
376
- label: "When",
377
- element: "textarea",
378
- type: "text"
379
- },
380
- Duration: {
381
- label: "Duration",
382
- element: "textarea",
383
- type: "text"
384
- },
385
- Instructions: {
386
- label: "Instructions",
387
- element: "textarea",
388
- type: "text"
389
- },
390
- icons: { delete: "delete", plus: "plus" }
391
- };
392
- const updatedVariableData = [...row.variable_data, newVariableData].map((item, index, array) => ({
393
- ...item,
394
- icons: { delete: "delete", plus: index === array.length - 1 ? "plus" : void 0 }
395
- }));
396
- return {
397
- ...row,
398
- variable_data: updatedVariableData
399
- };
400
- }
401
- return row;
402
- }));
368
+ const onHandleSubRowsAdd = (rowIndex) => {
369
+ setRows((prevRows) => {
370
+ return prevRows.map((row, index) => {
371
+ if (index === rowIndex) {
372
+ const newSubRow = {
373
+ id: row.variable_data.length + 1,
374
+ Route: { label: "Route", element: "single-select", type: "text" },
375
+ Dose: { label: "Dose", element: "single-select", type: "text" },
376
+ Frequency: { label: "Frequency", element: "single-select", type: "text" },
377
+ When: { label: "When", element: "textarea", type: "text" },
378
+ Duration: { label: "Duration", element: "textarea", type: "text" },
379
+ Instructions: { label: "Instructions", element: "textarea", type: "text" },
380
+ SubRows: { delete: "delete", add: "plus" }
381
+ };
382
+ const updatedVariableData = [...row.variable_data, newSubRow];
383
+ return {
384
+ ...row,
385
+ variable_data: updatedVariableData
386
+ };
387
+ }
388
+ return row;
389
+ });
390
+ });
403
391
  };
404
- const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
405
- title: eachHeadEl.label,
406
- dataIndex: eachHeadEl.name,
407
- key: eachHeadEl.id
408
- })) : [];
409
- const renderInputElement = (element) => {
392
+ const onHandleSubRowsDelete = (rowIndex, subIndex) => {
393
+ setRows((prevRows) => {
394
+ return prevRows.map((row, index) => {
395
+ if (index === rowIndex) {
396
+ const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
397
+ return {
398
+ ...row,
399
+ variable_data: updatedVariableData
400
+ };
401
+ }
402
+ return row;
403
+ });
404
+ });
405
+ };
406
+ useEffect(() => {
407
+ console.log(rows);
408
+ }, [rows]);
409
+ const renderInputElement = (element, value) => {
410
+ if (!element)
411
+ return null;
410
412
  const { element: type, label } = element;
411
413
  if (type === "single-select") {
412
- return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
414
+ return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0 });
413
415
  } else if (type === "textarea") {
414
- return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value) => onHandleChange(label, value) });
416
+ return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0 });
415
417
  } else {
416
418
  return null;
417
419
  }
418
420
  };
419
- const dataSource = rows.map((eachRow, index) => {
420
- const rowElements = {};
421
- if (eachRow.element && eachRow.label) {
422
- rowElements[eachRow.label] = renderInputElement(eachRow);
423
- }
424
- if (eachRow.variable_data && Array.isArray(eachRow.variable_data)) {
425
- eachRow.variable_data.forEach((variable, varIndex) => {
426
- Object.entries(variable).forEach(([key, value]) => {
427
- if (value && value.element && value.label) {
428
- rowElements[value.label] = renderInputElement(value);
429
- }
430
- if (key === "icons") {
431
- rowElements[`icons_${varIndex}`] = /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("button", { onClick: () => onHandleDelete(eachRow.id) }, "delete"), varIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement("button", { onClick: () => onHandleVariableData(eachRow.id) }, "plus"));
432
- }
433
- });
434
- });
435
- }
436
- return {
437
- key: index.toString(),
438
- "#": index + 1,
439
- ...eachRow,
440
- ...rowElements,
441
- 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)))
421
+ const dataSource = rows.map((eachRow, rowIndex) => {
422
+ const rowData = {
423
+ key: eachRow.id,
424
+ "#": rowIndex + 1,
425
+ "Medicine": renderInputElement({
426
+ element: eachRow.element,
427
+ label: eachRow.label
428
+ })
442
429
  };
430
+ rowData["Medicine"] = renderInputElement(eachRow.variable_data[0].Medicine);
431
+ eachRow.variable_data.map((variable, subIndex) => {
432
+ Object.keys(variable).forEach((key) => {
433
+ if (key === "SubRows") {
434
+ 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)));
435
+ } else {
436
+ rowData[`${key}`] = renderInputElement(variable[key]);
437
+ }
438
+ });
439
+ });
440
+ 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)));
441
+ return rowData;
443
442
  });
444
- if (!columns.some((col) => isColumnType(col) && col.dataIndex === "actions")) {
443
+ const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
444
+ title: eachHeadEl.label,
445
+ dataIndex: eachHeadEl.name,
446
+ key: eachHeadEl.id
447
+ })) : [];
448
+ if (!columns.some((col) => col.dataIndex === "actions")) {
445
449
  columns.push({
446
450
  title: "Actions",
447
451
  dataIndex: "actions",
448
452
  key: "actions"
449
453
  });
450
454
  }
451
- return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
455
+ return /* @__PURE__ */ React12.createElement(
452
456
  Table,
453
457
  {
454
458
  columns,
455
- expandable: { defaultExpandedRowKeys: ["0"] },
456
- dataSource
459
+ dataSource,
460
+ pagination: false,
461
+ bordered: true
457
462
  }
458
- ));
463
+ );
459
464
  };
460
465
  export {
461
466
  AddMoreTable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.12-Beta22",
3
+ "version": "0.0.12-Beta24",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",