@apexcura/ui-components 0.0.13-Beta29 → 0.0.13-Beta3

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 +26 -17
  2. package/dist/index.d.ts +26 -17
  3. package/dist/index.js +33 -150
  4. package/dist/index.mjs +42 -155
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -25,7 +25,7 @@ type ElementType = {
25
25
  fields?: any[];
26
26
  schema?: any[];
27
27
  options?: any[];
28
- onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
28
+ onChange?: (value: string | number | boolean | object | any[]) => void;
29
29
  onClick?: () => void;
30
30
  dropDownOptions?: any[];
31
31
  id?: number;
@@ -54,17 +54,34 @@ type ElementType = {
54
54
  iconsClassName?: string;
55
55
  labelClassName?: string;
56
56
  containerClassName?: string;
57
- selectBefore?: any[];
58
- selectAfter?: any[];
59
57
  };
60
58
 
61
- declare const TextElement: (props: ElementType) => React$1.JSX.Element;
59
+ interface ElementExecuterProps$3 extends ElementType {
60
+ onChange: (value: string | number | boolean | object | any[]) => void;
61
+ }
62
+ declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
62
63
 
63
- declare const PasswordElement: (props: ElementType) => React$1.JSX.Element;
64
+ interface InputData {
65
+ placeholder?: string;
66
+ id?: string;
67
+ prefix?: React$1.ReactNode;
68
+ addonBefore?: React$1.ReactNode;
69
+ type?: string;
70
+ }
71
+ interface PasswordProps {
72
+ inputData: InputData;
73
+ }
74
+ declare const PasswordElement: React$1.FC<PasswordProps>;
64
75
 
65
- declare const NumberElement: (props: ElementType) => React$1.JSX.Element;
76
+ interface ElementExecuterProps$2 extends ElementType {
77
+ onChange: (value: string | number | object | boolean | any[]) => void;
78
+ }
79
+ declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
66
80
 
67
- declare const TextareaElement: (props: ElementType) => React$1.JSX.Element;
81
+ interface ElementExecuterProps$1 extends ElementType {
82
+ onChange: (value: string | number | boolean | object | any[]) => void;
83
+ }
84
+ declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
68
85
 
69
86
  declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
70
87
 
@@ -73,7 +90,7 @@ declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
73
90
  declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
74
91
 
75
92
  interface ElementExecuterProps extends ElementType {
76
- onChange: (value: string | number | object | boolean | any[] | undefined) => void;
93
+ onChange: (value: string | number | object | boolean | any[]) => void;
77
94
  }
78
95
  declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
79
96
 
@@ -95,12 +112,4 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
95
112
 
96
113
  declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
97
114
 
98
- declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
99
-
100
- declare const Image: (props: ElementType) => React$1.JSX.Element;
101
-
102
- declare const SingleCheckbox: (props: ElementType) => React$1.JSX.Element;
103
-
104
- declare const MultiSelect: (props: ElementType) => React$1.JSX.Element;
105
-
106
- export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Image, MultiSelect, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, TableElement, TextElement, TextareaElement, UploadElement };
115
+ export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
package/dist/index.d.ts CHANGED
@@ -25,7 +25,7 @@ type ElementType = {
25
25
  fields?: any[];
26
26
  schema?: any[];
27
27
  options?: any[];
28
- onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
28
+ onChange?: (value: string | number | boolean | object | any[]) => void;
29
29
  onClick?: () => void;
30
30
  dropDownOptions?: any[];
31
31
  id?: number;
@@ -54,17 +54,34 @@ type ElementType = {
54
54
  iconsClassName?: string;
55
55
  labelClassName?: string;
56
56
  containerClassName?: string;
57
- selectBefore?: any[];
58
- selectAfter?: any[];
59
57
  };
60
58
 
61
- declare const TextElement: (props: ElementType) => React$1.JSX.Element;
59
+ interface ElementExecuterProps$3 extends ElementType {
60
+ onChange: (value: string | number | boolean | object | any[]) => void;
61
+ }
62
+ declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
62
63
 
63
- declare const PasswordElement: (props: ElementType) => React$1.JSX.Element;
64
+ interface InputData {
65
+ placeholder?: string;
66
+ id?: string;
67
+ prefix?: React$1.ReactNode;
68
+ addonBefore?: React$1.ReactNode;
69
+ type?: string;
70
+ }
71
+ interface PasswordProps {
72
+ inputData: InputData;
73
+ }
74
+ declare const PasswordElement: React$1.FC<PasswordProps>;
64
75
 
65
- declare const NumberElement: (props: ElementType) => React$1.JSX.Element;
76
+ interface ElementExecuterProps$2 extends ElementType {
77
+ onChange: (value: string | number | object | boolean | any[]) => void;
78
+ }
79
+ declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
66
80
 
67
- declare const TextareaElement: (props: ElementType) => React$1.JSX.Element;
81
+ interface ElementExecuterProps$1 extends ElementType {
82
+ onChange: (value: string | number | boolean | object | any[]) => void;
83
+ }
84
+ declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
68
85
 
69
86
  declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
70
87
 
@@ -73,7 +90,7 @@ declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
73
90
  declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
74
91
 
75
92
  interface ElementExecuterProps extends ElementType {
76
- onChange: (value: string | number | object | boolean | any[] | undefined) => void;
93
+ onChange: (value: string | number | object | boolean | any[]) => void;
77
94
  }
78
95
  declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
79
96
 
@@ -95,12 +112,4 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
95
112
 
96
113
  declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
97
114
 
98
- declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
99
-
100
- declare const Image: (props: ElementType) => React$1.JSX.Element;
101
-
102
- declare const SingleCheckbox: (props: ElementType) => React$1.JSX.Element;
103
-
104
- declare const MultiSelect: (props: ElementType) => React$1.JSX.Element;
105
-
106
- export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Image, MultiSelect, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, TableElement, TextElement, TextareaElement, UploadElement };
115
+ export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
package/dist/index.js CHANGED
@@ -36,8 +36,6 @@ __export(src_exports, {
36
36
  CkEditor: () => CkEditor,
37
37
  DatePickerElement: () => DatePickerElement,
38
38
  DateRangePickerElement: () => DateRangePickerElement,
39
- Image: () => Image,
40
- MultiSelect: () => MultiSelect,
41
39
  MultipleSelectElement: () => MultipleSelectElement,
42
40
  Navbar: () => Navbar,
43
41
  NumberElement: () => NumberElement,
@@ -45,12 +43,10 @@ __export(src_exports, {
45
43
  RadioElement: () => RadioElement,
46
44
  SelectElement: () => SelectElement,
47
45
  Sidebar: () => Sidebar,
48
- SingleCheckbox: () => SingleCheckbox,
49
46
  SingleSelectElement: () => SingleSelectElement,
50
47
  TableElement: () => TableElement,
51
48
  TextElement: () => TextElement,
52
- TextareaElement: () => TextareaElement,
53
- UploadElement: () => UploadElement
49
+ TextareaElement: () => TextareaElement
54
50
  });
55
51
  module.exports = __toCommonJS(src_exports);
56
52
 
@@ -58,12 +54,7 @@ module.exports = __toCommonJS(src_exports);
58
54
  var import_react = __toESM(require("react"));
59
55
  var import_antd = require("antd");
60
56
  var TextElement = (props) => {
61
- const handleChange = (e) => {
62
- if (props.onChange) {
63
- props.onChange(e.target.value);
64
- }
65
- };
66
- return /* @__PURE__ */ import_react.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react.default.createElement(
57
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.label && /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
67
58
  import_antd.Input,
68
59
  {
69
60
  placeholder: props.placeholder,
@@ -79,9 +70,7 @@ var TextElement = (props) => {
79
70
  className: props.className,
80
71
  variant: props.variant,
81
72
  name: props.name,
82
- onChange: (e) => {
83
- handleChange(e);
84
- }
73
+ onChange: (e) => props.onChange(e.target.value)
85
74
  }
86
75
  ));
87
76
  };
@@ -90,46 +79,36 @@ var TextElement = (props) => {
90
79
  var import_react2 = __toESM(require("react"));
91
80
  var import_icons = require("@ant-design/icons");
92
81
  var import_antd2 = require("antd");
93
- var PasswordElement = (props) => {
82
+ var PasswordElement = ({ inputData }) => {
94
83
  const [passwordVisible, setPasswordVisible] = (0, import_react2.useState)(false);
95
84
  const handleVisibilityToggle = () => {
96
85
  setPasswordVisible((prev) => !prev);
97
86
  };
98
- const handleChange = (e) => {
99
- if (props.onChange) {
100
- props.onChange(e.target.value);
101
- }
102
- };
103
87
  const renderVisibilityIcon = (visible) => visible ? /* @__PURE__ */ import_react2.default.createElement(import_icons.EyeTwoTone, null) : /* @__PURE__ */ import_react2.default.createElement(import_icons.EyeInvisibleOutlined, null);
104
- return /* @__PURE__ */ import_react2.default.createElement("div", { className: props.containerClassName }, /* @__PURE__ */ import_react2.default.createElement("label", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react2.default.createElement(
88
+ const renderPasswordInput = () => /* @__PURE__ */ import_react2.default.createElement(
105
89
  import_antd2.Input.Password,
106
90
  {
107
- placeholder: props.placeholder,
108
- className: props.className,
109
- type: props.type,
110
- onChange: (e) => {
111
- handleChange(e);
112
- },
91
+ placeholder: inputData.placeholder,
92
+ id: inputData.id,
93
+ prefix: inputData.prefix,
94
+ addonBefore: inputData.addonBefore,
95
+ type: inputData.type,
113
96
  iconRender: renderVisibilityIcon,
114
- visibilityToggle: {
115
- visible: passwordVisible,
116
- onVisibleChange: handleVisibilityToggle
117
- }
97
+ visibilityToggle: { visible: passwordVisible, onVisibleChange: handleVisibilityToggle }
118
98
  }
119
- ));
99
+ );
100
+ return /* @__PURE__ */ import_react2.default.createElement(import_antd2.Space, { direction: "vertical" }, renderPasswordInput(), /* @__PURE__ */ import_react2.default.createElement(import_antd2.Space, { direction: "horizontal" }, renderPasswordInput(), /* @__PURE__ */ import_react2.default.createElement(import_antd2.Button, { style: { width: 80 }, onClick: handleVisibilityToggle }, passwordVisible ? "Hide" : "Show")));
120
101
  };
121
102
 
122
103
  // src/Components/NumberElement.tsx
123
104
  var import_react3 = __toESM(require("react"));
124
105
  var import_antd3 = require("antd");
125
106
  var NumberElement = (props) => {
126
- const handleChange = (e) => {
107
+ const handleInputChange = (e) => {
127
108
  const newValue = e.target.value.replace(/[^0-9]/g, "");
128
- if (props.onChange) {
129
- props.onChange(newValue);
130
- }
109
+ props.onChange(newValue);
131
110
  };
132
- return /* @__PURE__ */ import_react3.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react3.default.createElement(
111
+ return /* @__PURE__ */ import_react3.default.createElement(
133
112
  import_antd3.Input,
134
113
  {
135
114
  placeholder: props.placeholder,
@@ -144,11 +123,9 @@ var NumberElement = (props) => {
144
123
  className: props.className,
145
124
  variant: props.variant,
146
125
  name: props.name,
147
- onChange: (e) => {
148
- handleChange(e);
149
- }
126
+ onChange: handleInputChange
150
127
  }
151
- ));
128
+ );
152
129
  };
153
130
 
154
131
  // src/Components/TextareaElement.tsx
@@ -156,12 +133,7 @@ var import_react4 = __toESM(require("react"));
156
133
  var import_antd4 = require("antd");
157
134
  var { TextArea } = import_antd4.Input;
158
135
  var TextareaElement = (props) => {
159
- const handleChange = (e) => {
160
- if (props.onChange) {
161
- props.onChange(e.target.value);
162
- }
163
- };
164
- return /* @__PURE__ */ import_react4.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react4.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react4.default.createElement(
136
+ return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, null, /* @__PURE__ */ import_react4.default.createElement(
165
137
  TextArea,
166
138
  {
167
139
  placeholder: props.placeholder,
@@ -175,9 +147,7 @@ var TextareaElement = (props) => {
175
147
  name: props.name,
176
148
  showCount: true,
177
149
  maxLength: props.maxLength,
178
- onChange: (e) => {
179
- handleChange(e);
180
- }
150
+ onChange: (e) => props.onChange(e.target.value)
181
151
  }
182
152
  ));
183
153
  };
@@ -202,7 +172,7 @@ var SelectElement = (props) => {
202
172
  import_antd5.Select,
203
173
  {
204
174
  labelRender,
205
- options: props.options,
175
+ options: props.fieldNames,
206
176
  placeholder: props.placeholder,
207
177
  allowClear: true,
208
178
  defaultValue: props.defaultValue,
@@ -245,6 +215,7 @@ var RadioElement = (props) => {
245
215
  value: selectedValue
246
216
  },
247
217
  props.options && props.options.map((option) => {
218
+ console.log(option);
248
219
  return /* @__PURE__ */ import_react6.default.createElement(
249
220
  import_antd6.Radio,
250
221
  {
@@ -267,19 +238,22 @@ var RadioElement = (props) => {
267
238
  var import_react7 = __toESM(require("react"));
268
239
  var import_antd7 = require("antd");
269
240
  var CheckboxGroup = import_antd7.Checkbox.Group;
241
+ var plainOptions = ["Apple", "Pear", "Orange"];
270
242
  var defaultCheckedList = [];
271
243
  var CheckboxElement = (props) => {
272
244
  const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
273
- const checkAll = props.options && props.options.length === checkedList.length;
245
+ const checkAll = plainOptions.length === checkedList.length;
274
246
  const handleChange = (list) => {
275
247
  setCheckedList(list);
276
248
  if (props.onChange) {
277
- const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
249
+ const selectedOptions = list.map((value) => {
250
+ return { id: list.indexOf(value), value };
251
+ });
278
252
  props.onChange(selectedOptions);
279
253
  }
280
254
  };
281
255
  const onHandleAllChanges = (e) => {
282
- const newList = e.target.checked ? props.options : [];
256
+ const newList = e.target.checked ? plainOptions : [];
283
257
  setCheckedList(newList);
284
258
  if (props.onChange) {
285
259
  props.onChange(newList);
@@ -296,13 +270,13 @@ var CheckboxElement = (props) => {
296
270
  checked: checkAll
297
271
  },
298
272
  "Check all"
299
- ), /* @__PURE__ */ import_react7.default.createElement(
273
+ ), /* @__PURE__ */ import_react7.default.createElement(import_antd7.Divider, null), /* @__PURE__ */ import_react7.default.createElement(
300
274
  CheckboxGroup,
301
275
  {
302
276
  disabled: props.disabled,
303
277
  style: props.styles,
304
278
  className: props.className,
305
- options: props.options,
279
+ options: plainOptions,
306
280
  value: checkedList,
307
281
  onChange: handleChange
308
282
  }
@@ -371,9 +345,7 @@ var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includ
371
345
  var SingleSelectElement = (props) => {
372
346
  const handleChange = (values) => {
373
347
  if (props.onChange) {
374
- const option = props.dropDownOptions?.find(
375
- (option2) => String(option2.title) === values
376
- );
348
+ const option = props.dropDownOptions?.find((option2) => String(option2.title) === values);
377
349
  const selectedOption = { id: option?.id, value: values };
378
350
  props.onChange([selectedOption]);
379
351
  }
@@ -387,11 +359,7 @@ var SingleSelectElement = (props) => {
387
359
  onChange: handleChange,
388
360
  onSearch,
389
361
  filterOption,
390
- options: props.dropDownOptions?.map((eachOption) => ({
391
- label: String(eachOption.title),
392
- value: String(eachOption.title),
393
- id: String(eachOption.id)
394
- }))
362
+ options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
395
363
  }
396
364
  );
397
365
  };
@@ -833,87 +801,6 @@ var DateRangePickerElement = (props) => {
833
801
  ];
834
802
  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
835
803
  };
836
-
837
- // src/Components/UploadElement.tsx
838
- var import_react24 = __toESM(require("react"));
839
- var import_icons5 = require("@ant-design/icons");
840
- var import_antd17 = require("antd");
841
- var uploadProps = {
842
- name: "file",
843
- multiple: true,
844
- // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
845
- headers: {
846
- authorization: "authorization-text"
847
- },
848
- onChange(info) {
849
- if (info.file.status !== "uploading") {
850
- console.log(info.file, info.fileList);
851
- }
852
- if (info.file.status === "done") {
853
- import_antd17.message.success(`${info.file.name} file uploaded successfully`);
854
- } else if (info.file.status === "error") {
855
- import_antd17.message.error(`${info.file.name} file upload failed.`);
856
- }
857
- }
858
- };
859
- var UploadElement = (props) => {
860
- return /* @__PURE__ */ import_react24.default.createElement(import_antd17.Upload, { ...uploadProps }, /* @__PURE__ */ import_react24.default.createElement(import_antd17.Button, { icon: /* @__PURE__ */ import_react24.default.createElement(import_icons5.UploadOutlined, null) }, "Click to Upload"));
861
- };
862
-
863
- // src/Components/Image.tsx
864
- var import_react25 = __toESM(require("react"));
865
- var Image = (props) => {
866
- return /* @__PURE__ */ import_react25.default.createElement("div", null, /* @__PURE__ */ import_react25.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
867
- };
868
-
869
- // src/Components/SingleCheckbox.tsx
870
- var import_react26 = __toESM(require("react"));
871
- var import_antd18 = require("antd");
872
- var SingleCheckbox = (props) => {
873
- const handleChange = (e) => {
874
- if (props.onChange) {
875
- props.onChange(e.target.checked);
876
- }
877
- };
878
- return /* @__PURE__ */ import_react26.default.createElement(import_antd18.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
879
- };
880
-
881
- // src/Components/MultiSelect.tsx
882
- var import_react27 = __toESM(require("react"));
883
- var import_antd19 = require("antd");
884
- var MultiSelect = (props) => {
885
- const options = props.options;
886
- const [selectedOptions, setSelectedOptions] = (0, import_react27.useState)([]);
887
- for (let i = 10; i < 100; i++) {
888
- options && options.push({
889
- value: i,
890
- label: i
891
- });
892
- }
893
- const handleChange = (e) => {
894
- console.log(e);
895
- setSelectedOptions((prev) => ({
896
- ...prev,
897
- [e.name]: e.value
898
- }));
899
- };
900
- console.log(selectedOptions);
901
- return /* @__PURE__ */ import_react27.default.createElement("div", { className: props.className, style: { display: "flex", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ import_react27.default.createElement(
902
- import_antd19.Select,
903
- {
904
- onChange: handleChange,
905
- variant: props.variant,
906
- options
907
- }
908
- ), /* @__PURE__ */ import_react27.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react27.default.createElement(
909
- import_antd19.Select,
910
- {
911
- onChange: handleChange,
912
- variant: props.variant,
913
- options
914
- }
915
- ));
916
- };
917
804
  // Annotate the CommonJS export names for ESM import in node:
918
805
  0 && (module.exports = {
919
806
  AddMoreTable,
@@ -922,8 +809,6 @@ var MultiSelect = (props) => {
922
809
  CkEditor,
923
810
  DatePickerElement,
924
811
  DateRangePickerElement,
925
- Image,
926
- MultiSelect,
927
812
  MultipleSelectElement,
928
813
  Navbar,
929
814
  NumberElement,
@@ -931,10 +816,8 @@ var MultiSelect = (props) => {
931
816
  RadioElement,
932
817
  SelectElement,
933
818
  Sidebar,
934
- SingleCheckbox,
935
819
  SingleSelectElement,
936
820
  TableElement,
937
821
  TextElement,
938
- TextareaElement,
939
- UploadElement
822
+ TextareaElement
940
823
  });
package/dist/index.mjs CHANGED
@@ -2,12 +2,7 @@
2
2
  import React from "react";
3
3
  import { Input as AntInput } from "antd";
4
4
  var TextElement = (props) => {
5
- const handleChange = (e) => {
6
- if (props.onChange) {
7
- props.onChange(e.target.value);
8
- }
9
- };
10
- return /* @__PURE__ */ React.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React.createElement(
5
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, props.label && /* @__PURE__ */ React.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React.createElement(
11
6
  AntInput,
12
7
  {
13
8
  placeholder: props.placeholder,
@@ -23,9 +18,7 @@ var TextElement = (props) => {
23
18
  className: props.className,
24
19
  variant: props.variant,
25
20
  name: props.name,
26
- onChange: (e) => {
27
- handleChange(e);
28
- }
21
+ onChange: (e) => props.onChange(e.target.value)
29
22
  }
30
23
  ));
31
24
  };
@@ -33,47 +26,37 @@ var TextElement = (props) => {
33
26
  // src/Components/PasswordElement.tsx
34
27
  import React2, { useState } from "react";
35
28
  import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
36
- import { Input } from "antd";
37
- var PasswordElement = (props) => {
29
+ import { Button, Input, Space } from "antd";
30
+ var PasswordElement = ({ inputData }) => {
38
31
  const [passwordVisible, setPasswordVisible] = useState(false);
39
32
  const handleVisibilityToggle = () => {
40
33
  setPasswordVisible((prev) => !prev);
41
34
  };
42
- const handleChange = (e) => {
43
- if (props.onChange) {
44
- props.onChange(e.target.value);
45
- }
46
- };
47
35
  const renderVisibilityIcon = (visible) => visible ? /* @__PURE__ */ React2.createElement(EyeTwoTone, null) : /* @__PURE__ */ React2.createElement(EyeInvisibleOutlined, null);
48
- return /* @__PURE__ */ React2.createElement("div", { className: props.containerClassName }, /* @__PURE__ */ React2.createElement("label", { className: props.labelClassName }, props.label), /* @__PURE__ */ React2.createElement(
36
+ const renderPasswordInput = () => /* @__PURE__ */ React2.createElement(
49
37
  Input.Password,
50
38
  {
51
- placeholder: props.placeholder,
52
- className: props.className,
53
- type: props.type,
54
- onChange: (e) => {
55
- handleChange(e);
56
- },
39
+ placeholder: inputData.placeholder,
40
+ id: inputData.id,
41
+ prefix: inputData.prefix,
42
+ addonBefore: inputData.addonBefore,
43
+ type: inputData.type,
57
44
  iconRender: renderVisibilityIcon,
58
- visibilityToggle: {
59
- visible: passwordVisible,
60
- onVisibleChange: handleVisibilityToggle
61
- }
45
+ visibilityToggle: { visible: passwordVisible, onVisibleChange: handleVisibilityToggle }
62
46
  }
63
- ));
47
+ );
48
+ return /* @__PURE__ */ React2.createElement(Space, { direction: "vertical" }, renderPasswordInput(), /* @__PURE__ */ React2.createElement(Space, { direction: "horizontal" }, renderPasswordInput(), /* @__PURE__ */ React2.createElement(Button, { style: { width: 80 }, onClick: handleVisibilityToggle }, passwordVisible ? "Hide" : "Show")));
64
49
  };
65
50
 
66
51
  // src/Components/NumberElement.tsx
67
52
  import React3 from "react";
68
53
  import { Input as AntInput2 } from "antd";
69
54
  var NumberElement = (props) => {
70
- const handleChange = (e) => {
55
+ const handleInputChange = (e) => {
71
56
  const newValue = e.target.value.replace(/[^0-9]/g, "");
72
- if (props.onChange) {
73
- props.onChange(newValue);
74
- }
57
+ props.onChange(newValue);
75
58
  };
76
- return /* @__PURE__ */ React3.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React3.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React3.createElement(
59
+ return /* @__PURE__ */ React3.createElement(
77
60
  AntInput2,
78
61
  {
79
62
  placeholder: props.placeholder,
@@ -88,24 +71,17 @@ var NumberElement = (props) => {
88
71
  className: props.className,
89
72
  variant: props.variant,
90
73
  name: props.name,
91
- onChange: (e) => {
92
- handleChange(e);
93
- }
74
+ onChange: handleInputChange
94
75
  }
95
- ));
76
+ );
96
77
  };
97
78
 
98
79
  // src/Components/TextareaElement.tsx
99
80
  import React4 from "react";
100
- import { Input as Input2 } from "antd";
81
+ import { Flex, Input as Input2 } from "antd";
101
82
  var { TextArea } = Input2;
102
83
  var TextareaElement = (props) => {
103
- const handleChange = (e) => {
104
- if (props.onChange) {
105
- props.onChange(e.target.value);
106
- }
107
- };
108
- return /* @__PURE__ */ React4.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React4.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React4.createElement(
84
+ return /* @__PURE__ */ React4.createElement(Flex, null, /* @__PURE__ */ React4.createElement(
109
85
  TextArea,
110
86
  {
111
87
  placeholder: props.placeholder,
@@ -119,9 +95,7 @@ var TextareaElement = (props) => {
119
95
  name: props.name,
120
96
  showCount: true,
121
97
  maxLength: props.maxLength,
122
- onChange: (e) => {
123
- handleChange(e);
124
- }
98
+ onChange: (e) => props.onChange(e.target.value)
125
99
  }
126
100
  ));
127
101
  };
@@ -146,7 +120,7 @@ var SelectElement = (props) => {
146
120
  Select,
147
121
  {
148
122
  labelRender,
149
- options: props.options,
123
+ options: props.fieldNames,
150
124
  placeholder: props.placeholder,
151
125
  allowClear: true,
152
126
  defaultValue: props.defaultValue,
@@ -189,6 +163,7 @@ var RadioElement = (props) => {
189
163
  value: selectedValue
190
164
  },
191
165
  props.options && props.options.map((option) => {
166
+ console.log(option);
192
167
  return /* @__PURE__ */ React6.createElement(
193
168
  Radio,
194
169
  {
@@ -209,21 +184,24 @@ var RadioElement = (props) => {
209
184
 
210
185
  // src/Components/Checkbox.tsx
211
186
  import React7, { useState as useState3 } from "react";
212
- import { Checkbox } from "antd";
187
+ import { Checkbox, Divider } from "antd";
213
188
  var CheckboxGroup = Checkbox.Group;
189
+ var plainOptions = ["Apple", "Pear", "Orange"];
214
190
  var defaultCheckedList = [];
215
191
  var CheckboxElement = (props) => {
216
192
  const [checkedList, setCheckedList] = useState3(defaultCheckedList);
217
- const checkAll = props.options && props.options.length === checkedList.length;
193
+ const checkAll = plainOptions.length === checkedList.length;
218
194
  const handleChange = (list) => {
219
195
  setCheckedList(list);
220
196
  if (props.onChange) {
221
- const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
197
+ const selectedOptions = list.map((value) => {
198
+ return { id: list.indexOf(value), value };
199
+ });
222
200
  props.onChange(selectedOptions);
223
201
  }
224
202
  };
225
203
  const onHandleAllChanges = (e) => {
226
- const newList = e.target.checked ? props.options : [];
204
+ const newList = e.target.checked ? plainOptions : [];
227
205
  setCheckedList(newList);
228
206
  if (props.onChange) {
229
207
  props.onChange(newList);
@@ -240,13 +218,13 @@ var CheckboxElement = (props) => {
240
218
  checked: checkAll
241
219
  },
242
220
  "Check all"
243
- ), /* @__PURE__ */ React7.createElement(
221
+ ), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(
244
222
  CheckboxGroup,
245
223
  {
246
224
  disabled: props.disabled,
247
225
  style: props.styles,
248
226
  className: props.className,
249
- options: props.options,
227
+ options: plainOptions,
250
228
  value: checkedList,
251
229
  onChange: handleChange
252
230
  }
@@ -315,9 +293,7 @@ var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includ
315
293
  var SingleSelectElement = (props) => {
316
294
  const handleChange = (values) => {
317
295
  if (props.onChange) {
318
- const option = props.dropDownOptions?.find(
319
- (option2) => String(option2.title) === values
320
- );
296
+ const option = props.dropDownOptions?.find((option2) => String(option2.title) === values);
321
297
  const selectedOption = { id: option?.id, value: values };
322
298
  props.onChange([selectedOption]);
323
299
  }
@@ -331,11 +307,7 @@ var SingleSelectElement = (props) => {
331
307
  onChange: handleChange,
332
308
  onSearch,
333
309
  filterOption,
334
- options: props.dropDownOptions?.map((eachOption) => ({
335
- label: String(eachOption.title),
336
- value: String(eachOption.title),
337
- id: String(eachOption.id)
338
- }))
310
+ options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
339
311
  }
340
312
  );
341
313
  };
@@ -380,7 +352,7 @@ var ButtonElement = (props) => {
380
352
 
381
353
  // src/Components/AddMoreTable.tsx
382
354
  import React12, { useEffect, useState as useState4 } from "react";
383
- import { Table, Button } from "antd";
355
+ import { Table, Button as Button2 } from "antd";
384
356
  import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
385
357
  var AddMoreTable = (props) => {
386
358
  const { thead, tbody } = props;
@@ -475,13 +447,13 @@ var AddMoreTable = (props) => {
475
447
  eachRow.variable_data.forEach((variable, subIndex) => {
476
448
  Object.keys(variable).forEach((key) => {
477
449
  if (key === "SubRows") {
478
- rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
450
+ rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
479
451
  } else {
480
452
  rowData[`${key}`] = renderInputElement(variable[key]);
481
453
  }
482
454
  });
483
455
  });
484
- rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
456
+ rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
485
457
  console.log("=====rowdata", rowData);
486
458
  return rowData;
487
459
  });
@@ -528,7 +500,7 @@ import React17 from "react";
528
500
 
529
501
  // src/Components/Notification.tsx
530
502
  import React14 from "react";
531
- import { Popover, Badge, Button as Button2, Avatar, List } from "antd";
503
+ import { Popover, Badge, Button as Button3, Avatar, List } from "antd";
532
504
  import { IoIosNotifications } from "react-icons/io";
533
505
  var popoverContentStyle = {
534
506
  minWidth: "300px",
@@ -556,7 +528,7 @@ var Notification = (props) => /* @__PURE__ */ React14.createElement(
556
528
  trigger: "focus",
557
529
  placement: "bottomRight"
558
530
  },
559
- /* @__PURE__ */ React14.createElement(Button2, { className: props.buttonClassName }, /* @__PURE__ */ React14.createElement(Badge, { size: "small", count: props.count }, /* @__PURE__ */ React14.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React14.createElement(IoIosNotifications, null))))
531
+ /* @__PURE__ */ React14.createElement(Button3, { className: props.buttonClassName }, /* @__PURE__ */ React14.createElement(Badge, { size: "small", count: props.count }, /* @__PURE__ */ React14.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React14.createElement(IoIosNotifications, null))))
560
532
  );
561
533
 
562
534
  // src/Components/SpanElement.tsx
@@ -758,7 +730,7 @@ var DatePickerElement = (props) => {
758
730
 
759
731
  // src/Components/DateRangePickerElement.tsx
760
732
  import React22 from "react";
761
- import { DatePicker as DatePicker2, Space } from "antd";
733
+ import { DatePicker as DatePicker2, Space as Space2 } from "antd";
762
734
  import dayjs from "dayjs";
763
735
  var DateRangePickerElement = (props) => {
764
736
  const { RangePicker } = DatePicker2;
@@ -775,88 +747,7 @@ var DateRangePickerElement = (props) => {
775
747
  { label: "Last 30 Days", value: [dayjs().add(-30, "d"), dayjs()] },
776
748
  { label: "Last 90 Days", value: [dayjs().add(-90, "d"), dayjs()] }
777
749
  ];
778
- return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
779
- };
780
-
781
- // src/Components/UploadElement.tsx
782
- import React23 from "react";
783
- import { UploadOutlined } from "@ant-design/icons";
784
- import { Button as Button3, message, Upload } from "antd";
785
- var uploadProps = {
786
- name: "file",
787
- multiple: true,
788
- // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
789
- headers: {
790
- authorization: "authorization-text"
791
- },
792
- onChange(info) {
793
- if (info.file.status !== "uploading") {
794
- console.log(info.file, info.fileList);
795
- }
796
- if (info.file.status === "done") {
797
- message.success(`${info.file.name} file uploaded successfully`);
798
- } else if (info.file.status === "error") {
799
- message.error(`${info.file.name} file upload failed.`);
800
- }
801
- }
802
- };
803
- var UploadElement = (props) => {
804
- return /* @__PURE__ */ React23.createElement(Upload, { ...uploadProps }, /* @__PURE__ */ React23.createElement(Button3, { icon: /* @__PURE__ */ React23.createElement(UploadOutlined, null) }, "Click to Upload"));
805
- };
806
-
807
- // src/Components/Image.tsx
808
- import React24 from "react";
809
- var Image = (props) => {
810
- return /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement("img", { className: props.className, src: props.img, alt: "image" }));
811
- };
812
-
813
- // src/Components/SingleCheckbox.tsx
814
- import React25 from "react";
815
- import { Checkbox as Checkbox2 } from "antd";
816
- var SingleCheckbox = (props) => {
817
- const handleChange = (e) => {
818
- if (props.onChange) {
819
- props.onChange(e.target.checked);
820
- }
821
- };
822
- return /* @__PURE__ */ React25.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
823
- };
824
-
825
- // src/Components/MultiSelect.tsx
826
- import React26, { useState as useState7 } from "react";
827
- import { Select as Select4 } from "antd";
828
- var MultiSelect = (props) => {
829
- const options = props.options;
830
- const [selectedOptions, setSelectedOptions] = useState7([]);
831
- for (let i = 10; i < 100; i++) {
832
- options && options.push({
833
- value: i,
834
- label: i
835
- });
836
- }
837
- const handleChange = (e) => {
838
- console.log(e);
839
- setSelectedOptions((prev) => ({
840
- ...prev,
841
- [e.name]: e.value
842
- }));
843
- };
844
- console.log(selectedOptions);
845
- return /* @__PURE__ */ React26.createElement("div", { className: props.className, style: { display: "flex", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ React26.createElement(
846
- Select4,
847
- {
848
- onChange: handleChange,
849
- variant: props.variant,
850
- options
851
- }
852
- ), /* @__PURE__ */ React26.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React26.createElement(
853
- Select4,
854
- {
855
- onChange: handleChange,
856
- variant: props.variant,
857
- options
858
- }
859
- ));
750
+ return /* @__PURE__ */ React22.createElement(Space2, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
860
751
  };
861
752
  export {
862
753
  AddMoreTable,
@@ -865,8 +756,6 @@ export {
865
756
  CkEditor,
866
757
  DatePickerElement,
867
758
  DateRangePickerElement,
868
- Image,
869
- MultiSelect,
870
759
  MultipleSelectElement,
871
760
  Navbar,
872
761
  NumberElement,
@@ -874,10 +763,8 @@ export {
874
763
  RadioElement,
875
764
  SelectElement,
876
765
  Sidebar,
877
- SingleCheckbox,
878
766
  SingleSelectElement,
879
767
  TableElement,
880
768
  TextElement,
881
- TextareaElement,
882
- UploadElement
769
+ TextareaElement
883
770
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.13-Beta29",
3
+ "version": "0.0.13-Beta3",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",