catchup-library-web 1.20.5 → 1.20.7
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.
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +7 -3
- package/dist/index.mjs +7 -3
- package/package.json +1 -1
- package/src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx +1 -1
- package/src/components/images/BaseImage.tsx +8 -33
- package/src/properties/ImageProperties.ts +16 -4
package/dist/index.d.mts
CHANGED
|
@@ -68,12 +68,12 @@ declare const FullCard: ({ backgroundColor, borderColor, opacity, usePadding, ch
|
|
|
68
68
|
|
|
69
69
|
declare const BaseCard: ({ children }: IBaseCardProps) => react_jsx_runtime.JSX.Element;
|
|
70
70
|
|
|
71
|
-
declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
|
|
72
71
|
interface IBaseImageProps {
|
|
73
72
|
size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge" | "4xlarge" | "5xlarge" | "6xlarge" | "custom";
|
|
74
73
|
className?: string;
|
|
75
74
|
widthClassName?: string;
|
|
76
75
|
heightClassName?: string;
|
|
76
|
+
imageClassName?: string;
|
|
77
77
|
src?: string;
|
|
78
78
|
hidden?: boolean;
|
|
79
79
|
alt?: string;
|
|
@@ -88,6 +88,8 @@ interface IBaseImageProps {
|
|
|
88
88
|
borderRadius?: string;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
+
declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
|
|
92
|
+
|
|
91
93
|
interface IBaseLoadingProps {
|
|
92
94
|
height?: number;
|
|
93
95
|
width?: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -68,12 +68,12 @@ declare const FullCard: ({ backgroundColor, borderColor, opacity, usePadding, ch
|
|
|
68
68
|
|
|
69
69
|
declare const BaseCard: ({ children }: IBaseCardProps) => react_jsx_runtime.JSX.Element;
|
|
70
70
|
|
|
71
|
-
declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
|
|
72
71
|
interface IBaseImageProps {
|
|
73
72
|
size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge" | "4xlarge" | "5xlarge" | "6xlarge" | "custom";
|
|
74
73
|
className?: string;
|
|
75
74
|
widthClassName?: string;
|
|
76
75
|
heightClassName?: string;
|
|
76
|
+
imageClassName?: string;
|
|
77
77
|
src?: string;
|
|
78
78
|
hidden?: boolean;
|
|
79
79
|
alt?: string;
|
|
@@ -88,6 +88,8 @@ interface IBaseImageProps {
|
|
|
88
88
|
borderRadius?: string;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
+
declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
|
|
92
|
+
|
|
91
93
|
interface IBaseLoadingProps {
|
|
92
94
|
height?: number;
|
|
93
95
|
width?: number;
|
package/dist/index.js
CHANGED
|
@@ -476,6 +476,7 @@ var BaseImage = (0, import_react2.forwardRef)(
|
|
|
476
476
|
className,
|
|
477
477
|
widthClassName,
|
|
478
478
|
heightClassName,
|
|
479
|
+
imageClassName,
|
|
479
480
|
src,
|
|
480
481
|
hidden,
|
|
481
482
|
alt,
|
|
@@ -505,6 +506,7 @@ var BaseImage = (0, import_react2.forwardRef)(
|
|
|
505
506
|
let currentClassName;
|
|
506
507
|
let currentWidthClassName;
|
|
507
508
|
let currentHeightClassName;
|
|
509
|
+
let currentImageClassName = "w-full h-full object-contain";
|
|
508
510
|
if (size === "xsmall") {
|
|
509
511
|
currentWidthClassName = "w-4";
|
|
510
512
|
currentHeightClassName = "h-4";
|
|
@@ -539,6 +541,9 @@ var BaseImage = (0, import_react2.forwardRef)(
|
|
|
539
541
|
currentClassName = className;
|
|
540
542
|
currentWidthClassName = widthClassName;
|
|
541
543
|
currentHeightClassName = heightClassName;
|
|
544
|
+
if (imageClassName) {
|
|
545
|
+
currentImageClassName = imageClassName;
|
|
546
|
+
}
|
|
542
547
|
}
|
|
543
548
|
return loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
544
549
|
BaseLoading_default,
|
|
@@ -556,7 +561,7 @@ var BaseImage = (0, import_react2.forwardRef)(
|
|
|
556
561
|
"img",
|
|
557
562
|
{
|
|
558
563
|
ref,
|
|
559
|
-
className:
|
|
564
|
+
className: `${currentImageClassName} ${borderRadius}`,
|
|
560
565
|
src,
|
|
561
566
|
alt,
|
|
562
567
|
onLoad,
|
|
@@ -572,7 +577,6 @@ var BaseImage = (0, import_react2.forwardRef)(
|
|
|
572
577
|
);
|
|
573
578
|
}
|
|
574
579
|
);
|
|
575
|
-
BaseImage.displayName = "BaseImage";
|
|
576
580
|
var BaseImage_default = BaseImage;
|
|
577
581
|
|
|
578
582
|
// src/components/buttons/PrimaryButton.tsx
|
|
@@ -4527,7 +4531,7 @@ var ShowMaterialMediaByContentType = ({
|
|
|
4527
4531
|
alt: "image",
|
|
4528
4532
|
ref: imageRef,
|
|
4529
4533
|
size: "custom",
|
|
4530
|
-
|
|
4534
|
+
imageClassName: "max-h-full max-w-full object-contain rounded-catchup-xlarge",
|
|
4531
4535
|
onLoad: () => {
|
|
4532
4536
|
setIsLoaded(true);
|
|
4533
4537
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -260,6 +260,7 @@ var BaseImage = forwardRef(
|
|
|
260
260
|
className,
|
|
261
261
|
widthClassName,
|
|
262
262
|
heightClassName,
|
|
263
|
+
imageClassName,
|
|
263
264
|
src,
|
|
264
265
|
hidden,
|
|
265
266
|
alt,
|
|
@@ -289,6 +290,7 @@ var BaseImage = forwardRef(
|
|
|
289
290
|
let currentClassName;
|
|
290
291
|
let currentWidthClassName;
|
|
291
292
|
let currentHeightClassName;
|
|
293
|
+
let currentImageClassName = "w-full h-full object-contain";
|
|
292
294
|
if (size === "xsmall") {
|
|
293
295
|
currentWidthClassName = "w-4";
|
|
294
296
|
currentHeightClassName = "h-4";
|
|
@@ -323,6 +325,9 @@ var BaseImage = forwardRef(
|
|
|
323
325
|
currentClassName = className;
|
|
324
326
|
currentWidthClassName = widthClassName;
|
|
325
327
|
currentHeightClassName = heightClassName;
|
|
328
|
+
if (imageClassName) {
|
|
329
|
+
currentImageClassName = imageClassName;
|
|
330
|
+
}
|
|
326
331
|
}
|
|
327
332
|
return loading ? /* @__PURE__ */ jsx5(
|
|
328
333
|
BaseLoading_default,
|
|
@@ -340,7 +345,7 @@ var BaseImage = forwardRef(
|
|
|
340
345
|
"img",
|
|
341
346
|
{
|
|
342
347
|
ref,
|
|
343
|
-
className:
|
|
348
|
+
className: `${currentImageClassName} ${borderRadius}`,
|
|
344
349
|
src,
|
|
345
350
|
alt,
|
|
346
351
|
onLoad,
|
|
@@ -356,7 +361,6 @@ var BaseImage = forwardRef(
|
|
|
356
361
|
);
|
|
357
362
|
}
|
|
358
363
|
);
|
|
359
|
-
BaseImage.displayName = "BaseImage";
|
|
360
364
|
var BaseImage_default = BaseImage;
|
|
361
365
|
|
|
362
366
|
// src/components/buttons/PrimaryButton.tsx
|
|
@@ -4311,7 +4315,7 @@ var ShowMaterialMediaByContentType = ({
|
|
|
4311
4315
|
alt: "image",
|
|
4312
4316
|
ref: imageRef,
|
|
4313
4317
|
size: "custom",
|
|
4314
|
-
|
|
4318
|
+
imageClassName: "max-h-full max-w-full object-contain rounded-catchup-xlarge",
|
|
4315
4319
|
onLoad: () => {
|
|
4316
4320
|
setIsLoaded(true);
|
|
4317
4321
|
}
|
package/package.json
CHANGED
|
@@ -88,7 +88,7 @@ const ShowMaterialMediaByContentType = ({
|
|
|
88
88
|
alt="image"
|
|
89
89
|
ref={imageRef}
|
|
90
90
|
size="custom"
|
|
91
|
-
|
|
91
|
+
imageClassName="max-h-full max-w-full object-contain rounded-catchup-xlarge"
|
|
92
92
|
onLoad={() => {
|
|
93
93
|
setIsLoaded(true);
|
|
94
94
|
}}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useState, forwardRef } from "react";
|
|
2
2
|
import BaseLoading from "../loading/BaseLoading";
|
|
3
|
+
import { IBaseImageProps } from "../../properties/ImageProperties";
|
|
3
4
|
|
|
4
5
|
const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
|
|
5
6
|
(props, ref) => {
|
|
@@ -8,6 +9,7 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
|
|
|
8
9
|
className,
|
|
9
10
|
widthClassName,
|
|
10
11
|
heightClassName,
|
|
12
|
+
imageClassName,
|
|
11
13
|
src,
|
|
12
14
|
hidden,
|
|
13
15
|
alt,
|
|
@@ -41,6 +43,8 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
|
|
|
41
43
|
let currentClassName;
|
|
42
44
|
let currentWidthClassName;
|
|
43
45
|
let currentHeightClassName;
|
|
46
|
+
let currentImageClassName = "w-full h-full object-contain";
|
|
47
|
+
|
|
44
48
|
if (size === "xsmall") {
|
|
45
49
|
currentWidthClassName = "w-4";
|
|
46
50
|
currentHeightClassName = "h-4";
|
|
@@ -75,6 +79,9 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
|
|
|
75
79
|
currentClassName = className;
|
|
76
80
|
currentWidthClassName = widthClassName;
|
|
77
81
|
currentHeightClassName = heightClassName;
|
|
82
|
+
if (imageClassName) {
|
|
83
|
+
currentImageClassName = imageClassName;
|
|
84
|
+
}
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
return loading ? (
|
|
@@ -95,7 +102,7 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
|
|
|
95
102
|
>
|
|
96
103
|
<img
|
|
97
104
|
ref={ref}
|
|
98
|
-
className={
|
|
105
|
+
className={`${currentImageClassName} ${borderRadius}`}
|
|
99
106
|
src={src}
|
|
100
107
|
alt={alt}
|
|
101
108
|
onLoad={onLoad}
|
|
@@ -110,36 +117,4 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
|
|
|
110
117
|
}
|
|
111
118
|
);
|
|
112
119
|
|
|
113
|
-
BaseImage.displayName = "BaseImage";
|
|
114
|
-
|
|
115
|
-
interface IBaseImageProps {
|
|
116
|
-
size?:
|
|
117
|
-
| "xsmall"
|
|
118
|
-
| "small"
|
|
119
|
-
| "medium"
|
|
120
|
-
| "large"
|
|
121
|
-
| "xlarge"
|
|
122
|
-
| "2xlarge"
|
|
123
|
-
| "3xlarge"
|
|
124
|
-
| "4xlarge"
|
|
125
|
-
| "5xlarge"
|
|
126
|
-
| "6xlarge"
|
|
127
|
-
| "custom";
|
|
128
|
-
className?: string;
|
|
129
|
-
widthClassName?: string;
|
|
130
|
-
heightClassName?: string;
|
|
131
|
-
src?: string;
|
|
132
|
-
hidden?: boolean;
|
|
133
|
-
alt?: string;
|
|
134
|
-
showLoading?: boolean;
|
|
135
|
-
onLoad?: () => void;
|
|
136
|
-
onClick?: (e: any) => void;
|
|
137
|
-
dataToolTipId?: string;
|
|
138
|
-
dataToolTipContent?: string;
|
|
139
|
-
dataToolTipPlace?: string;
|
|
140
|
-
dataToolTipVariant?: string;
|
|
141
|
-
dataToolTipHTML?: string;
|
|
142
|
-
borderRadius?: string;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
120
|
export default BaseImage;
|
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
export interface IBaseImageProps {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
size?:
|
|
3
|
+
| "xsmall"
|
|
4
|
+
| "small"
|
|
5
|
+
| "medium"
|
|
6
|
+
| "large"
|
|
7
|
+
| "xlarge"
|
|
8
|
+
| "2xlarge"
|
|
9
|
+
| "3xlarge"
|
|
10
|
+
| "4xlarge"
|
|
11
|
+
| "5xlarge"
|
|
12
|
+
| "6xlarge"
|
|
13
|
+
| "custom";
|
|
4
14
|
className?: string;
|
|
5
15
|
widthClassName?: string;
|
|
6
16
|
heightClassName?: string;
|
|
7
|
-
|
|
17
|
+
imageClassName?: string;
|
|
18
|
+
src?: string;
|
|
8
19
|
hidden?: boolean;
|
|
9
|
-
alt
|
|
20
|
+
alt?: string;
|
|
10
21
|
showLoading?: boolean;
|
|
11
22
|
onLoad?: () => void;
|
|
12
23
|
onClick?: (e: any) => void;
|
|
@@ -15,4 +26,5 @@ export interface IBaseImageProps {
|
|
|
15
26
|
dataToolTipPlace?: string;
|
|
16
27
|
dataToolTipVariant?: string;
|
|
17
28
|
dataToolTipHTML?: string;
|
|
29
|
+
borderRadius?: string;
|
|
18
30
|
}
|