npm - @gravity-ui/page-constructor - Versions diffs - 3.0.0 → 3.1.1 - Mend

@gravity-ui/page-constructor 3.0.0 → 3.1.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.

Files changed (63) hide show

package/build/esm/blocks/Tabs/schema.d.ts CHANGED Viewed

@@ -145,6 +145,84 @@ export declare const tabsItem: {
                     fullscreen: {
                         type: string;
                     };
+                    analyticsEvents: {
+                        anyOf: ({
+                            type: string;
+                            additionalProperties: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                                context: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                additionalProperties: {
+                                    type: string;
+                                };
+                                required: string[];
+                                properties: {
+                                    name: {
+                                        type: string;
+                                    };
+                                    type: {
+                                        type: string;
+                                    };
+                                    counters: {
+                                        type: string;
+                                        additionalProperties: boolean;
+                                        required: never[];
+                                        properties: {
+                                            include: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                            exclude: {
+                                                type: string;
+                                                items: {
+                                                    type: string;
+                                                };
+                                            };
+                                        };
+                                    };
+                                    context: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        })[];
+                    };
                 };
             } | {
                 type: string;

package/build/esm/components/BlockBase/BlockBase.js CHANGED Viewed

@@ -6,9 +6,9 @@ import Anchor from '../Anchor/Anchor';
 import './BlockBase.css';
 const b = block('block-base');
 const BlockBase = (props) => {
-    const { anchor, visible, children, className, resetPaddings, qa } = props;
+    const { anchor, visible, children, className, resetPaddings, qa, index = 0 } = props;
     return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        React.createElement(BlockDecoration, null,
+        React.createElement(BlockDecoration, { id: index },
             anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
             children)));
 };

package/build/esm/components/Media/Media.js CHANGED Viewed

@@ -39,7 +39,7 @@ export const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen }));
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });

package/build/esm/components/VideoBlock/VideoBlock.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import React from 'react';
+import { AnalyticsEventsBase } from '../../models/common';
 import './VideoBlock.css';
 export declare const AUTOPLAY_ATTRIBUTES: {
     autoplay: number;
     mute: number;
 };
 export declare function getHeight(width: number): number;
-export interface VideoBlockProps {
+export interface VideoBlockProps extends AnalyticsEventsBase {
     id?: string;
     stream?: string;
     record?: string;

package/build/esm/components/VideoBlock/VideoBlock.js CHANGED Viewed

@@ -2,7 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
+import { useAnalytics } from '../../hooks/useAnalytics';
 import { PlayVideo } from '../../icons';
+import { DefaultEventNames } from '../../models/common';
 import { block, getPageSearchParams } from '../../utils';
 import Image from '../Image/Image';
 import i18n from './i18n';
@@ -35,7 +37,8 @@ export function getHeight(width) {
     return (width / 16) * 9;
 }
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, } = props;
+    const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = useRef(null);
     const iframeRef = useRef();
@@ -44,11 +47,12 @@ const VideoBlock = (props) => {
     const [currentHeight, setCurrentHeight] = useState(height || undefined);
     const fullId = id || uuidv4();
     const onPreviewClick = useCallback(() => {
+        handleAnalytics(analyticsEvents);
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${getPageSearchParams(Object.assign(Object.assign({}, AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
         }
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
-    }, [src, attributes]);
+    }, [handleAnalytics, analyticsEvents, src, attributes]);
     useEffect(() => {
         const updateSize = _.debounce(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Block, WithChildren } from '../../../../models';
-interface ConstructorBlockProps {
+import { Block, BlockBaseProps, WithChildren } from '../../../../models';
+interface ConstructorBlockProps extends Pick<BlockBaseProps, 'index'> {
     data: Block;
 }
 export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import { block } from '../../../../utils';
 const b = block('constructor-block');
-export const ConstructorBlock = ({ data, children, }) => {
+export const ConstructorBlock = ({ index = 0, data, children, }) => {
     const { anchor, visible, type } = data;
-    return (React.createElement(BlockBase, { className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
+    return (React.createElement(BlockBase, { index: index, className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
 };

package/build/esm/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { Fragment, useContext } from 'react';
 import _ from 'lodash';
-import { BlockIdContext } from '../../../../context/blockIdContext';
 import { InnerContext } from '../../../../context/innerContext';
 import { getBlockKey } from '../../../../utils';
 import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
@@ -31,9 +30,12 @@ export const ConstructorBlocks = ({ items }) => {
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (React.createElement(ConstructorItem, { data: item, blockKey: blockId }, children));
+            itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return (React.createElement(BlockIdContext.Provider, { value: blockId, key: blockId }, blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item }, itemElement)) : (itemElement)));
+        return blockTypes.includes(item.type) ? (
+        //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
+        // components relying on constructor inner structure like Slider or blog-constructor will be refactored
+        React.createElement(ConstructorBlock, { data: item, key: blockId, index: index }, itemElement)) : (itemElement);
     };
     return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
 };

package/build/esm/containers/PageConstructor/components/ConstructorItem/ConstructorItem.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ export interface ConstructorItemProps {
     data: ConstructorItemType;
     blockKey: string;
 }
-export declare const ConstructorItem: ({ data, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

package/build/esm/containers/PageConstructor/components/ConstructorItem/ConstructorItem.js CHANGED Viewed

@@ -1,12 +1,14 @@
 import { __rest } from "tslib";
 import React, { useContext } from 'react';
+import { BlockIdContext } from '../../../../context/blockIdContext';
 import { InnerContext } from '../../../../context/innerContext';
 import { BlockDecoration } from '../../../../customization/BlockDecoration';
-export const ConstructorItem = ({ data, children }) => {
+export const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = useContext(InnerContext);
     const { type } = data, rest = __rest(data, ["type"]);
     const Component = itemMap[type];
-    return React.createElement(Component, Object.assign({}, rest), children);
+    return (React.createElement(BlockIdContext.Provider, { value: blockKey },
+        React.createElement(Component, Object.assign({}, rest), children)));
 };
 export const ConstructorHeader = ({ data, blockKey, }) => (React.createElement(BlockDecoration, { id: data.type },
     React.createElement(ConstructorItem, { data: data, key: data.type, blockKey: blockKey })));

package/build/esm/customization/BlockDecoration.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { BlockDecorationProps } from '../models';
-export declare const BlockDecoration: (props: PropsWithChildren<BlockDecorationProps>) => JSX.Element;
+export declare const BlockDecoration: ({ id, children: blockChildren, }: PropsWithChildren<BlockDecorationProps>) => JSX.Element;

package/build/esm/customization/BlockDecoration.js CHANGED Viewed

@@ -1,17 +1,13 @@
 import React, { Fragment, useContext } from 'react';
-import { BlockIdContext } from '../context/blockIdContext';
 import { InnerContext } from '../context/innerContext';
-import { getBlockIndexFromId } from '../utils';
-export const BlockDecoration = (props) => {
+export const BlockDecoration = ({ id, children: blockChildren, }) => {
     var _a, _b;
-    const blockContenxtId = getBlockIndexFromId(useContext(BlockIdContext));
     const { headerBlockTypes } = useContext(InnerContext);
-    const blockId = props.id || blockContenxtId;
-    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
-    const block = React.createElement(Fragment, null, props.children);
+    const isHeader = Boolean(typeof id === 'string' && headerBlockTypes.includes(id));
+    const block = React.createElement(Fragment, null, blockChildren);
     const blockDecorators = (_b = (_a = useContext(InnerContext).customization) === null || _a === void 0 ? void 0 : _a.decorators) === null || _b === void 0 ? void 0 : _b.block;
     if (!blockDecorators) {
         return block;
     }
-    return blockDecorators.reduce((children, decorator) => (React.createElement(Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
+    return blockDecorators.reduce((children, decorator) => React.createElement(Fragment, null, decorator({ children, id, isHeader })), block);
 };

package/build/esm/models/common.d.ts CHANGED Viewed

@@ -79,7 +79,8 @@ export declare enum DefaultEventNames {
     HubspotFormSubmit = "hubspot-form-submit",
     QuoteButton = "quote-button-click",
     BackLink = "back-link-click",
-    Breadcrumb = "breadcrumb-click"
+    Breadcrumb = "breadcrumb-click",
+    VideoPreview = "video-preview-click"
 }
 export type AnalyticsCounters = {
     include?: string[];

package/build/esm/models/common.js CHANGED Viewed

@@ -45,4 +45,5 @@ export var DefaultEventNames;
     DefaultEventNames["QuoteButton"] = "quote-button-click";
     DefaultEventNames["BackLink"] = "back-link-click";
     DefaultEventNames["Breadcrumb"] = "breadcrumb-click";
+    DefaultEventNames["VideoPreview"] = "video-preview-click";
 })(DefaultEventNames || (DefaultEventNames = {}));

package/build/esm/models/constructor-items/blocks.d.ts CHANGED Viewed

@@ -30,6 +30,7 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
+    index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;

package/build/esm/models/customization.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
-    id?: string;
+    id: string | number;
 }
 export interface BlockDecoratorProps extends PropsWithChildren {
     id: string | number;

package/build/esm/schema/validators/common.d.ts CHANGED Viewed

@@ -1117,6 +1117,84 @@ export declare const MediaProps: {
     fullscreen: {
         type: string;
     };
+    analyticsEvents: {
+        anyOf: ({
+            type: string;
+            additionalProperties: {
+                type: string;
+            };
+            required: string[];
+            properties: {
+                name: {
+                    type: string;
+                };
+                type: {
+                    type: string;
+                };
+                counters: {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: never[];
+                    properties: {
+                        include: {
+                            type: string;
+                            items: {
+                                type: string;
+                            };
+                        };
+                        exclude: {
+                            type: string;
+                            items: {
+                                type: string;
+                            };
+                        };
+                    };
+                };
+                context: {
+                    type: string;
+                };
+            };
+        } | {
+            type: string;
+            items: {
+                type: string;
+                additionalProperties: {
+                    type: string;
+                };
+                required: string[];
+                properties: {
+                    name: {
+                        type: string;
+                    };
+                    type: {
+                        type: string;
+                    };
+                    counters: {
+                        type: string;
+                        additionalProperties: boolean;
+                        required: never[];
+                        properties: {
+                            include: {
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                            exclude: {
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
+                    context: {
+                        type: string;
+                    };
+                };
+            };
+        })[];
+    };
 };
 export declare const YMapMarkerLabel: {
     type: string;

package/build/esm/schema/validators/common.js CHANGED Viewed

@@ -456,6 +456,9 @@ export const MediaProps = {
     fullscreen: {
         type: 'boolean',
     },
+    analyticsEvents: {
+        anyOf: [AnalyticsEventSchema, { type: 'array', items: AnalyticsEventSchema }],
+    },
 };
 export const YMapMarkerLabel = {
     type: 'object',

package/build/esm/sub-blocks/LayoutItem/schema.d.ts CHANGED Viewed

@@ -135,6 +135,84 @@ export declare const LayoutItem: {
             fullscreen: {
                 type: string;
             };
+            analyticsEvents: {
+                anyOf: ({
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                })[];
+            };
         };
         content: Partial<{
             title: {

package/build/esm/sub-blocks/MediaCard/schema.d.ts CHANGED Viewed

@@ -137,6 +137,84 @@ export declare const MediaCardBlock: {
             fullscreen: {
                 type: string;
             };
+            analyticsEvents: {
+                anyOf: ({
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                })[];
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/utils/blocks.d.ts CHANGED Viewed

@@ -11,4 +11,3 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 export declare const getOrderedBlocks: (blocks: Block[], headerBlockTypes?: string[]) => Block[];
 export declare const getHeaderBlock: (blocks: Block[], headerBlockTypes?: string[]) => Block | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
-export declare const getBlockIndexFromId: (blockId?: string) => number;

package/build/esm/utils/blocks.js CHANGED Viewed

@@ -71,4 +71,3 @@ export const getShareLink = (url, type, title, text) => {
             return undefined;
     }
 };
-export const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()); };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/common.d.ts CHANGED Viewed

@@ -79,7 +79,8 @@ export declare enum DefaultEventNames {
     HubspotFormSubmit = "hubspot-form-submit",
     QuoteButton = "quote-button-click",
     BackLink = "back-link-click",
-    Breadcrumb = "breadcrumb-click"
+    Breadcrumb = "breadcrumb-click",
+    VideoPreview = "video-preview-click"
 }
 export type AnalyticsCounters = {
     include?: string[];

package/server/models/common.js CHANGED Viewed

@@ -48,4 +48,5 @@ var DefaultEventNames;
     DefaultEventNames["QuoteButton"] = "quote-button-click";
     DefaultEventNames["BackLink"] = "back-link-click";
     DefaultEventNames["Breadcrumb"] = "breadcrumb-click";
+    DefaultEventNames["VideoPreview"] = "video-preview-click";
 })(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));

package/server/models/constructor-items/blocks.d.ts CHANGED Viewed

@@ -30,6 +30,7 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
+    index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;

package/server/models/customization.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
-    id?: string;
+    id: string | number;
 }
 export interface BlockDecoratorProps extends PropsWithChildren {
     id: string | number;

package/server/utils/blocks.d.ts CHANGED Viewed

@@ -11,4 +11,3 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 export declare const getOrderedBlocks: (blocks: Block[], headerBlockTypes?: string[]) => Block[];
 export declare const getHeaderBlock: (blocks: Block[], headerBlockTypes?: string[]) => Block | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
-export declare const getBlockIndexFromId: (blockId?: string) => number;

package/server/utils/blocks.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockIndexFromId = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
 function getHeaderTag(size) {
     switch (size) {
@@ -83,5 +83,3 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
-const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()); };
-exports.getBlockIndexFromId = getBlockIndexFromId;