catchup-library-web 1.9.0 → 1.9.2

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.d.mts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +97 -89
  4. package/dist/index.mjs +98 -90
  5. package/package.json +1 -1
  6. package/src/components/images/BaseImage.tsx +102 -95
package/dist/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as react from 'react';
2
3
  export { default as i18n } from 'i18next';
3
4
 
4
5
  interface IButtonProps {
@@ -23,9 +24,8 @@ declare const CancelButton: ({ title, size, onClick, disabled, iconPosition, tex
23
24
 
24
25
  declare const ApproveButton: ({ title, size, onClick, disabled, iconPosition, textOnly, iconOnly, }: IButtonProps) => react_jsx_runtime.JSX.Element;
25
26
 
26
- declare const BaseImage: (props: IBaseImageProps) => react_jsx_runtime.JSX.Element | null;
27
+ declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
27
28
  interface IBaseImageProps {
28
- ref?: React.RefObject<HTMLImageElement>;
29
29
  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge" | "4xlarge" | "custom";
30
30
  className?: string;
31
31
  widthClassName?: string;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as react from 'react';
2
3
  export { default as i18n } from 'i18next';
3
4
 
4
5
  interface IButtonProps {
@@ -23,9 +24,8 @@ declare const CancelButton: ({ title, size, onClick, disabled, iconPosition, tex
23
24
 
24
25
  declare const ApproveButton: ({ title, size, onClick, disabled, iconPosition, textOnly, iconOnly, }: IButtonProps) => react_jsx_runtime.JSX.Element;
25
26
 
26
- declare const BaseImage: (props: IBaseImageProps) => react_jsx_runtime.JSX.Element | null;
27
+ declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
27
28
  interface IBaseImageProps {
28
- ref?: React.RefObject<HTMLImageElement>;
29
29
  size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge" | "4xlarge" | "custom";
30
30
  className?: string;
31
31
  widthClassName?: string;
package/dist/index.js CHANGED
@@ -303,96 +303,104 @@ var BaseLoading_default = BaseLoading;
303
303
 
304
304
  // src/components/images/BaseImage.tsx
305
305
  var import_jsx_runtime2 = require("react/jsx-runtime");
306
- var BaseImage = (props) => {
307
- const {
308
- ref,
309
- size,
310
- className,
311
- widthClassName,
312
- heightClassName,
313
- src,
314
- hidden,
315
- alt,
316
- showLoading,
317
- onLoad,
318
- onClick,
319
- dataToolTipId,
320
- dataToolTipContent,
321
- dataToolTipPlace,
322
- dataToolTipVariant,
323
- dataToolTipHTML,
324
- borderRadius
325
- // Add this prop
326
- } = props;
327
- const [key, setKey] = (0, import_react.useState)((/* @__PURE__ */ new Date()).getTime());
328
- const [loading, setLoading] = (0, import_react.useState)(false);
329
- const handleOnClick = (e) => {
330
- e.preventDefault();
331
- if (showLoading) {
332
- setLoading(true);
333
- onClick && onClick(e);
334
- setLoading(false);
335
- } else {
336
- onClick && onClick(e);
337
- }
338
- };
339
- if (!src) return null;
340
- let currentClassName;
341
- let currentWidthClassName;
342
- let currentHeightClassName;
343
- if (size === "xsmall") {
344
- currentWidthClassName = "w-4";
345
- currentHeightClassName = "h-4";
346
- } else if (size === "small") {
347
- currentWidthClassName = "w-6";
348
- currentHeightClassName = "h-6";
349
- } else if (size === "medium") {
350
- currentWidthClassName = "w-8";
351
- currentHeightClassName = "h-8";
352
- } else if (size === "large") {
353
- currentWidthClassName = "w-10";
354
- currentHeightClassName = "h-10";
355
- } else if (size === "xlarge") {
356
- currentWidthClassName = "w-12";
357
- currentHeightClassName = "h-12";
358
- } else if (size === "2xlarge") {
359
- currentWidthClassName = "w-14";
360
- currentHeightClassName = "h-14";
361
- } else if (size === "3xlarge") {
362
- currentWidthClassName = "w-16";
363
- currentHeightClassName = "h-16";
364
- } else if (size === "4xlarge") {
365
- currentWidthClassName = "w-20";
366
- currentHeightClassName = "h-20";
367
- } else if (size === "custom") {
368
- currentClassName = className;
369
- currentWidthClassName = widthClassName;
370
- currentHeightClassName = heightClassName;
306
+ var BaseImage = (0, import_react.forwardRef)(
307
+ (props, ref) => {
308
+ const {
309
+ size,
310
+ className,
311
+ widthClassName,
312
+ heightClassName,
313
+ src,
314
+ hidden,
315
+ alt,
316
+ showLoading,
317
+ onLoad,
318
+ onClick,
319
+ dataToolTipId,
320
+ dataToolTipContent,
321
+ dataToolTipPlace,
322
+ dataToolTipVariant,
323
+ dataToolTipHTML,
324
+ borderRadius
325
+ } = props;
326
+ const [key, setKey] = (0, import_react.useState)((/* @__PURE__ */ new Date()).getTime());
327
+ const [loading, setLoading] = (0, import_react.useState)(false);
328
+ const handleOnClick = (e) => {
329
+ e.preventDefault();
330
+ if (showLoading) {
331
+ setLoading(true);
332
+ onClick && onClick(e);
333
+ setLoading(false);
334
+ } else {
335
+ onClick && onClick(e);
336
+ }
337
+ };
338
+ if (!src) return null;
339
+ let currentClassName;
340
+ let currentWidthClassName;
341
+ let currentHeightClassName;
342
+ if (size === "xsmall") {
343
+ currentWidthClassName = "w-4";
344
+ currentHeightClassName = "h-4";
345
+ } else if (size === "small") {
346
+ currentWidthClassName = "w-6";
347
+ currentHeightClassName = "h-6";
348
+ } else if (size === "medium") {
349
+ currentWidthClassName = "w-8";
350
+ currentHeightClassName = "h-8";
351
+ } else if (size === "large") {
352
+ currentWidthClassName = "w-10";
353
+ currentHeightClassName = "h-10";
354
+ } else if (size === "xlarge") {
355
+ currentWidthClassName = "w-12";
356
+ currentHeightClassName = "h-12";
357
+ } else if (size === "2xlarge") {
358
+ currentWidthClassName = "w-14";
359
+ currentHeightClassName = "h-14";
360
+ } else if (size === "3xlarge") {
361
+ currentWidthClassName = "w-16";
362
+ currentHeightClassName = "h-16";
363
+ } else if (size === "4xlarge") {
364
+ currentWidthClassName = "w-20";
365
+ currentHeightClassName = "h-20";
366
+ } else if (size === "custom") {
367
+ currentClassName = className;
368
+ currentWidthClassName = widthClassName;
369
+ currentHeightClassName = heightClassName;
370
+ }
371
+ return loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
372
+ BaseLoading_default,
373
+ {
374
+ size: "small",
375
+ primaryColor: "#57C2D3",
376
+ secondaryColor: "#57C2D3"
377
+ }
378
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
379
+ "span",
380
+ {
381
+ className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block ${hidden ? "hidden" : ""}`,
382
+ onClick: handleOnClick,
383
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
384
+ "img",
385
+ {
386
+ ref,
387
+ className: `w-full h-full object-contain ${borderRadius || ""}`,
388
+ src,
389
+ alt,
390
+ onLoad,
391
+ "data-tooltip-id": dataToolTipId,
392
+ "data-tooltip-content": dataToolTipContent,
393
+ "data-tooltip-place": dataToolTipPlace,
394
+ "data-tooltip-variant": dataToolTipVariant,
395
+ "data-tooltip-html": dataToolTipHTML
396
+ }
397
+ )
398
+ },
399
+ key
400
+ );
371
401
  }
372
- return loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BaseLoading_default, { size: "small", primaryColor: "#57C2D3", secondaryColor: "#57C2D3" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
373
- "span",
374
- {
375
- className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block ${hidden ? "hidden" : ""}`,
376
- onClick: handleOnClick,
377
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
378
- "img",
379
- {
380
- ref,
381
- className: `w-full ${borderRadius || ""}`,
382
- src,
383
- alt,
384
- onLoad,
385
- "data-tooltip-id": dataToolTipId,
386
- "data-tooltip-content": dataToolTipContent,
387
- "data-tooltip-place": dataToolTipPlace,
388
- "data-tooltip-variant": dataToolTipVariant,
389
- "data-tooltip-html": dataToolTipHTML
390
- }
391
- )
392
- },
393
- key
394
- );
395
- };
402
+ );
403
+ BaseImage.displayName = "BaseImage";
396
404
  var BaseImage_default = BaseImage;
397
405
 
398
406
  // src/components/buttons/PrimaryButton.tsx
package/dist/index.mjs CHANGED
@@ -42,7 +42,7 @@ var __async = (__this, __arguments, generator) => {
42
42
  import { useState as useState2 } from "react";
43
43
 
44
44
  // src/components/images/BaseImage.tsx
45
- import { useState } from "react";
45
+ import { useState, forwardRef } from "react";
46
46
 
47
47
  // src/components/loading/BaseLoading.tsx
48
48
  import { Oval } from "react-loader-spinner";
@@ -104,96 +104,104 @@ var BaseLoading_default = BaseLoading;
104
104
 
105
105
  // src/components/images/BaseImage.tsx
106
106
  import { jsx as jsx2 } from "react/jsx-runtime";
107
- var BaseImage = (props) => {
108
- const {
109
- ref,
110
- size,
111
- className,
112
- widthClassName,
113
- heightClassName,
114
- src,
115
- hidden,
116
- alt,
117
- showLoading,
118
- onLoad,
119
- onClick,
120
- dataToolTipId,
121
- dataToolTipContent,
122
- dataToolTipPlace,
123
- dataToolTipVariant,
124
- dataToolTipHTML,
125
- borderRadius
126
- // Add this prop
127
- } = props;
128
- const [key, setKey] = useState((/* @__PURE__ */ new Date()).getTime());
129
- const [loading, setLoading] = useState(false);
130
- const handleOnClick = (e) => {
131
- e.preventDefault();
132
- if (showLoading) {
133
- setLoading(true);
134
- onClick && onClick(e);
135
- setLoading(false);
136
- } else {
137
- onClick && onClick(e);
138
- }
139
- };
140
- if (!src) return null;
141
- let currentClassName;
142
- let currentWidthClassName;
143
- let currentHeightClassName;
144
- if (size === "xsmall") {
145
- currentWidthClassName = "w-4";
146
- currentHeightClassName = "h-4";
147
- } else if (size === "small") {
148
- currentWidthClassName = "w-6";
149
- currentHeightClassName = "h-6";
150
- } else if (size === "medium") {
151
- currentWidthClassName = "w-8";
152
- currentHeightClassName = "h-8";
153
- } else if (size === "large") {
154
- currentWidthClassName = "w-10";
155
- currentHeightClassName = "h-10";
156
- } else if (size === "xlarge") {
157
- currentWidthClassName = "w-12";
158
- currentHeightClassName = "h-12";
159
- } else if (size === "2xlarge") {
160
- currentWidthClassName = "w-14";
161
- currentHeightClassName = "h-14";
162
- } else if (size === "3xlarge") {
163
- currentWidthClassName = "w-16";
164
- currentHeightClassName = "h-16";
165
- } else if (size === "4xlarge") {
166
- currentWidthClassName = "w-20";
167
- currentHeightClassName = "h-20";
168
- } else if (size === "custom") {
169
- currentClassName = className;
170
- currentWidthClassName = widthClassName;
171
- currentHeightClassName = heightClassName;
107
+ var BaseImage = forwardRef(
108
+ (props, ref) => {
109
+ const {
110
+ size,
111
+ className,
112
+ widthClassName,
113
+ heightClassName,
114
+ src,
115
+ hidden,
116
+ alt,
117
+ showLoading,
118
+ onLoad,
119
+ onClick,
120
+ dataToolTipId,
121
+ dataToolTipContent,
122
+ dataToolTipPlace,
123
+ dataToolTipVariant,
124
+ dataToolTipHTML,
125
+ borderRadius
126
+ } = props;
127
+ const [key, setKey] = useState((/* @__PURE__ */ new Date()).getTime());
128
+ const [loading, setLoading] = useState(false);
129
+ const handleOnClick = (e) => {
130
+ e.preventDefault();
131
+ if (showLoading) {
132
+ setLoading(true);
133
+ onClick && onClick(e);
134
+ setLoading(false);
135
+ } else {
136
+ onClick && onClick(e);
137
+ }
138
+ };
139
+ if (!src) return null;
140
+ let currentClassName;
141
+ let currentWidthClassName;
142
+ let currentHeightClassName;
143
+ if (size === "xsmall") {
144
+ currentWidthClassName = "w-4";
145
+ currentHeightClassName = "h-4";
146
+ } else if (size === "small") {
147
+ currentWidthClassName = "w-6";
148
+ currentHeightClassName = "h-6";
149
+ } else if (size === "medium") {
150
+ currentWidthClassName = "w-8";
151
+ currentHeightClassName = "h-8";
152
+ } else if (size === "large") {
153
+ currentWidthClassName = "w-10";
154
+ currentHeightClassName = "h-10";
155
+ } else if (size === "xlarge") {
156
+ currentWidthClassName = "w-12";
157
+ currentHeightClassName = "h-12";
158
+ } else if (size === "2xlarge") {
159
+ currentWidthClassName = "w-14";
160
+ currentHeightClassName = "h-14";
161
+ } else if (size === "3xlarge") {
162
+ currentWidthClassName = "w-16";
163
+ currentHeightClassName = "h-16";
164
+ } else if (size === "4xlarge") {
165
+ currentWidthClassName = "w-20";
166
+ currentHeightClassName = "h-20";
167
+ } else if (size === "custom") {
168
+ currentClassName = className;
169
+ currentWidthClassName = widthClassName;
170
+ currentHeightClassName = heightClassName;
171
+ }
172
+ return loading ? /* @__PURE__ */ jsx2(
173
+ BaseLoading_default,
174
+ {
175
+ size: "small",
176
+ primaryColor: "#57C2D3",
177
+ secondaryColor: "#57C2D3"
178
+ }
179
+ ) : /* @__PURE__ */ jsx2(
180
+ "span",
181
+ {
182
+ className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block ${hidden ? "hidden" : ""}`,
183
+ onClick: handleOnClick,
184
+ children: /* @__PURE__ */ jsx2(
185
+ "img",
186
+ {
187
+ ref,
188
+ className: `w-full h-full object-contain ${borderRadius || ""}`,
189
+ src,
190
+ alt,
191
+ onLoad,
192
+ "data-tooltip-id": dataToolTipId,
193
+ "data-tooltip-content": dataToolTipContent,
194
+ "data-tooltip-place": dataToolTipPlace,
195
+ "data-tooltip-variant": dataToolTipVariant,
196
+ "data-tooltip-html": dataToolTipHTML
197
+ }
198
+ )
199
+ },
200
+ key
201
+ );
172
202
  }
173
- return loading ? /* @__PURE__ */ jsx2(BaseLoading_default, { size: "small", primaryColor: "#57C2D3", secondaryColor: "#57C2D3" }) : /* @__PURE__ */ jsx2(
174
- "span",
175
- {
176
- className: `${currentWidthClassName ? currentWidthClassName : ""} ${currentHeightClassName ? currentHeightClassName : ""} ${currentClassName ? currentClassName : ""} cursor-pointer inline-block ${hidden ? "hidden" : ""}`,
177
- onClick: handleOnClick,
178
- children: /* @__PURE__ */ jsx2(
179
- "img",
180
- {
181
- ref,
182
- className: `w-full ${borderRadius || ""}`,
183
- src,
184
- alt,
185
- onLoad,
186
- "data-tooltip-id": dataToolTipId,
187
- "data-tooltip-content": dataToolTipContent,
188
- "data-tooltip-place": dataToolTipPlace,
189
- "data-tooltip-variant": dataToolTipVariant,
190
- "data-tooltip-html": dataToolTipHTML
191
- }
192
- )
193
- },
194
- key
195
- );
196
- };
203
+ );
204
+ BaseImage.displayName = "BaseImage";
197
205
  var BaseImage_default = BaseImage;
198
206
 
199
207
  // src/components/buttons/PrimaryButton.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "1.9.0",
3
+ "version": "1.9.2",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/images/BaseImage.tsx CHANGED
@@ -1,106 +1,112 @@
1
- import { useState } from "react";
1
+ import { useState, forwardRef } from "react";
2
2
  import BaseLoading from "../loading/BaseLoading";
3
3
 
4
- const BaseImage = (props: IBaseImageProps) => {
5
- const {
6
- ref,
7
- size,
8
- className,
9
- widthClassName,
10
- heightClassName,
11
- src,
12
- hidden,
13
- alt,
14
- showLoading,
15
- onLoad,
16
- onClick,
17
- dataToolTipId,
18
- dataToolTipContent,
19
- dataToolTipPlace,
20
- dataToolTipVariant,
21
- dataToolTipHTML,
22
- borderRadius, // Add this prop
23
- } = props;
24
- const [key, setKey] = useState(new Date().getTime());
25
- const [loading, setLoading] = useState(false);
4
+ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
5
+ (props, ref) => {
6
+ const {
7
+ size,
8
+ className,
9
+ widthClassName,
10
+ heightClassName,
11
+ src,
12
+ hidden,
13
+ alt,
14
+ showLoading,
15
+ onLoad,
16
+ onClick,
17
+ dataToolTipId,
18
+ dataToolTipContent,
19
+ dataToolTipPlace,
20
+ dataToolTipVariant,
21
+ dataToolTipHTML,
22
+ borderRadius,
23
+ } = props;
26
24
 
27
- const handleOnClick = (e: any) => {
28
- e.preventDefault();
29
- if (showLoading) {
30
- setLoading(true);
31
- onClick && onClick(e);
32
- setLoading(false);
33
- } else {
34
- onClick && onClick(e);
35
- }
36
- };
25
+ const [key, setKey] = useState(new Date().getTime());
26
+ const [loading, setLoading] = useState(false);
37
27
 
38
- if (!src) return null;
28
+ const handleOnClick = (e: any) => {
29
+ e.preventDefault();
30
+ if (showLoading) {
31
+ setLoading(true);
32
+ onClick && onClick(e);
33
+ setLoading(false);
34
+ } else {
35
+ onClick && onClick(e);
36
+ }
37
+ };
39
38
 
40
- let currentClassName;
41
- let currentWidthClassName;
42
- let currentHeightClassName;
43
- if (size === "xsmall") {
44
- currentWidthClassName = "w-4";
45
- currentHeightClassName = "h-4";
46
- } else if (size === "small") {
47
- currentWidthClassName = "w-6";
48
- currentHeightClassName = "h-6";
49
- } else if (size === "medium") {
50
- currentWidthClassName = "w-8";
51
- currentHeightClassName = "h-8";
52
- } else if (size === "large") {
53
- currentWidthClassName = "w-10";
54
- currentHeightClassName = "h-10";
55
- } else if (size === "xlarge") {
56
- currentWidthClassName = "w-12";
57
- currentHeightClassName = "h-12";
58
- } else if (size === "2xlarge") {
59
- currentWidthClassName = "w-14";
60
- currentHeightClassName = "h-14";
61
- } else if (size === "3xlarge") {
62
- currentWidthClassName = "w-16";
63
- currentHeightClassName = "h-16";
64
- } else if (size === "4xlarge") {
65
- currentWidthClassName = "w-20";
66
- currentHeightClassName = "h-20";
67
- } else if (size === "custom") {
68
- currentClassName = className;
69
- currentWidthClassName = widthClassName;
70
- currentHeightClassName = heightClassName;
71
- }
39
+ if (!src) return null;
40
+
41
+ let currentClassName;
42
+ let currentWidthClassName;
43
+ let currentHeightClassName;
44
+ if (size === "xsmall") {
45
+ currentWidthClassName = "w-4";
46
+ currentHeightClassName = "h-4";
47
+ } else if (size === "small") {
48
+ currentWidthClassName = "w-6";
49
+ currentHeightClassName = "h-6";
50
+ } else if (size === "medium") {
51
+ currentWidthClassName = "w-8";
52
+ currentHeightClassName = "h-8";
53
+ } else if (size === "large") {
54
+ currentWidthClassName = "w-10";
55
+ currentHeightClassName = "h-10";
56
+ } else if (size === "xlarge") {
57
+ currentWidthClassName = "w-12";
58
+ currentHeightClassName = "h-12";
59
+ } else if (size === "2xlarge") {
60
+ currentWidthClassName = "w-14";
61
+ currentHeightClassName = "h-14";
62
+ } else if (size === "3xlarge") {
63
+ currentWidthClassName = "w-16";
64
+ currentHeightClassName = "h-16";
65
+ } else if (size === "4xlarge") {
66
+ currentWidthClassName = "w-20";
67
+ currentHeightClassName = "h-20";
68
+ } else if (size === "custom") {
69
+ currentClassName = className;
70
+ currentWidthClassName = widthClassName;
71
+ currentHeightClassName = heightClassName;
72
+ }
72
73
 
73
- return loading ? (
74
- <BaseLoading size="small" primaryColor="#57C2D3" secondaryColor="#57C2D3" />
75
- ) : (
76
- <span
77
- key={key}
78
- className={`${currentWidthClassName ? currentWidthClassName : ""} ${
79
- currentHeightClassName ? currentHeightClassName : ""
80
- } ${
81
- currentClassName ? currentClassName : ""
82
- } cursor-pointer inline-block ${hidden ? "hidden" : ""}`}
83
- onClick={handleOnClick}
84
- >
85
- <img
86
- ref={ref}
87
- className={`w-full ${borderRadius || ""}`} // Apply border radius class here
88
- src={src}
89
- alt={alt}
90
- onLoad={onLoad}
91
- data-tooltip-id={dataToolTipId}
92
- data-tooltip-content={dataToolTipContent}
93
- data-tooltip-place={dataToolTipPlace}
94
- data-tooltip-variant={dataToolTipVariant}
95
- data-tooltip-html={dataToolTipHTML}
74
+ return loading ? (
75
+ <BaseLoading
76
+ size="small"
77
+ primaryColor="#57C2D3"
78
+ secondaryColor="#57C2D3"
96
79
  />
97
- </span>
98
- );
99
- };
80
+ ) : (
81
+ <span
82
+ key={key}
83
+ className={`${currentWidthClassName ? currentWidthClassName : ""} ${
84
+ currentHeightClassName ? currentHeightClassName : ""
85
+ } ${
86
+ currentClassName ? currentClassName : ""
87
+ } cursor-pointer inline-block ${hidden ? "hidden" : ""}`}
88
+ onClick={handleOnClick}
89
+ >
90
+ <img
91
+ ref={ref}
92
+ className={`w-full h-full object-contain ${borderRadius || ""}`}
93
+ src={src}
94
+ alt={alt}
95
+ onLoad={onLoad}
96
+ data-tooltip-id={dataToolTipId}
97
+ data-tooltip-content={dataToolTipContent}
98
+ data-tooltip-place={dataToolTipPlace}
99
+ data-tooltip-variant={dataToolTipVariant}
100
+ data-tooltip-html={dataToolTipHTML}
101
+ />
102
+ </span>
103
+ );
104
+ }
105
+ );
106
+
107
+ BaseImage.displayName = "BaseImage";
100
108
 
101
- // Then update your IBaseImageProps interface to include the borderRadius property
102
109
  interface IBaseImageProps {
103
- ref?: React.RefObject<HTMLImageElement>;
104
110
  size?:
105
111
  | "xsmall"
106
112
  | "small"
@@ -125,6 +131,7 @@ interface IBaseImageProps {
125
131
  dataToolTipPlace?: string;
126
132
  dataToolTipVariant?: string;
127
133
  dataToolTipHTML?: string;
128
- borderRadius?: string; // Add this property
134
+ borderRadius?: string;
129
135
  }
136
+
130
137
  export default BaseImage;