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

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 +158 -43
  4. package/dist/index.mjs +163 -52
  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
  };
@@ -155,24 +185,17 @@ var TextareaElement = (props) => {
155
185
  // src/Components/SelectElement.tsx
156
186
  var import_react5 = __toESM(require("react"));
157
187
  var import_antd5 = require("antd");
158
- var labelRender = (props) => {
159
- const { label, value } = props;
160
- if (label) {
161
- return value;
162
- }
163
- return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
164
- };
165
188
  var SelectElement = (props) => {
166
189
  const handleChange = (value) => {
190
+ console.log("sigleselectvalue----", value);
167
191
  if (props.onChange) {
168
192
  props.onChange(value);
169
193
  }
170
194
  };
171
- return /* @__PURE__ */ import_react5.default.createElement(
195
+ return /* @__PURE__ */ import_react5.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react5.default.createElement(
172
196
  import_antd5.Select,
173
197
  {
174
- labelRender,
175
- options: props.fieldNames,
198
+ options: props.options,
176
199
  placeholder: props.placeholder,
177
200
  allowClear: true,
178
201
  defaultValue: props.defaultValue,
@@ -184,7 +207,7 @@ var SelectElement = (props) => {
184
207
  variant: props.variant,
185
208
  onChange: handleChange
186
209
  }
187
- );
210
+ ));
188
211
  };
189
212
 
190
213
  // src/Components/RadioElement.tsx
@@ -215,7 +238,6 @@ var RadioElement = (props) => {
215
238
  value: selectedValue
216
239
  },
217
240
  props.options && props.options.map((option) => {
218
- console.log(option);
219
241
  return /* @__PURE__ */ import_react6.default.createElement(
220
242
  import_antd6.Radio,
221
243
  {
@@ -238,22 +260,19 @@ var RadioElement = (props) => {
238
260
  var import_react7 = __toESM(require("react"));
239
261
  var import_antd7 = require("antd");
240
262
  var CheckboxGroup = import_antd7.Checkbox.Group;
241
- var plainOptions = ["Apple", "Pear", "Orange"];
242
263
  var defaultCheckedList = [];
243
264
  var CheckboxElement = (props) => {
244
265
  const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
245
- const checkAll = plainOptions.length === checkedList.length;
266
+ const checkAll = props.options && props.options.length === checkedList.length;
246
267
  const handleChange = (list) => {
247
268
  setCheckedList(list);
248
269
  if (props.onChange) {
249
- const selectedOptions = list.map((value) => {
250
- return { id: list.indexOf(value), value };
251
- });
270
+ const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
252
271
  props.onChange(selectedOptions);
253
272
  }
254
273
  };
255
274
  const onHandleAllChanges = (e) => {
256
- const newList = e.target.checked ? plainOptions : [];
275
+ const newList = e.target.checked ? props.options : [];
257
276
  setCheckedList(newList);
258
277
  if (props.onChange) {
259
278
  props.onChange(newList);
@@ -270,13 +289,13 @@ var CheckboxElement = (props) => {
270
289
  checked: checkAll
271
290
  },
272
291
  "Check all"
273
- ), /* @__PURE__ */ import_react7.default.createElement(import_antd7.Divider, null), /* @__PURE__ */ import_react7.default.createElement(
292
+ ), /* @__PURE__ */ import_react7.default.createElement(
274
293
  CheckboxGroup,
275
294
  {
276
295
  disabled: props.disabled,
277
296
  style: props.styles,
278
297
  className: props.className,
279
- options: plainOptions,
298
+ options: props.options,
280
299
  value: checkedList,
281
300
  onChange: handleChange
282
301
  }
@@ -345,7 +364,9 @@ var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includ
345
364
  var SingleSelectElement = (props) => {
346
365
  const handleChange = (values) => {
347
366
  if (props.onChange) {
348
- const option = props.dropDownOptions?.find((option2) => String(option2.title) === values);
367
+ const option = props.dropDownOptions?.find(
368
+ (option2) => String(option2.title) === values
369
+ );
349
370
  const selectedOption = { id: option?.id, value: values };
350
371
  props.onChange([selectedOption]);
351
372
  }
@@ -359,7 +380,11 @@ var SingleSelectElement = (props) => {
359
380
  onChange: handleChange,
360
381
  onSearch,
361
382
  filterOption,
362
- options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
383
+ options: props.dropDownOptions?.map((eachOption) => ({
384
+ label: String(eachOption.title),
385
+ value: String(eachOption.title),
386
+ id: String(eachOption.id)
387
+ }))
363
388
  }
364
389
  );
365
390
  };
@@ -801,6 +826,92 @@ var DateRangePickerElement = (props) => {
801
826
  ];
802
827
  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
803
828
  };
829
+
830
+ // src/Components/UploadElement.tsx
831
+ var import_react24 = __toESM(require("react"));
832
+ var import_icons5 = require("@ant-design/icons");
833
+ var import_antd17 = require("antd");
834
+ var uploadProps = {
835
+ name: "file",
836
+ multiple: true,
837
+ // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
838
+ headers: {
839
+ authorization: "authorization-text"
840
+ },
841
+ onChange(info) {
842
+ if (info.file.status !== "uploading") {
843
+ console.log(info.file, info.fileList);
844
+ }
845
+ if (info.file.status === "done") {
846
+ import_antd17.message.success(`${info.file.name} file uploaded successfully`);
847
+ } else if (info.file.status === "error") {
848
+ import_antd17.message.error(`${info.file.name} file upload failed.`);
849
+ }
850
+ }
851
+ };
852
+ var UploadElement = (props) => {
853
+ 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"));
854
+ };
855
+
856
+ // src/Components/Image.tsx
857
+ var import_react25 = __toESM(require("react"));
858
+ var Image = (props) => {
859
+ return /* @__PURE__ */ import_react25.default.createElement("div", null, /* @__PURE__ */ import_react25.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
860
+ };
861
+
862
+ // src/Components/SingleCheckbox.tsx
863
+ var import_react26 = __toESM(require("react"));
864
+ var import_antd18 = require("antd");
865
+ var SingleCheckbox = (props) => {
866
+ const handleChange = (e) => {
867
+ if (props.onChange) {
868
+ props.onChange(e.target.checked);
869
+ }
870
+ };
871
+ return /* @__PURE__ */ import_react26.default.createElement(import_antd18.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
872
+ };
873
+
874
+ // src/Components/MultiSelect.tsx
875
+ var import_react27 = __toESM(require("react"));
876
+ var import_antd19 = require("antd");
877
+ var MultiSelect = (props) => {
878
+ const [options, setOptions] = (0, import_react27.useState)([]);
879
+ const [selectedOptions, setSelectedOptions] = (0, import_react27.useState)({});
880
+ (0, import_react27.useEffect)(() => {
881
+ const newOptions = [];
882
+ for (let i = 1; i < 100; i++) {
883
+ newOptions.push({
884
+ value: i,
885
+ label: i
886
+ });
887
+ }
888
+ setOptions(newOptions);
889
+ console.log("options========", options);
890
+ }, []);
891
+ const handleChange = (e) => {
892
+ console.log("----------", e);
893
+ setSelectedOptions((prev) => ({
894
+ ...prev,
895
+ [e.name]: e.value
896
+ }));
897
+ };
898
+ console.log("selectedOptions", selectedOptions);
899
+ 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(
900
+ import_antd19.Select,
901
+ {
902
+ onChange: handleChange,
903
+ variant: props.variant,
904
+ options
905
+ }
906
+ ), /* @__PURE__ */ import_react27.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react27.default.createElement(
907
+ import_antd19.Select,
908
+ {
909
+ onChange: handleChange,
910
+ variant: props.variant,
911
+ options
912
+ }
913
+ ));
914
+ };
804
915
  // Annotate the CommonJS export names for ESM import in node:
805
916
  0 && (module.exports = {
806
917
  AddMoreTable,
@@ -809,6 +920,8 @@ var DateRangePickerElement = (props) => {
809
920
  CkEditor,
810
921
  DatePickerElement,
811
922
  DateRangePickerElement,
923
+ Image,
924
+ MultiSelect,
812
925
  MultipleSelectElement,
813
926
  Navbar,
814
927
  NumberElement,
@@ -816,8 +929,10 @@ var DateRangePickerElement = (props) => {
816
929
  RadioElement,
817
930
  SelectElement,
818
931
  Sidebar,
932
+ SingleCheckbox,
819
933
  SingleSelectElement,
820
934
  TableElement,
821
935
  TextElement,
822
- TextareaElement
936
+ TextareaElement,
937
+ UploadElement
823
938
  });
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
  };
@@ -103,24 +129,17 @@ var TextareaElement = (props) => {
103
129
  // src/Components/SelectElement.tsx
104
130
  import React5 from "react";
105
131
  import { Select } from "antd";
106
- var labelRender = (props) => {
107
- const { label, value } = props;
108
- if (label) {
109
- return value;
110
- }
111
- return /* @__PURE__ */ React5.createElement("span", null, "select gender");
112
- };
113
132
  var SelectElement = (props) => {
114
133
  const handleChange = (value) => {
134
+ console.log("sigleselectvalue----", value);
115
135
  if (props.onChange) {
116
136
  props.onChange(value);
117
137
  }
118
138
  };
119
- return /* @__PURE__ */ React5.createElement(
139
+ return /* @__PURE__ */ React5.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React5.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React5.createElement(
120
140
  Select,
121
141
  {
122
- labelRender,
123
- options: props.fieldNames,
142
+ options: props.options,
124
143
  placeholder: props.placeholder,
125
144
  allowClear: true,
126
145
  defaultValue: props.defaultValue,
@@ -132,7 +151,7 @@ var SelectElement = (props) => {
132
151
  variant: props.variant,
133
152
  onChange: handleChange
134
153
  }
135
- );
154
+ ));
136
155
  };
137
156
 
138
157
  // src/Components/RadioElement.tsx
@@ -163,7 +182,6 @@ var RadioElement = (props) => {
163
182
  value: selectedValue
164
183
  },
165
184
  props.options && props.options.map((option) => {
166
- console.log(option);
167
185
  return /* @__PURE__ */ React6.createElement(
168
186
  Radio,
169
187
  {
@@ -184,24 +202,21 @@ var RadioElement = (props) => {
184
202
 
185
203
  // src/Components/Checkbox.tsx
186
204
  import React7, { useState as useState3 } from "react";
187
- import { Checkbox, Divider } from "antd";
205
+ import { Checkbox } from "antd";
188
206
  var CheckboxGroup = Checkbox.Group;
189
- var plainOptions = ["Apple", "Pear", "Orange"];
190
207
  var defaultCheckedList = [];
191
208
  var CheckboxElement = (props) => {
192
209
  const [checkedList, setCheckedList] = useState3(defaultCheckedList);
193
- const checkAll = plainOptions.length === checkedList.length;
210
+ const checkAll = props.options && props.options.length === checkedList.length;
194
211
  const handleChange = (list) => {
195
212
  setCheckedList(list);
196
213
  if (props.onChange) {
197
- const selectedOptions = list.map((value) => {
198
- return { id: list.indexOf(value), value };
199
- });
214
+ const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
200
215
  props.onChange(selectedOptions);
201
216
  }
202
217
  };
203
218
  const onHandleAllChanges = (e) => {
204
- const newList = e.target.checked ? plainOptions : [];
219
+ const newList = e.target.checked ? props.options : [];
205
220
  setCheckedList(newList);
206
221
  if (props.onChange) {
207
222
  props.onChange(newList);
@@ -218,13 +233,13 @@ var CheckboxElement = (props) => {
218
233
  checked: checkAll
219
234
  },
220
235
  "Check all"
221
- ), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(
236
+ ), /* @__PURE__ */ React7.createElement(
222
237
  CheckboxGroup,
223
238
  {
224
239
  disabled: props.disabled,
225
240
  style: props.styles,
226
241
  className: props.className,
227
- options: plainOptions,
242
+ options: props.options,
228
243
  value: checkedList,
229
244
  onChange: handleChange
230
245
  }
@@ -293,7 +308,9 @@ var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includ
293
308
  var SingleSelectElement = (props) => {
294
309
  const handleChange = (values) => {
295
310
  if (props.onChange) {
296
- const option = props.dropDownOptions?.find((option2) => String(option2.title) === values);
311
+ const option = props.dropDownOptions?.find(
312
+ (option2) => String(option2.title) === values
313
+ );
297
314
  const selectedOption = { id: option?.id, value: values };
298
315
  props.onChange([selectedOption]);
299
316
  }
@@ -307,7 +324,11 @@ var SingleSelectElement = (props) => {
307
324
  onChange: handleChange,
308
325
  onSearch,
309
326
  filterOption,
310
- options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
327
+ options: props.dropDownOptions?.map((eachOption) => ({
328
+ label: String(eachOption.title),
329
+ value: String(eachOption.title),
330
+ id: String(eachOption.id)
331
+ }))
311
332
  }
312
333
  );
313
334
  };
@@ -352,7 +373,7 @@ var ButtonElement = (props) => {
352
373
 
353
374
  // src/Components/AddMoreTable.tsx
354
375
  import React12, { useEffect, useState as useState4 } from "react";
355
- import { Table, Button as Button2 } from "antd";
376
+ import { Table, Button } from "antd";
356
377
  import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
357
378
  var AddMoreTable = (props) => {
358
379
  const { thead, tbody } = props;
@@ -447,13 +468,13 @@ var AddMoreTable = (props) => {
447
468
  eachRow.variable_data.forEach((variable, subIndex) => {
448
469
  Object.keys(variable).forEach((key) => {
449
470
  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)));
471
+ 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
472
  } else {
452
473
  rowData[`${key}`] = renderInputElement(variable[key]);
453
474
  }
454
475
  });
455
476
  });
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)));
477
+ 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
478
  console.log("=====rowdata", rowData);
458
479
  return rowData;
459
480
  });
@@ -500,7 +521,7 @@ import React17 from "react";
500
521
 
501
522
  // src/Components/Notification.tsx
502
523
  import React14 from "react";
503
- import { Popover, Badge, Button as Button3, Avatar, List } from "antd";
524
+ import { Popover, Badge, Button as Button2, Avatar, List } from "antd";
504
525
  import { IoIosNotifications } from "react-icons/io";
505
526
  var popoverContentStyle = {
506
527
  minWidth: "300px",
@@ -528,7 +549,7 @@ var Notification = (props) => /* @__PURE__ */ React14.createElement(
528
549
  trigger: "focus",
529
550
  placement: "bottomRight"
530
551
  },
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))))
552
+ /* @__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
553
  );
533
554
 
534
555
  // src/Components/SpanElement.tsx
@@ -730,7 +751,7 @@ var DatePickerElement = (props) => {
730
751
 
731
752
  // src/Components/DateRangePickerElement.tsx
732
753
  import React22 from "react";
733
- import { DatePicker as DatePicker2, Space as Space2 } from "antd";
754
+ import { DatePicker as DatePicker2, Space } from "antd";
734
755
  import dayjs from "dayjs";
735
756
  var DateRangePickerElement = (props) => {
736
757
  const { RangePicker } = DatePicker2;
@@ -747,7 +768,93 @@ var DateRangePickerElement = (props) => {
747
768
  { label: "Last 30 Days", value: [dayjs().add(-30, "d"), dayjs()] },
748
769
  { label: "Last 90 Days", value: [dayjs().add(-90, "d"), dayjs()] }
749
770
  ];
750
- return /* @__PURE__ */ React22.createElement(Space2, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
771
+ return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
772
+ };
773
+
774
+ // src/Components/UploadElement.tsx
775
+ import React23 from "react";
776
+ import { UploadOutlined } from "@ant-design/icons";
777
+ import { Button as Button3, message, Upload } from "antd";
778
+ var uploadProps = {
779
+ name: "file",
780
+ multiple: true,
781
+ // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
782
+ headers: {
783
+ authorization: "authorization-text"
784
+ },
785
+ onChange(info) {
786
+ if (info.file.status !== "uploading") {
787
+ console.log(info.file, info.fileList);
788
+ }
789
+ if (info.file.status === "done") {
790
+ message.success(`${info.file.name} file uploaded successfully`);
791
+ } else if (info.file.status === "error") {
792
+ message.error(`${info.file.name} file upload failed.`);
793
+ }
794
+ }
795
+ };
796
+ var UploadElement = (props) => {
797
+ return /* @__PURE__ */ React23.createElement(Upload, { ...uploadProps }, /* @__PURE__ */ React23.createElement(Button3, { icon: /* @__PURE__ */ React23.createElement(UploadOutlined, null) }, "Click to Upload"));
798
+ };
799
+
800
+ // src/Components/Image.tsx
801
+ import React24 from "react";
802
+ var Image = (props) => {
803
+ return /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement("img", { className: props.className, src: props.img, alt: "image" }));
804
+ };
805
+
806
+ // src/Components/SingleCheckbox.tsx
807
+ import React25 from "react";
808
+ import { Checkbox as Checkbox2 } from "antd";
809
+ var SingleCheckbox = (props) => {
810
+ const handleChange = (e) => {
811
+ if (props.onChange) {
812
+ props.onChange(e.target.checked);
813
+ }
814
+ };
815
+ return /* @__PURE__ */ React25.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
816
+ };
817
+
818
+ // src/Components/MultiSelect.tsx
819
+ import React26, { useState as useState7, useEffect as useEffect2 } from "react";
820
+ import { Select as Select4 } from "antd";
821
+ var MultiSelect = (props) => {
822
+ const [options, setOptions] = useState7([]);
823
+ const [selectedOptions, setSelectedOptions] = useState7({});
824
+ useEffect2(() => {
825
+ const newOptions = [];
826
+ for (let i = 1; i < 100; i++) {
827
+ newOptions.push({
828
+ value: i,
829
+ label: i
830
+ });
831
+ }
832
+ setOptions(newOptions);
833
+ console.log("options========", options);
834
+ }, []);
835
+ const handleChange = (e) => {
836
+ console.log("----------", e);
837
+ setSelectedOptions((prev) => ({
838
+ ...prev,
839
+ [e.name]: e.value
840
+ }));
841
+ };
842
+ console.log("selectedOptions", selectedOptions);
843
+ return /* @__PURE__ */ React26.createElement("div", { className: props.className, style: { display: "flex", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "200px" } }, /* @__PURE__ */ React26.createElement(
844
+ Select4,
845
+ {
846
+ onChange: handleChange,
847
+ variant: props.variant,
848
+ options
849
+ }
850
+ ), /* @__PURE__ */ React26.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React26.createElement(
851
+ Select4,
852
+ {
853
+ onChange: handleChange,
854
+ variant: props.variant,
855
+ options
856
+ }
857
+ ));
751
858
  };
752
859
  export {
753
860
  AddMoreTable,
@@ -756,6 +863,8 @@ export {
756
863
  CkEditor,
757
864
  DatePickerElement,
758
865
  DateRangePickerElement,
866
+ Image,
867
+ MultiSelect,
759
868
  MultipleSelectElement,
760
869
  Navbar,
761
870
  NumberElement,
@@ -763,8 +872,10 @@ export {
763
872
  RadioElement,
764
873
  SelectElement,
765
874
  Sidebar,
875
+ SingleCheckbox,
766
876
  SingleSelectElement,
767
877
  TableElement,
768
878
  TextElement,
769
- TextareaElement
879
+ TextareaElement,
880
+ UploadElement
770
881
  };
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-Beta32",
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",