@gravity-ui/page-constructor 1.7.0-alpha.5 → 1.7.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/blocks/Tabs/Tabs.css +49 -23
- package/build/cjs/blocks/Tabs/Tabs.d.ts +1 -1
- package/build/cjs/blocks/Tabs/Tabs.js +29 -27
- package/build/cjs/components/ButtonTabs/ButtonTabs.css +12 -0
- package/build/cjs/components/ButtonTabs/ButtonTabs.d.ts +13 -0
- package/build/cjs/components/ButtonTabs/ButtonTabs.js +27 -0
- package/build/cjs/components/Image/Image.css +3 -0
- package/build/cjs/components/Image/Image.js +3 -1
- package/build/cjs/components/RouterLink/RouterLink.d.ts +0 -1
- package/build/cjs/components/VideoBlock/VideoBlock.js +1 -1
- package/build/cjs/components/index.d.ts +0 -1
- package/build/cjs/components/index.js +1 -3
- package/build/cjs/constructor-items.d.ts +1 -1
- package/build/cjs/containers/PageConstructor/PageConstructor.d.ts +0 -2
- package/build/cjs/containers/PageConstructor/PageConstructor.js +2 -4
- package/build/cjs/context/locationContext/locationContext.d.ts +0 -1
- package/build/cjs/icons/index.d.ts +0 -3
- package/build/cjs/icons/index.js +0 -3
- package/build/cjs/models/constructor-items/blocks.d.ts +7 -4
- package/build/cjs/models/index.d.ts +0 -1
- package/build/cjs/models/index.js +0 -1
- package/build/cjs/text-transform/blocks.js +11 -4
- package/build/cjs/text-transform/utils.js +1 -1
- package/build/esm/blocks/Tabs/Tabs.css +49 -23
- package/build/esm/blocks/Tabs/Tabs.d.ts +1 -1
- package/build/esm/blocks/Tabs/Tabs.js +29 -27
- package/build/esm/components/ButtonTabs/ButtonTabs.css +12 -0
- package/build/esm/components/ButtonTabs/ButtonTabs.d.ts +14 -0
- package/build/esm/components/ButtonTabs/ButtonTabs.js +25 -0
- package/build/esm/components/Image/Image.css +3 -0
- package/build/esm/components/Image/Image.d.ts +1 -0
- package/build/esm/components/Image/Image.js +4 -1
- package/build/esm/components/RouterLink/RouterLink.d.ts +0 -1
- package/build/esm/components/VideoBlock/VideoBlock.js +1 -1
- package/build/esm/components/index.d.ts +0 -1
- package/build/esm/components/index.js +0 -1
- package/build/esm/constructor-items.d.ts +1 -1
- package/build/esm/containers/PageConstructor/PageConstructor.d.ts +0 -2
- package/build/esm/containers/PageConstructor/PageConstructor.js +2 -4
- package/build/esm/context/locationContext/locationContext.d.ts +0 -1
- package/build/esm/icons/index.d.ts +0 -3
- package/build/esm/icons/index.js +0 -3
- package/build/esm/models/constructor-items/blocks.d.ts +7 -4
- package/build/esm/models/index.d.ts +0 -1
- package/build/esm/models/index.js +0 -1
- package/build/esm/text-transform/blocks.js +11 -4
- package/build/esm/text-transform/utils.js +1 -1
- package/package.json +1 -1
- package/server/models/constructor-items/blocks.d.ts +7 -4
- package/server/models/index.d.ts +0 -1
- package/server/models/index.js +0 -1
- package/server/text-transform/blocks.js +11 -4
- package/server/text-transform/utils.js +1 -1
- package/styles/mixins.scss +0 -38
- package/build/cjs/components/navigation/components/Header/Header.css +0 -85
- package/build/cjs/components/navigation/components/Header/Header.d.ts +0 -28
- package/build/cjs/components/navigation/components/Header/Header.js +0 -81
- package/build/cjs/components/navigation/components/Logo/Logo.css +0 -23
- package/build/cjs/components/navigation/components/Logo/Logo.d.ts +0 -7
- package/build/cjs/components/navigation/components/Logo/Logo.js +0 -17
- package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.css +0 -58
- package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.d.ts +0 -13
- package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.js +0 -45
- package/build/cjs/components/navigation/components/Navigation/Navigation.css +0 -43
- package/build/cjs/components/navigation/components/Navigation/Navigation.d.ts +0 -11
- package/build/cjs/components/navigation/components/Navigation/Navigation.js +0 -70
- package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.css +0 -41
- package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.d.ts +0 -12
- package/build/cjs/components/navigation/components/NavigationItem/NavigationItem.js +0 -55
- package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.css +0 -33
- package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.d.ts +0 -10
- package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.js +0 -46
- package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.css +0 -20
- package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.d.ts +0 -7
- package/build/cjs/components/navigation/components/SocialIcon/SocialIcon.js +0 -14
- package/build/cjs/icons/NavigationArrow.d.ts +0 -2
- package/build/cjs/icons/NavigationArrow.js +0 -9
- package/build/cjs/icons/NavigationClose.d.ts +0 -2
- package/build/cjs/icons/NavigationClose.js +0 -9
- package/build/cjs/icons/NavigationOpen.d.ts +0 -2
- package/build/cjs/icons/NavigationOpen.js +0 -11
- package/build/cjs/models/navigation.d.ts +0 -59
- package/build/cjs/models/navigation.js +0 -10
- package/build/esm/components/navigation/components/Header/Header.css +0 -85
- package/build/esm/components/navigation/components/Header/Header.d.ts +0 -29
- package/build/esm/components/navigation/components/Header/Header.js +0 -79
- package/build/esm/components/navigation/components/Logo/Logo.css +0 -23
- package/build/esm/components/navigation/components/Logo/Logo.d.ts +0 -8
- package/build/esm/components/navigation/components/Logo/Logo.js +0 -15
- package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.css +0 -58
- package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.d.ts +0 -14
- package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.js +0 -43
- package/build/esm/components/navigation/components/Navigation/Navigation.css +0 -43
- package/build/esm/components/navigation/components/Navigation/Navigation.d.ts +0 -12
- package/build/esm/components/navigation/components/Navigation/Navigation.js +0 -69
- package/build/esm/components/navigation/components/NavigationItem/NavigationItem.css +0 -41
- package/build/esm/components/navigation/components/NavigationItem/NavigationItem.d.ts +0 -13
- package/build/esm/components/navigation/components/NavigationItem/NavigationItem.js +0 -54
- package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.css +0 -33
- package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.d.ts +0 -11
- package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.js +0 -42
- package/build/esm/components/navigation/components/SocialIcon/SocialIcon.css +0 -20
- package/build/esm/components/navigation/components/SocialIcon/SocialIcon.d.ts +0 -8
- package/build/esm/components/navigation/components/SocialIcon/SocialIcon.js +0 -12
- package/build/esm/icons/NavigationArrow.d.ts +0 -2
- package/build/esm/icons/NavigationArrow.js +0 -4
- package/build/esm/icons/NavigationClose.d.ts +0 -2
- package/build/esm/icons/NavigationClose.js +0 -4
- package/build/esm/icons/NavigationOpen.d.ts +0 -2
- package/build/esm/icons/NavigationOpen.js +0 -6
- package/build/esm/models/navigation.d.ts +0 -59
- package/build/esm/models/navigation.js +0 -7
- package/server/models/navigation.d.ts +0 -59
- package/server/models/navigation.js +0 -10
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/* use this for style redefinitions to awoid problems with
|
|
2
|
-
unpredictable css rules order in build */
|
|
3
|
-
.navigation-popup {
|
|
4
|
-
position: fixed;
|
|
5
|
-
top: calc(var(--header-height) - 16px);
|
|
6
|
-
padding-right: 4px;
|
|
7
|
-
padding-left: 4px;
|
|
8
|
-
transform: translateX(calc(calc(8px * 2) * -1));
|
|
9
|
-
z-index: 101;
|
|
10
|
-
display: flex;
|
|
11
|
-
flex-direction: column;
|
|
12
|
-
min-width: 220px;
|
|
13
|
-
padding: 16px;
|
|
14
|
-
border: 1px solid var(--yc-color-line-generic);
|
|
15
|
-
border-top-width: 0;
|
|
16
|
-
border-radius: calc(var(--pc-border-radius) / 2);
|
|
17
|
-
background: var(--yc-color-base-float);
|
|
18
|
-
box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
|
|
19
|
-
}
|
|
20
|
-
@media (max-width: 768px) {
|
|
21
|
-
.navigation-popup {
|
|
22
|
-
display: none;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
.navigation-popup__link {
|
|
26
|
-
height: 36px;
|
|
27
|
-
padding: 8px 12px;
|
|
28
|
-
border-radius: 8px;
|
|
29
|
-
}
|
|
30
|
-
.navigation-popup__link:hover {
|
|
31
|
-
color: var(--yc-color-text-primary);
|
|
32
|
-
background-color: var(--yc-color-base-simple-hover);
|
|
33
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { NavigationLinkItem } from '../../../../models';
|
|
3
|
-
export interface NavigationPopupProps {
|
|
4
|
-
items: NavigationLinkItem[];
|
|
5
|
-
onClose: () => void;
|
|
6
|
-
left?: number;
|
|
7
|
-
className?: string;
|
|
8
|
-
}
|
|
9
|
-
export declare const NavigationPopup: React.FC<NavigationPopupProps>;
|
|
10
|
-
export default NavigationPopup;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NavigationPopup = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
|
|
6
|
-
const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
|
|
7
|
-
const react_1 = (0, tslib_1.__importStar)(require("react"));
|
|
8
|
-
const uikit_1 = require("@gravity-ui/uikit");
|
|
9
|
-
const index_1 = require("../../../index");
|
|
10
|
-
const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
|
|
11
|
-
const b = (0, bem_cn_lite_1.default)('navigation-popup');
|
|
12
|
-
const NavigationPopup = ({ items, left, onClose }) => {
|
|
13
|
-
const [calculatedLeft, setCalculatedLeft] = (0, react_1.useState)(left);
|
|
14
|
-
const popupRef = (0, react_1.useRef)(null);
|
|
15
|
-
const calculateLeft = (0, react_1.useCallback)(() => {
|
|
16
|
-
if (popupRef && popupRef.current && left) {
|
|
17
|
-
const right = left + popupRef.current.offsetWidth;
|
|
18
|
-
const docWidth = document.body.clientWidth;
|
|
19
|
-
const currentLeft = right > docWidth ? left - (right - docWidth) : left;
|
|
20
|
-
setCalculatedLeft(currentLeft);
|
|
21
|
-
}
|
|
22
|
-
else {
|
|
23
|
-
setCalculatedLeft(left);
|
|
24
|
-
}
|
|
25
|
-
}, [left]);
|
|
26
|
-
(0, react_1.useEffect)(() => {
|
|
27
|
-
const debounceCalculateLeft = lodash_1.default.debounce(calculateLeft, 100);
|
|
28
|
-
calculateLeft();
|
|
29
|
-
window.addEventListener('resize', debounceCalculateLeft);
|
|
30
|
-
return () => {
|
|
31
|
-
window.removeEventListener('resize', debounceCalculateLeft);
|
|
32
|
-
};
|
|
33
|
-
}, [calculateLeft]);
|
|
34
|
-
(0, react_1.useEffect)(() => {
|
|
35
|
-
calculateLeft();
|
|
36
|
-
}, [calculateLeft, left]);
|
|
37
|
-
if (!document || !document.body) {
|
|
38
|
-
return null;
|
|
39
|
-
}
|
|
40
|
-
const renderDefaultPopup = (react_1.default.createElement(react_1.Fragment, null, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
|
|
41
|
-
return (react_1.default.createElement(uikit_1.Portal, null,
|
|
42
|
-
react_1.default.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
|
|
43
|
-
react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));
|
|
44
|
-
};
|
|
45
|
-
exports.NavigationPopup = NavigationPopup;
|
|
46
|
-
exports.default = exports.NavigationPopup;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/* use this for style redefinitions to awoid problems with
|
|
2
|
-
unpredictable css rules order in build */
|
|
3
|
-
.social-icon {
|
|
4
|
-
display: flex;
|
|
5
|
-
justify-content: center;
|
|
6
|
-
align-items: center;
|
|
7
|
-
width: 40px;
|
|
8
|
-
height: 40px;
|
|
9
|
-
margin-right: 8px;
|
|
10
|
-
color: var(--yc-color-base-background);
|
|
11
|
-
border-radius: 50%;
|
|
12
|
-
background-color: var(--yc-color-base-generic);
|
|
13
|
-
}
|
|
14
|
-
.social-icon:hover {
|
|
15
|
-
background-color: var(--yc-color-base-generic-hover);
|
|
16
|
-
}
|
|
17
|
-
.social-icon__icon {
|
|
18
|
-
width: 16px;
|
|
19
|
-
height: 16px;
|
|
20
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { NavigationSocialItem } from '../../../../models/navigation';
|
|
3
|
-
export interface NavigationSocialItemProps extends NavigationSocialItem {
|
|
4
|
-
className?: string;
|
|
5
|
-
}
|
|
6
|
-
declare const SocialIcon: React.FC<NavigationSocialItemProps>;
|
|
7
|
-
export default SocialIcon;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const tslib_1 = require("tslib");
|
|
4
|
-
const react_1 = (0, tslib_1.__importDefault)(require("react"));
|
|
5
|
-
const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
|
|
6
|
-
const index_1 = require("../../../index");
|
|
7
|
-
const utils_1 = require("../../../Media/Image/utils");
|
|
8
|
-
const b = (0, bem_cn_lite_1.default)('social-icon');
|
|
9
|
-
const SocialIcon = ({ icon, url, className }) => {
|
|
10
|
-
const iconData = (0, utils_1.getMediaImage)(icon);
|
|
11
|
-
return (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
|
|
12
|
-
react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, iconData))));
|
|
13
|
-
};
|
|
14
|
-
exports.default = SocialIcon;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NavigationArrow = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const react_1 = (0, tslib_1.__importDefault)(require("react"));
|
|
6
|
-
const svg_1 = require("../utils/svg");
|
|
7
|
-
const NavigationArrow = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "9", height: "9", fill: "none", viewBox: "0 0 9 9" }, svg_1.a11yHiddenSvgProps, props),
|
|
8
|
-
react_1.default.createElement("path", { d: "M3 1H8M8 1V6M8 1L1 8", stroke: "currentColor", strokeOpacity: "0.7", strokeWidth: "1.2", strokeLinecap: "square" })));
|
|
9
|
-
exports.NavigationArrow = NavigationArrow;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NavigationClose = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const react_1 = (0, tslib_1.__importDefault)(require("react"));
|
|
6
|
-
const svg_1 = require("../utils/svg");
|
|
7
|
-
const NavigationClose = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", fill: "none" }, svg_1.a11yHiddenSvgProps, props),
|
|
8
|
-
react_1.default.createElement("path", { d: "M26 10 10 26m16 0L10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })));
|
|
9
|
-
exports.NavigationClose = NavigationClose;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NavigationOpen = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const react_1 = (0, tslib_1.__importDefault)(require("react"));
|
|
6
|
-
const svg_1 = require("../utils/svg");
|
|
7
|
-
const NavigationOpen = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", fill: "none" }, svg_1.a11yHiddenSvgProps, props),
|
|
8
|
-
react_1.default.createElement("rect", { x: "8", y: "10", width: "20", height: "2", rx: "1", fill: "currentColor" }),
|
|
9
|
-
react_1.default.createElement("rect", { x: "8", y: "17", width: "20", height: "2", rx: "1", fill: "currentColor" }),
|
|
10
|
-
react_1.default.createElement("rect", { x: "8", y: "24", width: "20", height: "2", rx: "1", fill: "currentColor" })));
|
|
11
|
-
exports.NavigationOpen = NavigationOpen;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { ImageProps, ButtonProps } from './constructor-items';
|
|
2
|
-
export declare enum NavigationItemType {
|
|
3
|
-
Link = "link",
|
|
4
|
-
Dropdown = "dropdown",
|
|
5
|
-
Button = "button",
|
|
6
|
-
Social = "social"
|
|
7
|
-
}
|
|
8
|
-
export interface NavigationItemBase {
|
|
9
|
-
text: string;
|
|
10
|
-
icon?: ImageProps;
|
|
11
|
-
url?: string;
|
|
12
|
-
}
|
|
13
|
-
export interface NavigationLinkItem extends NavigationItemBase {
|
|
14
|
-
type: NavigationItemType.Link;
|
|
15
|
-
url: string;
|
|
16
|
-
arrow?: boolean;
|
|
17
|
-
target?: string;
|
|
18
|
-
}
|
|
19
|
-
export interface NavigationButtonItem extends ButtonProps {
|
|
20
|
-
type: NavigationItemType.Button;
|
|
21
|
-
url: string;
|
|
22
|
-
target?: string;
|
|
23
|
-
}
|
|
24
|
-
export interface NavigationDropdownItem extends NavigationItemBase {
|
|
25
|
-
type: NavigationItemType.Dropdown;
|
|
26
|
-
items: NavigationLinkItem[];
|
|
27
|
-
}
|
|
28
|
-
export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
|
|
29
|
-
type: NavigationItemType.Social;
|
|
30
|
-
icon: ImageProps;
|
|
31
|
-
url: string;
|
|
32
|
-
}
|
|
33
|
-
export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
|
|
34
|
-
export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
|
|
35
|
-
icon: ImageProps;
|
|
36
|
-
text?: string;
|
|
37
|
-
}
|
|
38
|
-
export interface HeaderData {
|
|
39
|
-
leftItems: NavigationItem[];
|
|
40
|
-
rightItems?: NavigationItem[];
|
|
41
|
-
}
|
|
42
|
-
export interface FooterColumn {
|
|
43
|
-
title: string;
|
|
44
|
-
links: NavigationItem[];
|
|
45
|
-
}
|
|
46
|
-
export interface FooterUnderline {
|
|
47
|
-
links?: NavigationItem[];
|
|
48
|
-
copyright?: string;
|
|
49
|
-
}
|
|
50
|
-
export interface FooterData {
|
|
51
|
-
columns: FooterColumn[];
|
|
52
|
-
social?: NavigationSocialItem[];
|
|
53
|
-
underline?: FooterUnderline;
|
|
54
|
-
}
|
|
55
|
-
export interface NavigationData {
|
|
56
|
-
logo: NavigationLogo;
|
|
57
|
-
header: HeaderData;
|
|
58
|
-
footer?: FooterData;
|
|
59
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NavigationItemType = void 0;
|
|
4
|
-
var NavigationItemType;
|
|
5
|
-
(function (NavigationItemType) {
|
|
6
|
-
NavigationItemType["Link"] = "link";
|
|
7
|
-
NavigationItemType["Dropdown"] = "dropdown";
|
|
8
|
-
NavigationItemType["Button"] = "button";
|
|
9
|
-
NavigationItemType["Social"] = "social";
|
|
10
|
-
})(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
/* use this for style redefinitions to awoid problems with
|
|
2
|
-
unpredictable css rules order in build */
|
|
3
|
-
.header {
|
|
4
|
-
position: sticky;
|
|
5
|
-
z-index: 98;
|
|
6
|
-
top: 0;
|
|
7
|
-
display: flex;
|
|
8
|
-
justify-content: center;
|
|
9
|
-
align-items: center;
|
|
10
|
-
height: var(--header-height);
|
|
11
|
-
background-color: var(--yc-color-base-background);
|
|
12
|
-
box-shadow: inset 0px -1px 0px var(--yc-color-line-generic);
|
|
13
|
-
}
|
|
14
|
-
.header__wrapper {
|
|
15
|
-
display: flex;
|
|
16
|
-
justify-content: space-between;
|
|
17
|
-
align-items: center;
|
|
18
|
-
height: var(--header-height);
|
|
19
|
-
}
|
|
20
|
-
@media (min-width: 769px) {
|
|
21
|
-
.header__mobile-menu-button {
|
|
22
|
-
display: none;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
.header__navigation, .header__left, .header__right {
|
|
26
|
-
display: flex;
|
|
27
|
-
align-items: center;
|
|
28
|
-
}
|
|
29
|
-
.header__navigation {
|
|
30
|
-
position: relative;
|
|
31
|
-
flex: 1 0 0;
|
|
32
|
-
justify-content: flex-start;
|
|
33
|
-
margin-right: 20px;
|
|
34
|
-
}
|
|
35
|
-
@media (max-width: 768px) {
|
|
36
|
-
.header__navigation {
|
|
37
|
-
display: none;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
.header__right {
|
|
41
|
-
flex: 0;
|
|
42
|
-
justify-content: flex-end;
|
|
43
|
-
}
|
|
44
|
-
.header__navigation-container {
|
|
45
|
-
display: flex;
|
|
46
|
-
overflow-x: hidden;
|
|
47
|
-
flex: 1 0 0;
|
|
48
|
-
justify-content: space-between;
|
|
49
|
-
align-items: center;
|
|
50
|
-
margin-right: 20px;
|
|
51
|
-
}
|
|
52
|
-
.header__buttons {
|
|
53
|
-
display: flex;
|
|
54
|
-
}
|
|
55
|
-
@media (max-width: 768px) {
|
|
56
|
-
.header__buttons {
|
|
57
|
-
display: none;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
.header__buttons > *:not(:last-child) {
|
|
61
|
-
margin-right: 16px;
|
|
62
|
-
}
|
|
63
|
-
.header__button {
|
|
64
|
-
margin-top: 0;
|
|
65
|
-
}
|
|
66
|
-
.header__logo {
|
|
67
|
-
margin: 0 32px 0 0;
|
|
68
|
-
cursor: pointer;
|
|
69
|
-
}
|
|
70
|
-
@media (max-width: 768px) {
|
|
71
|
-
.header__navigation-container {
|
|
72
|
-
justify-content: flex-end;
|
|
73
|
-
}
|
|
74
|
-
.header__left {
|
|
75
|
-
flex: 1 0 0;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
@media (max-width: 576px) {
|
|
79
|
-
.header__navigation-container {
|
|
80
|
-
margin-right: 12px;
|
|
81
|
-
}
|
|
82
|
-
.header__logo {
|
|
83
|
-
margin-right: 0;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { HeaderData, NavigationLogo } from '../../../../models';
|
|
3
|
-
import './Header.css';
|
|
4
|
-
export interface HeaderProps {
|
|
5
|
-
logo: NavigationLogo;
|
|
6
|
-
data: HeaderData;
|
|
7
|
-
}
|
|
8
|
-
interface HeaderState {
|
|
9
|
-
isSidebarOpened: boolean;
|
|
10
|
-
activeItemIndex: number;
|
|
11
|
-
}
|
|
12
|
-
declare class Header extends React.Component<HeaderProps, HeaderState> {
|
|
13
|
-
ref: React.RefObject<unknown>;
|
|
14
|
-
state: {
|
|
15
|
-
isSidebarOpened: boolean;
|
|
16
|
-
activeItemIndex: number;
|
|
17
|
-
};
|
|
18
|
-
render(): JSX.Element;
|
|
19
|
-
private renderLeft;
|
|
20
|
-
private renderLogo;
|
|
21
|
-
private renderRight;
|
|
22
|
-
private renderRightItems;
|
|
23
|
-
private renderMobileMenuButton;
|
|
24
|
-
private renderMobileNavigation;
|
|
25
|
-
private onActiveItemChange;
|
|
26
|
-
private onSidebarOpenedChange;
|
|
27
|
-
private hideSidebar;
|
|
28
|
-
}
|
|
29
|
-
export default Header;
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React, { createRef } from 'react';
|
|
2
|
-
import block from 'bem-cn-lite';
|
|
3
|
-
import { Col, Grid, Row } from '../../../../grid';
|
|
4
|
-
import OutsideClick from '../../../OutsideClick/OutsideClick';
|
|
5
|
-
import Control from '../../../Control/Control';
|
|
6
|
-
import Logo from '../Logo/Logo';
|
|
7
|
-
import Navigation from '../Navigation/Navigation';
|
|
8
|
-
import MobileNavigation from '../MobileNavigation/MobileNavigation';
|
|
9
|
-
import NavigationItem from '../NavigationItem/NavigationItem';
|
|
10
|
-
import { NavigationClose, NavigationOpen } from '../../../../icons';
|
|
11
|
-
import './Header.css';
|
|
12
|
-
const b = block('header');
|
|
13
|
-
class Header extends React.Component {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
this.ref = createRef();
|
|
17
|
-
this.state = {
|
|
18
|
-
isSidebarOpened: false,
|
|
19
|
-
activeItemIndex: -1,
|
|
20
|
-
};
|
|
21
|
-
this.onActiveItemChange = (index) => {
|
|
22
|
-
this.setState({ activeItemIndex: index });
|
|
23
|
-
};
|
|
24
|
-
this.onSidebarOpenedChange = (isSidebarOpened) => {
|
|
25
|
-
this.setState({ isSidebarOpened });
|
|
26
|
-
};
|
|
27
|
-
this.hideSidebar = () => {
|
|
28
|
-
this.setState({ isSidebarOpened: false });
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
render() {
|
|
32
|
-
return (React.createElement(Grid, { className: b() },
|
|
33
|
-
React.createElement(Row, null,
|
|
34
|
-
React.createElement(Col, null,
|
|
35
|
-
React.createElement("header", { className: b('wrapper') },
|
|
36
|
-
this.renderLogo(),
|
|
37
|
-
this.renderLeft(),
|
|
38
|
-
this.renderRight(),
|
|
39
|
-
this.renderMobileNavigation())))));
|
|
40
|
-
}
|
|
41
|
-
renderLeft() {
|
|
42
|
-
const { activeItemIndex } = this.state;
|
|
43
|
-
const { leftItems } = this.props.data;
|
|
44
|
-
return (leftItems && (React.createElement("div", { className: b('navigation-container') },
|
|
45
|
-
React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange }))));
|
|
46
|
-
}
|
|
47
|
-
renderLogo() {
|
|
48
|
-
const { logo } = this.props;
|
|
49
|
-
if (!logo) {
|
|
50
|
-
return null;
|
|
51
|
-
}
|
|
52
|
-
return (React.createElement("div", { className: b('left') },
|
|
53
|
-
React.createElement(Logo, Object.assign({}, logo, { className: b('logo') }))));
|
|
54
|
-
}
|
|
55
|
-
renderRight() {
|
|
56
|
-
return (React.createElement("div", { className: b('right') },
|
|
57
|
-
this.renderMobileMenuButton(),
|
|
58
|
-
this.renderRightItems()));
|
|
59
|
-
}
|
|
60
|
-
renderRightItems() {
|
|
61
|
-
const { rightItems } = this.props.data;
|
|
62
|
-
return (rightItems && (React.createElement("div", { className: b('buttons') }, rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button, className: b('button') }))))));
|
|
63
|
-
}
|
|
64
|
-
renderMobileMenuButton() {
|
|
65
|
-
const { isSidebarOpened } = this.state;
|
|
66
|
-
const iconProps = { icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36 };
|
|
67
|
-
return (React.createElement(Control, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
|
|
68
|
-
e.stopPropagation();
|
|
69
|
-
this.onSidebarOpenedChange(!isSidebarOpened);
|
|
70
|
-
}, size: "l" }, iconProps)));
|
|
71
|
-
}
|
|
72
|
-
renderMobileNavigation() {
|
|
73
|
-
const { leftItems, rightItems } = this.props.data;
|
|
74
|
-
const { isSidebarOpened, activeItemIndex } = this.state;
|
|
75
|
-
return (React.createElement(OutsideClick, { onOutsideClick: () => this.onSidebarOpenedChange(false) },
|
|
76
|
-
React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange, onClose: this.hideSidebar })));
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
export default Header;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.logo {
|
|
2
|
-
margin: 0;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
/* use this for style redefinitions to awoid problems with
|
|
6
|
-
unpredictable css rules order in build */
|
|
7
|
-
.logo {
|
|
8
|
-
display: flex;
|
|
9
|
-
align-items: center;
|
|
10
|
-
font-weight: var(--yc-text-accent-font-weight);
|
|
11
|
-
font-size: var(--yc-text-header-1-font-size);
|
|
12
|
-
line-height: var(--yc-text-header-1-line-height);
|
|
13
|
-
color: var(--pc-text-header-color);
|
|
14
|
-
font-weight: var(--yc-text-accent-font-weight);
|
|
15
|
-
}
|
|
16
|
-
.logo__icon {
|
|
17
|
-
display: flex;
|
|
18
|
-
margin-right: 8px;
|
|
19
|
-
object-fit: contain;
|
|
20
|
-
}
|
|
21
|
-
.logo__text {
|
|
22
|
-
white-space: nowrap;
|
|
23
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import block from 'bem-cn-lite';
|
|
3
|
-
import RouterLink from '../../../RouterLink/RouterLink';
|
|
4
|
-
import { getMediaImage } from '../../../Media/Image/utils';
|
|
5
|
-
import { Image } from '../../../index';
|
|
6
|
-
import './Logo.css';
|
|
7
|
-
const b = block('logo');
|
|
8
|
-
const Logo = ({ icon, text, className }) => {
|
|
9
|
-
const imageData = getMediaImage(icon);
|
|
10
|
-
return (React.createElement(RouterLink, { href: "/", passHref: true },
|
|
11
|
-
React.createElement("div", { className: b(null, className) },
|
|
12
|
-
imageData && React.createElement(Image, Object.assign({ className: b('icon') }, imageData)),
|
|
13
|
-
React.createElement("span", { className: b('text') }, text))));
|
|
14
|
-
};
|
|
15
|
-
export default Logo;
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
/* use this for style redefinitions to awoid problems with
|
|
2
|
-
unpredictable css rules order in build */
|
|
3
|
-
.mobile-navigation {
|
|
4
|
-
position: fixed;
|
|
5
|
-
z-index: 100;
|
|
6
|
-
top: var(--header-height);
|
|
7
|
-
left: 0;
|
|
8
|
-
width: 100%;
|
|
9
|
-
border-bottom-right-radius: var(--pc-border-radius);
|
|
10
|
-
border-bottom-left-radius: var(--pc-border-radius);
|
|
11
|
-
background-color: var(--yc-color-base-background);
|
|
12
|
-
box-shadow: 0px 3px 10px var(--yc-color-sfx-shadow);
|
|
13
|
-
font-size: var(--yc-text-body-2-font-size);
|
|
14
|
-
line-height: var(--yc-text-body-2-line-height);
|
|
15
|
-
}
|
|
16
|
-
@media (min-width: 769px) {
|
|
17
|
-
.mobile-navigation {
|
|
18
|
-
display: none;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
.mobile-navigation__wrapper {
|
|
22
|
-
padding: 32px 20px;
|
|
23
|
-
}
|
|
24
|
-
.mobile-navigation__button {
|
|
25
|
-
margin-top: 24px;
|
|
26
|
-
}
|
|
27
|
-
.mobile-navigation__links {
|
|
28
|
-
position: relative;
|
|
29
|
-
display: flex;
|
|
30
|
-
flex-direction: column;
|
|
31
|
-
padding-bottom: 24px;
|
|
32
|
-
margin: 0;
|
|
33
|
-
padding: 0;
|
|
34
|
-
list-style: none;
|
|
35
|
-
}
|
|
36
|
-
.mobile-navigation__links-item:not(:last-child) {
|
|
37
|
-
margin-bottom: 24px;
|
|
38
|
-
}
|
|
39
|
-
.mobile-navigation__dropdown-item:not(:last-child) {
|
|
40
|
-
margin-bottom: 16px;
|
|
41
|
-
}
|
|
42
|
-
.mobile-navigation__popup {
|
|
43
|
-
z-index: 101;
|
|
44
|
-
display: flex;
|
|
45
|
-
flex-direction: column;
|
|
46
|
-
min-width: 220px;
|
|
47
|
-
padding: 16px;
|
|
48
|
-
border: 1px solid var(--yc-color-line-generic);
|
|
49
|
-
border-top-width: 0;
|
|
50
|
-
border-radius: calc(var(--pc-border-radius) / 2);
|
|
51
|
-
background: var(--yc-color-base-float);
|
|
52
|
-
box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
|
|
53
|
-
}
|
|
54
|
-
@media (min-width: 769px) {
|
|
55
|
-
.mobile-navigation__popup {
|
|
56
|
-
display: none;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
|
|
3
|
-
import './MobileNavigation.css';
|
|
4
|
-
export interface MobileNavigationProps {
|
|
5
|
-
className?: string;
|
|
6
|
-
isOpened?: boolean;
|
|
7
|
-
topItems?: NavigationItemModel[];
|
|
8
|
-
bottomItems?: NavigationItemModel[];
|
|
9
|
-
activeItemIndex: number;
|
|
10
|
-
onClose: () => void;
|
|
11
|
-
onActiveItemChange: (index: number) => void;
|
|
12
|
-
}
|
|
13
|
-
declare const MobileNavigation: React.FC<MobileNavigationProps>;
|
|
14
|
-
export default MobileNavigation;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import block from 'bem-cn-lite';
|
|
2
|
-
import React, { useRef, useCallback } from 'react';
|
|
3
|
-
import Foldable from '../../../Foldable/Foldable';
|
|
4
|
-
import { Popup, Portal } from '@gravity-ui/uikit';
|
|
5
|
-
import { NavigationItemType, } from '../../../../models/navigation';
|
|
6
|
-
import NavigationItem from '../NavigationItem/NavigationItem';
|
|
7
|
-
import './MobileNavigation.css';
|
|
8
|
-
const b = block('mobile-navigation');
|
|
9
|
-
const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
|
|
10
|
-
const ref = useRef(null);
|
|
11
|
-
return (React.createElement("div", { ref: ref, className: b('dropdown') },
|
|
12
|
-
React.createElement(NavigationItem, { data: data, onClick: onToggle, isOpened: isOpened }),
|
|
13
|
-
isOpened && (React.createElement(Popup, { anchorRef: ref, open: isOpened, className: b('popup') }, data.items.map((item) => (React.createElement(NavigationItem, { key: item.text, data: item, className: b('dropdown-item'), onClick: onItemClick })))))));
|
|
14
|
-
};
|
|
15
|
-
const MobileNavigationItem = ({ link, index, isActive, onActiveItemChange, onClose, }) => {
|
|
16
|
-
const toggleActive = useCallback((e) => {
|
|
17
|
-
e.stopPropagation();
|
|
18
|
-
if (onActiveItemChange) {
|
|
19
|
-
onActiveItemChange(isActive ? -1 : index);
|
|
20
|
-
}
|
|
21
|
-
}, [isActive, index, onActiveItemChange]);
|
|
22
|
-
const onItemClick = useCallback((e) => {
|
|
23
|
-
toggleActive(e);
|
|
24
|
-
onClose();
|
|
25
|
-
}, [toggleActive, onClose]);
|
|
26
|
-
return (React.createElement("li", { key: index, className: b('links-item') }, link.type === NavigationItemType.Dropdown ? (React.createElement(MobileNavigationDropdown, { data: link, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (React.createElement(NavigationItem, { data: link, onClick: onItemClick }))));
|
|
27
|
-
};
|
|
28
|
-
const MobileNavigation = (props) => {
|
|
29
|
-
if (typeof window === 'undefined') {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
const { isOpened, topItems, bottomItems, activeItemIndex, onActiveItemChange, onClose } = props;
|
|
33
|
-
return (React.createElement(Portal, null,
|
|
34
|
-
React.createElement(Foldable, { key: topItems === null || topItems === void 0 ? void 0 : topItems.length, className: b(), isOpened: Boolean(isOpened) },
|
|
35
|
-
React.createElement("div", { className: b('wrapper') },
|
|
36
|
-
React.createElement("nav", null,
|
|
37
|
-
React.createElement("ul", { className: b('links') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => {
|
|
38
|
-
const isActive = index === activeItemIndex;
|
|
39
|
-
return (React.createElement(MobileNavigationItem, { key: index, link: link, index: index, isActive: isOpened && isActive, onClose: onClose, onActiveItemChange: onActiveItemChange }));
|
|
40
|
-
}))), bottomItems === null || bottomItems === void 0 ? void 0 :
|
|
41
|
-
bottomItems.map((item) => (React.createElement(NavigationItem, { key: item.text, data: item, className: b('button') })))))));
|
|
42
|
-
};
|
|
43
|
-
export default MobileNavigation;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/* use this for style redefinitions to awoid problems with
|
|
2
|
-
unpredictable css rules order in build */
|
|
3
|
-
.navigation {
|
|
4
|
-
font-size: var(--yc-text-body-2-font-size);
|
|
5
|
-
line-height: var(--yc-text-body-2-line-height);
|
|
6
|
-
}
|
|
7
|
-
.navigation__links {
|
|
8
|
-
position: relative;
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: center;
|
|
11
|
-
margin: 0;
|
|
12
|
-
padding: 0;
|
|
13
|
-
list-style: none;
|
|
14
|
-
}
|
|
15
|
-
.navigation__links-item {
|
|
16
|
-
position: relative;
|
|
17
|
-
height: var(--header-height);
|
|
18
|
-
line-height: var(--header-height);
|
|
19
|
-
cursor: pointer;
|
|
20
|
-
outline: none;
|
|
21
|
-
color: inherit;
|
|
22
|
-
text-decoration: none;
|
|
23
|
-
}
|
|
24
|
-
.utilityfocus .navigation__links-item:focus {
|
|
25
|
-
outline: 2px solid #ffdb4d;
|
|
26
|
-
}
|
|
27
|
-
.navigation__links-item:hover, .navigation__links-item:active {
|
|
28
|
-
color: var(--yc-color-text-link);
|
|
29
|
-
}
|
|
30
|
-
.navigation__links-item:not(:last-child) {
|
|
31
|
-
margin-right: 20px;
|
|
32
|
-
}
|
|
33
|
-
.navigation__slider-container {
|
|
34
|
-
position: absolute;
|
|
35
|
-
right: 0;
|
|
36
|
-
bottom: 0;
|
|
37
|
-
left: 0;
|
|
38
|
-
}
|
|
39
|
-
.navigation__slider {
|
|
40
|
-
width: 100%;
|
|
41
|
-
height: 2px;
|
|
42
|
-
background-color: var(--yc-color-text-link);
|
|
43
|
-
}
|