@doyourjob/gravity-ui-page-constructor-addons 2.1.9 → 2.1.11
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/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/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;
|
|
@@ -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
|
+
};
|
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.11",
|
|
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",
|