@doyourjob/gravity-ui-page-constructor-addons 2.1.35 → 2.1.37
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/components/NewHeader/NewHeader.css +5 -4
- package/build/cjs/components/NewHeader/NewHeader.js +2 -1
- package/build/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.css +24 -0
- package/build/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.d.ts +4 -1
- package/build/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.js +8 -1
- package/build/cjs/components/NewHeader/components/NHMobileNavigationPopup/NHMobileNavigationPopup.css +2 -2
- package/build/esm/components/NewHeader/NewHeader.css +5 -4
- package/build/esm/components/NewHeader/NewHeader.js +2 -1
- package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.css +24 -0
- package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.d.ts +4 -1
- package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.js +8 -1
- package/build/esm/components/NewHeader/components/NHMobileNavigationPopup/NHMobileNavigationPopup.css +2 -2
- package/package.json +1 -1
|
@@ -5,9 +5,6 @@ unpredictable css rules order in build */
|
|
|
5
5
|
--g-color-scroll-handle: var(--g-color-base-generic);
|
|
6
6
|
--g-color-scroll-handle-hover: var(--g-color-line-generic);
|
|
7
7
|
width: 100%;
|
|
8
|
-
position: sticky;
|
|
9
|
-
top: 0;
|
|
10
|
-
z-index: 1001;
|
|
11
8
|
background: var(--pc-transparent);
|
|
12
9
|
}
|
|
13
10
|
|
|
@@ -15,6 +12,11 @@ unpredictable css rules order in build */
|
|
|
15
12
|
background: var(--g-color-base-background);
|
|
16
13
|
}
|
|
17
14
|
|
|
15
|
+
.pc-addons-new-header_is-mobile-opened {
|
|
16
|
+
position: fixed;
|
|
17
|
+
top: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
18
20
|
.pc-addons-new-header__container {
|
|
19
21
|
position: relative;
|
|
20
22
|
width: 100%;
|
|
@@ -39,7 +41,6 @@ unpredictable css rules order in build */
|
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
.pc-addons-new-header__left {
|
|
42
|
-
margin-right: 32px;
|
|
43
44
|
gap: 20px;
|
|
44
45
|
}
|
|
45
46
|
|
|
@@ -52,6 +52,7 @@ const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scr
|
|
|
52
52
|
return (react_1.default.createElement(route_change_1.RouteChangeHandlerContext.Provider, { value: setupRouteChangeHandler },
|
|
53
53
|
react_1.default.createElement("header", { className: b({
|
|
54
54
|
search: isSearchMode,
|
|
55
|
+
'is-mobile-opened': isMobileNavigationOpen,
|
|
55
56
|
'with-background': withBackground || isMobileNavigationOpen,
|
|
56
57
|
}, className), ref: headerRef },
|
|
57
58
|
react_1.default.createElement("div", { className: b('container') },
|
|
@@ -68,6 +69,6 @@ const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scr
|
|
|
68
69
|
showButtonsContainer &&
|
|
69
70
|
(buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => (react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { className: b('button'), size: "l", key: index }))))),
|
|
70
71
|
login && react_1.default.createElement(NHLoginButton_1.NHLoginButton, { data: login, headerRef: headerRef })),
|
|
71
|
-
react_1.default.createElement(NHMobileNavigation_1.NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: data, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })))))));
|
|
72
|
+
react_1.default.createElement(NHMobileNavigation_1.NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: data, onMenuScroll: onMenuScroll, popupClassName: b('user-popup'), renderSearch: renderSearch })))))));
|
|
72
73
|
};
|
|
73
74
|
exports.NewHeader = NewHeader;
|
|
@@ -29,6 +29,30 @@ unpredictable css rules order in build */
|
|
|
29
29
|
display: none;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
.pc-addons-nh-mobile-navigation__header {
|
|
33
|
+
position: sticky;
|
|
34
|
+
top: 0;
|
|
35
|
+
z-index: 1;
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
height: 64px;
|
|
40
|
+
padding: 0 16px;
|
|
41
|
+
background-color: var(--g-color-base-background);
|
|
42
|
+
border-bottom: 1px solid var(--g-color-line-generic);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.pc-addons-nh-mobile-navigation__header-right {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: 8px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.pc-addons-nh-mobile-navigation__search-container {
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
32
56
|
.pc-addons-nh-mobile-navigation__nav {
|
|
33
57
|
display: flex;
|
|
34
58
|
flex-direction: column;
|
package/build/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.d.ts
CHANGED
|
@@ -10,6 +10,9 @@ interface MobileNavigationProps {
|
|
|
10
10
|
popupClassName?: string;
|
|
11
11
|
buttons?: ButtonProps[];
|
|
12
12
|
login?: NHLoginPopupData;
|
|
13
|
+
renderSearch?: (props: {
|
|
14
|
+
onActiveToggle: (isActive: boolean) => void;
|
|
15
|
+
}) => React.ReactNode;
|
|
13
16
|
}
|
|
14
|
-
export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
|
|
17
|
+
export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, renderSearch, }: MobileNavigationProps) => React.JSX.Element;
|
|
15
18
|
export {};
|
|
@@ -7,11 +7,12 @@ const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constr
|
|
|
7
7
|
const icons_1 = require("@gravity-ui/icons");
|
|
8
8
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
9
9
|
const cn_1 = require("../../../../utils/cn");
|
|
10
|
+
const NHLogo_1 = require("../NHLogo/NHLogo");
|
|
10
11
|
const NHMobileNavigationItem_1 = require("../NHMobileNavigationItem/NHMobileNavigationItem");
|
|
11
12
|
const NHMobileNavigationPopup_1 = require("../NHMobileNavigationPopup/NHMobileNavigationPopup");
|
|
12
13
|
const NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
|
|
13
14
|
const b = (0, cn_1.block)('nh-mobile-navigation');
|
|
14
|
-
const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }) => {
|
|
15
|
+
const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, renderSearch, }) => {
|
|
15
16
|
var _a, _b;
|
|
16
17
|
return (react_1.default.createElement("div", { className: b() },
|
|
17
18
|
react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
|
|
@@ -20,6 +21,12 @@ const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuSc
|
|
|
20
21
|
} },
|
|
21
22
|
react_1.default.createElement(uikit_1.Icon, { data: isOpened ? icons_1.Xmark : icons_1.Bars, size: 24 })),
|
|
22
23
|
react_1.default.createElement(NHMobileNavigationPopup_1.NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
|
|
24
|
+
react_1.default.createElement("div", { className: b('header') },
|
|
25
|
+
(data === null || data === void 0 ? void 0 : data.logo) && react_1.default.createElement(NHLogo_1.NHLogo, { data: data.logo }),
|
|
26
|
+
react_1.default.createElement("div", { className: b('header-right') },
|
|
27
|
+
renderSearch && (react_1.default.createElement("div", { className: b('search-container') }, renderSearch({ onActiveToggle: () => { } }))),
|
|
28
|
+
react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('close-button'), onClick: () => toogleOpen(false) },
|
|
29
|
+
react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 24 })))),
|
|
23
30
|
react_1.default.createElement("nav", { className: b('nav') },
|
|
24
31
|
react_1.default.createElement("ul", { className: b('list') }, (_a = data === null || data === void 0 ? void 0 : data.left) === null || _a === void 0 ? void 0 : _a.map((item, index) => (react_1.default.createElement("li", { className: b('item'), key: index },
|
|
25
32
|
react_1.default.createElement(NHMobileNavigationItem_1.NHMobileNavigationItem, { item: item }))))),
|
|
@@ -3,10 +3,10 @@ unpredictable css rules order in build */
|
|
|
3
3
|
.pc-addons-nh-mobile-navigation-popup {
|
|
4
4
|
width: 100%;
|
|
5
5
|
position: fixed;
|
|
6
|
-
top:
|
|
6
|
+
top: 0;
|
|
7
7
|
left: 0;
|
|
8
8
|
z-index: 1000;
|
|
9
|
-
height:
|
|
9
|
+
height: 100vh;
|
|
10
10
|
background-color: var(--g-color-base-background);
|
|
11
11
|
box-shadow: none;
|
|
12
12
|
}
|
|
@@ -5,9 +5,6 @@ unpredictable css rules order in build */
|
|
|
5
5
|
--g-color-scroll-handle: var(--g-color-base-generic);
|
|
6
6
|
--g-color-scroll-handle-hover: var(--g-color-line-generic);
|
|
7
7
|
width: 100%;
|
|
8
|
-
position: sticky;
|
|
9
|
-
top: 0;
|
|
10
|
-
z-index: 1001;
|
|
11
8
|
background: var(--pc-transparent);
|
|
12
9
|
}
|
|
13
10
|
|
|
@@ -15,6 +12,11 @@ unpredictable css rules order in build */
|
|
|
15
12
|
background: var(--g-color-base-background);
|
|
16
13
|
}
|
|
17
14
|
|
|
15
|
+
.pc-addons-new-header_is-mobile-opened {
|
|
16
|
+
position: fixed;
|
|
17
|
+
top: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
18
20
|
.pc-addons-new-header__container {
|
|
19
21
|
position: relative;
|
|
20
22
|
width: 100%;
|
|
@@ -39,7 +41,6 @@ unpredictable css rules order in build */
|
|
|
39
41
|
}
|
|
40
42
|
|
|
41
43
|
.pc-addons-new-header__left {
|
|
42
|
-
margin-right: 32px;
|
|
43
44
|
gap: 20px;
|
|
44
45
|
}
|
|
45
46
|
|
|
@@ -49,6 +49,7 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
|
|
|
49
49
|
return (React.createElement(RouteChangeHandlerContext.Provider, { value: setupRouteChangeHandler },
|
|
50
50
|
React.createElement("header", { className: b({
|
|
51
51
|
search: isSearchMode,
|
|
52
|
+
'is-mobile-opened': isMobileNavigationOpen,
|
|
52
53
|
'with-background': withBackground || isMobileNavigationOpen,
|
|
53
54
|
}, className), ref: headerRef },
|
|
54
55
|
React.createElement("div", { className: b('container') },
|
|
@@ -65,5 +66,5 @@ export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, classNa
|
|
|
65
66
|
showButtonsContainer &&
|
|
66
67
|
(buttons === null || buttons === void 0 ? void 0 : buttons.map((button, index) => (React.createElement(PCButton, Object.assign({}, button, { className: b('button'), size: "l", key: index }))))),
|
|
67
68
|
login && React.createElement(NHLoginButton, { data: login, headerRef: headerRef })),
|
|
68
|
-
React.createElement(NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: data, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })))))));
|
|
69
|
+
React.createElement(NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: data, onMenuScroll: onMenuScroll, popupClassName: b('user-popup'), renderSearch: renderSearch })))))));
|
|
69
70
|
};
|
|
@@ -29,6 +29,30 @@ unpredictable css rules order in build */
|
|
|
29
29
|
display: none;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
.pc-addons-nh-mobile-navigation__header {
|
|
33
|
+
position: sticky;
|
|
34
|
+
top: 0;
|
|
35
|
+
z-index: 1;
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
height: 64px;
|
|
40
|
+
padding: 0 16px;
|
|
41
|
+
background-color: var(--g-color-base-background);
|
|
42
|
+
border-bottom: 1px solid var(--g-color-line-generic);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.pc-addons-nh-mobile-navigation__header-right {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: 8px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.pc-addons-nh-mobile-navigation__search-container {
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
32
56
|
.pc-addons-nh-mobile-navigation__nav {
|
|
33
57
|
display: flex;
|
|
34
58
|
flex-direction: column;
|
package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.d.ts
CHANGED
|
@@ -11,6 +11,9 @@ interface MobileNavigationProps {
|
|
|
11
11
|
popupClassName?: string;
|
|
12
12
|
buttons?: ButtonProps[];
|
|
13
13
|
login?: NHLoginPopupData;
|
|
14
|
+
renderSearch?: (props: {
|
|
15
|
+
onActiveToggle: (isActive: boolean) => void;
|
|
16
|
+
}) => React.ReactNode;
|
|
14
17
|
}
|
|
15
|
-
export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
|
|
18
|
+
export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, renderSearch, }: MobileNavigationProps) => React.JSX.Element;
|
|
16
19
|
export {};
|
|
@@ -3,12 +3,13 @@ import { Button as PCButton } from '@doyourjob/gravity-ui-page-constructor';
|
|
|
3
3
|
import { Bars, Xmark } from '@gravity-ui/icons';
|
|
4
4
|
import { Button, Icon } from '@gravity-ui/uikit';
|
|
5
5
|
import { block } from '../../../../utils/cn';
|
|
6
|
+
import { NHLogo } from '../NHLogo/NHLogo';
|
|
6
7
|
import { NHMobileNavigationItem } from '../NHMobileNavigationItem/NHMobileNavigationItem';
|
|
7
8
|
import { NHMobileNavigationPopup } from '../NHMobileNavigationPopup/NHMobileNavigationPopup';
|
|
8
9
|
import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
|
|
9
10
|
import './NHMobileNavigation.css';
|
|
10
11
|
const b = block('nh-mobile-navigation');
|
|
11
|
-
export const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, }) => {
|
|
12
|
+
export const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, onMenuScroll, renderSearch, }) => {
|
|
12
13
|
var _a, _b;
|
|
13
14
|
return (React.createElement("div", { className: b() },
|
|
14
15
|
React.createElement(Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
|
|
@@ -17,6 +18,12 @@ export const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, o
|
|
|
17
18
|
} },
|
|
18
19
|
React.createElement(Icon, { data: isOpened ? Xmark : Bars, size: 24 })),
|
|
19
20
|
React.createElement(NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
|
|
21
|
+
React.createElement("div", { className: b('header') },
|
|
22
|
+
(data === null || data === void 0 ? void 0 : data.logo) && React.createElement(NHLogo, { data: data.logo }),
|
|
23
|
+
React.createElement("div", { className: b('header-right') },
|
|
24
|
+
renderSearch && (React.createElement("div", { className: b('search-container') }, renderSearch({ onActiveToggle: () => { } }))),
|
|
25
|
+
React.createElement(Button, { view: "flat", size: "l", className: b('close-button'), onClick: () => toogleOpen(false) },
|
|
26
|
+
React.createElement(Icon, { data: Xmark, size: 24 })))),
|
|
20
27
|
React.createElement("nav", { className: b('nav') },
|
|
21
28
|
React.createElement("ul", { className: b('list') }, (_a = data === null || data === void 0 ? void 0 : data.left) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React.createElement("li", { className: b('item'), key: index },
|
|
22
29
|
React.createElement(NHMobileNavigationItem, { item: item }))))),
|
|
@@ -3,10 +3,10 @@ unpredictable css rules order in build */
|
|
|
3
3
|
.pc-addons-nh-mobile-navigation-popup {
|
|
4
4
|
width: 100%;
|
|
5
5
|
position: fixed;
|
|
6
|
-
top:
|
|
6
|
+
top: 0;
|
|
7
7
|
left: 0;
|
|
8
8
|
z-index: 1000;
|
|
9
|
-
height:
|
|
9
|
+
height: 100vh;
|
|
10
10
|
background-color: var(--g-color-base-background);
|
|
11
11
|
box-shadow: none;
|
|
12
12
|
}
|