@gravity-ui/page-constructor 1.18.1 → 1.19.1

package/build/esm/blocks/Media/Media.js

@@ -1,39 +1,15 @@
-import { __rest } from "tslib";
-import React, { useContext, useMemo, useState } from 'react';
-import { block, getThemedValue } from '../../utils';
-import { Grid, Row, Col, GridColumnSize } from '../../grid';
+import React, { useContext, useState } from 'react';
+import { getThemedValue } from '../../utils';
 import Media from '../../components/Media/Media';
-import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import BlockHeader from '../../components/BlockHeader/BlockHeader';
-import MediaContent from './MediaContent';
+import MediaBase from '../../components/MediaBase/MediaBase';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
-import './Media.css';
-const b = block('media-block');
 export const MediaBlock = (props) => {
-    const { media, largeMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, disableShadow = false } = props, mediaContentProps = __rest(props, ["media", "largeMedia", "direction", "mobileDirection", "animated", "mediaOnly", "disableShadow"]);
-    const { title, description } = mediaContentProps;
+    const { media } = props;
     const [play, setPlay] = useState(false);
     const { themeValue: theme } = useContext(ThemeValueContext);
     const mediaThemed = getThemedValue(media, theme);
-    const mediaSizes = useMemo(() => {
-        return mediaOnly
-            ? { [GridColumnSize.All]: 12 }
-            : { [GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12 };
-    }, [mediaOnly, largeMedia]);
-    const contentSizes = useMemo(() => {
-        return { [GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12 };
-    }, [largeMedia]);
-    const mediaContent = !mediaOnly && React.createElement(MediaContent, Object.assign({}, mediaContentProps));
-    return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        mediaOnly && (React.createElement(BlockHeader, { className: b('header'), title: title, description: description })),
-        React.createElement(Grid, null,
-            React.createElement(Row, { className: b('row', {
-                    reverse: direction === 'media-content',
-                    'mobile-reverse': mobileDirection === 'media-content',
-                }) },
-                React.createElement(Col, { className: b('content'), sizes: contentSizes }, mediaContent),
-                React.createElement(Col, { sizes: mediaSizes },
-                    React.createElement("div", { className: b('card', { shadow: !disableShadow }) },
-                        React.createElement(Media, Object.assign({}, mediaThemed, { playVideo: play }))))))));
+    return (React.createElement(MediaBase, Object.assign({}, props, { onScroll: () => setPlay(true) }),
+        React.createElement(MediaBase.Card, null,
+            React.createElement(Media, Object.assign({}, mediaThemed, { playVideo: play })))));
 };
 export default MediaBlock;

package/build/esm/blocks/Media/schema.d.ts

@@ -133,32 +133,267 @@ export declare const Media: {
         };
     };
 };
-export declare const MediaBlock: {
-    'media-block': {
+export declare const MediaBlockBaseProps: {
+    description: {
+        type: string;
+        contentType: string;
+    };
+    direction: {
+        type: string;
+        enum: string[];
+    };
+    mobileDirection: {
+        type: string;
+        enum: string[];
+    };
+    largeMedia: {
+        type: string;
+    };
+    mediaOnly: {
+        type: string;
+    };
+    disableShadow: {
+        type: string;
+    };
+    button: {
+        type: string;
         additionalProperties: boolean;
-        required: string[];
         properties: {
-            description: {
+            text: {
                 type: string;
                 contentType: string;
             };
-            direction: {
+            url: {
+                type: string;
+            };
+            primary: {
+                type: string;
+            };
+            size: {
                 type: string;
                 enum: string[];
             };
-            mobileDirection: {
+            theme: {
                 type: string;
                 enum: string[];
             };
-            largeMedia: {
+            img: {
+                anyOf: ({
+                    type: string;
+                    additionalProperties?: undefined;
+                    required?: undefined;
+                    properties?: undefined;
+                } | {
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        data: {
+                            type: string;
+                        };
+                        position: {
+                            type: string;
+                            enum: string[];
+                        };
+                        alt: {
+                            type: string;
+                            contentType: string;
+                        };
+                    };
+                })[];
+            };
+            metrikaGoals: {
+                anyOf: ({
+                    type: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties?: undefined;
+                        required?: undefined;
+                        properties?: undefined;
+                    };
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: boolean;
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            isCrossSite: {
+                                type: string;
+                            };
+                        };
+                    };
+                })[];
+            };
+            pixelEvents: {
+                type: string;
+                items: {
+                    type: string;
+                    required: string[];
+                    additionalProperties: boolean;
+                    properties: {
+                        name: {
+                            type: string;
+                            enum: import("../..").PixelEventType[];
+                        };
+                        data: {};
+                    };
+                    select: {
+                        $data: string;
+                    };
+                    selectCases: {
+                        SubmitApplication: {
+                            additionalProperties: boolean;
+                            properties: {
+                                name: {};
+                            };
+                        };
+                        Contact: {
+                            additionalProperties: boolean;
+                            properties: {
+                                name: {};
+                            };
+                        };
+                        Lead: {
+                            additionalProperties: boolean;
+                            properties: {
+                                name: {};
+                                data: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    properties: {
+                                        content_category: {
+                                            type: string;
+                                        };
+                                        content_name: {
+                                            type: string;
+                                        };
+                                        currency: {
+                                            type: string;
+                                        };
+                                        value: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+            target: {
                 type: string;
+                enum: string[];
             };
-            mediaOnly: {
+        };
+        if: {
+            properties: {
+                theme: {
+                    enum: string[];
+                };
+            };
+        };
+        then: {
+            required: string[];
+        };
+        else: {
+            required: string[];
+        };
+    };
+    title: {
+        oneOf: ({
+            type: string;
+            additionalProperties: boolean;
+            required: string[];
+            properties: {
+                text: {
+                    type: string;
+                    contentType: string;
+                };
+                textSize: {
+                    type: string;
+                    enum: string[];
+                };
+                url: {
+                    type: string;
+                };
+                resetMargin: {
+                    type: string;
+                };
+            };
+        } | {
+            type: string;
+            contentType: string;
+        })[];
+    };
+    size: {
+        type: string;
+        enum: string[];
+    };
+    additionalInfo: {
+        type: string;
+        contentType: string;
+    };
+    links: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
+    buttons: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
+    animated: {
+        type: string;
+    };
+    anchor: {
+        type: string;
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            text: {
                 type: string;
+                contentType: string;
             };
-            disableShadow: {
+            url: {
                 type: string;
             };
+        };
+    };
+    visible: {
+        type: string;
+        enum: string[];
+    };
+    resetPaddings: {
+        type: string;
+    };
+    type: {};
+    when: {};
+};
+export declare const MediaBlock: {
+    'media-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
             media: {
                 type: string;
                 additionalProperties: boolean;
@@ -294,6 +529,27 @@ export declare const MediaBlock: {
                     };
                 };
             };
+            description: {
+                type: string;
+                contentType: string;
+            };
+            direction: {
+                type: string;
+                enum: string[];
+            };
+            mobileDirection: {
+                type: string;
+                enum: string[];
+            };
+            largeMedia: {
+                type: string;
+            };
+            mediaOnly: {
+                type: string;
+            };
+            disableShadow: {
+                type: string;
+            };
             button: {
                 type: string;
                 additionalProperties: boolean;

package/build/esm/blocks/Media/schema.js

@@ -8,25 +8,26 @@ export const Media = {
     properties: MediaProps,
 };
 const MediaBlockContentProps = omit(ContentBase, ['text', 'theme']);
+export const MediaBlockBaseProps = Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), MediaBlockContentProps), { description: {
+        type: 'string',
+        contentType: 'yfm',
+    }, direction: {
+        type: 'string',
+        enum: mediaDirection,
+    }, mobileDirection: {
+        type: 'string',
+        enum: mediaDirection,
+    }, largeMedia: {
+        type: 'boolean',
+    }, mediaOnly: {
+        type: 'boolean',
+    }, disableShadow: {
+        type: 'boolean',
+    }, button: ButtonBlock });
 export const MediaBlock = {
     'media-block': {
         additionalProperties: false,
         required: ['title', 'media'],
-        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), MediaBlockContentProps), { description: {
-                type: 'string',
-                contentType: 'yfm',
-            }, direction: {
-                type: 'string',
-                enum: mediaDirection,
-            }, mobileDirection: {
-                type: 'string',
-                enum: mediaDirection,
-            }, largeMedia: {
-                type: 'boolean',
-            }, mediaOnly: {
-                type: 'boolean',
-            }, disableShadow: {
-                type: 'boolean',
-            }, media: Media, button: ButtonBlock }),
+        properties: Object.assign(Object.assign({}, MediaBlockBaseProps), { media: Media }),
     },
 };

package/build/esm/blocks/index.d.ts

@@ -3,6 +3,7 @@ export { default as CompaniesBlock } from './Companies/Companies';
 export { default as SimpleBlock } from './Simple/Simple';
 export { default as InfoBlock } from './Info/Info';
 export { default as MediaBlock } from './Media/Media';
+export { default as MapBlock } from './Map/Map';
 export { default as PreviewBlock } from './Preview/Preview';
 export { default as SecurityBlock } from './Security/Security';
 export { default as SliderBlock } from './Slider/Slider';

package/build/esm/blocks/index.js

@@ -3,6 +3,7 @@ export { default as CompaniesBlock } from './Companies/Companies';
 export { default as SimpleBlock } from './Simple/Simple';
 export { default as InfoBlock } from './Info/Info';
 export { default as MediaBlock } from './Media/Media';
+export { default as MapBlock } from './Map/Map';
 export { default as PreviewBlock } from './Preview/Preview';
 export { default as SecurityBlock } from './Security/Security';
 export { default as SliderBlock } from './Slider/Slider';

package/build/esm/components/Map/GoogleMap.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GMapProps } from '../../models';
+declare const GoogleMap: React.FC<GMapProps>;
+export default GoogleMap;

package/build/esm/components/Map/GoogleMap.js

@@ -0,0 +1,39 @@
+import React, { useContext, useEffect, useRef, useState, useMemo } from 'react';
+import _ from 'lodash';
+import { block } from '../../utils';
+import { MapsContext } from '../../context/mapsContext/mapsContext';
+import { LocaleContext } from '../../context/localeContext/localeContext';
+import { MobileContext } from '../../context/mobileContext';
+import { getMapHeight } from './helpers';
+const b = block('map');
+function getScriptSrc(apiKey, scriptSrc, address, lang) {
+    return `${scriptSrc}?key=${apiKey}&language=${lang}&q=${encodeURI(address)}`;
+}
+const GoogleMap = (props) => {
+    const { address } = props;
+    const { apiKey, scriptSrc } = useContext(MapsContext);
+    const { lang = 'ru' } = useContext(LocaleContext);
+    const isMobile = useContext(MobileContext);
+    const [height, setHeight] = useState(undefined);
+    const ref = useRef(null);
+    const src = useMemo(() => getScriptSrc(apiKey, scriptSrc, address, lang), [apiKey, scriptSrc, address, lang]);
+    useEffect(() => {
+        const updateSize = _.debounce(() => {
+            if (ref.current) {
+                setHeight(Math.round(getMapHeight(ref.current.offsetWidth, isMobile)));
+            }
+        }, 100);
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, [isMobile]);
+    if (!apiKey || !address) {
+        return null;
+    }
+    return (React.createElement("iframe", { className: b(), ref: ref, style: {
+            height,
+        }, loading: "lazy", allowFullScreen: true, referrerPolicy: "no-referrer-when-downgrade", src: src }));
+};
+export default GoogleMap;

package/build/esm/components/Map/Map.css

@@ -0,0 +1,20 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-map {
+  width: 100%;
+  height: 300px;
+  border: 0;
+  overflow: hidden;
+  display: flex;
+}
+.pc-map__spinner {
+  margin: 0 auto;
+  align-self: center;
+}
+.pc-map__wrapper {
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

package/build/esm/components/Map/Map.d.ts

@@ -0,0 +1,4 @@
+import { MapProps } from '../../models';
+import './Map.css';
+export declare const Map: (props: MapProps) => JSX.Element | null;
+export default Map;

package/build/esm/components/Map/Map.js

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import { MapsContext, MapType } from '../../context/mapsContext/mapsContext';
+import YandexMap from './YMap/YandexMap';
+import GoogleMap from './GoogleMap';
+import './Map.css';
+export const Map = (props) => {
+    const { type } = useContext(MapsContext);
+    switch (type) {
+        case MapType.Yandex:
+            return React.createElement(YandexMap, Object.assign({}, props));
+        case MapType.Google:
+            return React.createElement(GoogleMap, Object.assign({}, props));
+        default:
+            return null;
+    }
+};
+export default Map;

package/build/esm/components/Map/YMap/YMap.d.ts

@@ -0,0 +1,13 @@
+import { YMapMarker } from '../../../models';
+export declare class YMap {
+    private ymap;
+    private mapRef;
+    private coords;
+    constructor(ymap: Ymaps.Map, mapRef: HTMLDivElement | null);
+    showPlacemarks(markers: YMapMarker[]): Promise<void>;
+    findAddress(marker: YMapMarker): Promise<void>;
+    findCoordinate(marker: YMapMarker): void;
+    private drawPlaceMarkStyle;
+    private recalcZoomAndCenter;
+    private clearOldPlacemarks;
+}

package/build/esm/components/Map/YMap/YMap.js

@@ -0,0 +1,93 @@
+var GeoObjectTypes;
+(function (GeoObjectTypes) {
+    GeoObjectTypes["Properties"] = "properties";
+    GeoObjectTypes["Options"] = "options";
+})(GeoObjectTypes || (GeoObjectTypes = {}));
+const DEFAULT_PLACEMARKS_COLOR = '#dc534b';
+// presetStorage: https://yandex.com/dev/maps/jsapi/doc/2.1/ref/reference/option.presetStorage.html
+const DEFAULT_PLACEMARKS_PRESET = 'islands#dotIcon';
+const DEFAULT_MAP_CONTROL_BUTTON_HEIGHT = 30;
+const geoObjectPropsAndOptions = {
+    iconCaption: GeoObjectTypes.Properties,
+    iconContent: GeoObjectTypes.Properties,
+    iconColor: GeoObjectTypes.Options,
+    preset: GeoObjectTypes.Options,
+};
+export class YMap {
+    constructor(ymap, mapRef) {
+        this.coords = [];
+        this.ymap = ymap;
+        this.mapRef = mapRef;
+    }
+    async showPlacemarks(markers) {
+        this.clearOldPlacemarks();
+        for (const marker of markers) {
+            if (marker.address) {
+                await this.findAddress(marker);
+            }
+            else if (marker.coordinate) {
+                this.findCoordinate(marker);
+            }
+        }
+        this.recalcZoomAndCenter();
+    }
+    async findAddress(marker) {
+        try {
+            const res = await window.ymaps.geocode(marker.address, { results: 1 });
+            const geoObject = res.geoObjects.get(0);
+            const coordinate = geoObject.geometry.getCoordinates();
+            this.coords.push(coordinate);
+            this.drawPlaceMarkStyle(geoObject, marker);
+            this.ymap.geoObjects.add(geoObject);
+        }
+        catch (_a) { } // If error - placemark will not be displayed
+    }
+    findCoordinate(marker) {
+        const geoObject = new window.ymaps.Placemark(marker.coordinate, {});
+        this.coords.push(marker.coordinate);
+        this.drawPlaceMarkStyle(geoObject, marker);
+        this.ymap.geoObjects.add(geoObject);
+    }
+    drawPlaceMarkStyle(geoObject, marker) {
+        if (!marker.label) {
+            return;
+        }
+        const { iconColor, preset = DEFAULT_PLACEMARKS_PRESET } = marker.label;
+        let localIconColor = iconColor;
+        // You can set the preset option together with the iconColor option only if it not a 'Stretchy' preset
+        if (!preset.includes('Stretchy') && !iconColor) {
+            localIconColor = DEFAULT_PLACEMARKS_COLOR;
+        }
+        Object.entries(Object.assign(Object.assign({}, marker.label), { iconColor: localIconColor, preset })).forEach(([key, value]) => {
+            const geoObjectParamType = geoObjectPropsAndOptions[key];
+            if (value && geoObjectParamType) {
+                geoObject[geoObjectParamType].set(key, value);
+            }
+        });
+    }
+    recalcZoomAndCenter() {
+        var _a, _b;
+        const coordsLength = this.coords.length;
+        if (!coordsLength) {
+            return;
+        }
+        let leftBottom = [Infinity, Infinity], rightTop = [-Infinity, -Infinity];
+        this.coords.forEach((point) => {
+            leftBottom = [Math.min(leftBottom[0], point[0]), Math.min(leftBottom[1], point[1])];
+            rightTop = [Math.max(rightTop[0], point[0]), Math.max(rightTop[1], point[1])];
+        });
+        const newMapParams = window.ymaps.util.bounds.getCenterAndZoom([leftBottom, rightTop], [(_a = this.mapRef) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.mapRef) === null || _b === void 0 ? void 0 : _b.clientHeight], undefined, { margin: DEFAULT_MAP_CONTROL_BUTTON_HEIGHT });
+        this.ymap.setCenter(newMapParams.center);
+        // Use default zoom for one placemark
+        if (coordsLength > 1) {
+            this.ymap.setZoom(newMapParams.zoom);
+        }
+    }
+    clearOldPlacemarks() {
+        if (this.coords.length === 0) {
+            return;
+        }
+        this.ymap.geoObjects.removeAll();
+        this.coords = [];
+    }
+}

package/build/esm/components/Map/YMap/YandexMap.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { YMapProps } from '../../../models';
+declare const YandexMap: React.FC<YMapProps>;
+export default YandexMap;