@gravity-ui/page-constructor 1.14.0 → 1.15.0-alpha.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.
- package/build/cjs/blocks/Banner/schema.d.ts +234 -0
- package/build/cjs/blocks/Media/schema.d.ts +78 -0
- package/build/cjs/components/Button/Button.js +5 -2
- package/build/cjs/components/CardBase/CardBase.d.ts +2 -0
- package/build/cjs/components/CardBase/CardBase.js +4 -1
- package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js +4 -1
- package/build/cjs/components/Link/Link.js +4 -1
- package/build/cjs/components/Media/Media.js +3 -2
- package/build/cjs/components/Media/Video/Video.js +4 -3
- package/build/cjs/components/ReactPlayer/ReactPlayer.js +27 -3
- package/build/cjs/components/YandexForm/YandexForm.d.ts +2 -0
- package/build/cjs/components/YandexForm/YandexForm.js +13 -2
- package/build/cjs/containers/PageConstructor/Provider.d.ts +2 -0
- package/build/cjs/containers/PageConstructor/Provider.js +3 -1
- package/build/cjs/context/analyticsContext/analyticsContext.d.ts +6 -0
- package/build/cjs/context/analyticsContext/analyticsContext.js +6 -0
- package/build/cjs/context/analyticsContext/index.d.ts +1 -0
- package/build/cjs/context/analyticsContext/index.js +4 -0
- package/build/cjs/context/metrikaContext/metrikaContext.d.ts +6 -0
- package/build/cjs/hooks/index.d.ts +1 -0
- package/build/cjs/hooks/index.js +1 -0
- package/build/cjs/hooks/useAnalytics.d.ts +2 -0
- package/build/cjs/hooks/useAnalytics.js +18 -0
- package/build/cjs/hooks/useMetrika.d.ts +6 -0
- package/build/cjs/hooks/useMetrika.js +8 -0
- package/build/cjs/models/common.d.ts +36 -0
- package/build/cjs/models/common.js +3 -0
- package/build/cjs/models/constructor-items/common.d.ts +6 -1
- package/build/cjs/models/constructor-items/sub-blocks.d.ts +2 -1
- package/build/cjs/schema/validators/common.d.ts +168 -0
- package/build/cjs/schema/validators/common.js +10 -0
- package/build/cjs/schema/validators/event.d.ts +91 -0
- package/build/cjs/schema/validators/event.js +90 -0
- package/build/cjs/sub-blocks/HubspotForm/index.js +13 -2
- package/build/esm/blocks/Banner/schema.d.ts +234 -0
- package/build/esm/blocks/Media/schema.d.ts +78 -0
- package/build/esm/components/Button/Button.js +5 -2
- package/build/esm/components/CardBase/CardBase.d.ts +2 -0
- package/build/esm/components/CardBase/CardBase.js +4 -1
- package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js +4 -1
- package/build/esm/components/Link/Link.js +4 -1
- package/build/esm/components/Media/Media.js +3 -2
- package/build/esm/components/Media/Video/Video.js +4 -3
- package/build/esm/components/ReactPlayer/ReactPlayer.js +27 -3
- package/build/esm/components/YandexForm/YandexForm.d.ts +2 -0
- package/build/esm/components/YandexForm/YandexForm.js +13 -2
- package/build/esm/containers/PageConstructor/Provider.d.ts +2 -0
- package/build/esm/containers/PageConstructor/Provider.js +3 -1
- package/build/esm/context/analyticsContext/analyticsContext.d.ts +6 -0
- package/build/esm/context/analyticsContext/analyticsContext.js +2 -0
- package/build/esm/context/analyticsContext/index.d.ts +1 -0
- package/build/esm/context/analyticsContext/index.js +1 -0
- package/build/esm/context/metrikaContext/metrikaContext.d.ts +6 -0
- package/build/esm/hooks/index.d.ts +1 -0
- package/build/esm/hooks/index.js +1 -0
- package/build/esm/hooks/useAnalytics.d.ts +2 -0
- package/build/esm/hooks/useAnalytics.js +14 -0
- package/build/esm/hooks/useMetrika.d.ts +6 -0
- package/build/esm/hooks/useMetrika.js +8 -0
- package/build/esm/models/common.d.ts +36 -0
- package/build/esm/models/common.js +3 -0
- package/build/esm/models/constructor-items/common.d.ts +6 -1
- package/build/esm/models/constructor-items/sub-blocks.d.ts +2 -1
- package/build/esm/schema/validators/common.d.ts +168 -0
- package/build/esm/schema/validators/common.js +10 -0
- package/build/esm/schema/validators/event.d.ts +91 -0
- package/build/esm/schema/validators/event.js +87 -0
- package/build/esm/sub-blocks/HubspotForm/index.js +14 -3
- package/package.json +4 -1
- package/server/models/common.d.ts +36 -0
- package/server/models/common.js +3 -0
- package/server/models/constructor-items/common.d.ts +6 -1
- package/server/models/constructor-items/sub-blocks.d.ts +2 -1
|
@@ -173,6 +173,84 @@ export declare const BannerCardProps: {
|
|
|
173
173
|
};
|
|
174
174
|
};
|
|
175
175
|
};
|
|
176
|
+
analyticsEvents: {
|
|
177
|
+
anyOf: ({
|
|
178
|
+
type: string;
|
|
179
|
+
propertyNames: {
|
|
180
|
+
type: string;
|
|
181
|
+
};
|
|
182
|
+
additionalProperty: {
|
|
183
|
+
type: string;
|
|
184
|
+
};
|
|
185
|
+
required: string[];
|
|
186
|
+
properties: {
|
|
187
|
+
name: {
|
|
188
|
+
type: string;
|
|
189
|
+
};
|
|
190
|
+
type: {
|
|
191
|
+
type: string;
|
|
192
|
+
};
|
|
193
|
+
counters: {
|
|
194
|
+
type: string;
|
|
195
|
+
additionalProperties: boolean;
|
|
196
|
+
required: never[];
|
|
197
|
+
properties: {
|
|
198
|
+
include: {
|
|
199
|
+
type: string;
|
|
200
|
+
items: {
|
|
201
|
+
type: string;
|
|
202
|
+
};
|
|
203
|
+
};
|
|
204
|
+
exclude: {
|
|
205
|
+
type: string;
|
|
206
|
+
items: {
|
|
207
|
+
type: string;
|
|
208
|
+
};
|
|
209
|
+
};
|
|
210
|
+
};
|
|
211
|
+
};
|
|
212
|
+
};
|
|
213
|
+
} | {
|
|
214
|
+
type: string;
|
|
215
|
+
items: {
|
|
216
|
+
type: string;
|
|
217
|
+
propertyNames: {
|
|
218
|
+
type: string;
|
|
219
|
+
};
|
|
220
|
+
additionalProperty: {
|
|
221
|
+
type: string;
|
|
222
|
+
};
|
|
223
|
+
required: string[];
|
|
224
|
+
properties: {
|
|
225
|
+
name: {
|
|
226
|
+
type: string;
|
|
227
|
+
};
|
|
228
|
+
type: {
|
|
229
|
+
type: string;
|
|
230
|
+
};
|
|
231
|
+
counters: {
|
|
232
|
+
type: string;
|
|
233
|
+
additionalProperties: boolean;
|
|
234
|
+
required: never[];
|
|
235
|
+
properties: {
|
|
236
|
+
include: {
|
|
237
|
+
type: string;
|
|
238
|
+
items: {
|
|
239
|
+
type: string;
|
|
240
|
+
};
|
|
241
|
+
};
|
|
242
|
+
exclude: {
|
|
243
|
+
type: string;
|
|
244
|
+
items: {
|
|
245
|
+
type: string;
|
|
246
|
+
};
|
|
247
|
+
};
|
|
248
|
+
};
|
|
249
|
+
};
|
|
250
|
+
};
|
|
251
|
+
};
|
|
252
|
+
})[];
|
|
253
|
+
};
|
|
176
254
|
target: {
|
|
177
255
|
type: string;
|
|
178
256
|
enum: string[];
|
|
@@ -375,6 +453,84 @@ export declare const BannerBlock: {
|
|
|
375
453
|
};
|
|
376
454
|
};
|
|
377
455
|
};
|
|
456
|
+
analyticsEvents: {
|
|
457
|
+
anyOf: ({
|
|
458
|
+
type: string;
|
|
459
|
+
propertyNames: {
|
|
460
|
+
type: string;
|
|
461
|
+
};
|
|
462
|
+
additionalProperty: {
|
|
463
|
+
type: string;
|
|
464
|
+
};
|
|
465
|
+
required: string[];
|
|
466
|
+
properties: {
|
|
467
|
+
name: {
|
|
468
|
+
type: string;
|
|
469
|
+
};
|
|
470
|
+
type: {
|
|
471
|
+
type: string;
|
|
472
|
+
};
|
|
473
|
+
counters: {
|
|
474
|
+
type: string;
|
|
475
|
+
additionalProperties: boolean;
|
|
476
|
+
required: never[];
|
|
477
|
+
properties: {
|
|
478
|
+
include: {
|
|
479
|
+
type: string;
|
|
480
|
+
items: {
|
|
481
|
+
type: string;
|
|
482
|
+
};
|
|
483
|
+
};
|
|
484
|
+
exclude: {
|
|
485
|
+
type: string;
|
|
486
|
+
items: {
|
|
487
|
+
type: string;
|
|
488
|
+
};
|
|
489
|
+
};
|
|
490
|
+
};
|
|
491
|
+
};
|
|
492
|
+
};
|
|
493
|
+
} | {
|
|
494
|
+
type: string;
|
|
495
|
+
items: {
|
|
496
|
+
type: string;
|
|
497
|
+
propertyNames: {
|
|
498
|
+
type: string;
|
|
499
|
+
};
|
|
500
|
+
additionalProperty: {
|
|
501
|
+
type: string;
|
|
502
|
+
};
|
|
503
|
+
required: string[];
|
|
504
|
+
properties: {
|
|
505
|
+
name: {
|
|
506
|
+
type: string;
|
|
507
|
+
};
|
|
508
|
+
type: {
|
|
509
|
+
type: string;
|
|
510
|
+
};
|
|
511
|
+
counters: {
|
|
512
|
+
type: string;
|
|
513
|
+
additionalProperties: boolean;
|
|
514
|
+
required: never[];
|
|
515
|
+
properties: {
|
|
516
|
+
include: {
|
|
517
|
+
type: string;
|
|
518
|
+
items: {
|
|
519
|
+
type: string;
|
|
520
|
+
};
|
|
521
|
+
};
|
|
522
|
+
exclude: {
|
|
523
|
+
type: string;
|
|
524
|
+
items: {
|
|
525
|
+
type: string;
|
|
526
|
+
};
|
|
527
|
+
};
|
|
528
|
+
};
|
|
529
|
+
};
|
|
530
|
+
};
|
|
531
|
+
};
|
|
532
|
+
})[];
|
|
533
|
+
};
|
|
378
534
|
target: {
|
|
379
535
|
type: string;
|
|
380
536
|
enum: string[];
|
|
@@ -578,6 +734,84 @@ export declare const BannerCard: {
|
|
|
578
734
|
};
|
|
579
735
|
};
|
|
580
736
|
};
|
|
737
|
+
analyticsEvents: {
|
|
738
|
+
anyOf: ({
|
|
739
|
+
type: string;
|
|
740
|
+
propertyNames: {
|
|
741
|
+
type: string;
|
|
742
|
+
};
|
|
743
|
+
additionalProperty: {
|
|
744
|
+
type: string;
|
|
745
|
+
};
|
|
746
|
+
required: string[];
|
|
747
|
+
properties: {
|
|
748
|
+
name: {
|
|
749
|
+
type: string;
|
|
750
|
+
};
|
|
751
|
+
type: {
|
|
752
|
+
type: string;
|
|
753
|
+
};
|
|
754
|
+
counters: {
|
|
755
|
+
type: string;
|
|
756
|
+
additionalProperties: boolean;
|
|
757
|
+
required: never[];
|
|
758
|
+
properties: {
|
|
759
|
+
include: {
|
|
760
|
+
type: string;
|
|
761
|
+
items: {
|
|
762
|
+
type: string;
|
|
763
|
+
};
|
|
764
|
+
};
|
|
765
|
+
exclude: {
|
|
766
|
+
type: string;
|
|
767
|
+
items: {
|
|
768
|
+
type: string;
|
|
769
|
+
};
|
|
770
|
+
};
|
|
771
|
+
};
|
|
772
|
+
};
|
|
773
|
+
};
|
|
774
|
+
} | {
|
|
775
|
+
type: string;
|
|
776
|
+
items: {
|
|
777
|
+
type: string;
|
|
778
|
+
propertyNames: {
|
|
779
|
+
type: string;
|
|
780
|
+
};
|
|
781
|
+
additionalProperty: {
|
|
782
|
+
type: string;
|
|
783
|
+
};
|
|
784
|
+
required: string[];
|
|
785
|
+
properties: {
|
|
786
|
+
name: {
|
|
787
|
+
type: string;
|
|
788
|
+
};
|
|
789
|
+
type: {
|
|
790
|
+
type: string;
|
|
791
|
+
};
|
|
792
|
+
counters: {
|
|
793
|
+
type: string;
|
|
794
|
+
additionalProperties: boolean;
|
|
795
|
+
required: never[];
|
|
796
|
+
properties: {
|
|
797
|
+
include: {
|
|
798
|
+
type: string;
|
|
799
|
+
items: {
|
|
800
|
+
type: string;
|
|
801
|
+
};
|
|
802
|
+
};
|
|
803
|
+
exclude: {
|
|
804
|
+
type: string;
|
|
805
|
+
items: {
|
|
806
|
+
type: string;
|
|
807
|
+
};
|
|
808
|
+
};
|
|
809
|
+
};
|
|
810
|
+
};
|
|
811
|
+
};
|
|
812
|
+
};
|
|
813
|
+
})[];
|
|
814
|
+
};
|
|
581
815
|
target: {
|
|
582
816
|
type: string;
|
|
583
817
|
enum: string[];
|
|
@@ -426,6 +426,84 @@ export declare const MediaBlock: {
|
|
|
426
426
|
};
|
|
427
427
|
};
|
|
428
428
|
};
|
|
429
|
+
analyticsEvents: {
|
|
430
|
+
anyOf: ({
|
|
431
|
+
type: string;
|
|
432
|
+
propertyNames: {
|
|
433
|
+
type: string;
|
|
434
|
+
};
|
|
435
|
+
additionalProperty: {
|
|
436
|
+
type: string;
|
|
437
|
+
};
|
|
438
|
+
required: string[];
|
|
439
|
+
properties: {
|
|
440
|
+
name: {
|
|
441
|
+
type: string;
|
|
442
|
+
};
|
|
443
|
+
type: {
|
|
444
|
+
type: string;
|
|
445
|
+
};
|
|
446
|
+
counters: {
|
|
447
|
+
type: string;
|
|
448
|
+
additionalProperties: boolean;
|
|
449
|
+
required: never[];
|
|
450
|
+
properties: {
|
|
451
|
+
include: {
|
|
452
|
+
type: string;
|
|
453
|
+
items: {
|
|
454
|
+
type: string;
|
|
455
|
+
};
|
|
456
|
+
};
|
|
457
|
+
exclude: {
|
|
458
|
+
type: string;
|
|
459
|
+
items: {
|
|
460
|
+
type: string;
|
|
461
|
+
};
|
|
462
|
+
};
|
|
463
|
+
};
|
|
464
|
+
};
|
|
465
|
+
};
|
|
466
|
+
} | {
|
|
467
|
+
type: string;
|
|
468
|
+
items: {
|
|
469
|
+
type: string;
|
|
470
|
+
propertyNames: {
|
|
471
|
+
type: string;
|
|
472
|
+
};
|
|
473
|
+
additionalProperty: {
|
|
474
|
+
type: string;
|
|
475
|
+
};
|
|
476
|
+
required: string[];
|
|
477
|
+
properties: {
|
|
478
|
+
name: {
|
|
479
|
+
type: string;
|
|
480
|
+
};
|
|
481
|
+
type: {
|
|
482
|
+
type: string;
|
|
483
|
+
};
|
|
484
|
+
counters: {
|
|
485
|
+
type: string;
|
|
486
|
+
additionalProperties: boolean;
|
|
487
|
+
required: never[];
|
|
488
|
+
properties: {
|
|
489
|
+
include: {
|
|
490
|
+
type: string;
|
|
491
|
+
items: {
|
|
492
|
+
type: string;
|
|
493
|
+
};
|
|
494
|
+
};
|
|
495
|
+
exclude: {
|
|
496
|
+
type: string;
|
|
497
|
+
items: {
|
|
498
|
+
type: string;
|
|
499
|
+
};
|
|
500
|
+
};
|
|
501
|
+
};
|
|
502
|
+
};
|
|
503
|
+
};
|
|
504
|
+
};
|
|
505
|
+
})[];
|
|
506
|
+
};
|
|
429
507
|
target: {
|
|
430
508
|
type: string;
|
|
431
509
|
enum: string[];
|
|
@@ -7,19 +7,22 @@ const utils_1 = require("../../utils");
|
|
|
7
7
|
const utils_2 = require("./utils");
|
|
8
8
|
const localeContext_1 = require("../../context/localeContext/localeContext");
|
|
9
9
|
const useMetrika_1 = require("../../hooks/useMetrika");
|
|
10
|
+
const hooks_1 = require("../../hooks");
|
|
10
11
|
const icons_1 = require("../../icons");
|
|
11
12
|
const b = (0, utils_1.block)('button-block');
|
|
12
13
|
const Button = (props) => {
|
|
13
14
|
const handleMetrika = (0, useMetrika_1.useMetrika)();
|
|
15
|
+
const handleAnalytics = (0, hooks_1.useAnalytics)();
|
|
14
16
|
const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
|
|
15
|
-
const { className, metrikaGoals, pixelEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "size", "theme", "url", "img", "onClick", "text"]);
|
|
17
|
+
const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
|
|
16
18
|
const defaultImgPosition = 'left';
|
|
17
19
|
const onClick = (0, react_1.useCallback)(() => {
|
|
18
20
|
handleMetrika({ metrikaGoals, pixelEvents });
|
|
21
|
+
handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
|
|
19
22
|
if (onClickOrigin) {
|
|
20
23
|
onClickOrigin();
|
|
21
24
|
}
|
|
22
|
-
}, [handleMetrika, metrikaGoals, pixelEvents, onClickOrigin]);
|
|
25
|
+
}, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
|
|
23
26
|
const buttonImg = img instanceof Object
|
|
24
27
|
? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
|
|
25
28
|
: { url: img, position: defaultImgPosition };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ReactElement, HTMLAttributeAnchorTarget } from 'react';
|
|
2
2
|
import { ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
|
|
3
|
+
import { AnalyticsEventV2 } from '../../models/common';
|
|
3
4
|
export interface CardBaseProps extends CardBaseParams {
|
|
4
5
|
className?: string;
|
|
5
6
|
bodyClassName?: string;
|
|
@@ -9,6 +10,7 @@ export interface CardBaseProps extends CardBaseParams {
|
|
|
9
10
|
target?: HTMLAttributeAnchorTarget;
|
|
10
11
|
metrikaGoals?: MetrikaGoal;
|
|
11
12
|
pixelEvents?: ButtonPixel;
|
|
13
|
+
analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
|
|
12
14
|
}
|
|
13
15
|
export interface CardHeaderBaseProps {
|
|
14
16
|
className?: string;
|
|
@@ -7,13 +7,15 @@ const utils_1 = require("../../utils");
|
|
|
7
7
|
const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/BackgroundImage"));
|
|
8
8
|
const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
|
|
9
9
|
const useMetrika_1 = require("../../hooks/useMetrika");
|
|
10
|
+
const hooks_1 = require("../../hooks");
|
|
10
11
|
const b = (0, utils_1.block)('card-base-block');
|
|
11
12
|
const Header = () => null;
|
|
12
13
|
const Content = () => null;
|
|
13
14
|
const Footer = () => null;
|
|
14
15
|
const Layout = (props) => {
|
|
15
|
-
const { className, bodyClassName, metrikaGoals, pixelEvents, contentClassName, children, url, target, border = 'shadow', } = props;
|
|
16
|
+
const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
|
|
16
17
|
const handleMetrika = (0, useMetrika_1.useMetrika)();
|
|
18
|
+
const handleAnalytics = (0, hooks_1.useAnalytics)();
|
|
17
19
|
let header, content, footer, image, headerClass, footerClass;
|
|
18
20
|
function handleChild(child) {
|
|
19
21
|
switch (child.type) {
|
|
@@ -46,6 +48,7 @@ const Layout = (props) => {
|
|
|
46
48
|
const fullClassName = b({ border }, className);
|
|
47
49
|
const onClick = () => {
|
|
48
50
|
handleMetrika({ metrikaGoals, pixelEvents });
|
|
51
|
+
handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
|
|
49
52
|
};
|
|
50
53
|
return url ? (react_1.default.createElement(RouterLink_1.default, { href: url },
|
|
51
54
|
react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName }, cardContent));
|
|
@@ -4,12 +4,15 @@ const tslib_1 = require("tslib");
|
|
|
4
4
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
5
5
|
const utils_1 = require("../../utils");
|
|
6
6
|
const useMetrika_1 = require("../../hooks/useMetrika");
|
|
7
|
+
const hooks_1 = require("../../hooks");
|
|
7
8
|
const b = (0, utils_1.block)('header-breadcrumbs');
|
|
8
9
|
function HeaderBreadcrumbs(props) {
|
|
9
|
-
const { items, metrikaGoals, pixelEvents, theme = 'light', className } = props;
|
|
10
|
+
const { items, metrikaGoals, pixelEvents, analyticsEvents, theme = 'light', className } = props;
|
|
10
11
|
const handleMetrika = (0, useMetrika_1.useMetrika)();
|
|
12
|
+
const handleAnalytics = (0, hooks_1.useAnalytics)();
|
|
11
13
|
const onClick = () => {
|
|
12
14
|
handleMetrika({ metrikaGoals, pixelEvents });
|
|
15
|
+
handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
|
|
13
16
|
};
|
|
14
17
|
return (react_1.default.createElement("div", { className: b({ theme }, className) }, items.map((item) => (react_1.default.createElement("div", { className: b('item'), key: item.url },
|
|
15
18
|
react_1.default.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
|
|
@@ -10,6 +10,7 @@ const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
|
|
|
10
10
|
const localeContext_1 = require("../../context/localeContext/localeContext");
|
|
11
11
|
const locationContext_1 = require("../../context/locationContext/locationContext");
|
|
12
12
|
const useMetrika_1 = require("../../hooks/useMetrika");
|
|
13
|
+
const hooks_1 = require("../../hooks");
|
|
13
14
|
const b = (0, utils_1.block)('link-block');
|
|
14
15
|
const WORD_JOINER_SYM = '\u200b';
|
|
15
16
|
function getArrowSize(size) {
|
|
@@ -25,14 +26,16 @@ function getArrowSize(size) {
|
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
const LinkBlock = (props) => {
|
|
28
|
-
const { text, url, arrow, metrikaGoals, pixelEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
|
|
29
|
+
const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
|
|
29
30
|
const handleMetrika = (0, useMetrika_1.useMetrika)();
|
|
31
|
+
const handleAnalytics = (0, hooks_1.useAnalytics)();
|
|
30
32
|
const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
|
|
31
33
|
const { tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
|
|
32
34
|
const href = (0, utils_1.setUrlTld)(props.url, tld);
|
|
33
35
|
const defaultTextSize = theme === 'back' ? 'l' : 'm';
|
|
34
36
|
const onClick = () => {
|
|
35
37
|
handleMetrika({ metrikaGoals, pixelEvents });
|
|
38
|
+
handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
|
|
36
39
|
};
|
|
37
40
|
const getLinkByType = () => {
|
|
38
41
|
switch (theme) {
|
|
@@ -10,7 +10,7 @@ const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
|
|
|
10
10
|
const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
|
|
11
11
|
const b = (0, utils_1.block)('Media');
|
|
12
12
|
const Media = (props) => {
|
|
13
|
-
const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, } = props;
|
|
13
|
+
const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, analyticsEvents, } = props;
|
|
14
14
|
const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
|
|
15
15
|
const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
|
|
16
16
|
const content = (0, react_1.useMemo)(() => {
|
|
@@ -19,7 +19,7 @@ const Media = (props) => {
|
|
|
19
19
|
result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
|
|
20
20
|
}
|
|
21
21
|
if (video) {
|
|
22
|
-
result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
|
|
22
|
+
result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
|
|
23
23
|
}
|
|
24
24
|
if (youtube) {
|
|
25
25
|
result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
|
|
@@ -40,6 +40,7 @@ const Media = (props) => {
|
|
|
40
40
|
hasVideoFallback,
|
|
41
41
|
videoClassName,
|
|
42
42
|
metrika,
|
|
43
|
+
analyticsEvents,
|
|
43
44
|
playVideo,
|
|
44
45
|
previewImg,
|
|
45
46
|
playButton,
|
|
@@ -8,7 +8,7 @@ const utils_1 = require("./utils");
|
|
|
8
8
|
const utils_2 = require("../../../utils");
|
|
9
9
|
const b = (0, utils_2.block)('media-component-video');
|
|
10
10
|
const Video = (props) => {
|
|
11
|
-
const { video, height, metrika, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
|
|
11
|
+
const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, } = props;
|
|
12
12
|
const ref = (0, react_1.useRef)(null);
|
|
13
13
|
(0, react_1.useEffect)(() => {
|
|
14
14
|
if (ref && ref.current) {
|
|
@@ -31,16 +31,17 @@ const Video = (props) => {
|
|
|
31
31
|
}, [playVideo, video, setHasVideoFallback]);
|
|
32
32
|
const reactPlayerBlock = (0, react_1.useMemo)(() => {
|
|
33
33
|
const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton } = video;
|
|
34
|
-
return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, height: height }));
|
|
34
|
+
return (react_1.default.createElement(ReactPlayer_1.default, { className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height }));
|
|
35
35
|
}, [
|
|
36
36
|
video,
|
|
37
|
-
height,
|
|
38
37
|
videoClassName,
|
|
39
38
|
previewImg,
|
|
40
39
|
playVideo,
|
|
41
40
|
commonPlayButton,
|
|
42
41
|
customBarControlsClassName,
|
|
43
42
|
metrika,
|
|
43
|
+
analyticsEvents,
|
|
44
|
+
height,
|
|
44
45
|
]);
|
|
45
46
|
const defaultVideoBlock = (0, react_1.useMemo)(() => {
|
|
46
47
|
return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height } },
|
|
@@ -13,13 +13,14 @@ const videoContext_1 = require("../../context/videoContext");
|
|
|
13
13
|
const metrikaContext_1 = require("../../context/metrikaContext");
|
|
14
14
|
const mobileContext_1 = require("../../context/mobileContext");
|
|
15
15
|
const icons_1 = require("../../icons");
|
|
16
|
+
const hooks_1 = require("../../hooks");
|
|
16
17
|
const b = (0, utils_1.block)('ReactPlayer');
|
|
17
18
|
const FPS = 60;
|
|
18
19
|
// eslint-disable-next-line react/display-name
|
|
19
20
|
exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
|
|
20
21
|
const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
|
|
21
22
|
const { metrika } = (0, react_1.useContext)(metrikaContext_1.MetrikaContext);
|
|
22
|
-
const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, height, } = props;
|
|
23
|
+
const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
|
|
23
24
|
const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
|
|
24
25
|
const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
|
|
25
26
|
const mute = initiallyMuted || autoPlay;
|
|
@@ -34,6 +35,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
|
|
|
34
35
|
const [started, setStarted] = (0, react_1.useState)(autoPlay);
|
|
35
36
|
const [paused, setPaused] = (0, react_1.useState)(false);
|
|
36
37
|
const [ended, setEnded] = (0, react_1.useState)(false);
|
|
38
|
+
const handleAnalytics = (0, hooks_1.useAnalytics)();
|
|
37
39
|
(0, react_1.useImperativeHandle)(originRef, () => ({
|
|
38
40
|
pause: () => setIsPlaying(false),
|
|
39
41
|
}));
|
|
@@ -82,6 +84,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
|
|
|
82
84
|
window.removeEventListener('resize', updateSize);
|
|
83
85
|
};
|
|
84
86
|
}, []);
|
|
87
|
+
const playEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'play'), [analyticsEvents]);
|
|
88
|
+
const stopEvents = (0, react_1.useMemo)(() => analyticsEvents === null || analyticsEvents === void 0 ? void 0 : analyticsEvents.filter((e) => e.type === 'stop'), [analyticsEvents]);
|
|
85
89
|
const playIcon = (0, react_1.useMemo)(() => {
|
|
86
90
|
let playButtonContent;
|
|
87
91
|
switch (type) {
|
|
@@ -107,12 +111,27 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
|
|
|
107
111
|
metrika.reachGoals(goal, counterName);
|
|
108
112
|
}
|
|
109
113
|
}
|
|
114
|
+
if (handleAnalytics && analyticsEvents) {
|
|
115
|
+
const events = isMuted ? playEvents : stopEvents;
|
|
116
|
+
if (events) {
|
|
117
|
+
handleAnalytics(events);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
110
120
|
if (isMuted) {
|
|
111
121
|
setProps({ playingVideoRef: ref.current });
|
|
112
122
|
}
|
|
113
123
|
// In order to the progress bar to update (equals 0) before displaying
|
|
114
124
|
setTimeout(() => setMuted(!isMuted), 0);
|
|
115
|
-
}, [
|
|
125
|
+
}, [
|
|
126
|
+
playerRef,
|
|
127
|
+
metrika,
|
|
128
|
+
videoMetrika,
|
|
129
|
+
handleAnalytics,
|
|
130
|
+
analyticsEvents,
|
|
131
|
+
playEvents,
|
|
132
|
+
stopEvents,
|
|
133
|
+
setProps,
|
|
134
|
+
]);
|
|
116
135
|
const handleClick = (0, react_1.useCallback)(() => changeMute(muted), [changeMute, muted]);
|
|
117
136
|
const handleClickPreview = (0, react_1.useCallback)(() => {
|
|
118
137
|
setIsPlaying(true);
|
|
@@ -123,7 +142,12 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
|
|
|
123
142
|
metrika.reachGoals(play, counterName);
|
|
124
143
|
}
|
|
125
144
|
}
|
|
126
|
-
|
|
145
|
+
if (handleAnalytics && analyticsEvents) {
|
|
146
|
+
if (playEvents) {
|
|
147
|
+
handleAnalytics(playEvents);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}, [onClickPreview, metrika, videoMetrika, handleAnalytics, analyticsEvents, playEvents]);
|
|
127
151
|
const onPause = (0, react_1.useCallback)(() => {
|
|
128
152
|
// For support correct state for youtube
|
|
129
153
|
setIsPlaying(false);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PixelEvent } from '../../models';
|
|
2
|
+
import { AnalyticsEventV2 } from '../../models/common';
|
|
2
3
|
export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
|
|
3
4
|
export interface YandexFormProps {
|
|
4
5
|
id: number | string;
|
|
@@ -14,6 +15,7 @@ export interface YandexFormProps {
|
|
|
14
15
|
onLoad?: () => void;
|
|
15
16
|
metrikaGoals?: string | string[];
|
|
16
17
|
pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
|
|
18
|
+
analyticsEvents?: AnalyticsEventV2 | AnalyticsEventV2[];
|
|
17
19
|
}
|
|
18
20
|
declare const YandexForm: (props: YandexFormProps) => JSX.Element;
|
|
19
21
|
export default YandexForm;
|
|
@@ -8,15 +8,17 @@ const localeContext_1 = require("../../context/localeContext");
|
|
|
8
8
|
const mobileContext_1 = require("../../context/mobileContext");
|
|
9
9
|
const utils_1 = require("../../utils");
|
|
10
10
|
const useMetrika_1 = require("../../hooks/useMetrika");
|
|
11
|
+
const hooks_1 = require("../..//hooks");
|
|
11
12
|
exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
|
|
12
13
|
const CONTAINER_ID = 'pc-yandex-form-container';
|
|
13
14
|
const b = (0, utils_1.block)('yandex-form');
|
|
14
15
|
const YandexForm = (props) => {
|
|
15
|
-
const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, customFormOrigin, } = props;
|
|
16
|
+
const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
|
|
16
17
|
const formContainerRef = (0, react_1.useRef)(null);
|
|
17
18
|
const iframeRef = (0, react_1.useRef)();
|
|
18
19
|
const yaFormOrigin = customFormOrigin || exports.YANDEX_FORM_ORIGIN;
|
|
19
20
|
const handleMetrika = (0, useMetrika_1.useMetrika)();
|
|
21
|
+
const handleAnalytics = (0, hooks_1.useAnalytics)();
|
|
20
22
|
const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
|
|
21
23
|
const locale = (0, react_1.useContext)(localeContext_1.LocaleContext);
|
|
22
24
|
const updateFormIframe = (0, react_1.useCallback)((container) => {
|
|
@@ -57,10 +59,19 @@ const YandexForm = (props) => {
|
|
|
57
59
|
window.scrollBy(0, top - headerHeight);
|
|
58
60
|
}
|
|
59
61
|
handleMetrika({ metrikaGoals, pixelEvents });
|
|
62
|
+
handleAnalytics === null || handleAnalytics === void 0 ? void 0 : handleAnalytics(analyticsEvents);
|
|
60
63
|
if (onSubmit) {
|
|
61
64
|
onSubmit();
|
|
62
65
|
}
|
|
63
|
-
}, [
|
|
66
|
+
}, [
|
|
67
|
+
handleMetrika,
|
|
68
|
+
metrikaGoals,
|
|
69
|
+
pixelEvents,
|
|
70
|
+
handleAnalytics,
|
|
71
|
+
analyticsEvents,
|
|
72
|
+
onSubmit,
|
|
73
|
+
headerHeight,
|
|
74
|
+
]);
|
|
64
75
|
const handleMessage = (0, react_1.useCallback)(({ origin, data }) => {
|
|
65
76
|
if (origin !== yaFormOrigin) {
|
|
66
77
|
return;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { MetrikaContextProps } from '../../context/metrikaContext';
|
|
2
|
+
import { AnalyticsContextProps } from '../../context/analyticsContext';
|
|
2
3
|
import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
|
|
3
4
|
import { SSRContextProps } from '../../context/ssrContext';
|
|
4
5
|
import { LocaleContextProps } from '../../context/localeContext';
|
|
@@ -13,5 +14,6 @@ export interface PageConstructorProviderProps {
|
|
|
13
14
|
ssrConfig?: SSRContextProps;
|
|
14
15
|
theme?: ConstructorTheme;
|
|
15
16
|
projectSettings?: ProjectSettingsContextProps;
|
|
17
|
+
analytics?: AnalyticsContextProps;
|
|
16
18
|
}
|
|
17
19
|
export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;
|