1 | import * as React from 'react';
|
2 | import { IStyle, ITheme } from '../../Styling';
|
3 | import { IStyleFunctionOrObject } from '../../Utilities';
|
4 | /**
|
5 | * {@docCategory Image}
|
6 | */
|
7 | export interface IImage {
|
8 | }
|
9 | /**
|
10 | * {@docCategory Image}
|
11 | */
|
12 | export interface IImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
13 | /**
|
14 | * Call to provide customized styling that will layer on top of the variant rules
|
15 | */
|
16 | styles?: IStyleFunctionOrObject<IImageStyleProps, IImageStyles>;
|
17 | /**
|
18 | * Theme provided by HOC.
|
19 | */
|
20 | theme?: ITheme;
|
21 | /**
|
22 | * Additional css class to apply to the Component
|
23 | * @defaultvalue undefined
|
24 | */
|
25 | className?: string;
|
26 | /**
|
27 | * If true, fades the image in when loaded.
|
28 | * @defaultvalue true
|
29 | */
|
30 | shouldFadeIn?: boolean;
|
31 | /**
|
32 | * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until
|
33 | * it is successfully loaded. This disables shouldFadeIn.
|
34 | * @defaultvalue false;
|
35 | */
|
36 | shouldStartVisible?: boolean;
|
37 | /**
|
38 | * Used to determine how the image is scaled and cropped to fit the frame.
|
39 | *
|
40 | * @defaultvalue If both dimensions are provided, then the image is fit using ImageFit.scale.
|
41 | * Otherwise, the image won't be scaled or cropped.
|
42 | */
|
43 | imageFit?: ImageFit;
|
44 | /**
|
45 | * Deprecated at v1.3.6, to replace the src in case of errors, use `onLoadingStateChange` instead and
|
46 | * rerender the Image with a difference src.
|
47 | * @deprecated Use `onLoadingStateChange` instead and
|
48 | * rerender the Image with a difference src.
|
49 | */
|
50 | errorSrc?: string;
|
51 | /**
|
52 | * If true, the image frame will expand to fill its parent container.
|
53 | */
|
54 | maximizeFrame?: boolean;
|
55 | /**
|
56 | * Optional callback method for when the image load state has changed.
|
57 | * The 'loadState' parameter indicates the current state of the Image.
|
58 | */
|
59 | onLoadingStateChange?: (loadState: ImageLoadState) => void;
|
60 | /**
|
61 | * Specifies the cover style to be used for this image. If not
|
62 | * specified, this will be dynamically calculated based on the
|
63 | * aspect ratio for the image.
|
64 | */
|
65 | coverStyle?: ImageCoverStyle;
|
66 | }
|
67 | /**
|
68 | * The possible methods that can be used to fit the image.
|
69 | * {@docCategory Image}
|
70 | */
|
71 | export declare enum ImageFit {
|
72 | /**
|
73 | * The image is not scaled. The image is centered and cropped within the content box.
|
74 | */
|
75 | center = 0,
|
76 | /**
|
77 | * The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will
|
78 | * be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of
|
79 | * the frame will be empty depending on the difference in aspect ratio between the image and the frame.
|
80 | */
|
81 | contain = 1,
|
82 | /**
|
83 | * The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped
|
84 | * from the top and bottom, or the sides, depending on the difference in aspect ratio between the image and the frame.
|
85 | */
|
86 | cover = 2,
|
87 | /**
|
88 | * Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the
|
89 | * frame will have empty space.
|
90 | */
|
91 | none = 3,
|
92 | /**
|
93 | * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will
|
94 | * behave as ImageFit.center if the image's natural height or width is less than the Image frame's height or width,
|
95 | * but if both natural height and width are larger than the frame it will behave as ImageFit.cover.
|
96 | */
|
97 | centerCover = 4,
|
98 | /**
|
99 | * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will
|
100 | * behave as ImageFit.center if the image's natural height and width is less than the Image frame's height and width,
|
101 | * but if either natural height or width are larger than the frame it will behave as ImageFit.contain.
|
102 | */
|
103 | centerContain = 5
|
104 | }
|
105 | /**
|
106 | * The cover style to be used on the image
|
107 | * {@docCategory Image}
|
108 | */
|
109 | export declare enum ImageCoverStyle {
|
110 | /**
|
111 | * The image will be shown at 100% height of container and the width will be scaled accordingly
|
112 | */
|
113 | landscape = 0,
|
114 | /**
|
115 | * The image will be shown at 100% width of container and the height will be scaled accordingly
|
116 | */
|
117 | portrait = 1
|
118 | }
|
119 | /**
|
120 | * {@docCategory Image}
|
121 | */
|
122 | export declare enum ImageLoadState {
|
123 | /**
|
124 | * The image has not yet been loaded, and there is no error yet.
|
125 | */
|
126 | notLoaded = 0,
|
127 | /**
|
128 | * The image has been loaded successfully.
|
129 | */
|
130 | loaded = 1,
|
131 | /**
|
132 | * An error has been encountered while loading the image.
|
133 | */
|
134 | error = 2,
|
135 | /**
|
136 | * Deprecated at v1.3.6, to replace the src in case of errors, use `onLoadingStateChange` instead
|
137 | * and rerender the Image with a difference src.
|
138 | * @deprecated Use `onLoadingStateChange` instead
|
139 | * and rerender the Image with a difference src.
|
140 | */
|
141 | errorLoaded = 3
|
142 | }
|
143 | /**
|
144 | * {@docCategory Image}
|
145 | */
|
146 | export interface IImageStyleProps {
|
147 | /**
|
148 | * Accept theme prop.
|
149 | */
|
150 | theme: ITheme;
|
151 | /**
|
152 | * Accept custom classNames
|
153 | */
|
154 | className?: string;
|
155 | /**
|
156 | * If true, the image frame will expand to fill its parent container.
|
157 | */
|
158 | maximizeFrame?: boolean;
|
159 | /**
|
160 | * If true, the image is loaded
|
161 | */
|
162 | isLoaded?: boolean;
|
163 | /**
|
164 | * If true, fades the image in when loaded.
|
165 | * @defaultvalue true
|
166 | */
|
167 | shouldFadeIn?: boolean;
|
168 | /**
|
169 | * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until
|
170 | * it is successfully loaded. This disables shouldFadeIn.
|
171 | * @defaultvalue false;
|
172 | */
|
173 | shouldStartVisible?: boolean;
|
174 | /**
|
175 | * If true the image is coverStyle landscape instead of portrait
|
176 | */
|
177 | isLandscape?: boolean;
|
178 | /**
|
179 | * ImageFit booleans for center, cover, contain, centerContain, centerCover, none
|
180 | */
|
181 | isCenter?: boolean;
|
182 | isContain?: boolean;
|
183 | isCover?: boolean;
|
184 | isCenterContain?: boolean;
|
185 | isCenterCover?: boolean;
|
186 | isNone?: boolean;
|
187 | /**
|
188 | * if true image load is in error
|
189 | */
|
190 | isError?: boolean;
|
191 | /**
|
192 | * if true, imageFit is undefined
|
193 | */
|
194 | isNotImageFit?: boolean;
|
195 | /**
|
196 | * Image width value
|
197 | */
|
198 | width?: number | string;
|
199 | /**
|
200 | * Image height value
|
201 | */
|
202 | height?: number | string;
|
203 | }
|
204 | /**
|
205 | * {@docCategory Image}
|
206 | */
|
207 | export interface IImageStyles {
|
208 | /**
|
209 | * Style set for the root div element.
|
210 | */
|
211 | root: IStyle;
|
212 | /**
|
213 | * Style set for the img element.
|
214 | */
|
215 | image: IStyle;
|
216 | }
|