catchup-library-web 1.8.0 → 1.9.1

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 (7) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +98 -90
  4. package/dist/index.mjs +99 -91
  5. package/package.json +1 -1
  6. package/src/components/images/BaseImage.tsx +104 -95
  7. package/src/utilization/CatchtivityUtilization.ts +1 -1
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 ${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
@@ -1183,7 +1191,7 @@ var constructInputWithSpecialExpressionList = (inputText) => {
1183
1191
  const splittedUnderline = splittedBold[i].split("__");
1184
1192
  for (let j = 0; j < splittedUnderline.length; j++) {
1185
1193
  let isEquation = false;
1186
- const splittedEquation = splittedUnderline[j].split("`");
1194
+ const splittedEquation = splittedUnderline[j].split("$$");
1187
1195
  for (let k = 0; k < splittedEquation.length; k++) {
1188
1196
  inputPartList.push({
1189
1197
  value: splittedEquation[k],
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 ${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
@@ -984,7 +992,7 @@ var constructInputWithSpecialExpressionList = (inputText) => {
984
992
  const splittedUnderline = splittedBold[i].split("__");
985
993
  for (let j = 0; j < splittedUnderline.length; j++) {
986
994
  let isEquation = false;
987
- const splittedEquation = splittedUnderline[j].split("`");
995
+ const splittedEquation = splittedUnderline[j].split("$$");
988
996
  for (let k = 0; k < splittedEquation.length; k++) {
989
997
  inputPartList.push({
990
998
  value: splittedEquation[k],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "1.8.0",
3
+ "version": "1.9.1",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/images/BaseImage.tsx CHANGED
@@ -1,106 +1,114 @@
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} // Now this ref will be properly forwarded
92
+ className={`w-full ${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
+ // Add display name for better debugging
108
+ BaseImage.displayName = "BaseImage";
100
109
 
101
- // Then update your IBaseImageProps interface to include the borderRadius property
110
+ // Update your interface to remove the ref prop since it's now handled by forwardRef
102
111
  interface IBaseImageProps {
103
- ref?: React.RefObject<HTMLImageElement>;
104
112
  size?:
105
113
  | "xsmall"
106
114
  | "small"
@@ -125,6 +133,7 @@ interface IBaseImageProps {
125
133
  dataToolTipPlace?: string;
126
134
  dataToolTipVariant?: string;
127
135
  dataToolTipHTML?: string;
128
- borderRadius?: string; // Add this property
136
+ borderRadius?: string;
129
137
  }
138
+
130
139
  export default BaseImage;
package/src/utilization/CatchtivityUtilization.ts CHANGED
@@ -179,7 +179,7 @@ export const constructInputWithSpecialExpressionList = (inputText: string) => {
179
179
  const splittedUnderline = splittedBold[i].split("__");
180
180
  for (let j = 0; j < splittedUnderline.length; j++) {
181
181
  let isEquation = false;
182
- const splittedEquation = splittedUnderline[j].split("`");
182
+ const splittedEquation = splittedUnderline[j].split("$$");
183
183
  for (let k = 0; k < splittedEquation.length; k++) {
184
184
  inputPartList.push({
185
185
  value: splittedEquation[k],