This repository has been archived by the owner on Dec 21, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 96
/
index.tsx
113 lines (103 loc) · 3.32 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import { cloneElement, createElement, CSSProperties, FunctionComponent, useCallback } from "react";
import { HeightUnitEnum, WidthUnitEnum, OnClickTypeEnum, DisplayAsEnum } from "../../../typings/ImageProps";
import { useLightboxState } from "../../utils/lightboxState";
import { ImageViewerUi, ImageViewerContentProps } from "./ui";
import { Lightbox, LightboxProps } from "../Lightbox";
import "../../ui/Image.scss";
export type ImageViewerImageProps = {
type: "image" | "icon";
image: string | undefined;
};
export interface ImageViewerProps extends ImageViewerImageProps {
class: string;
style?: CSSProperties;
widthUnit: WidthUnitEnum;
width: number;
heightUnit: HeightUnitEnum;
height: number;
iconSize: number;
responsive: boolean;
onClickType: OnClickTypeEnum;
onClick?: () => void;
altText?: string;
displayAs: DisplayAsEnum;
previewMode?: boolean;
}
function processImageLink(imageLink: string | undefined, displayAs: DisplayAsEnum): string | undefined {
if (!imageLink || displayAs === "fullImage") {
return imageLink;
}
const url = new URL(imageLink);
url.searchParams.append("thumb", "true");
return url.href;
}
export const ImageViewer: FunctionComponent<ImageViewerProps> = ({
class: className,
style,
widthUnit,
width,
heightUnit,
height,
iconSize,
responsive,
onClickType,
onClick,
type,
image,
altText,
displayAs,
previewMode
}) => {
const { lightboxIsOpen, openLightbox, closeLightbox } = useLightboxState();
const onCloseLightbox = useCallback<LightboxProps["onClose"]>(
event => {
event?.stopPropagation();
closeLightbox();
},
[closeLightbox]
);
const onImageClick = useCallback<Exclude<ImageViewerContentProps["onClick"], undefined>>(
event => {
event.stopPropagation();
if (onClickType === "action") {
onClick?.();
} else if (onClickType === "enlarge") {
openLightbox();
}
},
[onClick, onClickType, openLightbox]
);
const hasClickHandler = (onClickType === "action" && onClick) || onClickType === "enlarge";
const sharedContentProps: ImageViewerContentProps = {
style,
onClick: hasClickHandler ? onImageClick : undefined,
altText
};
const content =
type === "image" ? (
<ImageViewerUi.Image
image={processImageLink(image, displayAs)}
height={height}
heightUnit={heightUnit}
width={width}
widthUnit={widthUnit}
{...sharedContentProps}
/>
) : (
<ImageViewerUi.Glyphicon icon={image} size={iconSize} {...sharedContentProps} />
);
return (
<ImageViewerUi.Wrapper
className={className}
responsive={responsive}
hasImage={image !== undefined && image.length > 0}
>
{content}
{!previewMode && lightboxIsOpen && (
<Lightbox isOpen={lightboxIsOpen} onClose={onCloseLightbox}>
{type === "image" ? cloneElement(content, { image, onClick: undefined }) : content}
</Lightbox>
)}
</ImageViewerUi.Wrapper>
);
};