@gravity-ui/page-constructor 1.26.2-alpha.0 → 1.26.2
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/CHANGELOG.md +17 -30
- package/README.md +8 -7
- package/build/cjs/blocks/Map/schema.d.ts +12 -0
- package/build/cjs/blocks/Share/Share.css +11 -12
- package/build/cjs/components/BlockHeader/BlockHeader.css +2 -2
- package/build/cjs/components/Button/Button.d.ts +0 -1
- package/build/cjs/components/Button/Button.js +1 -1
- package/build/cjs/components/Button/utils.d.ts +0 -1
- package/build/cjs/components/Button/utils.js +1 -2
- package/build/cjs/components/ButtonTabs/ButtonTabs.css +6 -6
- package/build/cjs/components/HTML/HTML.d.ts +1 -1
- package/build/cjs/components/Map/GoogleMap.js +5 -7
- package/build/cjs/components/Map/Map.css +0 -5
- package/build/cjs/components/Map/YMap/YMap.d.ts +2 -4
- package/build/cjs/components/Map/YMap/YMap.js +10 -18
- package/build/cjs/components/Map/YMap/YandexMap.js +9 -18
- package/build/cjs/components/Title/Title.css +5 -20
- package/build/cjs/components/Title/Title.d.ts +1 -1
- package/build/cjs/components/Title/Title.js +2 -4
- package/build/cjs/models/constructor-items/common.d.ts +5 -5
- package/build/cjs/navigation/components/Navigation/Navigation.js +6 -7
- package/build/cjs/schema/validators/common.d.ts +6 -0
- package/build/cjs/schema/validators/common.js +4 -0
- package/build/cjs/sub-blocks/BannerCard/BannerCard.css +1 -2
- package/build/cjs/sub-blocks/Content/Content.css +0 -6
- package/build/cjs/sub-blocks/HubspotForm/HubspotForm.css +0 -1
- package/build/cjs/utils/blocks.d.ts +1 -1
- package/build/cjs/utils/blocks.js +0 -2
- package/build/esm/blocks/Map/schema.d.ts +12 -0
- package/build/esm/blocks/Share/Share.css +11 -12
- package/build/esm/components/BlockHeader/BlockHeader.css +2 -2
- package/build/esm/components/Button/Button.d.ts +0 -1
- package/build/esm/components/Button/Button.js +2 -2
- package/build/esm/components/Button/utils.d.ts +0 -1
- package/build/esm/components/Button/utils.js +0 -1
- package/build/esm/components/ButtonTabs/ButtonTabs.css +6 -6
- package/build/esm/components/HTML/HTML.d.ts +1 -1
- package/build/esm/components/Map/GoogleMap.js +5 -7
- package/build/esm/components/Map/Map.css +0 -5
- package/build/esm/components/Map/YMap/YMap.d.ts +2 -4
- package/build/esm/components/Map/YMap/YMap.js +10 -18
- package/build/esm/components/Map/YMap/YandexMap.js +9 -18
- package/build/esm/components/Title/Title.css +5 -20
- package/build/esm/components/Title/Title.d.ts +1 -1
- package/build/esm/components/Title/Title.js +2 -4
- package/build/esm/models/constructor-items/common.d.ts +5 -5
- package/build/esm/navigation/components/Navigation/Navigation.js +6 -7
- package/build/esm/schema/validators/common.d.ts +6 -0
- package/build/esm/schema/validators/common.js +4 -0
- package/build/esm/sub-blocks/BannerCard/BannerCard.css +1 -2
- package/build/esm/sub-blocks/Content/Content.css +0 -6
- package/build/esm/sub-blocks/HubspotForm/HubspotForm.css +0 -1
- package/build/esm/utils/blocks.d.ts +1 -1
- package/build/esm/utils/blocks.js +0 -2
- package/package.json +6 -7
- package/server/models/constructor-items/common.d.ts +5 -5
- package/server/utils/blocks.d.ts +1 -1
- package/server/utils/blocks.js +0 -2
- package/styles/mixins.scss +7 -9
- package/build/cjs/components/Button/__tests__/Button.test.d.ts +0 -1
- package/build/cjs/components/Button/__tests__/Button.test.js +0 -91
- package/build/esm/components/Button/__tests__/Button.test.d.ts +0 -1
- package/build/esm/components/Button/__tests__/Button.test.js +0 -88
|
@@ -9,7 +9,6 @@ const locationContext_1 = require("../../../context/locationContext");
|
|
|
9
9
|
const constants_1 = require("../../constants");
|
|
10
10
|
const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
|
|
11
11
|
const b = (0, utils_1.block)('navigation');
|
|
12
|
-
const EVENT_HANDLE_DELAY = 100;
|
|
13
12
|
const Navigation = ({ className, onActiveItemChange, links, activeItemId, highlightActiveItem, }) => {
|
|
14
13
|
const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
|
|
15
14
|
const itemRefs = (0, react_1.useRef)([]);
|
|
@@ -25,21 +24,21 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemId, highli
|
|
|
25
24
|
}
|
|
26
25
|
}, []);
|
|
27
26
|
(0, react_1.useEffect)(() => {
|
|
28
|
-
const debouncedCalculateItemPositions = lodash_1.default.debounce(calculateItemPositions,
|
|
29
|
-
const
|
|
27
|
+
const debouncedCalculateItemPositions = lodash_1.default.debounce(calculateItemPositions, 100);
|
|
28
|
+
const calculateOnScroll = lodash_1.default.debounce(() => {
|
|
30
29
|
const curLeftScroll = window.pageXOffset;
|
|
31
30
|
if (curLeftScroll !== lastLeftScroll) {
|
|
32
31
|
setLastLeftScroll(window.pageXOffset);
|
|
33
32
|
calculateItemPositions();
|
|
34
33
|
}
|
|
35
|
-
},
|
|
34
|
+
}, 100);
|
|
36
35
|
calculateItemPositions();
|
|
37
36
|
setLastLeftScroll(window.pageXOffset);
|
|
38
37
|
window.addEventListener('resize', debouncedCalculateItemPositions);
|
|
39
|
-
window.addEventListener('scroll',
|
|
38
|
+
window.addEventListener('scroll', calculateOnScroll);
|
|
40
39
|
return () => {
|
|
41
|
-
window.removeEventListener(`resize`,
|
|
42
|
-
window.removeEventListener('scroll',
|
|
40
|
+
window.removeEventListener(`resize`, calculateItemPositions);
|
|
41
|
+
window.removeEventListener('scroll', calculateOnScroll);
|
|
43
42
|
};
|
|
44
43
|
}, [calculateItemPositions, itemRefs, lastLeftScroll]);
|
|
45
44
|
(0, react_1.useEffect)(() => {
|
|
@@ -70,10 +70,9 @@ unpredictable css rules order in build */
|
|
|
70
70
|
font-weight: var(--yc-text-accent-font-weight);
|
|
71
71
|
font-weight: normal;
|
|
72
72
|
}
|
|
73
|
-
.pc-banner-card__button
|
|
73
|
+
.pc-banner-card__button {
|
|
74
74
|
margin-top: 28px;
|
|
75
75
|
}
|
|
76
|
-
|
|
77
76
|
.pc-banner-card__image {
|
|
78
77
|
border-top-right-radius: var(--pc-border-radius);
|
|
79
78
|
border-bottom-right-radius: var(--pc-border-radius);
|
|
@@ -31,9 +31,6 @@ unpredictable css rules order in build */
|
|
|
31
31
|
margin-top: 0;
|
|
32
32
|
margin-right: 12px;
|
|
33
33
|
}
|
|
34
|
-
.pc-content__button.pc-content__button:last-child {
|
|
35
|
-
margin-right: 0;
|
|
36
|
-
}
|
|
37
34
|
|
|
38
35
|
.pc-content__links {
|
|
39
36
|
display: flex;
|
|
@@ -44,9 +41,6 @@ unpredictable css rules order in build */
|
|
|
44
41
|
display: block;
|
|
45
42
|
margin-right: 32px;
|
|
46
43
|
}
|
|
47
|
-
.pc-content__link:last-child {
|
|
48
|
-
margin-right: 0;
|
|
49
|
-
}
|
|
50
44
|
.pc-content_centered.pc-content_centered {
|
|
51
45
|
margin: 0 auto;
|
|
52
46
|
text-align: center;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ConstructorBlock } from '../models/constructor';
|
|
2
2
|
import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
|
|
3
|
-
export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4"
|
|
3
|
+
export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
|
|
4
4
|
export declare function getBlockKey(block: ConstructorBlock, index: number): string;
|
|
5
5
|
export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
|
|
6
6
|
export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
|
|
@@ -6,6 +6,12 @@ export declare const Map: {
|
|
|
6
6
|
zoom: {
|
|
7
7
|
type: string;
|
|
8
8
|
};
|
|
9
|
+
center: {
|
|
10
|
+
type: string;
|
|
11
|
+
items: {
|
|
12
|
+
type: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
9
15
|
address: {
|
|
10
16
|
type: string;
|
|
11
17
|
};
|
|
@@ -64,6 +70,12 @@ export declare const MapBlock: {
|
|
|
64
70
|
zoom: {
|
|
65
71
|
type: string;
|
|
66
72
|
};
|
|
73
|
+
center: {
|
|
74
|
+
type: string;
|
|
75
|
+
items: {
|
|
76
|
+
type: string;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
67
79
|
address: {
|
|
68
80
|
type: string;
|
|
69
81
|
};
|
|
@@ -17,47 +17,46 @@ unpredictable css rules order in build */
|
|
|
17
17
|
justify-content: center;
|
|
18
18
|
margin-top: 16px;
|
|
19
19
|
}
|
|
20
|
-
.pc-share-block__item
|
|
20
|
+
.pc-share-block__item {
|
|
21
21
|
display: flex;
|
|
22
22
|
justify-content: center;
|
|
23
23
|
width: 48px;
|
|
24
24
|
height: 48px;
|
|
25
25
|
border-radius: 100%;
|
|
26
26
|
}
|
|
27
|
-
.pc-share-
|
|
27
|
+
.pc-share-block__item_type_vk {
|
|
28
28
|
background-color: var(--yc-color-vk);
|
|
29
29
|
}
|
|
30
|
-
.pc-share-
|
|
30
|
+
.pc-share-block__item_type_facebook {
|
|
31
31
|
background-color: var(--yc-color-facebook);
|
|
32
32
|
}
|
|
33
|
-
.pc-share-
|
|
33
|
+
.pc-share-block__item_type_twitter {
|
|
34
34
|
background-color: var(--yc-color-twitter);
|
|
35
35
|
}
|
|
36
|
-
.pc-share-
|
|
36
|
+
.pc-share-block__item_type_telegram {
|
|
37
37
|
background-color: var(--yc-color-telegram);
|
|
38
38
|
}
|
|
39
|
-
.pc-share-
|
|
39
|
+
.pc-share-block__item_type_telegram {
|
|
40
40
|
background-color: var(--yc-color-telegram);
|
|
41
41
|
}
|
|
42
|
-
.pc-share-
|
|
42
|
+
.pc-share-block__item_type_linkedin {
|
|
43
43
|
background-color: var(--yc-color-linkedin);
|
|
44
44
|
}
|
|
45
|
-
.pc-share-block__item.pc-share-block__item
|
|
45
|
+
.pc-share-block__item.pc-share-block__item:before {
|
|
46
46
|
border-radius: 100%;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.pc-share-block__item
|
|
49
|
+
.pc-share-block__item:hover:before {
|
|
50
50
|
/* stylelint-disable-next-line declaration-no-important */
|
|
51
51
|
background-color: var(--yc-color-base-generic) !important;
|
|
52
52
|
border-radius: 100%;
|
|
53
53
|
}
|
|
54
|
-
.pc-share-block__item
|
|
54
|
+
.pc-share-block__item + .pc-share-block__item {
|
|
55
55
|
margin-left: 12px;
|
|
56
56
|
}
|
|
57
|
-
.pc-share-block__item
|
|
57
|
+
.pc-share-block__item svg {
|
|
58
58
|
color: var(--yc-color-base-background);
|
|
59
59
|
}
|
|
60
|
-
|
|
61
60
|
@media (max-width: 577px) {
|
|
62
61
|
.pc-share-block__items {
|
|
63
62
|
flex-wrap: wrap;
|
|
@@ -7,10 +7,10 @@ unpredictable css rules order in build */
|
|
|
7
7
|
font-size: var(--yc-text-body-3-font-size);
|
|
8
8
|
line-height: var(--yc-text-body-3-line-height);
|
|
9
9
|
}
|
|
10
|
-
.pc-block-header__description_titleSize_s
|
|
10
|
+
.pc-block-header__description_titleSize_s {
|
|
11
11
|
margin-top: 8px;
|
|
12
12
|
}
|
|
13
|
-
.pc-block-header__description_titleSize_s .yfm
|
|
13
|
+
.pc-block-header__description_titleSize_s .yfm {
|
|
14
14
|
font-size: var(--yc-text-body-2-font-size);
|
|
15
15
|
line-height: var(--yc-text-body-2-line-height);
|
|
16
16
|
}
|
|
@@ -3,7 +3,7 @@ import React, { useCallback, useContext } from 'react';
|
|
|
3
3
|
import { Platform, Button as CommonButton, Icon, StoreBadge } from '@gravity-ui/uikit';
|
|
4
4
|
import { block, setUrlTld } from '../../utils';
|
|
5
5
|
import { DefaultEventNames } from '../../models';
|
|
6
|
-
import { toCommonSize, toCommonView
|
|
6
|
+
import { toCommonSize, toCommonView } from './utils';
|
|
7
7
|
import { LocaleContext } from '../../context/localeContext/localeContext';
|
|
8
8
|
import { useMetrika } from '../../hooks/useMetrika';
|
|
9
9
|
import { useAnalytics } from '../../hooks';
|
|
@@ -37,7 +37,7 @@ const Button = (props) => {
|
|
|
37
37
|
let icon;
|
|
38
38
|
let image = img && React.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
|
|
39
39
|
if (theme === 'github') {
|
|
40
|
-
icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24
|
|
40
|
+
icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24 });
|
|
41
41
|
image = undefined;
|
|
42
42
|
}
|
|
43
43
|
const buttonTheme = theme === 'scale' ? 'accent' : theme;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
|
|
2
|
-
export declare const ICON_QA = "button-icon";
|
|
3
2
|
export type OldButtonTheme = 'normal' | 'action' | 'flat' | 'light' | 'clear' | 'raised' | 'pseudo' | 'link' | 'accent' | 'websearch' | 'flat-special' | 'normal-special' | 'normal-dark' | 'pseudo-special';
|
|
4
3
|
export type OldButtonSize = 'xs' | 'ns' | 's' | 'm' | 'l' | 'n' | 'head' | 'promo';
|
|
5
4
|
export declare const toCommonView: (theme: OldButtonTheme) => ButtonView;
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
/* use this for style redefinitions to awoid problems with
|
|
2
2
|
unpredictable css rules order in build */
|
|
3
|
-
.pc-button-tabs__item
|
|
3
|
+
.pc-button-tabs__item {
|
|
4
4
|
margin-right: 8px;
|
|
5
5
|
margin-bottom: 12px;
|
|
6
6
|
--yc-button-background-color: var(--pc-tab-item-background-color);
|
|
7
7
|
--yc-button-background-color-hover: var(--pc-tab-item-background-color-hover);
|
|
8
8
|
}
|
|
9
|
-
.pc-button-tabs__item
|
|
9
|
+
.pc-button-tabs__item, .pc-button-tabs__item:link, .pc-button-tabs__item:visited, .pc-button-tabs__item:active, .pc-button-tabs__item:focus {
|
|
10
10
|
color: var(--pc-tab-item-color);
|
|
11
11
|
}
|
|
12
|
-
.pc-button-tabs__item
|
|
12
|
+
.pc-button-tabs__item:hover {
|
|
13
13
|
color: var(--pc-tab-item-color);
|
|
14
14
|
}
|
|
15
|
-
.pc-button-
|
|
15
|
+
.pc-button-tabs__item_active {
|
|
16
16
|
pointer-events: none;
|
|
17
17
|
--yc-button-background-color: var(--pc-selected-tab-item-background-color);
|
|
18
18
|
--yc-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
|
|
19
19
|
}
|
|
20
|
-
.pc-button-
|
|
20
|
+
.pc-button-tabs__item_active, .pc-button-tabs__item_active:link, .pc-button-tabs__item_active:visited, .pc-button-tabs__item_active:active, .pc-button-tabs__item_active:focus {
|
|
21
21
|
color: var(--pc-selected-tab-item-color);
|
|
22
22
|
}
|
|
23
|
-
.pc-button-
|
|
23
|
+
.pc-button-tabs__item_active:hover {
|
|
24
24
|
color: var(--pc-selected-tab-item-color);
|
|
25
25
|
}
|
|
@@ -7,7 +7,7 @@ export interface HTMLProps {
|
|
|
7
7
|
}
|
|
8
8
|
declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
|
|
9
9
|
dangerouslySetInnerHTML: {
|
|
10
|
-
__html: string
|
|
10
|
+
__html: string & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null);
|
|
11
11
|
};
|
|
12
12
|
className: string | undefined;
|
|
13
13
|
}, HTMLElement> | null;
|
|
@@ -5,20 +5,18 @@ import { MapsContext } from '../../context/mapsContext/mapsContext';
|
|
|
5
5
|
import { LocaleContext } from '../../context/localeContext/localeContext';
|
|
6
6
|
import { MobileContext } from '../../context/mobileContext';
|
|
7
7
|
import { getMapHeight } from './helpers';
|
|
8
|
-
import { Lang } from '../../utils/configure';
|
|
9
8
|
const b = block('map');
|
|
10
|
-
function getScriptSrc(
|
|
11
|
-
|
|
12
|
-
return `${scriptSrc}?key=${apiKey}&language=${lang}${zoom ? '&zoom=' + zoom : ''}&q=${encodeURI(address)}`;
|
|
9
|
+
function getScriptSrc(apiKey, scriptSrc, address, lang) {
|
|
10
|
+
return `${scriptSrc}?key=${apiKey}&language=${lang}&q=${encodeURI(address)}`;
|
|
13
11
|
}
|
|
14
12
|
const GoogleMap = (props) => {
|
|
15
|
-
const { address
|
|
13
|
+
const { address } = props;
|
|
16
14
|
const { apiKey, scriptSrc } = useContext(MapsContext);
|
|
17
|
-
const { lang =
|
|
15
|
+
const { lang = 'ru' } = useContext(LocaleContext);
|
|
18
16
|
const isMobile = useContext(MobileContext);
|
|
19
17
|
const [height, setHeight] = useState(undefined);
|
|
20
18
|
const ref = useRef(null);
|
|
21
|
-
const src = useMemo(() => getScriptSrc(
|
|
19
|
+
const src = useMemo(() => getScriptSrc(apiKey, scriptSrc, address, lang), [apiKey, scriptSrc, address, lang]);
|
|
22
20
|
useEffect(() => {
|
|
23
21
|
const updateSize = _.debounce(() => {
|
|
24
22
|
if (ref.current) {
|
|
@@ -7,13 +7,9 @@ unpredictable css rules order in build */
|
|
|
7
7
|
overflow: hidden;
|
|
8
8
|
display: flex;
|
|
9
9
|
}
|
|
10
|
-
.pc-map_hidden {
|
|
11
|
-
opacity: 0;
|
|
12
|
-
}
|
|
13
10
|
.pc-map__spinner {
|
|
14
11
|
margin: 0 auto;
|
|
15
12
|
align-self: center;
|
|
16
|
-
position: absolute;
|
|
17
13
|
}
|
|
18
14
|
.pc-map__wrapper {
|
|
19
15
|
min-height: 300px;
|
|
@@ -21,5 +17,4 @@ unpredictable css rules order in build */
|
|
|
21
17
|
flex-direction: column;
|
|
22
18
|
align-items: center;
|
|
23
19
|
justify-content: center;
|
|
24
|
-
position: relative;
|
|
25
20
|
}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
type PlacemarksProps = Pick<YMapProps, 'zoom' | 'markers'>;
|
|
1
|
+
import { YMapMarker } from '../../../models';
|
|
3
2
|
export declare class YMap {
|
|
4
3
|
private ymap;
|
|
5
4
|
private mapRef;
|
|
6
5
|
private coords;
|
|
7
6
|
constructor(ymap: Ymaps.Map, mapRef: HTMLDivElement | null);
|
|
8
|
-
showPlacemarks(
|
|
7
|
+
showPlacemarks(markers: YMapMarker[]): Promise<void>;
|
|
9
8
|
findAddress(marker: YMapMarker): Promise<void>;
|
|
10
9
|
findCoordinate(marker: YMapMarker): void;
|
|
11
10
|
private drawPlaceMarkStyle;
|
|
12
11
|
private recalcZoomAndCenter;
|
|
13
12
|
private clearOldPlacemarks;
|
|
14
13
|
}
|
|
15
|
-
export {};
|
|
@@ -19,9 +19,9 @@ export class YMap {
|
|
|
19
19
|
this.ymap = ymap;
|
|
20
20
|
this.mapRef = mapRef;
|
|
21
21
|
}
|
|
22
|
-
async showPlacemarks(
|
|
22
|
+
async showPlacemarks(markers) {
|
|
23
23
|
this.clearOldPlacemarks();
|
|
24
|
-
for (const marker of
|
|
24
|
+
for (const marker of markers) {
|
|
25
25
|
if (marker.address) {
|
|
26
26
|
await this.findAddress(marker);
|
|
27
27
|
}
|
|
@@ -29,7 +29,7 @@ export class YMap {
|
|
|
29
29
|
this.findCoordinate(marker);
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
this.recalcZoomAndCenter(
|
|
32
|
+
this.recalcZoomAndCenter();
|
|
33
33
|
}
|
|
34
34
|
async findAddress(marker) {
|
|
35
35
|
try {
|
|
@@ -49,7 +49,10 @@ export class YMap {
|
|
|
49
49
|
this.ymap.geoObjects.add(geoObject);
|
|
50
50
|
}
|
|
51
51
|
drawPlaceMarkStyle(geoObject, marker) {
|
|
52
|
-
|
|
52
|
+
if (!marker.label) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const { iconColor, preset = DEFAULT_PLACEMARKS_PRESET } = marker.label;
|
|
53
56
|
let localIconColor = iconColor;
|
|
54
57
|
// You can set the preset option together with the iconColor option only if it not a 'Stretchy' preset
|
|
55
58
|
if (!preset.includes('Stretchy') && !iconColor) {
|
|
@@ -62,10 +65,9 @@ export class YMap {
|
|
|
62
65
|
}
|
|
63
66
|
});
|
|
64
67
|
}
|
|
65
|
-
recalcZoomAndCenter(
|
|
68
|
+
recalcZoomAndCenter() {
|
|
66
69
|
var _a, _b;
|
|
67
70
|
const coordsLength = this.coords.length;
|
|
68
|
-
const { zoom = 0 } = props;
|
|
69
71
|
if (!coordsLength) {
|
|
70
72
|
return;
|
|
71
73
|
}
|
|
@@ -74,20 +76,10 @@ export class YMap {
|
|
|
74
76
|
leftBottom = [Math.min(leftBottom[0], point[0]), Math.min(leftBottom[1], point[1])];
|
|
75
77
|
rightTop = [Math.max(rightTop[0], point[0]), Math.max(rightTop[1], point[1])];
|
|
76
78
|
});
|
|
77
|
-
|
|
78
|
-
zoom,
|
|
79
|
-
center: [],
|
|
80
|
-
};
|
|
81
|
-
if (zoom) {
|
|
82
|
-
// compute only the center
|
|
83
|
-
newMapParams.center = window.ymaps.util.bounds.getCenter([leftBottom, rightTop]);
|
|
84
|
-
}
|
|
85
|
-
else {
|
|
86
|
-
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 });
|
|
87
|
-
}
|
|
79
|
+
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 });
|
|
88
80
|
this.ymap.setCenter(newMapParams.center);
|
|
89
81
|
// Use default zoom for one placemark
|
|
90
|
-
if (coordsLength > 1
|
|
82
|
+
if (coordsLength > 1) {
|
|
91
83
|
this.ymap.setZoom(newMapParams.zoom);
|
|
92
84
|
}
|
|
93
85
|
}
|
|
@@ -13,12 +13,8 @@ import { getMapHeight } from '../helpers';
|
|
|
13
13
|
const b = block('map');
|
|
14
14
|
const DEFAULT_CONTAINER_ID = 'ymap';
|
|
15
15
|
const DEFAULT_ZOOM = 9;
|
|
16
|
-
// Center - is a required parameter for creating a new map
|
|
17
|
-
// We use this init center to create a map
|
|
18
|
-
// The real center of the map will be calculated later, using the coordinates of the markers
|
|
19
|
-
const INITIAL_CENTER = [0, 0];
|
|
20
16
|
const YandexMap = (props) => {
|
|
21
|
-
const { markers, zoom, id } = props;
|
|
17
|
+
const { markers, zoom, center, id } = props;
|
|
22
18
|
const { apiKey, scriptSrc, nonce } = useContext(MapsContext);
|
|
23
19
|
const isMobile = useContext(MobileContext);
|
|
24
20
|
const { lang = 'ru' } = useContext(LocaleContext);
|
|
@@ -27,7 +23,6 @@ const YandexMap = (props) => {
|
|
|
27
23
|
const [height, setHeight] = useState(undefined);
|
|
28
24
|
const ref = useRef(null);
|
|
29
25
|
const [loading, setLoading] = useState(false);
|
|
30
|
-
const [ready, setReady] = useState(false);
|
|
31
26
|
const [attemptsIndex, setAttemptsIndex] = useState(0);
|
|
32
27
|
const onTryAgain = useCallback(() => {
|
|
33
28
|
setAttemptsIndex(attemptsIndex + 1);
|
|
@@ -35,17 +30,20 @@ const YandexMap = (props) => {
|
|
|
35
30
|
useEffect(() => {
|
|
36
31
|
(async function () {
|
|
37
32
|
var _a;
|
|
33
|
+
if (!center) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
38
36
|
setLoading(true);
|
|
39
37
|
await YMapsApiLoader.loadApi(apiKey, scriptSrc, lang, nonce);
|
|
40
38
|
(_a = window.ymaps) === null || _a === void 0 ? void 0 : _a.ready(() => {
|
|
41
39
|
setYmaps(new YMap(new window.ymaps.Map(containerId, {
|
|
42
|
-
center
|
|
40
|
+
center,
|
|
43
41
|
zoom: zoom || DEFAULT_ZOOM,
|
|
44
42
|
}, { autoFitToViewport: 'always' }), ref.current));
|
|
45
43
|
});
|
|
46
44
|
setLoading(false);
|
|
47
45
|
})();
|
|
48
|
-
}, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);
|
|
46
|
+
}, [apiKey, lang, scriptSrc, containerId, zoom, center, nonce, attemptsIndex, setLoading]);
|
|
49
47
|
useEffect(() => {
|
|
50
48
|
const updateSize = _.debounce(() => {
|
|
51
49
|
if (ref.current) {
|
|
@@ -60,19 +58,12 @@ const YandexMap = (props) => {
|
|
|
60
58
|
}, [markers, ymap, setYmaps, isMobile]);
|
|
61
59
|
useEffect(() => {
|
|
62
60
|
if (ymap) {
|
|
63
|
-
|
|
64
|
-
const showPlacemarks = async () => {
|
|
65
|
-
await ymap.showPlacemarks({ markers, zoom });
|
|
66
|
-
setReady(true);
|
|
67
|
-
};
|
|
68
|
-
showPlacemarks();
|
|
61
|
+
ymap.showPlacemarks(markers);
|
|
69
62
|
}
|
|
70
63
|
});
|
|
71
|
-
if (!
|
|
64
|
+
if (!center)
|
|
72
65
|
return null;
|
|
73
66
|
return (React.createElement(ErrorWrapper, { isError: YMapsApiLoader.status === MapApiStatus.Error, text: i18n('map-load-error'), buttonText: i18n('map-try-again'), handler: onTryAgain, className: b('wrapper') },
|
|
74
|
-
React.createElement("div", { className: b('
|
|
75
|
-
React.createElement("div", { id: containerId, className: b({ hidden: !ready }), ref: ref, style: { height } }),
|
|
76
|
-
loading ? React.createElement(Spin, { size: "xl", className: b('spinner') }) : null)));
|
|
67
|
+
React.createElement("div", { id: containerId, className: b(), ref: ref, style: { height } }, loading ? React.createElement(Spin, { size: "xl", className: b('spinner') }) : null)));
|
|
77
68
|
};
|
|
78
69
|
export default YandexMap;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s
|
|
1
|
+
.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s {
|
|
2
2
|
margin: 0;
|
|
3
3
|
}
|
|
4
4
|
|
|
@@ -10,12 +10,6 @@ unpredictable css rules order in build */
|
|
|
10
10
|
.pc-title-block_justify_end {
|
|
11
11
|
text-align: right;
|
|
12
12
|
}
|
|
13
|
-
.pc-title-block_size_xs {
|
|
14
|
-
font-size: var(--yc-text-body-3-font-size);
|
|
15
|
-
line-height: var(--yc-text-body-3-line-height);
|
|
16
|
-
color: var(--pc-text-header-color);
|
|
17
|
-
font-weight: var(--yc-text-accent-font-weight);
|
|
18
|
-
}
|
|
19
13
|
.pc-title-block_size_s {
|
|
20
14
|
font-size: var(--yc-text-header-1-font-size);
|
|
21
15
|
line-height: var(--yc-text-header-1-line-height);
|
|
@@ -50,13 +44,10 @@ unpredictable css rules order in build */
|
|
|
50
44
|
}
|
|
51
45
|
}
|
|
52
46
|
.pc-title-block__arrow {
|
|
53
|
-
margin
|
|
54
|
-
}
|
|
55
|
-
.pc-title-block__arrow_size_xs {
|
|
56
|
-
margin-top: 7px;
|
|
47
|
+
margin: 8px 0 0 4px;
|
|
57
48
|
}
|
|
58
49
|
.pc-title-block__arrow_size_s {
|
|
59
|
-
margin
|
|
50
|
+
margin: 4px 0 0 4px;
|
|
60
51
|
}
|
|
61
52
|
.pc-title-block__link {
|
|
62
53
|
color: inherit;
|
|
@@ -71,10 +62,7 @@ unpredictable css rules order in build */
|
|
|
71
62
|
cursor: pointer;
|
|
72
63
|
}
|
|
73
64
|
.pc-title-block__link:hover .pc-title-block__arrow {
|
|
74
|
-
margin-left:
|
|
75
|
-
}
|
|
76
|
-
.pc-title-block__link:hover .pc-title-block__arrow_size_xs {
|
|
77
|
-
margin-left: 6px;
|
|
65
|
+
margin-left: 12px;
|
|
78
66
|
}
|
|
79
67
|
.pc-title-block__link:hover .pc-title-block__arrow_size_s {
|
|
80
68
|
margin-left: 8px;
|
|
@@ -102,10 +90,7 @@ unpredictable css rules order in build */
|
|
|
102
90
|
margin-top: 0;
|
|
103
91
|
}
|
|
104
92
|
@media (max-width: 577px) {
|
|
105
|
-
.pc-title-block_size_l
|
|
93
|
+
.pc-title-block_size_l {
|
|
106
94
|
margin-top: 48px;
|
|
107
95
|
}
|
|
108
|
-
.pc-title-block__arrow_size_m, .pc-title-block__arrow_size_l {
|
|
109
|
-
margin-top: 9px;
|
|
110
|
-
}
|
|
111
96
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TextSize, TitleProps } from '../../models';
|
|
2
2
|
import './Title.css';
|
|
3
|
-
export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 |
|
|
3
|
+
export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24;
|
|
4
4
|
export interface TitleFullProps extends TitleProps {
|
|
5
5
|
className?: string;
|
|
6
6
|
onClick?: () => void;
|
|
@@ -8,14 +8,12 @@ import './Title.css';
|
|
|
8
8
|
const b = block('title-block');
|
|
9
9
|
export function getArrowSize(size, isMobile) {
|
|
10
10
|
switch (size) {
|
|
11
|
-
case 'xs':
|
|
12
|
-
return 13;
|
|
13
11
|
case 's':
|
|
14
12
|
return 16;
|
|
15
13
|
case 'm':
|
|
16
|
-
return isMobile ?
|
|
14
|
+
return isMobile ? 20 : 24;
|
|
17
15
|
case 'l':
|
|
18
|
-
return isMobile ?
|
|
16
|
+
return isMobile ? 20 : 24;
|
|
19
17
|
default:
|
|
20
18
|
return 20;
|
|
21
19
|
}
|
|
@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
|
|
|
38
38
|
Custom = "custom"
|
|
39
39
|
}
|
|
40
40
|
export type TextTheme = 'light' | 'dark';
|
|
41
|
-
export type TextSize = '
|
|
41
|
+
export type TextSize = 's' | 'm' | 'l';
|
|
42
42
|
export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
|
|
43
43
|
export type HeaderWidth = 's' | 'm' | 'l';
|
|
44
44
|
export type HeaderImageSize = 's' | 'm';
|
|
@@ -130,22 +130,20 @@ export interface FileLinkProps extends ClassNameProps {
|
|
|
130
130
|
theme?: ContentTheme;
|
|
131
131
|
onClick?: () => void;
|
|
132
132
|
}
|
|
133
|
-
export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
|
|
134
133
|
export interface ButtonProps extends AnalyticsEventsBase {
|
|
135
134
|
text: string;
|
|
136
135
|
url: string;
|
|
137
136
|
primary?: boolean;
|
|
138
137
|
size?: ButtonSize;
|
|
139
|
-
theme?:
|
|
138
|
+
theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
|
|
140
139
|
img?: ButtonImageProps | string;
|
|
141
140
|
metrikaGoals?: MetrikaGoal;
|
|
142
141
|
pixelEvents?: ButtonPixel;
|
|
143
142
|
target?: string;
|
|
144
143
|
}
|
|
145
|
-
export type ButtonImagePosition = 'left' | 'right';
|
|
146
144
|
export interface ButtonImageProps {
|
|
147
145
|
url: string;
|
|
148
|
-
position?:
|
|
146
|
+
position?: 'left' | 'right';
|
|
149
147
|
alt?: string;
|
|
150
148
|
}
|
|
151
149
|
export interface PlayButtonProps extends ClassNameProps {
|
|
@@ -191,6 +189,7 @@ export interface MediaProps extends Animatable, Partial<MediaComponentDataLensPr
|
|
|
191
189
|
export type Coordinate = number[];
|
|
192
190
|
export interface MapBaseProps {
|
|
193
191
|
zoom?: number;
|
|
192
|
+
center?: Coordinate;
|
|
194
193
|
}
|
|
195
194
|
export interface GMapProps extends MapBaseProps {
|
|
196
195
|
address: string;
|
|
@@ -198,6 +197,7 @@ export interface GMapProps extends MapBaseProps {
|
|
|
198
197
|
export interface YMapProps extends MapBaseProps {
|
|
199
198
|
markers: YMapMarker[];
|
|
200
199
|
id: string;
|
|
200
|
+
center: Coordinate;
|
|
201
201
|
}
|
|
202
202
|
export interface YMapMarker {
|
|
203
203
|
address?: string;
|