@gravity-ui/page-constructor 1.18.1 → 1.19.0

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;

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

@@ -0,0 +1,69 @@
+import React, { useContext, useEffect, useRef, useState, useCallback } from 'react';
+import _ from 'lodash';
+import { Spin } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import { MapsContext } from '../../../context/mapsContext/mapsContext';
+import { LocaleContext } from '../../../context/localeContext/localeContext';
+import ErrorWrapper from '../../ErrorWrapper/ErrorWrapper';
+import { YMap } from './YMap';
+import { YMapsApiLoader, MapApiStatus } from './YandexMapApiLoader';
+import i18n from './i18n';
+import { MobileContext } from '../../../context/mobileContext';
+import { getMapHeight } from '../helpers';
+const b = block('map');
+const DEFAULT_CONTAINER_ID = 'ymap';
+const DEFAULT_ZOOM = 9;
+const YandexMap = (props) => {
+    const { markers, zoom, center, id } = props;
+    const { apiKey, scriptSrc, nonce } = useContext(MapsContext);
+    const isMobile = useContext(MobileContext);
+    const { lang = 'ru' } = useContext(LocaleContext);
+    const containerId = `${DEFAULT_CONTAINER_ID}-${id}`;
+    const [ymap, setYmaps] = useState(null);
+    const [height, setHeight] = useState(undefined);
+    const ref = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [attemptsIndex, setAttemptsIndex] = useState(0);
+    const onTryAgain = useCallback(() => {
+        setAttemptsIndex(attemptsIndex + 1);
+    }, [attemptsIndex]);
+    useEffect(() => {
+        (async function () {
+            var _a;
+            if (!center) {
+                return;
+            }
+            setLoading(true);
+            await YMapsApiLoader.loadApi(apiKey, scriptSrc, lang, nonce);
+            (_a = window.ymaps) === null || _a === void 0 ? void 0 : _a.ready(() => {
+                setYmaps(new YMap(new window.ymaps.Map(containerId, {
+                    center,
+                    zoom: zoom || DEFAULT_ZOOM,
+                }, { autoFitToViewport: 'always' }), ref.current));
+            });
+            setLoading(false);
+        })();
+    }, [apiKey, lang, scriptSrc, containerId, zoom, center, nonce, attemptsIndex, setLoading]);
+    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);
+        };
+    }, [markers, ymap, setYmaps, isMobile]);
+    useEffect(() => {
+        if (ymap) {
+            ymap.showPlacemarks(markers);
+        }
+    });
+    if (!center)
+        return null;
+    return (React.createElement(ErrorWrapper, { isError: YMapsApiLoader.status === MapApiStatus.Error, text: i18n('map-load-error'), buttonText: i18n('map-try-again'), handler: onTryAgain, className: b('wrapper') },
+        React.createElement("div", { id: containerId, className: b(), ref: ref, style: { height } }, loading ? React.createElement(Spin, { size: "xl", className: b('spinner') }) : null)));
+};
+export default YandexMap;

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

@@ -0,0 +1,11 @@
+export declare enum MapApiStatus {
+    NotStarted = "not_started",
+    Loading = "loading",
+    Loaded = "loaded",
+    Error = "error"
+}
+export declare class YMapsApiLoader {
+    static status: MapApiStatus;
+    static loader: Promise<unknown>;
+    static loadApi(apiKey: string, scriptSrc: string, lang: 'ru' | 'en', nonce?: string): Promise<unknown>;
+}

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

@@ -0,0 +1,33 @@
+import { loadScript } from '../../../utils';
+import { Maplangs } from '../../../context/mapsContext/mapsContext';
+export var MapApiStatus;
+(function (MapApiStatus) {
+    MapApiStatus["NotStarted"] = "not_started";
+    MapApiStatus["Loading"] = "loading";
+    MapApiStatus["Loaded"] = "loaded";
+    MapApiStatus["Error"] = "error";
+})(MapApiStatus || (MapApiStatus = {}));
+const SCRIPT_ID = 'ymaps-script';
+export class YMapsApiLoader {
+    static async loadApi(apiKey, scriptSrc, lang, nonce) {
+        if (YMapsApiLoader.status === MapApiStatus.Loaded) {
+            return Promise.resolve();
+        }
+        if (YMapsApiLoader.status === MapApiStatus.Loading) {
+            await YMapsApiLoader.loader;
+            return Promise.resolve();
+        }
+        YMapsApiLoader.status = MapApiStatus.Loading;
+        const csp = nonce ? `csp[style_nonce]=${nonce}` : 'csp=true';
+        const src = `${scriptSrc}?apikey=${apiKey}&lang=${Maplangs[lang]}&${csp}`;
+        YMapsApiLoader.loader = loadScript(src, { id: SCRIPT_ID })
+            .then(() => {
+            YMapsApiLoader.status = MapApiStatus.Loaded;
+        })
+            .catch(() => {
+            YMapsApiLoader.status = MapApiStatus.Error;
+        });
+        return this.loader;
+    }
+}
+YMapsApiLoader.status = MapApiStatus.NotStarted;