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

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