@gravity-ui/page-constructor 5.19.0 → 5.20.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.
- package/build/cjs/blocks/CardLayout/schema.d.ts +32 -0
- package/build/cjs/blocks/ContentLayout/schema.d.ts +34 -6
- package/build/cjs/components/Image/Image.js +2 -2
- package/build/cjs/components/Image/schema.d.ts +40 -0
- package/build/cjs/components/Image/schema.js +8 -0
- package/build/cjs/components/ImageBase/ImageBase.d.ts +1 -1
- package/build/cjs/components/ImageBase/ImageBase.js +8 -2
- package/build/cjs/context/imageContext/imageContext.d.ts +2 -3
- package/build/cjs/models/constructor-items/common.d.ts +3 -2
- package/build/cjs/schema/constants.d.ts +8 -0
- package/build/cjs/sub-blocks/BackgroundCard/schema.d.ts +8 -0
- package/build/cjs/sub-blocks/Content/Content.css +4 -4
- package/build/esm/blocks/CardLayout/schema.d.ts +32 -0
- package/build/esm/blocks/ContentLayout/schema.d.ts +34 -6
- package/build/esm/components/Image/Image.js +2 -2
- package/build/esm/components/Image/schema.d.ts +40 -0
- package/build/esm/components/Image/schema.js +8 -0
- package/build/esm/components/ImageBase/ImageBase.d.ts +1 -1
- package/build/esm/components/ImageBase/ImageBase.js +9 -2
- package/build/esm/context/imageContext/imageContext.d.ts +2 -3
- package/build/esm/models/constructor-items/common.d.ts +3 -2
- package/build/esm/schema/constants.d.ts +8 -0
- package/build/esm/sub-blocks/BackgroundCard/schema.d.ts +8 -0
- package/build/esm/sub-blocks/Content/Content.css +4 -4
- package/package.json +1 -1
- package/server/models/constructor-items/common.d.ts +3 -2
- package/widget/index.js +1 -1
|
@@ -44,6 +44,14 @@ export declare const CardLayoutProps: {
|
|
|
44
44
|
disableCompress: {
|
|
45
45
|
type: string;
|
|
46
46
|
};
|
|
47
|
+
loading: {
|
|
48
|
+
type: string;
|
|
49
|
+
enum: string[];
|
|
50
|
+
};
|
|
51
|
+
fetchPriority: {
|
|
52
|
+
type: string;
|
|
53
|
+
enum: string[];
|
|
54
|
+
};
|
|
47
55
|
};
|
|
48
56
|
optionName: string;
|
|
49
57
|
type: string;
|
|
@@ -73,6 +81,14 @@ export declare const CardLayoutProps: {
|
|
|
73
81
|
disableCompress: {
|
|
74
82
|
type: string;
|
|
75
83
|
};
|
|
84
|
+
loading: {
|
|
85
|
+
type: string;
|
|
86
|
+
enum: string[];
|
|
87
|
+
};
|
|
88
|
+
fetchPriority: {
|
|
89
|
+
type: string;
|
|
90
|
+
enum: string[];
|
|
91
|
+
};
|
|
76
92
|
};
|
|
77
93
|
optionName: string;
|
|
78
94
|
type: string;
|
|
@@ -216,6 +232,14 @@ export declare const CardLayoutBlock: {
|
|
|
216
232
|
disableCompress: {
|
|
217
233
|
type: string;
|
|
218
234
|
};
|
|
235
|
+
loading: {
|
|
236
|
+
type: string;
|
|
237
|
+
enum: string[];
|
|
238
|
+
};
|
|
239
|
+
fetchPriority: {
|
|
240
|
+
type: string;
|
|
241
|
+
enum: string[];
|
|
242
|
+
};
|
|
219
243
|
};
|
|
220
244
|
optionName: string;
|
|
221
245
|
type: string;
|
|
@@ -245,6 +269,14 @@ export declare const CardLayoutBlock: {
|
|
|
245
269
|
disableCompress: {
|
|
246
270
|
type: string;
|
|
247
271
|
};
|
|
272
|
+
loading: {
|
|
273
|
+
type: string;
|
|
274
|
+
enum: string[];
|
|
275
|
+
};
|
|
276
|
+
fetchPriority: {
|
|
277
|
+
type: string;
|
|
278
|
+
enum: string[];
|
|
279
|
+
};
|
|
248
280
|
};
|
|
249
281
|
optionName: string;
|
|
250
282
|
type: string;
|
|
@@ -42,6 +42,14 @@ export declare const ContentLayoutBlock: {
|
|
|
42
42
|
disableCompress: {
|
|
43
43
|
type: string;
|
|
44
44
|
};
|
|
45
|
+
loading: {
|
|
46
|
+
type: string;
|
|
47
|
+
enum: string[];
|
|
48
|
+
};
|
|
49
|
+
fetchPriority: {
|
|
50
|
+
type: string;
|
|
51
|
+
enum: string[];
|
|
52
|
+
};
|
|
45
53
|
};
|
|
46
54
|
} | {
|
|
47
55
|
optionName: string;
|
|
@@ -56,9 +64,7 @@ export declare const ContentLayoutBlock: {
|
|
|
56
64
|
tablet: {
|
|
57
65
|
type: string;
|
|
58
66
|
pattern: string;
|
|
59
|
-
};
|
|
60
|
-
* @deprecated Use params on top level instead
|
|
61
|
-
*/
|
|
67
|
+
};
|
|
62
68
|
mobile: {
|
|
63
69
|
type: string;
|
|
64
70
|
pattern: string;
|
|
@@ -70,6 +76,14 @@ export declare const ContentLayoutBlock: {
|
|
|
70
76
|
disableCompress: {
|
|
71
77
|
type: string;
|
|
72
78
|
};
|
|
79
|
+
loading: {
|
|
80
|
+
type: string;
|
|
81
|
+
enum: string[];
|
|
82
|
+
};
|
|
83
|
+
fetchPriority: {
|
|
84
|
+
type: string;
|
|
85
|
+
enum: string[];
|
|
86
|
+
};
|
|
73
87
|
};
|
|
74
88
|
})[];
|
|
75
89
|
};
|
|
@@ -234,6 +248,14 @@ export declare const ContentLayoutBlock: {
|
|
|
234
248
|
disableCompress: {
|
|
235
249
|
type: string;
|
|
236
250
|
};
|
|
251
|
+
loading: {
|
|
252
|
+
type: string;
|
|
253
|
+
enum: string[];
|
|
254
|
+
};
|
|
255
|
+
fetchPriority: {
|
|
256
|
+
type: string;
|
|
257
|
+
enum: string[];
|
|
258
|
+
};
|
|
237
259
|
};
|
|
238
260
|
} | {
|
|
239
261
|
optionName: string;
|
|
@@ -248,9 +270,7 @@ export declare const ContentLayoutBlock: {
|
|
|
248
270
|
tablet: {
|
|
249
271
|
type: string;
|
|
250
272
|
pattern: string;
|
|
251
|
-
};
|
|
252
|
-
* @deprecated Use params on top level instead
|
|
253
|
-
*/
|
|
273
|
+
};
|
|
254
274
|
mobile: {
|
|
255
275
|
type: string;
|
|
256
276
|
pattern: string;
|
|
@@ -262,6 +282,14 @@ export declare const ContentLayoutBlock: {
|
|
|
262
282
|
disableCompress: {
|
|
263
283
|
type: string;
|
|
264
284
|
};
|
|
285
|
+
loading: {
|
|
286
|
+
type: string;
|
|
287
|
+
enum: string[];
|
|
288
|
+
};
|
|
289
|
+
fetchPriority: {
|
|
290
|
+
type: string;
|
|
291
|
+
enum: string[];
|
|
292
|
+
};
|
|
265
293
|
};
|
|
266
294
|
})[];
|
|
267
295
|
};
|
|
@@ -15,7 +15,7 @@ const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (react
|
|
|
15
15
|
react_1.default.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
|
|
16
16
|
const Image = (props) => {
|
|
17
17
|
const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
|
|
18
|
-
const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, } = props;
|
|
18
|
+
const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, } = props;
|
|
19
19
|
const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
|
|
20
20
|
const src = imageSrc || desktop;
|
|
21
21
|
if (!src) {
|
|
@@ -30,6 +30,6 @@ const Image = (props) => {
|
|
|
30
30
|
mobile && (react_1.default.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
|
|
31
31
|
tablet && (react_1.default.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
|
|
32
32
|
src && !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
|
|
33
|
-
react_1.default.createElement(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
|
|
33
|
+
react_1.default.createElement(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
|
|
34
34
|
};
|
|
35
35
|
exports.default = Image;
|
|
@@ -23,6 +23,14 @@ export declare const ImageDeviceProps: {
|
|
|
23
23
|
disableCompress: {
|
|
24
24
|
type: string;
|
|
25
25
|
};
|
|
26
|
+
loading: {
|
|
27
|
+
type: string;
|
|
28
|
+
enum: string[];
|
|
29
|
+
};
|
|
30
|
+
fetchPriority: {
|
|
31
|
+
type: string;
|
|
32
|
+
enum: string[];
|
|
33
|
+
};
|
|
26
34
|
};
|
|
27
35
|
};
|
|
28
36
|
export declare const ImageBaseObjectProps: {
|
|
@@ -59,6 +67,14 @@ export declare const ImageBaseObjectProps: {
|
|
|
59
67
|
disableCompress: {
|
|
60
68
|
type: string;
|
|
61
69
|
};
|
|
70
|
+
loading: {
|
|
71
|
+
type: string;
|
|
72
|
+
enum: string[];
|
|
73
|
+
};
|
|
74
|
+
fetchPriority: {
|
|
75
|
+
type: string;
|
|
76
|
+
enum: string[];
|
|
77
|
+
};
|
|
62
78
|
};
|
|
63
79
|
};
|
|
64
80
|
export declare const ImageObjectProps: {
|
|
@@ -96,6 +112,14 @@ export declare const ImageObjectProps: {
|
|
|
96
112
|
disableCompress: {
|
|
97
113
|
type: string;
|
|
98
114
|
};
|
|
115
|
+
loading: {
|
|
116
|
+
type: string;
|
|
117
|
+
enum: string[];
|
|
118
|
+
};
|
|
119
|
+
fetchPriority: {
|
|
120
|
+
type: string;
|
|
121
|
+
enum: string[];
|
|
122
|
+
};
|
|
99
123
|
};
|
|
100
124
|
};
|
|
101
125
|
export declare const ImageProps: {
|
|
@@ -161,6 +185,14 @@ export declare const BackgroundImageProps: {
|
|
|
161
185
|
disableCompress: {
|
|
162
186
|
type: string;
|
|
163
187
|
};
|
|
188
|
+
loading: {
|
|
189
|
+
type: string;
|
|
190
|
+
enum: string[];
|
|
191
|
+
};
|
|
192
|
+
fetchPriority: {
|
|
193
|
+
type: string;
|
|
194
|
+
enum: string[];
|
|
195
|
+
};
|
|
164
196
|
};
|
|
165
197
|
} | {
|
|
166
198
|
optionName: string;
|
|
@@ -187,6 +219,14 @@ export declare const BackgroundImageProps: {
|
|
|
187
219
|
disableCompress: {
|
|
188
220
|
type: string;
|
|
189
221
|
};
|
|
222
|
+
loading: {
|
|
223
|
+
type: string;
|
|
224
|
+
enum: string[];
|
|
225
|
+
};
|
|
226
|
+
fetchPriority: {
|
|
227
|
+
type: string;
|
|
228
|
+
enum: string[];
|
|
229
|
+
};
|
|
190
230
|
};
|
|
191
231
|
})[];
|
|
192
232
|
};
|
|
@@ -11,6 +11,14 @@ const ImageBase = {
|
|
|
11
11
|
disableCompress: {
|
|
12
12
|
type: 'boolean',
|
|
13
13
|
},
|
|
14
|
+
loading: {
|
|
15
|
+
type: 'string',
|
|
16
|
+
enum: ['eager', 'lazy'],
|
|
17
|
+
},
|
|
18
|
+
fetchPriority: {
|
|
19
|
+
type: 'string',
|
|
20
|
+
enum: ['high', 'low', 'auto'],
|
|
21
|
+
},
|
|
14
22
|
};
|
|
15
23
|
const StyleBase = {
|
|
16
24
|
type: 'object',
|
|
@@ -7,5 +7,5 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
|
|
|
7
7
|
onLoad?: ReactEventHandler<HTMLDivElement>;
|
|
8
8
|
onError?: () => void;
|
|
9
9
|
}
|
|
10
|
-
export declare const ImageBase: (props: ImageBaseProps) => JSX.Element;
|
|
10
|
+
export declare const ImageBase: ({ fetchPriority, ...props }: ImageBaseProps) => JSX.Element;
|
|
11
11
|
export default ImageBase;
|
|
@@ -4,10 +4,16 @@ exports.ImageBase = void 0;
|
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
const imageContext_1 = require("../../context/imageContext/imageContext");
|
|
7
|
-
const ImageBase = (
|
|
7
|
+
const ImageBase = (_a) => {
|
|
8
|
+
var { fetchPriority } = _a, props = tslib_1.__rest(_a, ["fetchPriority"]);
|
|
8
9
|
const { Image } = react_1.default.useContext(imageContext_1.ImageContext);
|
|
10
|
+
return Image ? (react_1.default.createElement(Image, Object.assign({ fetchPriority: fetchPriority }, props))) : (
|
|
11
|
+
// There is an issue with fetchpriority attr in img in React.
|
|
12
|
+
// It is still not supported. However it's nice to have ability to manage
|
|
13
|
+
// this prop is good to have to improve Core Web Vitals.
|
|
14
|
+
// So, here is a workaround to assign the attr.
|
|
9
15
|
// eslint-disable-next-line jsx-a11y/alt-text
|
|
10
|
-
|
|
16
|
+
react_1.default.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, props)));
|
|
11
17
|
};
|
|
12
18
|
exports.ImageBase = ImageBase;
|
|
13
19
|
exports.default = exports.ImageBase;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ImageBaseProps } from '../../components';
|
|
3
|
-
export type Image = React.ComponentClass<ImageBaseProps> | React.FC<ImageBaseProps>;
|
|
2
|
+
import type { ImageBaseProps } from '../../components';
|
|
4
3
|
export type ImageContextProps = {
|
|
5
|
-
Image?:
|
|
4
|
+
Image?: React.ComponentType<ImageBaseProps>;
|
|
6
5
|
};
|
|
7
6
|
export declare const ImageContext: React.Context<ImageContextProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
|
|
1
|
+
import React, { CSSProperties, DetailedHTMLProps, HTMLProps, ImgHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
|
|
3
3
|
import { ThemeSupporting } from '../../utils';
|
|
4
4
|
import { AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps } from '../common';
|
|
@@ -96,8 +96,9 @@ interface LoopProps {
|
|
|
96
96
|
start: number;
|
|
97
97
|
end?: number;
|
|
98
98
|
}
|
|
99
|
-
export interface ImageInfoProps extends Pick<
|
|
99
|
+
export interface ImageInfoProps extends Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'> {
|
|
100
100
|
alt?: string;
|
|
101
|
+
fetchPriority?: 'high' | 'low' | 'auto';
|
|
101
102
|
disableCompress?: boolean;
|
|
102
103
|
}
|
|
103
104
|
export interface ImageObjectProps extends ImageInfoProps {
|
|
@@ -796,6 +796,14 @@ export declare const cardSchemas: {
|
|
|
796
796
|
disableCompress: {
|
|
797
797
|
type: string;
|
|
798
798
|
};
|
|
799
|
+
loading: {
|
|
800
|
+
type: string;
|
|
801
|
+
enum: string[];
|
|
802
|
+
};
|
|
803
|
+
fetchPriority: {
|
|
804
|
+
type: string;
|
|
805
|
+
enum: string[];
|
|
806
|
+
};
|
|
799
807
|
};
|
|
800
808
|
} & {
|
|
801
809
|
optionName: string;
|
|
@@ -148,12 +148,12 @@ unpredictable css rules order in build */
|
|
|
148
148
|
.pc-content_theme_light .pc-content__title a:hover {
|
|
149
149
|
color: var(--g-color-text-dark-secondary);
|
|
150
150
|
}
|
|
151
|
-
.pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__buttons), .pc-content_control-position_bottom .pc-content__notice:has(+ .pc-
|
|
151
|
+
.pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__buttons), .pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__links),
|
|
152
152
|
.pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__buttons),
|
|
153
|
-
.pc-content_control-position_bottom .pc-content__list:has(+ .pc-
|
|
153
|
+
.pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__links),
|
|
154
154
|
.pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__buttons),
|
|
155
|
-
.pc-content_control-position_bottom .pc-content__text:has(+ .pc-
|
|
155
|
+
.pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__links),
|
|
156
156
|
.pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__buttons),
|
|
157
|
-
.pc-content_control-position_bottom .pc-content__title:has(+ .pc-
|
|
157
|
+
.pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__links) {
|
|
158
158
|
margin-bottom: auto;
|
|
159
159
|
}
|
|
@@ -44,6 +44,14 @@ export declare const CardLayoutProps: {
|
|
|
44
44
|
disableCompress: {
|
|
45
45
|
type: string;
|
|
46
46
|
};
|
|
47
|
+
loading: {
|
|
48
|
+
type: string;
|
|
49
|
+
enum: string[];
|
|
50
|
+
};
|
|
51
|
+
fetchPriority: {
|
|
52
|
+
type: string;
|
|
53
|
+
enum: string[];
|
|
54
|
+
};
|
|
47
55
|
};
|
|
48
56
|
optionName: string;
|
|
49
57
|
type: string;
|
|
@@ -73,6 +81,14 @@ export declare const CardLayoutProps: {
|
|
|
73
81
|
disableCompress: {
|
|
74
82
|
type: string;
|
|
75
83
|
};
|
|
84
|
+
loading: {
|
|
85
|
+
type: string;
|
|
86
|
+
enum: string[];
|
|
87
|
+
};
|
|
88
|
+
fetchPriority: {
|
|
89
|
+
type: string;
|
|
90
|
+
enum: string[];
|
|
91
|
+
};
|
|
76
92
|
};
|
|
77
93
|
optionName: string;
|
|
78
94
|
type: string;
|
|
@@ -216,6 +232,14 @@ export declare const CardLayoutBlock: {
|
|
|
216
232
|
disableCompress: {
|
|
217
233
|
type: string;
|
|
218
234
|
};
|
|
235
|
+
loading: {
|
|
236
|
+
type: string;
|
|
237
|
+
enum: string[];
|
|
238
|
+
};
|
|
239
|
+
fetchPriority: {
|
|
240
|
+
type: string;
|
|
241
|
+
enum: string[];
|
|
242
|
+
};
|
|
219
243
|
};
|
|
220
244
|
optionName: string;
|
|
221
245
|
type: string;
|
|
@@ -245,6 +269,14 @@ export declare const CardLayoutBlock: {
|
|
|
245
269
|
disableCompress: {
|
|
246
270
|
type: string;
|
|
247
271
|
};
|
|
272
|
+
loading: {
|
|
273
|
+
type: string;
|
|
274
|
+
enum: string[];
|
|
275
|
+
};
|
|
276
|
+
fetchPriority: {
|
|
277
|
+
type: string;
|
|
278
|
+
enum: string[];
|
|
279
|
+
};
|
|
248
280
|
};
|
|
249
281
|
optionName: string;
|
|
250
282
|
type: string;
|
|
@@ -42,6 +42,14 @@ export declare const ContentLayoutBlock: {
|
|
|
42
42
|
disableCompress: {
|
|
43
43
|
type: string;
|
|
44
44
|
};
|
|
45
|
+
loading: {
|
|
46
|
+
type: string;
|
|
47
|
+
enum: string[];
|
|
48
|
+
};
|
|
49
|
+
fetchPriority: {
|
|
50
|
+
type: string;
|
|
51
|
+
enum: string[];
|
|
52
|
+
};
|
|
45
53
|
};
|
|
46
54
|
} | {
|
|
47
55
|
optionName: string;
|
|
@@ -56,9 +64,7 @@ export declare const ContentLayoutBlock: {
|
|
|
56
64
|
tablet: {
|
|
57
65
|
type: string;
|
|
58
66
|
pattern: string;
|
|
59
|
-
};
|
|
60
|
-
* @deprecated Use params on top level instead
|
|
61
|
-
*/
|
|
67
|
+
};
|
|
62
68
|
mobile: {
|
|
63
69
|
type: string;
|
|
64
70
|
pattern: string;
|
|
@@ -70,6 +76,14 @@ export declare const ContentLayoutBlock: {
|
|
|
70
76
|
disableCompress: {
|
|
71
77
|
type: string;
|
|
72
78
|
};
|
|
79
|
+
loading: {
|
|
80
|
+
type: string;
|
|
81
|
+
enum: string[];
|
|
82
|
+
};
|
|
83
|
+
fetchPriority: {
|
|
84
|
+
type: string;
|
|
85
|
+
enum: string[];
|
|
86
|
+
};
|
|
73
87
|
};
|
|
74
88
|
})[];
|
|
75
89
|
};
|
|
@@ -234,6 +248,14 @@ export declare const ContentLayoutBlock: {
|
|
|
234
248
|
disableCompress: {
|
|
235
249
|
type: string;
|
|
236
250
|
};
|
|
251
|
+
loading: {
|
|
252
|
+
type: string;
|
|
253
|
+
enum: string[];
|
|
254
|
+
};
|
|
255
|
+
fetchPriority: {
|
|
256
|
+
type: string;
|
|
257
|
+
enum: string[];
|
|
258
|
+
};
|
|
237
259
|
};
|
|
238
260
|
} | {
|
|
239
261
|
optionName: string;
|
|
@@ -248,9 +270,7 @@ export declare const ContentLayoutBlock: {
|
|
|
248
270
|
tablet: {
|
|
249
271
|
type: string;
|
|
250
272
|
pattern: string;
|
|
251
|
-
};
|
|
252
|
-
* @deprecated Use params on top level instead
|
|
253
|
-
*/
|
|
273
|
+
};
|
|
254
274
|
mobile: {
|
|
255
275
|
type: string;
|
|
256
276
|
pattern: string;
|
|
@@ -262,6 +282,14 @@ export declare const ContentLayoutBlock: {
|
|
|
262
282
|
disableCompress: {
|
|
263
283
|
type: string;
|
|
264
284
|
};
|
|
285
|
+
loading: {
|
|
286
|
+
type: string;
|
|
287
|
+
enum: string[];
|
|
288
|
+
};
|
|
289
|
+
fetchPriority: {
|
|
290
|
+
type: string;
|
|
291
|
+
enum: string[];
|
|
292
|
+
};
|
|
265
293
|
};
|
|
266
294
|
})[];
|
|
267
295
|
};
|
|
@@ -12,7 +12,7 @@ const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (React
|
|
|
12
12
|
React.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
|
|
13
13
|
const Image = (props) => {
|
|
14
14
|
const projectSettings = useContext(ProjectSettingsContext);
|
|
15
|
-
const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, } = props;
|
|
15
|
+
const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, onLoad, containerClassName, qa, fetchPriority, loading, } = props;
|
|
16
16
|
const [imgLoadingError, setImgLoadingError] = useState(false);
|
|
17
17
|
const src = imageSrc || desktop;
|
|
18
18
|
if (!src) {
|
|
@@ -27,6 +27,6 @@ const Image = (props) => {
|
|
|
27
27
|
mobile && (React.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
|
|
28
28
|
tablet && (React.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
|
|
29
29
|
src && !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
|
|
30
|
-
React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
|
|
30
|
+
React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, fetchPriority: fetchPriority, loading: loading, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
|
|
31
31
|
};
|
|
32
32
|
export default Image;
|
|
@@ -23,6 +23,14 @@ export declare const ImageDeviceProps: {
|
|
|
23
23
|
disableCompress: {
|
|
24
24
|
type: string;
|
|
25
25
|
};
|
|
26
|
+
loading: {
|
|
27
|
+
type: string;
|
|
28
|
+
enum: string[];
|
|
29
|
+
};
|
|
30
|
+
fetchPriority: {
|
|
31
|
+
type: string;
|
|
32
|
+
enum: string[];
|
|
33
|
+
};
|
|
26
34
|
};
|
|
27
35
|
};
|
|
28
36
|
export declare const ImageBaseObjectProps: {
|
|
@@ -59,6 +67,14 @@ export declare const ImageBaseObjectProps: {
|
|
|
59
67
|
disableCompress: {
|
|
60
68
|
type: string;
|
|
61
69
|
};
|
|
70
|
+
loading: {
|
|
71
|
+
type: string;
|
|
72
|
+
enum: string[];
|
|
73
|
+
};
|
|
74
|
+
fetchPriority: {
|
|
75
|
+
type: string;
|
|
76
|
+
enum: string[];
|
|
77
|
+
};
|
|
62
78
|
};
|
|
63
79
|
};
|
|
64
80
|
export declare const ImageObjectProps: {
|
|
@@ -96,6 +112,14 @@ export declare const ImageObjectProps: {
|
|
|
96
112
|
disableCompress: {
|
|
97
113
|
type: string;
|
|
98
114
|
};
|
|
115
|
+
loading: {
|
|
116
|
+
type: string;
|
|
117
|
+
enum: string[];
|
|
118
|
+
};
|
|
119
|
+
fetchPriority: {
|
|
120
|
+
type: string;
|
|
121
|
+
enum: string[];
|
|
122
|
+
};
|
|
99
123
|
};
|
|
100
124
|
};
|
|
101
125
|
export declare const ImageProps: {
|
|
@@ -161,6 +185,14 @@ export declare const BackgroundImageProps: {
|
|
|
161
185
|
disableCompress: {
|
|
162
186
|
type: string;
|
|
163
187
|
};
|
|
188
|
+
loading: {
|
|
189
|
+
type: string;
|
|
190
|
+
enum: string[];
|
|
191
|
+
};
|
|
192
|
+
fetchPriority: {
|
|
193
|
+
type: string;
|
|
194
|
+
enum: string[];
|
|
195
|
+
};
|
|
164
196
|
};
|
|
165
197
|
} | {
|
|
166
198
|
optionName: string;
|
|
@@ -187,6 +219,14 @@ export declare const BackgroundImageProps: {
|
|
|
187
219
|
disableCompress: {
|
|
188
220
|
type: string;
|
|
189
221
|
};
|
|
222
|
+
loading: {
|
|
223
|
+
type: string;
|
|
224
|
+
enum: string[];
|
|
225
|
+
};
|
|
226
|
+
fetchPriority: {
|
|
227
|
+
type: string;
|
|
228
|
+
enum: string[];
|
|
229
|
+
};
|
|
190
230
|
};
|
|
191
231
|
})[];
|
|
192
232
|
};
|
|
@@ -8,6 +8,14 @@ const ImageBase = {
|
|
|
8
8
|
disableCompress: {
|
|
9
9
|
type: 'boolean',
|
|
10
10
|
},
|
|
11
|
+
loading: {
|
|
12
|
+
type: 'string',
|
|
13
|
+
enum: ['eager', 'lazy'],
|
|
14
|
+
},
|
|
15
|
+
fetchPriority: {
|
|
16
|
+
type: 'string',
|
|
17
|
+
enum: ['high', 'low', 'auto'],
|
|
18
|
+
},
|
|
11
19
|
};
|
|
12
20
|
const StyleBase = {
|
|
13
21
|
type: 'object',
|
|
@@ -7,5 +7,5 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
|
|
|
7
7
|
onLoad?: ReactEventHandler<HTMLDivElement>;
|
|
8
8
|
onError?: () => void;
|
|
9
9
|
}
|
|
10
|
-
export declare const ImageBase: (props: ImageBaseProps) => JSX.Element;
|
|
10
|
+
export declare const ImageBase: ({ fetchPriority, ...props }: ImageBaseProps) => JSX.Element;
|
|
11
11
|
export default ImageBase;
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { ImageContext } from '../../context/imageContext/imageContext';
|
|
3
|
-
export const ImageBase = (
|
|
4
|
+
export const ImageBase = (_a) => {
|
|
5
|
+
var { fetchPriority } = _a, props = __rest(_a, ["fetchPriority"]);
|
|
4
6
|
const { Image } = React.useContext(ImageContext);
|
|
7
|
+
return Image ? (React.createElement(Image, Object.assign({ fetchPriority: fetchPriority }, props))) : (
|
|
8
|
+
// There is an issue with fetchpriority attr in img in React.
|
|
9
|
+
// It is still not supported. However it's nice to have ability to manage
|
|
10
|
+
// this prop is good to have to improve Core Web Vitals.
|
|
11
|
+
// So, here is a workaround to assign the attr.
|
|
5
12
|
// eslint-disable-next-line jsx-a11y/alt-text
|
|
6
|
-
|
|
13
|
+
React.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, props)));
|
|
7
14
|
};
|
|
8
15
|
export default ImageBase;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ImageBaseProps } from '../../components';
|
|
3
|
-
export type Image = React.ComponentClass<ImageBaseProps> | React.FC<ImageBaseProps>;
|
|
2
|
+
import type { ImageBaseProps } from '../../components';
|
|
4
3
|
export type ImageContextProps = {
|
|
5
|
-
Image?:
|
|
4
|
+
Image?: React.ComponentType<ImageBaseProps>;
|
|
6
5
|
};
|
|
7
6
|
export declare const ImageContext: React.Context<ImageContextProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
|
|
1
|
+
import React, { CSSProperties, DetailedHTMLProps, HTMLProps, ImgHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
|
|
3
3
|
import { ThemeSupporting } from '../../utils';
|
|
4
4
|
import { AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps } from '../common';
|
|
@@ -96,8 +96,9 @@ interface LoopProps {
|
|
|
96
96
|
start: number;
|
|
97
97
|
end?: number;
|
|
98
98
|
}
|
|
99
|
-
export interface ImageInfoProps extends Pick<
|
|
99
|
+
export interface ImageInfoProps extends Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'> {
|
|
100
100
|
alt?: string;
|
|
101
|
+
fetchPriority?: 'high' | 'low' | 'auto';
|
|
101
102
|
disableCompress?: boolean;
|
|
102
103
|
}
|
|
103
104
|
export interface ImageObjectProps extends ImageInfoProps {
|