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

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