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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +4 -0
  2. package/dist/index.d.mts +31 -27
  3. package/dist/index.d.ts +31 -27
  4. package/dist/index.js +242 -44
  5. package/dist/index.mjs +247 -53
  6. package/package.json +2 -1
package/dist/index.css CHANGED
@@ -338,6 +338,10 @@ video {
338
338
  .m-\[10px\] {
339
339
  margin: 10px;
340
340
  }
341
+ .mx-auto {
342
+ margin-left: auto;
343
+ margin-right: auto;
344
+ }
341
345
  .flex {
342
346
  display: flex;
343
347
  }
package/dist/index.d.mts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React$1 from 'react';
2
2
  import { SizeType } from 'antd/es/config-provider/SizeContext';
3
+ import { UploadFile } from 'antd/lib/upload/interface';
3
4
 
4
5
  type ElementType = {
5
6
  [x: string]: any;
@@ -13,7 +14,7 @@ type ElementType = {
13
14
  prefix?: React.ReactNode;
14
15
  type?: string;
15
16
  size?: SizeType;
16
- value?: string | number | boolean | any[] | null | undefined;
17
+ value?: string | number | boolean | any[] | null | object | undefined;
17
18
  status?: "error" | "warning";
18
19
  styles?: React.CSSProperties;
19
20
  variant?: "outlined" | "borderless" | "filled";
@@ -25,7 +26,7 @@ type ElementType = {
25
26
  fields?: any[];
26
27
  schema?: any[];
27
28
  options?: any[];
28
- onChange?: (value: string | number | boolean | object | any[]) => void;
29
+ onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
29
30
  onClick?: () => void;
30
31
  dropDownOptions?: any[];
31
32
  id?: number;
@@ -54,34 +55,17 @@ type ElementType = {
54
55
  iconsClassName?: string;
55
56
  labelClassName?: string;
56
57
  containerClassName?: string;
58
+ selectBefore?: any[];
59
+ selectAfter?: any[];
57
60
  };
58
61
 
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
+ declare const TextElement: (props: ElementType) => React$1.JSX.Element;
63
63
 
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
+ declare const PasswordElement: (props: ElementType) => React$1.JSX.Element;
75
65
 
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
+ declare const NumberElement: (props: ElementType) => React$1.JSX.Element;
80
67
 
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
+ declare const TextareaElement: (props: ElementType) => React$1.JSX.Element;
85
69
 
86
70
  declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
87
71
 
@@ -90,7 +74,7 @@ declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
90
74
  declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
91
75
 
92
76
  interface ElementExecuterProps extends ElementType {
93
- onChange: (value: string | number | object | boolean | any[]) => void;
77
+ onChange: (value: string | number | object | boolean | any[] | undefined) => void;
94
78
  }
95
79
  declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
96
80
 
@@ -112,4 +96,24 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
112
96
 
113
97
  declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
114
98
 
115
- export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
99
+ declare const UploadElement: (feildData: {
100
+ value?: any;
101
+ name?: any;
102
+ label?: any;
103
+ max_count?: any;
104
+ accept?: any;
105
+ list_type?: any;
106
+ multiple?: any;
107
+ errors?: any;
108
+ }, onInputChanges: (arg0: {
109
+ name: any;
110
+ value: any[] | UploadFile<any>[];
111
+ }) => void) => React$1.JSX.Element;
112
+
113
+ declare const Image: (props: ElementType) => React$1.JSX.Element;
114
+
115
+ declare const SingleCheckbox: (props: ElementType) => React$1.JSX.Element;
116
+
117
+ declare const MultiSelect: (props: ElementType) => React$1.JSX.Element;
118
+
119
+ 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
@@ -1,5 +1,6 @@
1
1
  import React$1 from 'react';
2
2
  import { SizeType } from 'antd/es/config-provider/SizeContext';
3
+ import { UploadFile } from 'antd/lib/upload/interface';
3
4
 
4
5
  type ElementType = {
5
6
  [x: string]: any;
@@ -13,7 +14,7 @@ type ElementType = {
13
14
  prefix?: React.ReactNode;
14
15
  type?: string;
15
16
  size?: SizeType;
16
- value?: string | number | boolean | any[] | null | undefined;
17
+ value?: string | number | boolean | any[] | null | object | undefined;
17
18
  status?: "error" | "warning";
18
19
  styles?: React.CSSProperties;
19
20
  variant?: "outlined" | "borderless" | "filled";
@@ -25,7 +26,7 @@ type ElementType = {
25
26
  fields?: any[];
26
27
  schema?: any[];
27
28
  options?: any[];
28
- onChange?: (value: string | number | boolean | object | any[]) => void;
29
+ onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
29
30
  onClick?: () => void;
30
31
  dropDownOptions?: any[];
31
32
  id?: number;
@@ -54,34 +55,17 @@ type ElementType = {
54
55
  iconsClassName?: string;
55
56
  labelClassName?: string;
56
57
  containerClassName?: string;
58
+ selectBefore?: any[];
59
+ selectAfter?: any[];
57
60
  };
58
61
 
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
+ declare const TextElement: (props: ElementType) => React$1.JSX.Element;
63
63
 
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
+ declare const PasswordElement: (props: ElementType) => React$1.JSX.Element;
75
65
 
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
+ declare const NumberElement: (props: ElementType) => React$1.JSX.Element;
80
67
 
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
+ declare const TextareaElement: (props: ElementType) => React$1.JSX.Element;
85
69
 
86
70
  declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
87
71
 
@@ -90,7 +74,7 @@ declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
90
74
  declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
91
75
 
92
76
  interface ElementExecuterProps extends ElementType {
93
- onChange: (value: string | number | object | boolean | any[]) => void;
77
+ onChange: (value: string | number | object | boolean | any[] | undefined) => void;
94
78
  }
95
79
  declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
96
80
 
@@ -112,4 +96,24 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
112
96
 
113
97
  declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
114
98
 
115
- export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
99
+ declare const UploadElement: (feildData: {
100
+ value?: any;
101
+ name?: any;
102
+ label?: any;
103
+ max_count?: any;
104
+ accept?: any;
105
+ list_type?: any;
106
+ multiple?: any;
107
+ errors?: any;
108
+ }, onInputChanges: (arg0: {
109
+ name: any;
110
+ value: any[] | UploadFile<any>[];
111
+ }) => void) => React$1.JSX.Element;
112
+
113
+ declare const Image: (props: ElementType) => React$1.JSX.Element;
114
+
115
+ declare const SingleCheckbox: (props: ElementType) => React$1.JSX.Element;
116
+
117
+ declare const MultiSelect: (props: ElementType) => React$1.JSX.Element;
118
+
119
+ 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,18 @@ 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
- props.onChange(value);
192
+ const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
193
+ props.onChange(filterOption2);
169
194
  }
170
195
  };
171
- return /* @__PURE__ */ import_react5.default.createElement(
196
+ 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
197
  import_antd5.Select,
173
198
  {
174
- labelRender,
175
- options: props.fieldNames,
199
+ options: props.options,
176
200
  placeholder: props.placeholder,
177
201
  allowClear: true,
178
202
  defaultValue: props.defaultValue,
@@ -184,7 +208,7 @@ var SelectElement = (props) => {
184
208
  variant: props.variant,
185
209
  onChange: handleChange
186
210
  }
187
- );
211
+ ));
188
212
  };
189
213
 
190
214
  // src/Components/RadioElement.tsx
@@ -215,7 +239,6 @@ var RadioElement = (props) => {
215
239
  value: selectedValue
216
240
  },
217
241
  props.options && props.options.map((option) => {
218
- console.log(option);
219
242
  return /* @__PURE__ */ import_react6.default.createElement(
220
243
  import_antd6.Radio,
221
244
  {
@@ -238,22 +261,19 @@ var RadioElement = (props) => {
238
261
  var import_react7 = __toESM(require("react"));
239
262
  var import_antd7 = require("antd");
240
263
  var CheckboxGroup = import_antd7.Checkbox.Group;
241
- var plainOptions = ["Apple", "Pear", "Orange"];
242
264
  var defaultCheckedList = [];
243
265
  var CheckboxElement = (props) => {
244
266
  const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
245
- const checkAll = plainOptions.length === checkedList.length;
267
+ const checkAll = props.options && props.options.length === checkedList.length;
246
268
  const handleChange = (list) => {
247
269
  setCheckedList(list);
248
270
  if (props.onChange) {
249
- const selectedOptions = list.map((value) => {
250
- return { id: list.indexOf(value), value };
251
- });
271
+ const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
252
272
  props.onChange(selectedOptions);
253
273
  }
254
274
  };
255
275
  const onHandleAllChanges = (e) => {
256
- const newList = e.target.checked ? plainOptions : [];
276
+ const newList = e.target.checked ? props.options : [];
257
277
  setCheckedList(newList);
258
278
  if (props.onChange) {
259
279
  props.onChange(newList);
@@ -270,13 +290,13 @@ var CheckboxElement = (props) => {
270
290
  checked: checkAll
271
291
  },
272
292
  "Check all"
273
- ), /* @__PURE__ */ import_react7.default.createElement(import_antd7.Divider, null), /* @__PURE__ */ import_react7.default.createElement(
293
+ ), /* @__PURE__ */ import_react7.default.createElement(
274
294
  CheckboxGroup,
275
295
  {
276
296
  disabled: props.disabled,
277
297
  style: props.styles,
278
298
  className: props.className,
279
- options: plainOptions,
299
+ options: props.options,
280
300
  value: checkedList,
281
301
  onChange: handleChange
282
302
  }
@@ -345,7 +365,9 @@ var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includ
345
365
  var SingleSelectElement = (props) => {
346
366
  const handleChange = (values) => {
347
367
  if (props.onChange) {
348
- const option = props.dropDownOptions?.find((option2) => String(option2.title) === values);
368
+ const option = props.dropDownOptions?.find(
369
+ (option2) => String(option2.title) === values
370
+ );
349
371
  const selectedOption = { id: option?.id, value: values };
350
372
  props.onChange([selectedOption]);
351
373
  }
@@ -359,7 +381,11 @@ var SingleSelectElement = (props) => {
359
381
  onChange: handleChange,
360
382
  onSearch,
361
383
  filterOption,
362
- options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
384
+ options: props.dropDownOptions?.map((eachOption) => ({
385
+ label: String(eachOption.title),
386
+ value: String(eachOption.title),
387
+ id: String(eachOption.id)
388
+ }))
363
389
  }
364
390
  );
365
391
  };
@@ -801,6 +827,174 @@ var DateRangePickerElement = (props) => {
801
827
  ];
802
828
  return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
803
829
  };
830
+
831
+ // src/Components/UploadElement.tsx
832
+ var import_react24 = __toESM(require("react"));
833
+ var import_antd17 = require("antd");
834
+ var import_icons5 = require("@ant-design/icons");
835
+ var UploadElement = (feildData, onInputChanges) => {
836
+ const [previewTitle, setPreviewTitle] = (0, import_react24.useState)(null);
837
+ const [previewOpen, setPreviewOpen] = (0, import_react24.useState)(false);
838
+ const [previewType, setPreviewType] = (0, import_react24.useState)(null);
839
+ const [previewImage, setPreviewImage] = (0, import_react24.useState)(null);
840
+ const uploadChange = (fileList) => {
841
+ if (!fileList || fileList.length === 0) return;
842
+ const selectedFile = fileList[0];
843
+ if (!selectedFile) return;
844
+ const isCorrectFile = ["image/png", "image/jpg", "image/jpeg"].includes(selectedFile.type);
845
+ if (!isCorrectFile) {
846
+ import_antd17.Modal.error({
847
+ title: `(${selectedFile.name}) is an invalid file.`,
848
+ content: `Please upload files with the following extensions only (.png/.jpg/.jpeg)`,
849
+ zIndex: 1022
850
+ });
851
+ return;
852
+ }
853
+ const newFile = {
854
+ uid: `id${Math.random().toString(16).slice(2)}`,
855
+ name: selectedFile.name,
856
+ status: "done",
857
+ type: selectedFile.type,
858
+ size: selectedFile.size,
859
+ url: URL.createObjectURL(selectedFile)
860
+ // originFileObj: selectedFile,
861
+ };
862
+ const reader = new FileReader();
863
+ reader.onload = (e) => {
864
+ if (e.target?.result) {
865
+ newFile.thumbUrl = e.target.result.toString();
866
+ }
867
+ };
868
+ reader.readAsDataURL(selectedFile);
869
+ const newFileList = feildData.value ? [...feildData.value, newFile] : [newFile];
870
+ onInputChanges({
871
+ name: feildData.name,
872
+ value: newFileList
873
+ });
874
+ };
875
+ const uploadChange2 = ({ file, fileList }) => {
876
+ const newFileList = fileList.filter((f) => f.name !== file.name);
877
+ onInputChanges({
878
+ name: feildData.name,
879
+ value: newFileList
880
+ });
881
+ };
882
+ const handlePreview = async (file) => {
883
+ if (!file.url && !file.preview) {
884
+ file.preview = await URL.createObjectURL(file.originFileObj);
885
+ }
886
+ setPreviewType(file.type || file.name.substring(file.name.lastIndexOf(".") + 1));
887
+ setPreviewTitle(file.name || (file.url || "").substring((file.url || "").lastIndexOf("/") + 1));
888
+ setPreviewOpen(true);
889
+ };
890
+ const handleCancel = () => {
891
+ setPreviewImage(null);
892
+ setPreviewType(null);
893
+ setPreviewOpen(false);
894
+ setPreviewTitle(null);
895
+ };
896
+ return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, Object.keys(feildData).length !== 0 && /* @__PURE__ */ import_react24.default.createElement("span", { className: "native-camera-lib" }, /* @__PURE__ */ import_react24.default.createElement("p", { className: "flat-label text-capitalize" }, feildData.label), /* @__PURE__ */ import_react24.default.createElement("label", { className: "native-camera-button" }, /* @__PURE__ */ import_react24.default.createElement("div", { className: "ant-btn" }, /* @__PURE__ */ import_react24.default.createElement(import_icons5.UploadOutlined, null), " ", feildData.max_count ? `Upload (Max:${feildData.max_count})` : "Upload"), /* @__PURE__ */ import_react24.default.createElement(
897
+ "input",
898
+ {
899
+ id: "upload",
900
+ type: "file",
901
+ accept: "image/*;capture=camera",
902
+ onChange: (e) => uploadChange(e.target.files)
903
+ }
904
+ )), /* @__PURE__ */ import_react24.default.createElement(
905
+ import_antd17.Upload,
906
+ {
907
+ accept: feildData.accept,
908
+ listType: feildData.list_type,
909
+ maxCount: feildData.max_count,
910
+ multiple: feildData.multiple,
911
+ fileList: feildData.value,
912
+ onChange: uploadChange2,
913
+ onPreview: handlePreview,
914
+ showUploadList: true
915
+ },
916
+ feildData.list_type === "picture-card" && /* @__PURE__ */ import_react24.default.createElement("div", null, /* @__PURE__ */ import_react24.default.createElement(import_icons5.PlusOutlined, null), /* @__PURE__ */ import_react24.default.createElement("div", { style: { marginTop: 8 } }, "Upload ", /* @__PURE__ */ import_react24.default.createElement("small", { className: "d-flex" }, "(Max:", feildData.max_count, ")"))),
917
+ feildData.list_type === "picture" && /* @__PURE__ */ import_react24.default.createElement(import_antd17.Button, { icon: /* @__PURE__ */ import_react24.default.createElement(import_icons5.UploadOutlined, null) }, feildData.max_count ? `Upload (Max:${feildData.max_count})` : "Upload")
918
+ ), feildData.errors && feildData.errors.length > 0 && feildData.errors.map((error, eKey) => /* @__PURE__ */ import_react24.default.createElement("small", { key: eKey, className: "text-danger animated flash" }, error.message)), /* @__PURE__ */ import_react24.default.createElement(
919
+ import_antd17.Modal,
920
+ {
921
+ visible: previewOpen,
922
+ width: "100%",
923
+ zIndex: 1025,
924
+ centered: true,
925
+ maskClosable: false,
926
+ title: previewTitle,
927
+ footer: null,
928
+ onCancel: handleCancel,
929
+ destroyOnClose: true
930
+ },
931
+ /* @__PURE__ */ import_react24.default.createElement(import_antd17.Tooltip, { title: "Close", placement: "bottom" }, /* @__PURE__ */ import_react24.default.createElement(import_icons5.CloseOutlined, { className: "border popup-close", onClick: handleCancel })),
932
+ previewType === "application/pdf" || previewType === "pdf" ? /* @__PURE__ */ import_react24.default.createElement(
933
+ "iframe",
934
+ {
935
+ title: "document",
936
+ style: { width: "95vw", height: "40vw" },
937
+ src: `${previewImage}#toolbar=0`
938
+ }
939
+ ) : /* @__PURE__ */ import_react24.default.createElement("img", { alt: "image", src: previewImage || void 0, className: "d-flex mx-auto w-100" })
940
+ )));
941
+ };
942
+
943
+ // src/Components/Image.tsx
944
+ var import_react25 = __toESM(require("react"));
945
+ var Image = (props) => {
946
+ return /* @__PURE__ */ import_react25.default.createElement("div", null, /* @__PURE__ */ import_react25.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
947
+ };
948
+
949
+ // src/Components/SingleCheckbox.tsx
950
+ var import_react26 = __toESM(require("react"));
951
+ var import_antd18 = require("antd");
952
+ var SingleCheckbox = (props) => {
953
+ const handleChange = (e) => {
954
+ if (props.onChange) {
955
+ props.onChange(e.target.checked);
956
+ }
957
+ };
958
+ return /* @__PURE__ */ import_react26.default.createElement(import_antd18.Checkbox, { onChange: (e) => handleChange(e), className: props.className }, props.label);
959
+ };
960
+
961
+ // src/Components/MultiSelect.tsx
962
+ var import_react27 = __toESM(require("react"));
963
+ var import_antd19 = require("antd");
964
+ var MultiSelect = (props) => {
965
+ const [selectedValue, setSelectedValue] = (0, import_react27.useState)({ firstValue: {}, secondValue: {} });
966
+ const handleFirstChange = (value) => {
967
+ if (props.onChange) {
968
+ const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
969
+ console.log("filterOption1--------", filterOption2);
970
+ setSelectedValue((prev) => ({ ...prev, firstValue: filterOption2 && filterOption2 }));
971
+ props.onChange(selectedValue.firstValue && selectedValue);
972
+ }
973
+ };
974
+ const handleSecondChange = (value) => {
975
+ if (props.onChange) {
976
+ const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
977
+ console.log("filterOption2--------", filterOption2);
978
+ setSelectedValue((prev) => ({ ...prev, secondValue: filterOption2 && filterOption2 }));
979
+ props.onChange(selectedValue.secondValue && selectedValue);
980
+ }
981
+ };
982
+ return /* @__PURE__ */ import_react27.default.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ import_react27.default.createElement(
983
+ import_antd19.Select,
984
+ {
985
+ onChange: handleFirstChange,
986
+ variant: props.variant,
987
+ options: props.options
988
+ }
989
+ ), /* @__PURE__ */ import_react27.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react27.default.createElement(
990
+ import_antd19.Select,
991
+ {
992
+ onChange: handleSecondChange,
993
+ variant: props.variant,
994
+ options: props.options
995
+ }
996
+ ));
997
+ };
804
998
  // Annotate the CommonJS export names for ESM import in node:
805
999
  0 && (module.exports = {
806
1000
  AddMoreTable,
@@ -809,6 +1003,8 @@ var DateRangePickerElement = (props) => {
809
1003
  CkEditor,
810
1004
  DatePickerElement,
811
1005
  DateRangePickerElement,
1006
+ Image,
1007
+ MultiSelect,
812
1008
  MultipleSelectElement,
813
1009
  Navbar,
814
1010
  NumberElement,
@@ -816,8 +1012,10 @@ var DateRangePickerElement = (props) => {
816
1012
  RadioElement,
817
1013
  SelectElement,
818
1014
  Sidebar,
1015
+ SingleCheckbox,
819
1016
  SingleSelectElement,
820
1017
  TableElement,
821
1018
  TextElement,
822
- TextareaElement
1019
+ TextareaElement,
1020
+ UploadElement
823
1021
  });
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,18 @@ 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
- props.onChange(value);
136
+ const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
137
+ props.onChange(filterOption2);
117
138
  }
118
139
  };
119
- return /* @__PURE__ */ React5.createElement(
140
+ 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
141
  Select,
121
142
  {
122
- labelRender,
123
- options: props.fieldNames,
143
+ options: props.options,
124
144
  placeholder: props.placeholder,
125
145
  allowClear: true,
126
146
  defaultValue: props.defaultValue,
@@ -132,7 +152,7 @@ var SelectElement = (props) => {
132
152
  variant: props.variant,
133
153
  onChange: handleChange
134
154
  }
135
- );
155
+ ));
136
156
  };
137
157
 
138
158
  // src/Components/RadioElement.tsx
@@ -163,7 +183,6 @@ var RadioElement = (props) => {
163
183
  value: selectedValue
164
184
  },
165
185
  props.options && props.options.map((option) => {
166
- console.log(option);
167
186
  return /* @__PURE__ */ React6.createElement(
168
187
  Radio,
169
188
  {
@@ -184,24 +203,21 @@ var RadioElement = (props) => {
184
203
 
185
204
  // src/Components/Checkbox.tsx
186
205
  import React7, { useState as useState3 } from "react";
187
- import { Checkbox, Divider } from "antd";
206
+ import { Checkbox } from "antd";
188
207
  var CheckboxGroup = Checkbox.Group;
189
- var plainOptions = ["Apple", "Pear", "Orange"];
190
208
  var defaultCheckedList = [];
191
209
  var CheckboxElement = (props) => {
192
210
  const [checkedList, setCheckedList] = useState3(defaultCheckedList);
193
- const checkAll = plainOptions.length === checkedList.length;
211
+ const checkAll = props.options && props.options.length === checkedList.length;
194
212
  const handleChange = (list) => {
195
213
  setCheckedList(list);
196
214
  if (props.onChange) {
197
- const selectedOptions = list.map((value) => {
198
- return { id: list.indexOf(value), value };
199
- });
215
+ const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
200
216
  props.onChange(selectedOptions);
201
217
  }
202
218
  };
203
219
  const onHandleAllChanges = (e) => {
204
- const newList = e.target.checked ? plainOptions : [];
220
+ const newList = e.target.checked ? props.options : [];
205
221
  setCheckedList(newList);
206
222
  if (props.onChange) {
207
223
  props.onChange(newList);
@@ -218,13 +234,13 @@ var CheckboxElement = (props) => {
218
234
  checked: checkAll
219
235
  },
220
236
  "Check all"
221
- ), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(
237
+ ), /* @__PURE__ */ React7.createElement(
222
238
  CheckboxGroup,
223
239
  {
224
240
  disabled: props.disabled,
225
241
  style: props.styles,
226
242
  className: props.className,
227
- options: plainOptions,
243
+ options: props.options,
228
244
  value: checkedList,
229
245
  onChange: handleChange
230
246
  }
@@ -293,7 +309,9 @@ var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includ
293
309
  var SingleSelectElement = (props) => {
294
310
  const handleChange = (values) => {
295
311
  if (props.onChange) {
296
- const option = props.dropDownOptions?.find((option2) => String(option2.title) === values);
312
+ const option = props.dropDownOptions?.find(
313
+ (option2) => String(option2.title) === values
314
+ );
297
315
  const selectedOption = { id: option?.id, value: values };
298
316
  props.onChange([selectedOption]);
299
317
  }
@@ -307,7 +325,11 @@ var SingleSelectElement = (props) => {
307
325
  onChange: handleChange,
308
326
  onSearch,
309
327
  filterOption,
310
- options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
328
+ options: props.dropDownOptions?.map((eachOption) => ({
329
+ label: String(eachOption.title),
330
+ value: String(eachOption.title),
331
+ id: String(eachOption.id)
332
+ }))
311
333
  }
312
334
  );
313
335
  };
@@ -352,7 +374,7 @@ var ButtonElement = (props) => {
352
374
 
353
375
  // src/Components/AddMoreTable.tsx
354
376
  import React12, { useEffect, useState as useState4 } from "react";
355
- import { Table, Button as Button2 } from "antd";
377
+ import { Table, Button } from "antd";
356
378
  import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
357
379
  var AddMoreTable = (props) => {
358
380
  const { thead, tbody } = props;
@@ -447,13 +469,13 @@ var AddMoreTable = (props) => {
447
469
  eachRow.variable_data.forEach((variable, subIndex) => {
448
470
  Object.keys(variable).forEach((key) => {
449
471
  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)));
472
+ 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
473
  } else {
452
474
  rowData[`${key}`] = renderInputElement(variable[key]);
453
475
  }
454
476
  });
455
477
  });
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)));
478
+ 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
479
  console.log("=====rowdata", rowData);
458
480
  return rowData;
459
481
  });
@@ -500,7 +522,7 @@ import React17 from "react";
500
522
 
501
523
  // src/Components/Notification.tsx
502
524
  import React14 from "react";
503
- import { Popover, Badge, Button as Button3, Avatar, List } from "antd";
525
+ import { Popover, Badge, Button as Button2, Avatar, List } from "antd";
504
526
  import { IoIosNotifications } from "react-icons/io";
505
527
  var popoverContentStyle = {
506
528
  minWidth: "300px",
@@ -528,7 +550,7 @@ var Notification = (props) => /* @__PURE__ */ React14.createElement(
528
550
  trigger: "focus",
529
551
  placement: "bottomRight"
530
552
  },
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))))
553
+ /* @__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
554
  );
533
555
 
534
556
  // src/Components/SpanElement.tsx
@@ -730,7 +752,7 @@ var DatePickerElement = (props) => {
730
752
 
731
753
  // src/Components/DateRangePickerElement.tsx
732
754
  import React22 from "react";
733
- import { DatePicker as DatePicker2, Space as Space2 } from "antd";
755
+ import { DatePicker as DatePicker2, Space } from "antd";
734
756
  import dayjs from "dayjs";
735
757
  var DateRangePickerElement = (props) => {
736
758
  const { RangePicker } = DatePicker2;
@@ -747,7 +769,175 @@ var DateRangePickerElement = (props) => {
747
769
  { label: "Last 30 Days", value: [dayjs().add(-30, "d"), dayjs()] },
748
770
  { label: "Last 90 Days", value: [dayjs().add(-90, "d"), dayjs()] }
749
771
  ];
750
- return /* @__PURE__ */ React22.createElement(Space2, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
772
+ return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
773
+ };
774
+
775
+ // src/Components/UploadElement.tsx
776
+ import React23, { useState as useState7 } from "react";
777
+ import { Upload, Button as Button3, Modal as Modal2, Tooltip } from "antd";
778
+ import { UploadOutlined, PlusOutlined as PlusOutlined2, CloseOutlined } from "@ant-design/icons";
779
+ var UploadElement = (feildData, onInputChanges) => {
780
+ const [previewTitle, setPreviewTitle] = useState7(null);
781
+ const [previewOpen, setPreviewOpen] = useState7(false);
782
+ const [previewType, setPreviewType] = useState7(null);
783
+ const [previewImage, setPreviewImage] = useState7(null);
784
+ const uploadChange = (fileList) => {
785
+ if (!fileList || fileList.length === 0) return;
786
+ const selectedFile = fileList[0];
787
+ if (!selectedFile) return;
788
+ const isCorrectFile = ["image/png", "image/jpg", "image/jpeg"].includes(selectedFile.type);
789
+ if (!isCorrectFile) {
790
+ Modal2.error({
791
+ title: `(${selectedFile.name}) is an invalid file.`,
792
+ content: `Please upload files with the following extensions only (.png/.jpg/.jpeg)`,
793
+ zIndex: 1022
794
+ });
795
+ return;
796
+ }
797
+ const newFile = {
798
+ uid: `id${Math.random().toString(16).slice(2)}`,
799
+ name: selectedFile.name,
800
+ status: "done",
801
+ type: selectedFile.type,
802
+ size: selectedFile.size,
803
+ url: URL.createObjectURL(selectedFile)
804
+ // originFileObj: selectedFile,
805
+ };
806
+ const reader = new FileReader();
807
+ reader.onload = (e) => {
808
+ if (e.target?.result) {
809
+ newFile.thumbUrl = e.target.result.toString();
810
+ }
811
+ };
812
+ reader.readAsDataURL(selectedFile);
813
+ const newFileList = feildData.value ? [...feildData.value, newFile] : [newFile];
814
+ onInputChanges({
815
+ name: feildData.name,
816
+ value: newFileList
817
+ });
818
+ };
819
+ const uploadChange2 = ({ file, fileList }) => {
820
+ const newFileList = fileList.filter((f) => f.name !== file.name);
821
+ onInputChanges({
822
+ name: feildData.name,
823
+ value: newFileList
824
+ });
825
+ };
826
+ const handlePreview = async (file) => {
827
+ if (!file.url && !file.preview) {
828
+ file.preview = await URL.createObjectURL(file.originFileObj);
829
+ }
830
+ setPreviewType(file.type || file.name.substring(file.name.lastIndexOf(".") + 1));
831
+ setPreviewTitle(file.name || (file.url || "").substring((file.url || "").lastIndexOf("/") + 1));
832
+ setPreviewOpen(true);
833
+ };
834
+ const handleCancel = () => {
835
+ setPreviewImage(null);
836
+ setPreviewType(null);
837
+ setPreviewOpen(false);
838
+ setPreviewTitle(null);
839
+ };
840
+ return /* @__PURE__ */ React23.createElement(React23.Fragment, null, Object.keys(feildData).length !== 0 && /* @__PURE__ */ React23.createElement("span", { className: "native-camera-lib" }, /* @__PURE__ */ React23.createElement("p", { className: "flat-label text-capitalize" }, feildData.label), /* @__PURE__ */ React23.createElement("label", { className: "native-camera-button" }, /* @__PURE__ */ React23.createElement("div", { className: "ant-btn" }, /* @__PURE__ */ React23.createElement(UploadOutlined, null), " ", feildData.max_count ? `Upload (Max:${feildData.max_count})` : "Upload"), /* @__PURE__ */ React23.createElement(
841
+ "input",
842
+ {
843
+ id: "upload",
844
+ type: "file",
845
+ accept: "image/*;capture=camera",
846
+ onChange: (e) => uploadChange(e.target.files)
847
+ }
848
+ )), /* @__PURE__ */ React23.createElement(
849
+ Upload,
850
+ {
851
+ accept: feildData.accept,
852
+ listType: feildData.list_type,
853
+ maxCount: feildData.max_count,
854
+ multiple: feildData.multiple,
855
+ fileList: feildData.value,
856
+ onChange: uploadChange2,
857
+ onPreview: handlePreview,
858
+ showUploadList: true
859
+ },
860
+ feildData.list_type === "picture-card" && /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement(PlusOutlined2, null), /* @__PURE__ */ React23.createElement("div", { style: { marginTop: 8 } }, "Upload ", /* @__PURE__ */ React23.createElement("small", { className: "d-flex" }, "(Max:", feildData.max_count, ")"))),
861
+ feildData.list_type === "picture" && /* @__PURE__ */ React23.createElement(Button3, { icon: /* @__PURE__ */ React23.createElement(UploadOutlined, null) }, feildData.max_count ? `Upload (Max:${feildData.max_count})` : "Upload")
862
+ ), feildData.errors && feildData.errors.length > 0 && feildData.errors.map((error, eKey) => /* @__PURE__ */ React23.createElement("small", { key: eKey, className: "text-danger animated flash" }, error.message)), /* @__PURE__ */ React23.createElement(
863
+ Modal2,
864
+ {
865
+ visible: previewOpen,
866
+ width: "100%",
867
+ zIndex: 1025,
868
+ centered: true,
869
+ maskClosable: false,
870
+ title: previewTitle,
871
+ footer: null,
872
+ onCancel: handleCancel,
873
+ destroyOnClose: true
874
+ },
875
+ /* @__PURE__ */ React23.createElement(Tooltip, { title: "Close", placement: "bottom" }, /* @__PURE__ */ React23.createElement(CloseOutlined, { className: "border popup-close", onClick: handleCancel })),
876
+ previewType === "application/pdf" || previewType === "pdf" ? /* @__PURE__ */ React23.createElement(
877
+ "iframe",
878
+ {
879
+ title: "document",
880
+ style: { width: "95vw", height: "40vw" },
881
+ src: `${previewImage}#toolbar=0`
882
+ }
883
+ ) : /* @__PURE__ */ React23.createElement("img", { alt: "image", src: previewImage || void 0, className: "d-flex mx-auto w-100" })
884
+ )));
885
+ };
886
+
887
+ // src/Components/Image.tsx
888
+ import React24 from "react";
889
+ var Image = (props) => {
890
+ return /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement("img", { className: props.className, src: props.img, alt: "image" }));
891
+ };
892
+
893
+ // src/Components/SingleCheckbox.tsx
894
+ import React25 from "react";
895
+ import { Checkbox as Checkbox2 } from "antd";
896
+ var SingleCheckbox = (props) => {
897
+ const handleChange = (e) => {
898
+ if (props.onChange) {
899
+ props.onChange(e.target.checked);
900
+ }
901
+ };
902
+ return /* @__PURE__ */ React25.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
903
+ };
904
+
905
+ // src/Components/MultiSelect.tsx
906
+ import React26, { useState as useState8 } from "react";
907
+ import { Select as Select4 } from "antd";
908
+ var MultiSelect = (props) => {
909
+ const [selectedValue, setSelectedValue] = useState8({ firstValue: {}, secondValue: {} });
910
+ const handleFirstChange = (value) => {
911
+ if (props.onChange) {
912
+ const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
913
+ console.log("filterOption1--------", filterOption2);
914
+ setSelectedValue((prev) => ({ ...prev, firstValue: filterOption2 && filterOption2 }));
915
+ props.onChange(selectedValue.firstValue && selectedValue);
916
+ }
917
+ };
918
+ const handleSecondChange = (value) => {
919
+ if (props.onChange) {
920
+ const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
921
+ console.log("filterOption2--------", filterOption2);
922
+ setSelectedValue((prev) => ({ ...prev, secondValue: filterOption2 && filterOption2 }));
923
+ props.onChange(selectedValue.secondValue && selectedValue);
924
+ }
925
+ };
926
+ return /* @__PURE__ */ React26.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ React26.createElement(
927
+ Select4,
928
+ {
929
+ onChange: handleFirstChange,
930
+ variant: props.variant,
931
+ options: props.options
932
+ }
933
+ ), /* @__PURE__ */ React26.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React26.createElement(
934
+ Select4,
935
+ {
936
+ onChange: handleSecondChange,
937
+ variant: props.variant,
938
+ options: props.options
939
+ }
940
+ ));
751
941
  };
752
942
  export {
753
943
  AddMoreTable,
@@ -756,6 +946,8 @@ export {
756
946
  CkEditor,
757
947
  DatePickerElement,
758
948
  DateRangePickerElement,
949
+ Image,
950
+ MultiSelect,
759
951
  MultipleSelectElement,
760
952
  Navbar,
761
953
  NumberElement,
@@ -763,8 +955,10 @@ export {
763
955
  RadioElement,
764
956
  SelectElement,
765
957
  Sidebar,
958
+ SingleCheckbox,
766
959
  SingleSelectElement,
767
960
  TableElement,
768
961
  TextElement,
769
- TextareaElement
962
+ TextareaElement,
963
+ UploadElement
770
964
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.13-Beta4",
3
+ "version": "0.0.13-Beta40",
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",