@doyourjob/gravity-ui-page-constructor-addons 2.1.9 → 2.1.12
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/HeaderStripe/HeaderStripe.css +78 -0
- package/build/cjs/components/HeaderStripe/HeaderStripe.d.ts +18 -0
- package/build/cjs/components/HeaderStripe/HeaderStripe.js +72 -0
- package/build/cjs/components/Navigation/components/Navigation/Navigation.js +1 -1
- package/build/cjs/components/index.d.ts +1 -0
- package/build/cjs/components/index.js +1 -0
- package/build/esm/components/HeaderStripe/HeaderStripe.css +78 -0
- package/build/esm/components/HeaderStripe/HeaderStripe.d.ts +19 -0
- package/build/esm/components/HeaderStripe/HeaderStripe.js +68 -0
- package/build/esm/components/Navigation/components/Navigation/Navigation.js +1 -1
- package/build/esm/components/index.d.ts +1 -0
- package/build/esm/components/index.js +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
|
2
|
+
unpredictable css rules order in build */
|
|
3
|
+
.pc-addons-header-stripe__root {
|
|
4
|
+
z-index: calc(var(--pc-addons-navigation-popup-z-index) + 1);
|
|
5
|
+
width: 100%;
|
|
6
|
+
color: var(--g-color-text-brand-contrast);
|
|
7
|
+
background-color: var(--g-color-base-brand);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.pc-addons-header-stripe__root_only-desktop {
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@media (min-width: 769px) {
|
|
15
|
+
.pc-addons-header-stripe__root_only-desktop {
|
|
16
|
+
display: block;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
.pc-addons-header-stripe__content {
|
|
20
|
+
position: relative;
|
|
21
|
+
display: flex;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
align-items: center;
|
|
24
|
+
height: 56px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@media (min-width: 769px) {
|
|
28
|
+
.pc-addons-header-stripe__content {
|
|
29
|
+
height: 36px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
.pc-addons-header-stripe__item {
|
|
33
|
+
position: absolute;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
width: 100%;
|
|
36
|
+
max-width: 100%;
|
|
37
|
+
font-size: var(--g-text-body-1-font-size);
|
|
38
|
+
font-weight: 500;
|
|
39
|
+
line-height: 20px;
|
|
40
|
+
text-align: center;
|
|
41
|
+
opacity: 0;
|
|
42
|
+
transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
|
43
|
+
transform: translateY(-100%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.pc-addons-header-stripe__item a {
|
|
47
|
+
color: inherit;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.pc-addons-header-stripe__item_active {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
transform: translateY(0);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.pc-addons-header-stripe__item_prev {
|
|
56
|
+
transform: translateY(100%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pc-addons-header-stripe__item-content {
|
|
60
|
+
display: -webkit-box;
|
|
61
|
+
-webkit-box-orient: vertical;
|
|
62
|
+
-webkit-line-clamp: 2;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
max-height: 40px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@media (min-width: 769px) {
|
|
68
|
+
.pc-addons-header-stripe__item-content {
|
|
69
|
+
display: block;
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
text-overflow: ellipsis;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
.pc-addons-header-stripe__item-link {
|
|
75
|
+
display: block;
|
|
76
|
+
width: 100%;
|
|
77
|
+
text-decoration: none;
|
|
78
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type HeaderStripeItemType = {
|
|
3
|
+
text: string;
|
|
4
|
+
link?: string;
|
|
5
|
+
target?: string;
|
|
6
|
+
onlyDesktop?: boolean;
|
|
7
|
+
} | string;
|
|
8
|
+
export type HeaderStripeProps = {
|
|
9
|
+
duration?: number;
|
|
10
|
+
background?: string;
|
|
11
|
+
backgroundImage?: string;
|
|
12
|
+
textColor?: string;
|
|
13
|
+
items: HeaderStripeItemType[];
|
|
14
|
+
onlyDesktop?: boolean;
|
|
15
|
+
isAbsolute?: boolean;
|
|
16
|
+
};
|
|
17
|
+
export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, }: HeaderStripeProps) => React.JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.HeaderStripe = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
+
const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
|
|
7
|
+
const uikit_1 = require("@gravity-ui/uikit");
|
|
8
|
+
const cn_1 = require("../../utils/cn");
|
|
9
|
+
const b = (0, cn_1.block)('header-stripe');
|
|
10
|
+
const renderItemContent = (item) => {
|
|
11
|
+
if (typeof item === 'string') {
|
|
12
|
+
return item;
|
|
13
|
+
}
|
|
14
|
+
else if (item.link) {
|
|
15
|
+
return (react_1.default.createElement("a", { className: b('item-link'), href: item.link, target: item.target }, item.text));
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
return item.text;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, }) => {
|
|
22
|
+
const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
|
|
23
|
+
const isMobile = (0, uikit_1.useMobile)();
|
|
24
|
+
const filteredItems = (0, react_1.useMemo)(() => isMobile
|
|
25
|
+
? items.filter((item) => (typeof item === 'object' ? !item.onlyDesktop : true))
|
|
26
|
+
: items, [items, isMobile]);
|
|
27
|
+
(0, react_1.useEffect)(() => {
|
|
28
|
+
if (filteredItems.length > 0) {
|
|
29
|
+
setActiveIndex(0);
|
|
30
|
+
}
|
|
31
|
+
}, [filteredItems.length]);
|
|
32
|
+
(0, react_1.useEffect)(() => {
|
|
33
|
+
if (filteredItems.length < 1)
|
|
34
|
+
return undefined;
|
|
35
|
+
const interval = setInterval(() => {
|
|
36
|
+
setActiveIndex((prevIndex) => (prevIndex + 1) % filteredItems.length);
|
|
37
|
+
}, duration);
|
|
38
|
+
return () => {
|
|
39
|
+
clearInterval(interval);
|
|
40
|
+
};
|
|
41
|
+
}, [duration, filteredItems.length]);
|
|
42
|
+
const rootStyle = (0, react_1.useMemo)(() => {
|
|
43
|
+
const properties = {};
|
|
44
|
+
if (background) {
|
|
45
|
+
properties.background = background;
|
|
46
|
+
}
|
|
47
|
+
if (backgroundImage) {
|
|
48
|
+
properties.backgroundImage = `url("${backgroundImage}")`;
|
|
49
|
+
}
|
|
50
|
+
if (textColor) {
|
|
51
|
+
properties.color = textColor;
|
|
52
|
+
}
|
|
53
|
+
return properties;
|
|
54
|
+
}, [textColor, background, backgroundImage]);
|
|
55
|
+
return (react_1.default.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop }), style: rootStyle },
|
|
56
|
+
react_1.default.createElement(gravity_ui_page_constructor_1.Grid, null,
|
|
57
|
+
react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
|
|
58
|
+
react_1.default.createElement("div", { className: b('content') }, filteredItems.map((item, index) => {
|
|
59
|
+
const isActive = index === activeIndex;
|
|
60
|
+
const isPrev = filteredItems.length > 1 &&
|
|
61
|
+
index ===
|
|
62
|
+
(activeIndex === 0
|
|
63
|
+
? filteredItems.length - 1
|
|
64
|
+
: activeIndex - 1);
|
|
65
|
+
return (react_1.default.createElement("div", { key: String(index), className: b('item', {
|
|
66
|
+
active: isActive,
|
|
67
|
+
prev: isPrev,
|
|
68
|
+
}) },
|
|
69
|
+
react_1.default.createElement("div", { className: b('item-content') }, renderItemContent(item))));
|
|
70
|
+
}))))));
|
|
71
|
+
};
|
|
72
|
+
exports.HeaderStripe = HeaderStripe;
|
|
@@ -42,7 +42,7 @@ const Navigation = ({ data, headerRef, handleOpenPopup, handleClosePopup, withBa
|
|
|
42
42
|
if (event.key === 'Escape') {
|
|
43
43
|
setActiveTab(constants_1.NO_MENU_TAB_SELECTED);
|
|
44
44
|
setPretendentAciveTab(constants_1.NO_MENU_TAB_SELECTED);
|
|
45
|
-
previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus();
|
|
45
|
+
previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
|
|
46
46
|
}
|
|
47
47
|
}, [previouslyFocusedElement]);
|
|
48
48
|
(0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
|
|
@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
tslib_1.__exportStar(require("./EnrichedLink/EnrichedLink"), exports);
|
|
5
5
|
tslib_1.__exportStar(require("./Navigation"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./HeaderStripe/HeaderStripe"), exports);
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
|
2
|
+
unpredictable css rules order in build */
|
|
3
|
+
.pc-addons-header-stripe__root {
|
|
4
|
+
z-index: calc(var(--pc-addons-navigation-popup-z-index) + 1);
|
|
5
|
+
width: 100%;
|
|
6
|
+
color: var(--g-color-text-brand-contrast);
|
|
7
|
+
background-color: var(--g-color-base-brand);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.pc-addons-header-stripe__root_only-desktop {
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@media (min-width: 769px) {
|
|
15
|
+
.pc-addons-header-stripe__root_only-desktop {
|
|
16
|
+
display: block;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
.pc-addons-header-stripe__content {
|
|
20
|
+
position: relative;
|
|
21
|
+
display: flex;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
align-items: center;
|
|
24
|
+
height: 56px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@media (min-width: 769px) {
|
|
28
|
+
.pc-addons-header-stripe__content {
|
|
29
|
+
height: 36px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
.pc-addons-header-stripe__item {
|
|
33
|
+
position: absolute;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
width: 100%;
|
|
36
|
+
max-width: 100%;
|
|
37
|
+
font-size: var(--g-text-body-1-font-size);
|
|
38
|
+
font-weight: 500;
|
|
39
|
+
line-height: 20px;
|
|
40
|
+
text-align: center;
|
|
41
|
+
opacity: 0;
|
|
42
|
+
transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
|
|
43
|
+
transform: translateY(-100%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.pc-addons-header-stripe__item a {
|
|
47
|
+
color: inherit;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.pc-addons-header-stripe__item_active {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
transform: translateY(0);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.pc-addons-header-stripe__item_prev {
|
|
56
|
+
transform: translateY(100%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.pc-addons-header-stripe__item-content {
|
|
60
|
+
display: -webkit-box;
|
|
61
|
+
-webkit-box-orient: vertical;
|
|
62
|
+
-webkit-line-clamp: 2;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
max-height: 40px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@media (min-width: 769px) {
|
|
68
|
+
.pc-addons-header-stripe__item-content {
|
|
69
|
+
display: block;
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
text-overflow: ellipsis;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
.pc-addons-header-stripe__item-link {
|
|
75
|
+
display: block;
|
|
76
|
+
width: 100%;
|
|
77
|
+
text-decoration: none;
|
|
78
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './HeaderStripe.css';
|
|
3
|
+
type HeaderStripeItemType = {
|
|
4
|
+
text: string;
|
|
5
|
+
link?: string;
|
|
6
|
+
target?: string;
|
|
7
|
+
onlyDesktop?: boolean;
|
|
8
|
+
} | string;
|
|
9
|
+
export type HeaderStripeProps = {
|
|
10
|
+
duration?: number;
|
|
11
|
+
background?: string;
|
|
12
|
+
backgroundImage?: string;
|
|
13
|
+
textColor?: string;
|
|
14
|
+
items: HeaderStripeItemType[];
|
|
15
|
+
onlyDesktop?: boolean;
|
|
16
|
+
isAbsolute?: boolean;
|
|
17
|
+
};
|
|
18
|
+
export declare const HeaderStripe: ({ duration, items, textColor, background, backgroundImage, onlyDesktop, }: HeaderStripeProps) => React.JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
2
|
+
import { Col, Grid } from '@doyourjob/gravity-ui-page-constructor';
|
|
3
|
+
import { useMobile } from '@gravity-ui/uikit';
|
|
4
|
+
import { block } from '../../utils/cn';
|
|
5
|
+
import './HeaderStripe.css';
|
|
6
|
+
const b = block('header-stripe');
|
|
7
|
+
const renderItemContent = (item) => {
|
|
8
|
+
if (typeof item === 'string') {
|
|
9
|
+
return item;
|
|
10
|
+
}
|
|
11
|
+
else if (item.link) {
|
|
12
|
+
return (React.createElement("a", { className: b('item-link'), href: item.link, target: item.target }, item.text));
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
return item.text;
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
export const HeaderStripe = ({ duration = 8000, items, textColor, background, backgroundImage, onlyDesktop, }) => {
|
|
19
|
+
const [activeIndex, setActiveIndex] = useState(0);
|
|
20
|
+
const isMobile = useMobile();
|
|
21
|
+
const filteredItems = useMemo(() => isMobile
|
|
22
|
+
? items.filter((item) => (typeof item === 'object' ? !item.onlyDesktop : true))
|
|
23
|
+
: items, [items, isMobile]);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (filteredItems.length > 0) {
|
|
26
|
+
setActiveIndex(0);
|
|
27
|
+
}
|
|
28
|
+
}, [filteredItems.length]);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (filteredItems.length < 1)
|
|
31
|
+
return undefined;
|
|
32
|
+
const interval = setInterval(() => {
|
|
33
|
+
setActiveIndex((prevIndex) => (prevIndex + 1) % filteredItems.length);
|
|
34
|
+
}, duration);
|
|
35
|
+
return () => {
|
|
36
|
+
clearInterval(interval);
|
|
37
|
+
};
|
|
38
|
+
}, [duration, filteredItems.length]);
|
|
39
|
+
const rootStyle = useMemo(() => {
|
|
40
|
+
const properties = {};
|
|
41
|
+
if (background) {
|
|
42
|
+
properties.background = background;
|
|
43
|
+
}
|
|
44
|
+
if (backgroundImage) {
|
|
45
|
+
properties.backgroundImage = `url("${backgroundImage}")`;
|
|
46
|
+
}
|
|
47
|
+
if (textColor) {
|
|
48
|
+
properties.color = textColor;
|
|
49
|
+
}
|
|
50
|
+
return properties;
|
|
51
|
+
}, [textColor, background, backgroundImage]);
|
|
52
|
+
return (React.createElement("div", { className: b('root', { 'only-desktop': onlyDesktop }), style: rootStyle },
|
|
53
|
+
React.createElement(Grid, null,
|
|
54
|
+
React.createElement(Col, null,
|
|
55
|
+
React.createElement("div", { className: b('content') }, filteredItems.map((item, index) => {
|
|
56
|
+
const isActive = index === activeIndex;
|
|
57
|
+
const isPrev = filteredItems.length > 1 &&
|
|
58
|
+
index ===
|
|
59
|
+
(activeIndex === 0
|
|
60
|
+
? filteredItems.length - 1
|
|
61
|
+
: activeIndex - 1);
|
|
62
|
+
return (React.createElement("div", { key: String(index), className: b('item', {
|
|
63
|
+
active: isActive,
|
|
64
|
+
prev: isPrev,
|
|
65
|
+
}) },
|
|
66
|
+
React.createElement("div", { className: b('item-content') }, renderItemContent(item))));
|
|
67
|
+
}))))));
|
|
68
|
+
};
|
|
@@ -39,7 +39,7 @@ export const Navigation = ({ data, headerRef, handleOpenPopup, handleClosePopup,
|
|
|
39
39
|
if (event.key === 'Escape') {
|
|
40
40
|
setActiveTab(NO_MENU_TAB_SELECTED);
|
|
41
41
|
setPretendentAciveTab(NO_MENU_TAB_SELECTED);
|
|
42
|
-
previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus();
|
|
42
|
+
previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
|
|
43
43
|
}
|
|
44
44
|
}, [previouslyFocusedElement]);
|
|
45
45
|
useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@doyourjob/gravity-ui-page-constructor-addons",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.12",
|
|
4
4
|
"description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -89,7 +89,6 @@
|
|
|
89
89
|
"@gravity-ui/uikit": "^6.23.1",
|
|
90
90
|
"@storybook/addon-actions": "^7.1.0",
|
|
91
91
|
"@storybook/addon-essentials": "^7.1.0",
|
|
92
|
-
"@storybook/addon-knobs": "^7.0.2",
|
|
93
92
|
"@storybook/addon-viewport": "^7.1.0",
|
|
94
93
|
"@storybook/preset-scss": "^1.0.3",
|
|
95
94
|
"@storybook/react": "^7.1.0",
|
|
@@ -101,6 +100,7 @@
|
|
|
101
100
|
"@types/lodash": "^4.14.176",
|
|
102
101
|
"@types/react": "^18.0.27",
|
|
103
102
|
"@types/react-dom": "^18.0.10",
|
|
103
|
+
"@types/react-transition-group": "^4.4.12",
|
|
104
104
|
"@types/webpack-env": "^1.18.1",
|
|
105
105
|
"es5-ext": "0.10.53",
|
|
106
106
|
"eslint": "^8.34.0",
|