@gravity-ui/page-constructor 3.0.0 → 3.1.0

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 (35) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +15 -0
  3. package/build/cjs/blocks/Header/schema.d.ts +234 -0
  4. package/build/cjs/blocks/HeaderSlider/schema.d.ts +78 -0
  5. package/build/cjs/blocks/Media/schema.d.ts +156 -0
  6. package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts +78 -0
  7. package/build/cjs/blocks/Slider/Slider.js +1 -1
  8. package/build/cjs/blocks/Tabs/schema.d.ts +78 -0
  9. package/build/cjs/components/Media/Media.js +1 -1
  10. package/build/cjs/components/VideoBlock/VideoBlock.d.ts +2 -1
  11. package/build/cjs/components/VideoBlock/VideoBlock.js +6 -2
  12. package/build/cjs/models/common.d.ts +2 -1
  13. package/build/cjs/models/common.js +1 -0
  14. package/build/cjs/schema/validators/common.d.ts +78 -0
  15. package/build/cjs/schema/validators/common.js +3 -0
  16. package/build/cjs/sub-blocks/LayoutItem/schema.d.ts +78 -0
  17. package/build/cjs/sub-blocks/MediaCard/schema.d.ts +78 -0
  18. package/build/esm/blocks/Header/schema.d.ts +234 -0
  19. package/build/esm/blocks/HeaderSlider/schema.d.ts +78 -0
  20. package/build/esm/blocks/Media/schema.d.ts +156 -0
  21. package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts +78 -0
  22. package/build/esm/blocks/Slider/Slider.js +2 -2
  23. package/build/esm/blocks/Tabs/schema.d.ts +78 -0
  24. package/build/esm/components/Media/Media.js +1 -1
  25. package/build/esm/components/VideoBlock/VideoBlock.d.ts +2 -1
  26. package/build/esm/components/VideoBlock/VideoBlock.js +6 -2
  27. package/build/esm/models/common.d.ts +2 -1
  28. package/build/esm/models/common.js +1 -0
  29. package/build/esm/schema/validators/common.d.ts +78 -0
  30. package/build/esm/schema/validators/common.js +3 -0
  31. package/build/esm/sub-blocks/LayoutItem/schema.d.ts +78 -0
  32. package/build/esm/sub-blocks/MediaCard/schema.d.ts +78 -0
  33. package/package.json +1 -1
  34. package/server/models/common.d.ts +2 -1
  35. package/server/models/common.js +1 -0
@@ -297,6 +297,84 @@ export declare const HeaderSliderBlock: {
297
297
  fullscreen: {
298
298
  type: string;
299
299
  };
300
+ analyticsEvents: {
301
+ anyOf: ({
302
+ type: string;
303
+ additionalProperties: {
304
+ type: string;
305
+ };
306
+ required: string[];
307
+ properties: {
308
+ name: {
309
+ type: string;
310
+ };
311
+ type: {
312
+ type: string;
313
+ };
314
+ counters: {
315
+ type: string;
316
+ additionalProperties: boolean;
317
+ required: never[];
318
+ properties: {
319
+ include: {
320
+ type: string;
321
+ items: {
322
+ type: string;
323
+ };
324
+ };
325
+ exclude: {
326
+ type: string;
327
+ items: {
328
+ type: string;
329
+ };
330
+ };
331
+ };
332
+ };
333
+ context: {
334
+ type: string;
335
+ };
336
+ };
337
+ } | {
338
+ type: string;
339
+ items: {
340
+ type: string;
341
+ additionalProperties: {
342
+ type: string;
343
+ };
344
+ required: string[];
345
+ properties: {
346
+ name: {
347
+ type: string;
348
+ };
349
+ type: {
350
+ type: string;
351
+ };
352
+ counters: {
353
+ type: string;
354
+ additionalProperties: boolean;
355
+ required: never[];
356
+ properties: {
357
+ include: {
358
+ type: string;
359
+ items: {
360
+ type: string;
361
+ };
362
+ };
363
+ exclude: {
364
+ type: string;
365
+ items: {
366
+ type: string;
367
+ };
368
+ };
369
+ };
370
+ };
371
+ context: {
372
+ type: string;
373
+ };
374
+ };
375
+ };
376
+ })[];
377
+ };
300
378
  };
301
379
  } | {
302
380
  type: string;
@@ -134,6 +134,84 @@ export declare const Media: {
134
134
  fullscreen: {
135
135
  type: string;
136
136
  };
137
+ analyticsEvents: {
138
+ anyOf: ({
139
+ type: string;
140
+ additionalProperties: {
141
+ type: string;
142
+ };
143
+ required: string[];
144
+ properties: {
145
+ name: {
146
+ type: string;
147
+ };
148
+ type: {
149
+ type: string;
150
+ };
151
+ counters: {
152
+ type: string;
153
+ additionalProperties: boolean;
154
+ required: never[];
155
+ properties: {
156
+ include: {
157
+ type: string;
158
+ items: {
159
+ type: string;
160
+ };
161
+ };
162
+ exclude: {
163
+ type: string;
164
+ items: {
165
+ type: string;
166
+ };
167
+ };
168
+ };
169
+ };
170
+ context: {
171
+ type: string;
172
+ };
173
+ };
174
+ } | {
175
+ type: string;
176
+ items: {
177
+ type: string;
178
+ additionalProperties: {
179
+ type: string;
180
+ };
181
+ required: string[];
182
+ properties: {
183
+ name: {
184
+ type: string;
185
+ };
186
+ type: {
187
+ type: string;
188
+ };
189
+ counters: {
190
+ type: string;
191
+ additionalProperties: boolean;
192
+ required: never[];
193
+ properties: {
194
+ include: {
195
+ type: string;
196
+ items: {
197
+ type: string;
198
+ };
199
+ };
200
+ exclude: {
201
+ type: string;
202
+ items: {
203
+ type: string;
204
+ };
205
+ };
206
+ };
207
+ };
208
+ context: {
209
+ type: string;
210
+ };
211
+ };
212
+ };
213
+ })[];
214
+ };
137
215
  };
138
216
  };
139
217
  export declare const MediaBlockBaseProps: {
@@ -614,6 +692,84 @@ export declare const MediaBlock: {
614
692
  fullscreen: {
615
693
  type: string;
616
694
  };
695
+ analyticsEvents: {
696
+ anyOf: ({
697
+ type: string;
698
+ additionalProperties: {
699
+ type: string;
700
+ };
701
+ required: string[];
702
+ properties: {
703
+ name: {
704
+ type: string;
705
+ };
706
+ type: {
707
+ type: string;
708
+ };
709
+ counters: {
710
+ type: string;
711
+ additionalProperties: boolean;
712
+ required: never[];
713
+ properties: {
714
+ include: {
715
+ type: string;
716
+ items: {
717
+ type: string;
718
+ };
719
+ };
720
+ exclude: {
721
+ type: string;
722
+ items: {
723
+ type: string;
724
+ };
725
+ };
726
+ };
727
+ };
728
+ context: {
729
+ type: string;
730
+ };
731
+ };
732
+ } | {
733
+ type: string;
734
+ items: {
735
+ type: string;
736
+ additionalProperties: {
737
+ type: string;
738
+ };
739
+ required: string[];
740
+ properties: {
741
+ name: {
742
+ type: string;
743
+ };
744
+ type: {
745
+ type: string;
746
+ };
747
+ counters: {
748
+ type: string;
749
+ additionalProperties: boolean;
750
+ required: never[];
751
+ properties: {
752
+ include: {
753
+ type: string;
754
+ items: {
755
+ type: string;
756
+ };
757
+ };
758
+ exclude: {
759
+ type: string;
760
+ items: {
761
+ type: string;
762
+ };
763
+ };
764
+ };
765
+ };
766
+ context: {
767
+ type: string;
768
+ };
769
+ };
770
+ };
771
+ })[];
772
+ };
617
773
  };
618
774
  };
619
775
  description: {
@@ -149,6 +149,84 @@ export declare const PromoFeaturesItem: {
149
149
  fullscreen: {
150
150
  type: string;
151
151
  };
152
+ analyticsEvents: {
153
+ anyOf: ({
154
+ type: string;
155
+ additionalProperties: {
156
+ type: string;
157
+ };
158
+ required: string[];
159
+ properties: {
160
+ name: {
161
+ type: string;
162
+ };
163
+ type: {
164
+ type: string;
165
+ };
166
+ counters: {
167
+ type: string;
168
+ additionalProperties: boolean;
169
+ required: never[];
170
+ properties: {
171
+ include: {
172
+ type: string;
173
+ items: {
174
+ type: string;
175
+ };
176
+ };
177
+ exclude: {
178
+ type: string;
179
+ items: {
180
+ type: string;
181
+ };
182
+ };
183
+ };
184
+ };
185
+ context: {
186
+ type: string;
187
+ };
188
+ };
189
+ } | {
190
+ type: string;
191
+ items: {
192
+ type: string;
193
+ additionalProperties: {
194
+ type: string;
195
+ };
196
+ required: string[];
197
+ properties: {
198
+ name: {
199
+ type: string;
200
+ };
201
+ type: {
202
+ type: string;
203
+ };
204
+ counters: {
205
+ type: string;
206
+ additionalProperties: boolean;
207
+ required: never[];
208
+ properties: {
209
+ include: {
210
+ type: string;
211
+ items: {
212
+ type: string;
213
+ };
214
+ };
215
+ exclude: {
216
+ type: string;
217
+ items: {
218
+ type: string;
219
+ };
220
+ };
221
+ };
222
+ };
223
+ context: {
224
+ type: string;
225
+ };
226
+ };
227
+ };
228
+ })[];
229
+ };
152
230
  };
153
231
  };
154
232
  };
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
1
+ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
2
2
  import _ from 'lodash';
3
3
  import SlickSlider from 'react-slick';
4
4
  import Anchor from '../../components/Anchor/Anchor';
@@ -25,7 +25,7 @@ export const SliderBlock = (props) => {
25
25
  const { isServer } = useContext(SSRContext);
26
26
  const isMobile = useContext(MobileContext);
27
27
  const [breakpoint, setBreakpoint] = useState(BREAKPOINTS.xl);
28
- const [disclosedChildren] = useState(() => discloseAllNestedChildren(children));
28
+ const disclosedChildren = useMemo(() => discloseAllNestedChildren(children), [children]);
29
29
  const childrenCount = disclosedChildren.length;
30
30
  const [slidesToShow] = useState(getSlidesToShowWithDefaults({
31
31
  contentLength: childrenCount,
@@ -145,6 +145,84 @@ export declare const tabsItem: {
145
145
  fullscreen: {
146
146
  type: string;
147
147
  };
148
+ analyticsEvents: {
149
+ anyOf: ({
150
+ type: string;
151
+ additionalProperties: {
152
+ type: string;
153
+ };
154
+ required: string[];
155
+ properties: {
156
+ name: {
157
+ type: string;
158
+ };
159
+ type: {
160
+ type: string;
161
+ };
162
+ counters: {
163
+ type: string;
164
+ additionalProperties: boolean;
165
+ required: never[];
166
+ properties: {
167
+ include: {
168
+ type: string;
169
+ items: {
170
+ type: string;
171
+ };
172
+ };
173
+ exclude: {
174
+ type: string;
175
+ items: {
176
+ type: string;
177
+ };
178
+ };
179
+ };
180
+ };
181
+ context: {
182
+ type: string;
183
+ };
184
+ };
185
+ } | {
186
+ type: string;
187
+ items: {
188
+ type: string;
189
+ additionalProperties: {
190
+ type: string;
191
+ };
192
+ required: string[];
193
+ properties: {
194
+ name: {
195
+ type: string;
196
+ };
197
+ type: {
198
+ type: string;
199
+ };
200
+ counters: {
201
+ type: string;
202
+ additionalProperties: boolean;
203
+ required: never[];
204
+ properties: {
205
+ include: {
206
+ type: string;
207
+ items: {
208
+ type: string;
209
+ };
210
+ };
211
+ exclude: {
212
+ type: string;
213
+ items: {
214
+ type: string;
215
+ };
216
+ };
217
+ };
218
+ };
219
+ context: {
220
+ type: string;
221
+ };
222
+ };
223
+ };
224
+ })[];
225
+ };
148
226
  };
149
227
  } | {
150
228
  type: string;
@@ -39,7 +39,7 @@ export const Media = (props) => {
39
39
  }
40
40
  }
41
41
  if (youtube) {
42
- result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen }));
42
+ result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents }));
43
43
  }
44
44
  if (dataLens) {
45
45
  result = React.createElement(DataLens, { dataLens: dataLens });
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
+ import { AnalyticsEventsBase } from '../../models/common';
2
3
  import './VideoBlock.css';
3
4
  export declare const AUTOPLAY_ATTRIBUTES: {
4
5
  autoplay: number;
5
6
  mute: number;
6
7
  };
7
8
  export declare function getHeight(width: number): number;
8
- export interface VideoBlockProps {
9
+ export interface VideoBlockProps extends AnalyticsEventsBase {
9
10
  id?: string;
10
11
  stream?: string;
11
12
  record?: string;
@@ -2,7 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
2
2
  import { Icon } from '@gravity-ui/uikit';
3
3
  import _ from 'lodash';
4
4
  import { v4 as uuidv4 } from 'uuid';
5
+ import { useAnalytics } from '../../hooks/useAnalytics';
5
6
  import { PlayVideo } from '../../icons';
7
+ import { DefaultEventNames } from '../../models/common';
6
8
  import { block, getPageSearchParams } from '../../utils';
7
9
  import Image from '../Image/Image';
8
10
  import i18n from './i18n';
@@ -35,7 +37,8 @@ export function getHeight(width) {
35
37
  return (width / 16) * 9;
36
38
  }
37
39
  const VideoBlock = (props) => {
38
- const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen } = props;
40
+ const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, } = props;
41
+ const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
39
42
  const src = getVideoSrc(stream, record);
40
43
  const ref = useRef(null);
41
44
  const iframeRef = useRef();
@@ -44,11 +47,12 @@ const VideoBlock = (props) => {
44
47
  const [currentHeight, setCurrentHeight] = useState(height || undefined);
45
48
  const fullId = id || uuidv4();
46
49
  const onPreviewClick = useCallback(() => {
50
+ handleAnalytics(analyticsEvents);
47
51
  if (iframeRef.current) {
48
52
  iframeRef.current.src = `${src}?${getPageSearchParams(Object.assign(Object.assign({}, AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
49
53
  }
50
54
  setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
51
- }, [src, attributes]);
55
+ }, [handleAnalytics, analyticsEvents, src, attributes]);
52
56
  useEffect(() => {
53
57
  const updateSize = _.debounce(() => {
54
58
  setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
@@ -79,7 +79,8 @@ export declare enum DefaultEventNames {
79
79
  HubspotFormSubmit = "hubspot-form-submit",
80
80
  QuoteButton = "quote-button-click",
81
81
  BackLink = "back-link-click",
82
- Breadcrumb = "breadcrumb-click"
82
+ Breadcrumb = "breadcrumb-click",
83
+ VideoPreview = "video-preview-click"
83
84
  }
84
85
  export type AnalyticsCounters = {
85
86
  include?: string[];
@@ -45,4 +45,5 @@ export var DefaultEventNames;
45
45
  DefaultEventNames["QuoteButton"] = "quote-button-click";
46
46
  DefaultEventNames["BackLink"] = "back-link-click";
47
47
  DefaultEventNames["Breadcrumb"] = "breadcrumb-click";
48
+ DefaultEventNames["VideoPreview"] = "video-preview-click";
48
49
  })(DefaultEventNames || (DefaultEventNames = {}));
@@ -1117,6 +1117,84 @@ export declare const MediaProps: {
1117
1117
  fullscreen: {
1118
1118
  type: string;
1119
1119
  };
1120
+ analyticsEvents: {
1121
+ anyOf: ({
1122
+ type: string;
1123
+ additionalProperties: {
1124
+ type: string;
1125
+ };
1126
+ required: string[];
1127
+ properties: {
1128
+ name: {
1129
+ type: string;
1130
+ };
1131
+ type: {
1132
+ type: string;
1133
+ };
1134
+ counters: {
1135
+ type: string;
1136
+ additionalProperties: boolean;
1137
+ required: never[];
1138
+ properties: {
1139
+ include: {
1140
+ type: string;
1141
+ items: {
1142
+ type: string;
1143
+ };
1144
+ };
1145
+ exclude: {
1146
+ type: string;
1147
+ items: {
1148
+ type: string;
1149
+ };
1150
+ };
1151
+ };
1152
+ };
1153
+ context: {
1154
+ type: string;
1155
+ };
1156
+ };
1157
+ } | {
1158
+ type: string;
1159
+ items: {
1160
+ type: string;
1161
+ additionalProperties: {
1162
+ type: string;
1163
+ };
1164
+ required: string[];
1165
+ properties: {
1166
+ name: {
1167
+ type: string;
1168
+ };
1169
+ type: {
1170
+ type: string;
1171
+ };
1172
+ counters: {
1173
+ type: string;
1174
+ additionalProperties: boolean;
1175
+ required: never[];
1176
+ properties: {
1177
+ include: {
1178
+ type: string;
1179
+ items: {
1180
+ type: string;
1181
+ };
1182
+ };
1183
+ exclude: {
1184
+ type: string;
1185
+ items: {
1186
+ type: string;
1187
+ };
1188
+ };
1189
+ };
1190
+ };
1191
+ context: {
1192
+ type: string;
1193
+ };
1194
+ };
1195
+ };
1196
+ })[];
1197
+ };
1120
1198
  };
1121
1199
  export declare const YMapMarkerLabel: {
1122
1200
  type: string;
@@ -456,6 +456,9 @@ export const MediaProps = {
456
456
  fullscreen: {
457
457
  type: 'boolean',
458
458
  },
459
+ analyticsEvents: {
460
+ anyOf: [AnalyticsEventSchema, { type: 'array', items: AnalyticsEventSchema }],
461
+ },
459
462
  };
460
463
  export const YMapMarkerLabel = {
461
464
  type: 'object',