@apexcura/ui-components 0.0.12-Beta4 → 0.0.12-Beta40

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 +9 -3
  2. package/dist/index.d.ts +9 -3
  3. package/dist/index.js +155 -53
  4. package/dist/index.mjs +160 -58
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,28 +1,34 @@
1
1
  import React$1 from 'react';
2
2
 
3
3
  type ElementType = {
4
+ selectedStyle: boolean;
5
+ style: boolean;
6
+ className: string | undefined;
4
7
  placeholder?: string;
5
8
  addonBefore?: React.ReactNode;
6
9
  defaultValue?: string;
7
10
  disabled?: boolean;
8
11
  prefix?: React.ReactNode;
9
12
  type?: string;
10
- value?: string | number | boolean | any[];
13
+ value?: string | number | boolean | any[] | null;
11
14
  status?: "error" | "warning";
12
15
  styles?: React.CSSProperties;
13
- classNames?: string;
14
16
  variant?: "outlined" | "borderless" | "filled";
15
17
  label?: string;
16
18
  name?: string;
17
19
  suffix?: React.ReactNode;
18
20
  maxLength?: number;
19
21
  fieldNames?: any[];
22
+ options?: any[];
20
23
  onChange?: (value: string | number | boolean | any[]) => void;
21
24
  dropDownOptions?: any[];
22
25
  id?: number;
23
26
  thead?: any[];
24
27
  tbody?: any[];
25
28
  variable_data?: any[];
29
+ optionType?: string;
30
+ selectedClassName?: string;
31
+ action?: React.MouseEventHandler<HTMLElement> | string;
26
32
  };
27
33
 
28
34
  interface ElementExecuterProps$3 extends ElementType {
@@ -67,7 +73,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
67
73
 
68
74
  declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
69
75
 
70
- declare const ButtonElement: () => React$1.JSX.Element;
76
+ declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
71
77
 
72
78
  declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
73
79
 
package/dist/index.d.ts CHANGED
@@ -1,28 +1,34 @@
1
1
  import React$1 from 'react';
2
2
 
3
3
  type ElementType = {
4
+ selectedStyle: boolean;
5
+ style: boolean;
6
+ className: string | undefined;
4
7
  placeholder?: string;
5
8
  addonBefore?: React.ReactNode;
6
9
  defaultValue?: string;
7
10
  disabled?: boolean;
8
11
  prefix?: React.ReactNode;
9
12
  type?: string;
10
- value?: string | number | boolean | any[];
13
+ value?: string | number | boolean | any[] | null;
11
14
  status?: "error" | "warning";
12
15
  styles?: React.CSSProperties;
13
- classNames?: string;
14
16
  variant?: "outlined" | "borderless" | "filled";
15
17
  label?: string;
16
18
  name?: string;
17
19
  suffix?: React.ReactNode;
18
20
  maxLength?: number;
19
21
  fieldNames?: any[];
22
+ options?: any[];
20
23
  onChange?: (value: string | number | boolean | any[]) => void;
21
24
  dropDownOptions?: any[];
22
25
  id?: number;
23
26
  thead?: any[];
24
27
  tbody?: any[];
25
28
  variable_data?: any[];
29
+ optionType?: string;
30
+ selectedClassName?: string;
31
+ action?: React.MouseEventHandler<HTMLElement> | string;
26
32
  };
27
33
 
28
34
  interface ElementExecuterProps$3 extends ElementType {
@@ -67,7 +73,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
67
73
 
68
74
  declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
69
75
 
70
- declare const ButtonElement: () => React$1.JSX.Element;
76
+ declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
71
77
 
72
78
  declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
73
79
 
package/dist/index.js CHANGED
@@ -62,7 +62,7 @@ var TextElement = (props) => {
62
62
  type: props.type,
63
63
  status: props.status,
64
64
  style: props.styles,
65
- className: props.classNames,
65
+ className: props.className,
66
66
  variant: props.variant,
67
67
  name: props.name,
68
68
  onChange: (e) => props.onChange(e.target.value)
@@ -115,8 +115,7 @@ var NumberElement = (props) => {
115
115
  prefix: props.prefix,
116
116
  type: props.type,
117
117
  status: props.status,
118
- style: props.styles,
119
- className: props.classNames,
118
+ className: props.className,
120
119
  variant: props.variant,
121
120
  name: props.name,
122
121
  onChange: handleInputChange
@@ -129,7 +128,7 @@ var import_react4 = __toESM(require("react"));
129
128
  var import_antd4 = require("antd");
130
129
  var { TextArea } = import_antd4.Input;
131
130
  var TextareaElement = (props) => {
132
- return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ import_react4.default.createElement(
131
+ return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, null, /* @__PURE__ */ import_react4.default.createElement(
133
132
  TextArea,
134
133
  {
135
134
  placeholder: props.placeholder,
@@ -138,8 +137,7 @@ var TextareaElement = (props) => {
138
137
  disabled: props.disabled,
139
138
  id: props.name,
140
139
  status: props.status,
141
- style: props.styles,
142
- className: props.classNames,
140
+ className: props.className,
143
141
  variant: props.variant,
144
142
  name: props.name,
145
143
  showCount: true,
@@ -177,7 +175,7 @@ var SelectElement = (props) => {
177
175
  id: props.name,
178
176
  status: props.status,
179
177
  style: props.styles,
180
- className: props.classNames,
178
+ className: props.className,
181
179
  variant: props.variant,
182
180
  onChange: handleChange
183
181
  }
@@ -188,14 +186,44 @@ var SelectElement = (props) => {
188
186
  var import_react6 = __toESM(require("react"));
189
187
  var import_antd6 = require("antd");
190
188
  var RadioElement = (props) => {
189
+ const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
190
+ const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
191
+ let optionType;
192
+ if (props.optionType === "button") {
193
+ optionType = props.optionType;
194
+ }
191
195
  const handleChange = (e) => {
196
+ const selectedVal = e.target.value;
197
+ const selectedOptions = [{ id: selectedVal, value: selectedVal }];
198
+ setSelectedValue(selectedVal);
199
+ setIsDisabled(true);
192
200
  if (props.onChange) {
193
- const selectedVal = e.target.value;
194
- const selectedOptions = [{ id: selectedVal, value: selectedVal }];
195
201
  props.onChange(selectedOptions);
196
202
  }
197
203
  };
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"));
204
+ const getButtonStyle = (option) => {
205
+ return selectedValue === option.value ? option.selectedClassName : option.className;
206
+ };
207
+ return /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement(
208
+ import_antd6.Radio.Group,
209
+ {
210
+ onChange: handleChange,
211
+ optionType,
212
+ className: props.className ? props.className : "",
213
+ value: selectedValue
214
+ },
215
+ props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
216
+ import_antd6.Radio,
217
+ {
218
+ key: option.value,
219
+ value: option.value,
220
+ disabled: isDisabled && selectedValue !== option.value,
221
+ className: getButtonStyle(option),
222
+ style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
223
+ },
224
+ option.label
225
+ ))
226
+ ));
199
227
  };
200
228
 
201
229
  // src/Components/Checkbox.tsx
@@ -229,7 +257,7 @@ var CheckboxElement = (props) => {
229
257
  disabled: props.disabled,
230
258
  id: props.name,
231
259
  style: props.styles,
232
- className: props.classNames,
260
+ className: props.className,
233
261
  onChange: onHandleAllChanges,
234
262
  checked: checkAll
235
263
  },
@@ -239,7 +267,7 @@ var CheckboxElement = (props) => {
239
267
  {
240
268
  disabled: props.disabled,
241
269
  style: props.styles,
242
- className: props.classNames,
270
+ className: props.className,
243
271
  options: plainOptions,
244
272
  value: checkedList,
245
273
  onChange: handleChange
@@ -356,67 +384,141 @@ var MultipleSelectElement = (props) => {
356
384
  // src/Components/Button.tsx
357
385
  var import_react12 = __toESM(require("react"));
358
386
  var import_antd10 = require("antd");
359
- var ButtonElement = () => /* @__PURE__ */ import_react12.default.createElement(import_antd10.Flex, { gap: "small" }, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { type: "primary" }, "Primary Button"));
387
+ var ButtonElement = (props) => {
388
+ const handleClick = typeof props.action === "string" ? () => {
389
+ console.log("Performing action:", props.action);
390
+ } : props.action;
391
+ return /* @__PURE__ */ import_react12.default.createElement(import_antd10.Flex, null, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { onClick: handleClick, className: props.className }, props.label));
392
+ };
360
393
 
361
394
  // src/Components/AddMoreTable.tsx
362
395
  var import_react13 = __toESM(require("react"));
363
396
  var import_antd11 = require("antd");
397
+ var import_icons2 = require("@ant-design/icons");
364
398
  var AddMoreTable = (props) => {
365
399
  const { thead, tbody } = props;
366
- const [tableData, setTableData] = (0, import_react13.useState)({});
367
- const onHandleChange = (name, value) => {
368
- setTableData((prev) => ({ ...prev, [name]: value }));
369
- console.log(tableData);
400
+ const [rows, setRows] = (0, import_react13.useState)(tbody || []);
401
+ const onHandleRows = () => {
402
+ const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
403
+ let newRow = {
404
+ id: newId,
405
+ label: "Medicine",
406
+ name: "Medicine",
407
+ type: "text",
408
+ variable_data: [
409
+ {
410
+ id: 1,
411
+ Route: { label: "Route", element: "single-select", type: "text" },
412
+ Dose: { label: "Dose", element: "single-select", type: "text" },
413
+ Frequency: { label: "Frequency", element: "single-select", type: "text" },
414
+ When: { label: "When", element: "textarea", type: "text" },
415
+ Duration: { label: "Duration", element: "textarea", type: "text" },
416
+ Instructions: { label: "Instructions", element: "textarea", type: "text" },
417
+ SubRows: { delete: "delete", add: "plus" }
418
+ }
419
+ ]
420
+ };
421
+ setRows((prevData) => [...prevData, newRow]);
370
422
  };
371
- const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
372
- title: eachHeadEl.label,
373
- dataIndex: eachHeadEl.name,
374
- key: eachHeadEl.id
375
- })) : [];
376
- const renderInputElement = (element) => {
423
+ const onHandleDelete = (id) => {
424
+ setRows((prevRows) => prevRows.filter((row) => row.id !== id));
425
+ };
426
+ const onHandleSubRowsAdd = (rowIndex) => {
427
+ setRows((prevRows) => {
428
+ return prevRows.map((row, index) => {
429
+ if (index === rowIndex) {
430
+ const newSubRow = {
431
+ id: row.variable_data.length + 1,
432
+ Route: { label: "Route", element: "single-select", type: "text" },
433
+ Dose: { label: "Dose", element: "single-select", type: "text" },
434
+ Frequency: { label: "Frequency", element: "single-select", type: "text" },
435
+ When: { label: "When", element: "textarea", type: "text" },
436
+ Duration: { label: "Duration", element: "textarea", type: "text" },
437
+ Instructions: { label: "Instructions", element: "textarea", type: "text" },
438
+ SubRows: { delete: "delete", add: "plus" }
439
+ };
440
+ const updatedVariableData = [...row.variable_data, newSubRow];
441
+ return {
442
+ ...row,
443
+ variable_data: updatedVariableData
444
+ };
445
+ }
446
+ return row;
447
+ });
448
+ });
449
+ };
450
+ const onHandleSubRowsDelete = (rowIndex, subIndex) => {
451
+ setRows((prevRows) => {
452
+ return prevRows.map((row, index) => {
453
+ if (index === rowIndex) {
454
+ const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
455
+ return {
456
+ ...row,
457
+ variable_data: updatedVariableData
458
+ };
459
+ }
460
+ return row;
461
+ });
462
+ });
463
+ };
464
+ (0, import_react13.useEffect)(() => {
465
+ console.log(rows);
466
+ }, [rows]);
467
+ const renderInputElement = (element, value) => {
468
+ if (!element)
469
+ return null;
377
470
  const { element: type, label } = element;
378
- console.log("type....", type);
379
471
  if (type === "single-select") {
380
- return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
472
+ return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
381
473
  } else if (type === "textarea") {
382
- return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value) => onHandleChange(label, value) });
474
+ return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
383
475
  } else {
384
476
  return null;
385
477
  }
386
478
  };
387
- const dataSource = tbody && tbody.length > 0 ? tbody.map((eachRow, index) => {
388
- const rowElements = {};
389
- if (eachRow.element && eachRow.label) {
390
- rowElements[eachRow.label] = renderInputElement(eachRow);
391
- }
392
- const variableData = eachRow.variable_data && Array.isArray(eachRow.variable_data) ? eachRow.variable_data.reduce((acc, curr) => {
393
- if (!curr.label || !curr.element) {
394
- console.error(`Invalid element in row ${index}:`, curr);
395
- return acc;
396
- }
397
- acc[curr.label] = renderInputElement(curr);
398
- return acc;
399
- }, {}) : {};
400
- return {
401
- key: index.toString(),
402
- "#": index + 1,
403
- ...eachRow,
404
- ...rowElements,
405
- ...variableData
479
+ const dataSource = rows.map((eachRow, rowIndex) => {
480
+ const rowData = {
481
+ key: eachRow.id,
482
+ "#": rowIndex + 1,
483
+ "Medicine": renderInputElement({
484
+ element: eachRow.element,
485
+ label: eachRow.label
486
+ })
406
487
  };
407
- }) : [];
408
- if (!columns.some(
409
- (col) => console.log("col", col)
410
- )) {
488
+ rowData["Medicine"] = renderInputElement(eachRow.variable_data[0].Medicine);
489
+ eachRow.variable_data.map((variable, subIndex) => {
490
+ Object.keys(variable).forEach((key) => {
491
+ if (key === "SubRows") {
492
+ 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)));
493
+ } else {
494
+ rowData[`${key}`] = renderInputElement(variable[key]);
495
+ }
496
+ });
497
+ });
498
+ 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)));
499
+ return rowData;
500
+ });
501
+ const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
502
+ title: eachHeadEl.label,
503
+ dataIndex: eachHeadEl.name,
504
+ key: eachHeadEl.id
505
+ })) : [];
506
+ if (!columns.some((col) => col.dataIndex === "actions")) {
507
+ columns.push({
508
+ title: "Actions",
509
+ dataIndex: "actions",
510
+ key: "actions"
511
+ });
411
512
  }
412
- return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
513
+ return /* @__PURE__ */ import_react13.default.createElement(
413
514
  import_antd11.Table,
414
515
  {
415
516
  columns,
416
- expandable: { defaultExpandedRowKeys: ["0"] },
417
- dataSource
517
+ dataSource,
518
+ pagination: false,
519
+ bordered: true
418
520
  }
419
- ));
521
+ );
420
522
  };
421
523
  // Annotate the CommonJS export names for ESM import in node:
422
524
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -15,7 +15,7 @@ var TextElement = (props) => {
15
15
  type: props.type,
16
16
  status: props.status,
17
17
  style: props.styles,
18
- className: props.classNames,
18
+ className: props.className,
19
19
  variant: props.variant,
20
20
  name: props.name,
21
21
  onChange: (e) => props.onChange(e.target.value)
@@ -68,8 +68,7 @@ var NumberElement = (props) => {
68
68
  prefix: props.prefix,
69
69
  type: props.type,
70
70
  status: props.status,
71
- style: props.styles,
72
- className: props.classNames,
71
+ className: props.className,
73
72
  variant: props.variant,
74
73
  name: props.name,
75
74
  onChange: handleInputChange
@@ -82,7 +81,7 @@ import React4 from "react";
82
81
  import { Flex, Input as Input2 } from "antd";
83
82
  var { TextArea } = Input2;
84
83
  var TextareaElement = (props) => {
85
- return /* @__PURE__ */ React4.createElement(Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ React4.createElement(
84
+ return /* @__PURE__ */ React4.createElement(Flex, null, /* @__PURE__ */ React4.createElement(
86
85
  TextArea,
87
86
  {
88
87
  placeholder: props.placeholder,
@@ -91,8 +90,7 @@ var TextareaElement = (props) => {
91
90
  disabled: props.disabled,
92
91
  id: props.name,
93
92
  status: props.status,
94
- style: props.styles,
95
- className: props.classNames,
93
+ className: props.className,
96
94
  variant: props.variant,
97
95
  name: props.name,
98
96
  showCount: true,
@@ -130,7 +128,7 @@ var SelectElement = (props) => {
130
128
  id: props.name,
131
129
  status: props.status,
132
130
  style: props.styles,
133
- className: props.classNames,
131
+ className: props.className,
134
132
  variant: props.variant,
135
133
  onChange: handleChange
136
134
  }
@@ -138,27 +136,57 @@ var SelectElement = (props) => {
138
136
  };
139
137
 
140
138
  // src/Components/RadioElement.tsx
141
- import React6 from "react";
139
+ import React6, { useState as useState2 } from "react";
142
140
  import { Radio } from "antd";
143
141
  var RadioElement = (props) => {
142
+ const [isDisabled, setIsDisabled] = useState2(props.disabled);
143
+ const [selectedValue, setSelectedValue] = useState2(props.value);
144
+ let optionType;
145
+ if (props.optionType === "button") {
146
+ optionType = props.optionType;
147
+ }
144
148
  const handleChange = (e) => {
149
+ const selectedVal = e.target.value;
150
+ const selectedOptions = [{ id: selectedVal, value: selectedVal }];
151
+ setSelectedValue(selectedVal);
152
+ setIsDisabled(true);
145
153
  if (props.onChange) {
146
- const selectedVal = e.target.value;
147
- const selectedOptions = [{ id: selectedVal, value: selectedVal }];
148
154
  props.onChange(selectedOptions);
149
155
  }
150
156
  };
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"));
157
+ const getButtonStyle = (option) => {
158
+ return selectedValue === option.value ? option.selectedClassName : option.className;
159
+ };
160
+ return /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement(
161
+ Radio.Group,
162
+ {
163
+ onChange: handleChange,
164
+ optionType,
165
+ className: props.className ? props.className : "",
166
+ value: selectedValue
167
+ },
168
+ props.options && props.options.map((option) => /* @__PURE__ */ React6.createElement(
169
+ Radio,
170
+ {
171
+ key: option.value,
172
+ value: option.value,
173
+ disabled: isDisabled && selectedValue !== option.value,
174
+ className: getButtonStyle(option),
175
+ style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
176
+ },
177
+ option.label
178
+ ))
179
+ ));
152
180
  };
153
181
 
154
182
  // src/Components/Checkbox.tsx
155
- import React7, { useState as useState2 } from "react";
183
+ import React7, { useState as useState3 } from "react";
156
184
  import { Checkbox, Divider } from "antd";
157
185
  var CheckboxGroup = Checkbox.Group;
158
186
  var plainOptions = ["Apple", "Pear", "Orange"];
159
187
  var defaultCheckedList = [];
160
188
  var CheckboxElement = (props) => {
161
- const [checkedList, setCheckedList] = useState2(defaultCheckedList);
189
+ const [checkedList, setCheckedList] = useState3(defaultCheckedList);
162
190
  const checkAll = plainOptions.length === checkedList.length;
163
191
  const handleChange = (list) => {
164
192
  setCheckedList(list);
@@ -182,7 +210,7 @@ var CheckboxElement = (props) => {
182
210
  disabled: props.disabled,
183
211
  id: props.name,
184
212
  style: props.styles,
185
- className: props.classNames,
213
+ className: props.className,
186
214
  onChange: onHandleAllChanges,
187
215
  checked: checkAll
188
216
  },
@@ -192,7 +220,7 @@ var CheckboxElement = (props) => {
192
220
  {
193
221
  disabled: props.disabled,
194
222
  style: props.styles,
195
- className: props.classNames,
223
+ className: props.className,
196
224
  options: plainOptions,
197
225
  value: checkedList,
198
226
  onChange: handleChange
@@ -309,67 +337,141 @@ var MultipleSelectElement = (props) => {
309
337
  // src/Components/Button.tsx
310
338
  import React11 from "react";
311
339
  import { Button as Button2, Flex as Flex2 } from "antd";
312
- var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React11.createElement(Button2, { type: "primary" }, "Primary Button"));
340
+ var ButtonElement = (props) => {
341
+ const handleClick = typeof props.action === "string" ? () => {
342
+ console.log("Performing action:", props.action);
343
+ } : props.action;
344
+ return /* @__PURE__ */ React11.createElement(Flex2, null, /* @__PURE__ */ React11.createElement(Button2, { onClick: handleClick, className: props.className }, props.label));
345
+ };
313
346
 
314
347
  // src/Components/AddMoreTable.tsx
315
- import React12, { useState as useState3 } from "react";
316
- import { Table } from "antd";
348
+ import React12, { useEffect, useState as useState4 } from "react";
349
+ import { Table, Button as Button3 } from "antd";
350
+ import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
317
351
  var AddMoreTable = (props) => {
318
352
  const { thead, tbody } = props;
319
- const [tableData, setTableData] = useState3({});
320
- const onHandleChange = (name, value) => {
321
- setTableData((prev) => ({ ...prev, [name]: value }));
322
- console.log(tableData);
353
+ const [rows, setRows] = useState4(tbody || []);
354
+ const onHandleRows = () => {
355
+ const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
356
+ let newRow = {
357
+ id: newId,
358
+ label: "Medicine",
359
+ name: "Medicine",
360
+ type: "text",
361
+ variable_data: [
362
+ {
363
+ id: 1,
364
+ Route: { label: "Route", element: "single-select", type: "text" },
365
+ Dose: { label: "Dose", element: "single-select", type: "text" },
366
+ Frequency: { label: "Frequency", element: "single-select", type: "text" },
367
+ When: { label: "When", element: "textarea", type: "text" },
368
+ Duration: { label: "Duration", element: "textarea", type: "text" },
369
+ Instructions: { label: "Instructions", element: "textarea", type: "text" },
370
+ SubRows: { delete: "delete", add: "plus" }
371
+ }
372
+ ]
373
+ };
374
+ setRows((prevData) => [...prevData, newRow]);
323
375
  };
324
- const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
325
- title: eachHeadEl.label,
326
- dataIndex: eachHeadEl.name,
327
- key: eachHeadEl.id
328
- })) : [];
329
- const renderInputElement = (element) => {
376
+ const onHandleDelete = (id) => {
377
+ setRows((prevRows) => prevRows.filter((row) => row.id !== id));
378
+ };
379
+ const onHandleSubRowsAdd = (rowIndex) => {
380
+ setRows((prevRows) => {
381
+ return prevRows.map((row, index) => {
382
+ if (index === rowIndex) {
383
+ const newSubRow = {
384
+ id: row.variable_data.length + 1,
385
+ Route: { label: "Route", element: "single-select", type: "text" },
386
+ Dose: { label: "Dose", element: "single-select", type: "text" },
387
+ Frequency: { label: "Frequency", element: "single-select", type: "text" },
388
+ When: { label: "When", element: "textarea", type: "text" },
389
+ Duration: { label: "Duration", element: "textarea", type: "text" },
390
+ Instructions: { label: "Instructions", element: "textarea", type: "text" },
391
+ SubRows: { delete: "delete", add: "plus" }
392
+ };
393
+ const updatedVariableData = [...row.variable_data, newSubRow];
394
+ return {
395
+ ...row,
396
+ variable_data: updatedVariableData
397
+ };
398
+ }
399
+ return row;
400
+ });
401
+ });
402
+ };
403
+ const onHandleSubRowsDelete = (rowIndex, subIndex) => {
404
+ setRows((prevRows) => {
405
+ return prevRows.map((row, index) => {
406
+ if (index === rowIndex) {
407
+ const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
408
+ return {
409
+ ...row,
410
+ variable_data: updatedVariableData
411
+ };
412
+ }
413
+ return row;
414
+ });
415
+ });
416
+ };
417
+ useEffect(() => {
418
+ console.log(rows);
419
+ }, [rows]);
420
+ const renderInputElement = (element, value) => {
421
+ if (!element)
422
+ return null;
330
423
  const { element: type, label } = element;
331
- console.log("type....", type);
332
424
  if (type === "single-select") {
333
- return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value) => onHandleChange(label, value) });
425
+ return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
334
426
  } else if (type === "textarea") {
335
- return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value) => onHandleChange(label, value) });
427
+ return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
336
428
  } else {
337
429
  return null;
338
430
  }
339
431
  };
340
- const dataSource = tbody && tbody.length > 0 ? tbody.map((eachRow, index) => {
341
- const rowElements = {};
342
- if (eachRow.element && eachRow.label) {
343
- rowElements[eachRow.label] = renderInputElement(eachRow);
344
- }
345
- const variableData = eachRow.variable_data && Array.isArray(eachRow.variable_data) ? eachRow.variable_data.reduce((acc, curr) => {
346
- if (!curr.label || !curr.element) {
347
- console.error(`Invalid element in row ${index}:`, curr);
348
- return acc;
349
- }
350
- acc[curr.label] = renderInputElement(curr);
351
- return acc;
352
- }, {}) : {};
353
- return {
354
- key: index.toString(),
355
- "#": index + 1,
356
- ...eachRow,
357
- ...rowElements,
358
- ...variableData
432
+ const dataSource = rows.map((eachRow, rowIndex) => {
433
+ const rowData = {
434
+ key: eachRow.id,
435
+ "#": rowIndex + 1,
436
+ "Medicine": renderInputElement({
437
+ element: eachRow.element,
438
+ label: eachRow.label
439
+ })
359
440
  };
360
- }) : [];
361
- if (!columns.some(
362
- (col) => console.log("col", col)
363
- )) {
441
+ rowData["Medicine"] = renderInputElement(eachRow.variable_data[0].Medicine);
442
+ eachRow.variable_data.map((variable, subIndex) => {
443
+ Object.keys(variable).forEach((key) => {
444
+ if (key === "SubRows") {
445
+ 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)));
446
+ } else {
447
+ rowData[`${key}`] = renderInputElement(variable[key]);
448
+ }
449
+ });
450
+ });
451
+ 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)));
452
+ return rowData;
453
+ });
454
+ const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
455
+ title: eachHeadEl.label,
456
+ dataIndex: eachHeadEl.name,
457
+ key: eachHeadEl.id
458
+ })) : [];
459
+ if (!columns.some((col) => col.dataIndex === "actions")) {
460
+ columns.push({
461
+ title: "Actions",
462
+ dataIndex: "actions",
463
+ key: "actions"
464
+ });
364
465
  }
365
- return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
466
+ return /* @__PURE__ */ React12.createElement(
366
467
  Table,
367
468
  {
368
469
  columns,
369
- expandable: { defaultExpandedRowKeys: ["0"] },
370
- dataSource
470
+ dataSource,
471
+ pagination: false,
472
+ bordered: true
371
473
  }
372
- ));
474
+ );
373
475
  };
374
476
  export {
375
477
  AddMoreTable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.12-Beta4",
3
+ "version": "0.0.12-Beta40",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",