@alfalab/core-components-modal 5.3.0 → 5.4.0
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/Component-12cb5541.d.ts +50 -0
- package/Component-12cb5541.js +43 -0
- package/Component.desktop.js +3 -3
- package/Component.mobile.js +3 -3
- package/Component.responsive.js +3 -3
- package/components/closer/Component.d.ts +4 -0
- package/components/closer/Component.js +3 -3
- package/components/content/Component.desktop.js +1 -1
- package/components/content/Component.mobile.js +1 -1
- package/components/footer/Component.desktop.js +1 -1
- package/components/footer/Component.mobile.js +1 -1
- package/components/header/Component.d.ts +0 -45
- package/components/header/Component.desktop.d.ts +1 -1
- package/components/header/Component.desktop.js +4 -4
- package/components/header/Component.js +5 -32
- package/components/header/Component.mobile.d.ts +1 -1
- package/components/header/Component.mobile.js +4 -4
- package/cssm/Component-5fe52731.d.ts +50 -0
- package/cssm/Component-5fe52731.js +42 -0
- package/cssm/Component.desktop.js +1 -1
- package/cssm/Component.mobile.js +1 -1
- package/cssm/Component.responsive.js +1 -1
- package/cssm/components/closer/Component.d.ts +4 -0
- package/cssm/components/closer/Component.js +2 -2
- package/cssm/components/header/Component.d.ts +0 -45
- package/cssm/components/header/Component.desktop.d.ts +1 -1
- package/cssm/components/header/Component.desktop.js +3 -3
- package/cssm/components/header/Component.js +6 -31
- package/cssm/components/header/Component.mobile.d.ts +1 -1
- package/cssm/components/header/Component.mobile.js +3 -3
- package/cssm/desktop.js +1 -1
- package/cssm/getDataTestId-3fe0d3e6.d.ts +2 -0
- package/cssm/index.js +1 -1
- package/cssm/mobile.js +1 -1
- package/cssm/responsive.js +1 -1
- package/desktop.js +3 -3
- package/esm/Component-e546d8c5.d.ts +50 -0
- package/esm/Component-e546d8c5.js +35 -0
- package/esm/Component.desktop.js +3 -3
- package/esm/Component.mobile.js +3 -3
- package/esm/Component.responsive.d.ts +1 -1
- package/esm/Component.responsive.js +3 -3
- package/esm/components/closer/Component.d.ts +4 -0
- package/esm/components/closer/Component.js +3 -3
- package/esm/components/content/Component.desktop.js +1 -1
- package/esm/components/content/Component.mobile.js +1 -1
- package/esm/components/footer/Component.desktop.js +1 -1
- package/esm/components/footer/Component.mobile.js +1 -1
- package/esm/components/header/Component.d.ts +0 -45
- package/esm/components/header/Component.desktop.d.ts +1 -1
- package/esm/components/header/Component.desktop.js +4 -4
- package/esm/components/header/Component.js +4 -30
- package/esm/components/header/Component.mobile.d.ts +1 -1
- package/esm/components/header/Component.mobile.js +4 -4
- package/esm/desktop.js +3 -3
- package/esm/getDataTestId-3fe0d3e6.d.ts +2 -0
- package/esm/index.js +3 -3
- package/esm/mobile.js +3 -3
- package/esm/responsive.js +3 -3
- package/esm/{transitions.module-48ce371b.js → transitions.module-246cce05.js} +0 -0
- package/esm/{tslib.es6-58151049.d.ts → tslib.es6-c7c6d75c.d.ts} +0 -0
- package/esm/{tslib.es6-58151049.js → tslib.es6-c7c6d75c.js} +0 -0
- package/getDataTestId-3fe0d3e6.d.ts +2 -0
- package/index.js +3 -3
- package/mobile.js +3 -3
- package/modern/Component-d3db43e2.d.ts +50 -0
- package/modern/Component-d3db43e2.js +33 -0
- package/modern/Component.desktop.js +2 -2
- package/modern/Component.mobile.js +2 -2
- package/modern/Component.responsive.d.ts +1 -1
- package/modern/Component.responsive.js +2 -2
- package/modern/components/closer/Component.d.ts +4 -0
- package/modern/components/closer/Component.js +2 -2
- package/modern/components/header/Component.d.ts +0 -45
- package/modern/components/header/Component.desktop.d.ts +1 -1
- package/modern/components/header/Component.desktop.js +3 -3
- package/modern/components/header/Component.js +4 -28
- package/modern/components/header/Component.mobile.d.ts +1 -1
- package/modern/components/header/Component.mobile.js +3 -3
- package/modern/desktop.js +2 -2
- package/modern/getDataTestId-3fe0d3e6.d.ts +2 -0
- package/modern/index.js +2 -2
- package/modern/mobile.js +2 -2
- package/modern/responsive.js +2 -2
- package/modern/{transitions.module-48ce371b.js → transitions.module-246cce05.js} +0 -0
- package/package.json +1 -1
- package/responsive.js +3 -3
- package/{transitions.module-599e6d7b.js → transitions.module-e148225b.js} +0 -0
- package/{tslib.es6-a88e5aa4.d.ts → tslib.es6-2d094523.d.ts} +0 -0
- package/{tslib.es6-a88e5aa4.js → tslib.es6-2d094523.js} +0 -0
- package/CHANGELOG.md +0 -663
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
type HeaderProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Контент шапки
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Слот слева
|
|
9
|
+
*/
|
|
10
|
+
leftAddons?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Компонент крестика
|
|
13
|
+
*/
|
|
14
|
+
closer?: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Дополнительный класс
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Дополнительный класс для аддонов
|
|
21
|
+
*/
|
|
22
|
+
addonClassName?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Дополнительный класс для контента
|
|
25
|
+
*/
|
|
26
|
+
contentClassName?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Заголовок шапки
|
|
29
|
+
*/
|
|
30
|
+
title?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Выравнивание заголовка
|
|
33
|
+
*/
|
|
34
|
+
align?: 'left' | 'center';
|
|
35
|
+
/**
|
|
36
|
+
* Обрезать ли заголовок
|
|
37
|
+
*/
|
|
38
|
+
trim?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Фиксирует шапку
|
|
41
|
+
*/
|
|
42
|
+
sticky?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
45
|
+
*/
|
|
46
|
+
dataTestId?: string;
|
|
47
|
+
};
|
|
48
|
+
declare const Header: FC<HeaderProps>;
|
|
49
|
+
export * from "./getDataTestId-3fe0d3e6";
|
|
50
|
+
export { HeaderProps, Header };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var cn = require('classnames');
|
|
5
|
+
var Context = require('./Context.js');
|
|
6
|
+
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
+
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
10
|
+
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
11
|
+
|
|
12
|
+
var getDataTestId = function (dataTestId, element) {
|
|
13
|
+
var elementPart = element ? "-" + element.toLowerCase() : '';
|
|
14
|
+
return dataTestId ? "" + dataTestId + elementPart : undefined;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
var styles = {"header":"modal__header_1f3yh","hasContent":"modal__hasContent_1f3yh","highlighted":"modal__highlighted_1f3yh","sticky":"modal__sticky_1f3yh","content":"modal__content_1f3yh","title":"modal__title_1f3yh","addon":"modal__addon_1f3yh","closer":"modal__closer_1f3yh","left":"modal__left_1f3yh","center":"modal__center_1f3yh","right":"modal__right_1f3yh","trim":"modal__trim_1f3yh"};
|
|
18
|
+
require('./components/header/index.css')
|
|
19
|
+
|
|
20
|
+
var Header = function (_a) {
|
|
21
|
+
var _b, _c;
|
|
22
|
+
var className = _a.className, addonClassName = _a.addonClassName, contentClassName = _a.contentClassName, leftAddons = _a.leftAddons, children = _a.children, _d = _a.align, align = _d === void 0 ? 'left' : _d, _e = _a.trim, trim = _e === void 0 ? true : _e, title = _a.title, closer = _a.closer, sticky = _a.sticky, dataTestId = _a.dataTestId;
|
|
23
|
+
var _f = React.useContext(Context.ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
|
|
24
|
+
var hasContent = title || Boolean(children);
|
|
25
|
+
React.useEffect(function () {
|
|
26
|
+
setHasHeader(true);
|
|
27
|
+
}, [setHasHeader]);
|
|
28
|
+
return (React__default['default'].createElement("div", { className: cn__default['default'](styles.header, className, (_b = {},
|
|
29
|
+
_b[styles.highlighted] = hasContent && sticky && headerHighlighted,
|
|
30
|
+
_b[styles.sticky] = sticky,
|
|
31
|
+
_b[styles.hasContent] = hasContent,
|
|
32
|
+
_b)), "data-test-id": getDataTestId(dataTestId) },
|
|
33
|
+
leftAddons && React__default['default'].createElement("div", { className: cn__default['default'](styles.addon, addonClassName) }, leftAddons),
|
|
34
|
+
hasContent && (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, contentClassName, styles[align], (_c = {},
|
|
35
|
+
_c[styles.trim] = trim,
|
|
36
|
+
_c)) },
|
|
37
|
+
children,
|
|
38
|
+
title && (React__default['default'].createElement("div", { className: styles.title, "data-test-id": getDataTestId(dataTestId, 'title') }, title)))),
|
|
39
|
+
closer && (React__default['default'].createElement("div", { className: cn__default['default'](styles.addon, styles.closer, addonClassName) }, closer))));
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
exports.Header = Header;
|
|
43
|
+
exports.getDataTestId = getDataTestId;
|
package/Component.desktop.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('./tslib.es6-
|
|
5
|
+
var tslib_es6 = require('./tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
|
|
9
9
|
var mergeRefs = require('react-merge-refs');
|
|
10
10
|
require('./Context.js');
|
|
11
|
-
require('./
|
|
11
|
+
require('./Component-12cb5541.js');
|
|
12
12
|
require('@alfalab/core-components-icon-button');
|
|
13
13
|
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
14
14
|
var components_closer_Component = require('./components/closer/Component.js');
|
|
@@ -17,7 +17,7 @@ require('./components/content/Component.js');
|
|
|
17
17
|
var components_content_Component_desktop = require('./components/content/Component.desktop.js');
|
|
18
18
|
require('./components/footer/Component.js');
|
|
19
19
|
var components_footer_Component_desktop = require('./components/footer/Component.desktop.js');
|
|
20
|
-
var transitions_module = require('./transitions.module-
|
|
20
|
+
var transitions_module = require('./transitions.module-e148225b.js');
|
|
21
21
|
|
|
22
22
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
23
|
|
package/Component.mobile.js
CHANGED
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('./tslib.es6-
|
|
5
|
+
var tslib_es6 = require('./tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
|
|
9
9
|
require('./Context.js');
|
|
10
|
-
require('./
|
|
10
|
+
require('./Component-12cb5541.js');
|
|
11
11
|
require('@alfalab/core-components-icon-button');
|
|
12
12
|
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
13
13
|
var components_closer_Component = require('./components/closer/Component.js');
|
|
14
14
|
require('./components/content/Component.js');
|
|
15
15
|
require('./components/footer/Component.js');
|
|
16
|
-
var transitions_module = require('./transitions.module-
|
|
16
|
+
var transitions_module = require('./transitions.module-e148225b.js');
|
|
17
17
|
require('@alfalab/icons-glyph/CrossMIcon');
|
|
18
18
|
var components_header_Component_mobile = require('./components/header/Component.mobile.js');
|
|
19
19
|
var components_content_Component_mobile = require('./components/content/Component.mobile.js');
|
package/Component.responsive.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('./tslib.es6-
|
|
5
|
+
var tslib_es6 = require('./tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
require('classnames');
|
|
8
8
|
require('@alfalab/core-components-base-modal');
|
|
9
9
|
require('react-merge-refs');
|
|
10
10
|
require('./Context.js');
|
|
11
|
-
require('./
|
|
11
|
+
require('./Component-12cb5541.js');
|
|
12
12
|
require('@alfalab/core-components-icon-button');
|
|
13
13
|
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
14
14
|
var components_closer_Component = require('./components/closer/Component.js');
|
|
@@ -18,7 +18,7 @@ require('./components/content/Component.desktop.js');
|
|
|
18
18
|
require('./components/footer/Component.js');
|
|
19
19
|
require('./components/footer/Component.desktop.js');
|
|
20
20
|
var Component_desktop = require('./Component.desktop.js');
|
|
21
|
-
require('./transitions.module-
|
|
21
|
+
require('./transitions.module-e148225b.js');
|
|
22
22
|
require('@alfalab/icons-glyph/CrossMIcon');
|
|
23
23
|
require('./components/header/Component.mobile.js');
|
|
24
24
|
require('./components/content/Component.mobile.js');
|
|
@@ -21,6 +21,10 @@ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
|
21
21
|
* Иконка
|
|
22
22
|
*/
|
|
23
23
|
icon?: ElementType;
|
|
24
|
+
/**
|
|
25
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
26
|
+
*/
|
|
27
|
+
dataTestId?: string;
|
|
24
28
|
};
|
|
25
29
|
/**
|
|
26
30
|
* @deprecated Компонент только для внутреннего использования. Используйте <Header />
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-
|
|
5
|
+
var tslib_es6 = require('../../tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
require('@alfalab/core-components-base-modal');
|
|
@@ -23,7 +23,7 @@ require('./index.css')
|
|
|
23
23
|
*/
|
|
24
24
|
var Closer = function (_a) {
|
|
25
25
|
var _b;
|
|
26
|
-
var className = _a.className, _c = _a.size, size = _c === void 0 ? 's' : _c, sticky = _a.sticky, _d = _a.icon, icon = _d === void 0 ? CrossHeavyMIcon.CrossHeavyMIcon : _d, restProps = tslib_es6.__rest(_a, ["className", "size", "sticky", "icon"]);
|
|
26
|
+
var className = _a.className, _c = _a.size, size = _c === void 0 ? 's' : _c, sticky = _a.sticky, _d = _a.icon, icon = _d === void 0 ? CrossHeavyMIcon.CrossHeavyMIcon : _d, dataTestId = _a.dataTestId, restProps = tslib_es6.__rest(_a, ["className", "size", "sticky", "icon", "dataTestId"]);
|
|
27
27
|
var onClose = React.useContext(Context.ModalContext).onClose;
|
|
28
28
|
var handleClick = React.useCallback(function (event) {
|
|
29
29
|
onClose(event, 'closerClick');
|
|
@@ -31,7 +31,7 @@ var Closer = function (_a) {
|
|
|
31
31
|
return (React__default['default'].createElement("div", { className: cn__default['default'](styles.closer, className, (_b = {},
|
|
32
32
|
_b[styles.sticky] = sticky,
|
|
33
33
|
_b)) },
|
|
34
|
-
React__default['default'].createElement(coreComponentsIconButton.IconButton, tslib_es6.__assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
|
|
34
|
+
React__default['default'].createElement(coreComponentsIconButton.IconButton, tslib_es6.__assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon, dataTestId: dataTestId }, restProps))));
|
|
35
35
|
};
|
|
36
36
|
|
|
37
37
|
exports.Closer = Closer;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-
|
|
5
|
+
var tslib_es6 = require('../../tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
require('@alfalab/core-components-base-modal');
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-
|
|
5
|
+
var tslib_es6 = require('../../tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
require('@alfalab/core-components-base-modal');
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-
|
|
5
|
+
var tslib_es6 = require('../../tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
require('@alfalab/core-components-base-modal');
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-
|
|
5
|
+
var tslib_es6 = require('../../tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
require('@alfalab/core-components-base-modal');
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
|
2
|
-
type HeaderProps = {
|
|
3
|
-
/**
|
|
4
|
-
* Контент шапки
|
|
5
|
-
*/
|
|
6
|
-
children?: ReactNode;
|
|
7
|
-
/**
|
|
8
|
-
* Слот слева
|
|
9
|
-
*/
|
|
10
|
-
leftAddons?: ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Компонент крестика
|
|
13
|
-
*/
|
|
14
|
-
closer?: ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* Дополнительный класс
|
|
17
|
-
*/
|
|
18
|
-
className?: string;
|
|
19
|
-
/**
|
|
20
|
-
* Дополнительный класс для аддонов
|
|
21
|
-
*/
|
|
22
|
-
addonClassName?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Дополнительный класс для контента
|
|
25
|
-
*/
|
|
26
|
-
contentClassName?: string;
|
|
27
|
-
/**
|
|
28
|
-
* Заголовок шапки
|
|
29
|
-
*/
|
|
30
|
-
title?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Выравнивание заголовка
|
|
33
|
-
*/
|
|
34
|
-
align?: 'left' | 'center';
|
|
35
|
-
/**
|
|
36
|
-
* Обрезать ли заголовок
|
|
37
|
-
*/
|
|
38
|
-
trim?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* Фиксирует шапку
|
|
41
|
-
*/
|
|
42
|
-
sticky?: boolean;
|
|
43
|
-
};
|
|
44
|
-
declare const Header: FC<HeaderProps>;
|
|
45
|
-
export { HeaderProps, Header };
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-
|
|
5
|
+
var tslib_es6 = require('../../tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
require('@alfalab/core-components-base-modal');
|
|
9
9
|
require('../../Context.js');
|
|
10
|
-
var components_header_Component = require('
|
|
10
|
+
var components_header_Component = require('../../Component-12cb5541.js');
|
|
11
11
|
require('@alfalab/core-components-icon-button');
|
|
12
12
|
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
13
13
|
var components_closer_Component = require('../closer/Component.js');
|
|
@@ -22,12 +22,12 @@ require('./desktop.css')
|
|
|
22
22
|
|
|
23
23
|
var HeaderDesktop = function (_a) {
|
|
24
24
|
var _b;
|
|
25
|
-
var size = _a.size, className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, _d = _a.leftAddons, leftAddons = _d === void 0 ? React__default['default'].createElement("span", null) : _d, title = _a.title, children = _a.children, restProps = tslib_es6.__rest(_a, ["size", "className", "contentClassName", "hasCloser", "sticky", "leftAddons", "title", "children"]);
|
|
25
|
+
var size = _a.size, className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, _d = _a.leftAddons, leftAddons = _d === void 0 ? React__default['default'].createElement("span", null) : _d, title = _a.title, children = _a.children, dataTestId = _a.dataTestId, restProps = tslib_es6.__rest(_a, ["size", "className", "contentClassName", "hasCloser", "sticky", "leftAddons", "title", "children", "dataTestId"]);
|
|
26
26
|
var hasContent = title || Boolean(children);
|
|
27
27
|
return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, styles.header, size && styles[size], (_b = {},
|
|
28
28
|
_b[styles.sticky] = sticky,
|
|
29
29
|
_b[styles.hasContent] = hasContent,
|
|
30
|
-
_b)), contentClassName: cn__default['default'](styles.content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer,
|
|
30
|
+
_b)), contentClassName: cn__default['default'](styles.content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer, { dataTestId: components_header_Component.getDataTestId(dataTestId, 'closer') }) : null, leftAddons: leftAddons, sticky: sticky, title: title, dataTestId: dataTestId }, restProps), children));
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
exports.HeaderDesktop = HeaderDesktop;
|
|
@@ -2,39 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
require('react');
|
|
6
|
+
require('classnames');
|
|
7
7
|
require('@alfalab/core-components-base-modal');
|
|
8
|
-
|
|
8
|
+
require('../../Context.js');
|
|
9
|
+
var components_header_Component = require('../../Component-12cb5541.js');
|
|
9
10
|
|
|
10
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
14
12
|
|
|
15
|
-
|
|
16
|
-
require('./index.css')
|
|
17
|
-
|
|
18
|
-
var Header = function (_a) {
|
|
19
|
-
var _b, _c;
|
|
20
|
-
var className = _a.className, addonClassName = _a.addonClassName, contentClassName = _a.contentClassName, leftAddons = _a.leftAddons, children = _a.children, _d = _a.align, align = _d === void 0 ? 'left' : _d, _e = _a.trim, trim = _e === void 0 ? true : _e, title = _a.title, closer = _a.closer, sticky = _a.sticky;
|
|
21
|
-
var _f = React.useContext(Context.ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
|
|
22
|
-
var hasContent = title || Boolean(children);
|
|
23
|
-
React.useEffect(function () {
|
|
24
|
-
setHasHeader(true);
|
|
25
|
-
}, [setHasHeader]);
|
|
26
|
-
return (React__default['default'].createElement("div", { className: cn__default['default'](styles.header, className, (_b = {},
|
|
27
|
-
_b[styles.highlighted] = hasContent && sticky && headerHighlighted,
|
|
28
|
-
_b[styles.sticky] = sticky,
|
|
29
|
-
_b[styles.hasContent] = hasContent,
|
|
30
|
-
_b)) },
|
|
31
|
-
leftAddons && React__default['default'].createElement("div", { className: cn__default['default'](styles.addon, addonClassName) }, leftAddons),
|
|
32
|
-
hasContent && (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, contentClassName, styles[align], (_c = {},
|
|
33
|
-
_c[styles.trim] = trim,
|
|
34
|
-
_c)) },
|
|
35
|
-
children,
|
|
36
|
-
title && React__default['default'].createElement("div", { className: styles.title }, title))),
|
|
37
|
-
closer && (React__default['default'].createElement("div", { className: cn__default['default'](styles.addon, styles.closer, addonClassName) }, closer))));
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
exports.Header = Header;
|
|
13
|
+
exports.Header = components_header_Component.Header;
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../../tslib.es6-
|
|
5
|
+
var tslib_es6 = require('../../tslib.es6-2d094523.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
require('@alfalab/core-components-base-modal');
|
|
9
9
|
require('../../Context.js');
|
|
10
|
-
var components_header_Component = require('
|
|
10
|
+
var components_header_Component = require('../../Component-12cb5541.js');
|
|
11
11
|
require('@alfalab/core-components-icon-button');
|
|
12
12
|
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
13
13
|
var components_closer_Component = require('../closer/Component.js');
|
|
@@ -24,10 +24,10 @@ require('./mobile.css')
|
|
|
24
24
|
|
|
25
25
|
var HeaderMobile = function (_a) {
|
|
26
26
|
var _b;
|
|
27
|
-
var className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, restProps = tslib_es6.__rest(_a, ["className", "contentClassName", "hasCloser", "sticky"]);
|
|
27
|
+
var className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, dataTestId = _a.dataTestId, restProps = tslib_es6.__rest(_a, ["className", "contentClassName", "hasCloser", "sticky", "dataTestId"]);
|
|
28
28
|
return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, (_b = {},
|
|
29
29
|
_b[styles.sticky] = sticky,
|
|
30
|
-
_b)), contentClassName: cn__default['default'](styles.content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer, { icon: CrossMIcon__default['default'], size: 'xs' }) : null, sticky: sticky }, restProps)));
|
|
30
|
+
_b)), contentClassName: cn__default['default'](styles.content, contentClassName), closer: hasCloser ? (React__default['default'].createElement(components_closer_Component.Closer, { icon: CrossMIcon__default['default'], size: 'xs', dataTestId: components_header_Component.getDataTestId(dataTestId, 'closer') })) : null, sticky: sticky, dataTestId: dataTestId }, restProps)));
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
exports.HeaderMobile = HeaderMobile;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
type HeaderProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Контент шапки
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Слот слева
|
|
9
|
+
*/
|
|
10
|
+
leftAddons?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Компонент крестика
|
|
13
|
+
*/
|
|
14
|
+
closer?: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Дополнительный класс
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Дополнительный класс для аддонов
|
|
21
|
+
*/
|
|
22
|
+
addonClassName?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Дополнительный класс для контента
|
|
25
|
+
*/
|
|
26
|
+
contentClassName?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Заголовок шапки
|
|
29
|
+
*/
|
|
30
|
+
title?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Выравнивание заголовка
|
|
33
|
+
*/
|
|
34
|
+
align?: 'left' | 'center';
|
|
35
|
+
/**
|
|
36
|
+
* Обрезать ли заголовок
|
|
37
|
+
*/
|
|
38
|
+
trim?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Фиксирует шапку
|
|
41
|
+
*/
|
|
42
|
+
sticky?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
45
|
+
*/
|
|
46
|
+
dataTestId?: string;
|
|
47
|
+
};
|
|
48
|
+
declare const Header: FC<HeaderProps>;
|
|
49
|
+
export * from "./getDataTestId-3fe0d3e6";
|
|
50
|
+
export { HeaderProps, Header };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var cn = require('classnames');
|
|
5
|
+
var Context = require('./Context.js');
|
|
6
|
+
var styles = require('./components/header/index.module.css');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
12
|
+
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
13
|
+
|
|
14
|
+
var getDataTestId = function (dataTestId, element) {
|
|
15
|
+
var elementPart = element ? "-" + element.toLowerCase() : '';
|
|
16
|
+
return dataTestId ? "" + dataTestId + elementPart : undefined;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
var Header = function (_a) {
|
|
20
|
+
var _b, _c;
|
|
21
|
+
var className = _a.className, addonClassName = _a.addonClassName, contentClassName = _a.contentClassName, leftAddons = _a.leftAddons, children = _a.children, _d = _a.align, align = _d === void 0 ? 'left' : _d, _e = _a.trim, trim = _e === void 0 ? true : _e, title = _a.title, closer = _a.closer, sticky = _a.sticky, dataTestId = _a.dataTestId;
|
|
22
|
+
var _f = React.useContext(Context.ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
|
|
23
|
+
var hasContent = title || Boolean(children);
|
|
24
|
+
React.useEffect(function () {
|
|
25
|
+
setHasHeader(true);
|
|
26
|
+
}, [setHasHeader]);
|
|
27
|
+
return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].header, className, (_b = {},
|
|
28
|
+
_b[styles__default['default'].highlighted] = hasContent && sticky && headerHighlighted,
|
|
29
|
+
_b[styles__default['default'].sticky] = sticky,
|
|
30
|
+
_b[styles__default['default'].hasContent] = hasContent,
|
|
31
|
+
_b)), "data-test-id": getDataTestId(dataTestId) },
|
|
32
|
+
leftAddons && React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addon, addonClassName) }, leftAddons),
|
|
33
|
+
hasContent && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].content, contentClassName, styles__default['default'][align], (_c = {},
|
|
34
|
+
_c[styles__default['default'].trim] = trim,
|
|
35
|
+
_c)) },
|
|
36
|
+
children,
|
|
37
|
+
title && (React__default['default'].createElement("div", { className: styles__default['default'].title, "data-test-id": getDataTestId(dataTestId, 'title') }, title)))),
|
|
38
|
+
closer && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addon, styles__default['default'].closer, addonClassName) }, closer))));
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
exports.Header = Header;
|
|
42
|
+
exports.getDataTestId = getDataTestId;
|
|
@@ -8,8 +8,8 @@ var cn = require('classnames');
|
|
|
8
8
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
|
|
9
9
|
var mergeRefs = require('react-merge-refs');
|
|
10
10
|
require('./Context.js');
|
|
11
|
+
require('./Component-5fe52731.js');
|
|
11
12
|
require('./components/header/index.module.css');
|
|
12
|
-
require('./components/header/Component.js');
|
|
13
13
|
require('@alfalab/core-components-icon-button/cssm');
|
|
14
14
|
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
15
15
|
require('./components/closer/index.module.css');
|
package/cssm/Component.mobile.js
CHANGED
|
@@ -7,8 +7,8 @@ var React = require('react');
|
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
|
|
9
9
|
require('./Context.js');
|
|
10
|
+
require('./Component-5fe52731.js');
|
|
10
11
|
require('./components/header/index.module.css');
|
|
11
|
-
require('./components/header/Component.js');
|
|
12
12
|
require('@alfalab/core-components-icon-button/cssm');
|
|
13
13
|
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
14
14
|
require('./components/closer/index.module.css');
|
|
@@ -8,8 +8,8 @@ require('classnames');
|
|
|
8
8
|
require('@alfalab/core-components-base-modal/cssm');
|
|
9
9
|
require('react-merge-refs');
|
|
10
10
|
require('./Context.js');
|
|
11
|
+
require('./Component-5fe52731.js');
|
|
11
12
|
require('./components/header/index.module.css');
|
|
12
|
-
require('./components/header/Component.js');
|
|
13
13
|
require('@alfalab/core-components-icon-button/cssm');
|
|
14
14
|
require('@alfalab/icons-glyph/CrossHeavyMIcon');
|
|
15
15
|
require('./components/closer/index.module.css');
|
|
@@ -21,6 +21,10 @@ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
|
21
21
|
* Иконка
|
|
22
22
|
*/
|
|
23
23
|
icon?: ElementType;
|
|
24
|
+
/**
|
|
25
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
26
|
+
*/
|
|
27
|
+
dataTestId?: string;
|
|
24
28
|
};
|
|
25
29
|
/**
|
|
26
30
|
* @deprecated Компонент только для внутреннего использования. Используйте <Header />
|
|
@@ -22,7 +22,7 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
|
22
22
|
*/
|
|
23
23
|
var Closer = function (_a) {
|
|
24
24
|
var _b;
|
|
25
|
-
var className = _a.className, _c = _a.size, size = _c === void 0 ? 's' : _c, sticky = _a.sticky, _d = _a.icon, icon = _d === void 0 ? CrossHeavyMIcon.CrossHeavyMIcon : _d, restProps = tslib_es6.__rest(_a, ["className", "size", "sticky", "icon"]);
|
|
25
|
+
var className = _a.className, _c = _a.size, size = _c === void 0 ? 's' : _c, sticky = _a.sticky, _d = _a.icon, icon = _d === void 0 ? CrossHeavyMIcon.CrossHeavyMIcon : _d, dataTestId = _a.dataTestId, restProps = tslib_es6.__rest(_a, ["className", "size", "sticky", "icon", "dataTestId"]);
|
|
26
26
|
var onClose = React.useContext(Context.ModalContext).onClose;
|
|
27
27
|
var handleClick = React.useCallback(function (event) {
|
|
28
28
|
onClose(event, 'closerClick');
|
|
@@ -30,7 +30,7 @@ var Closer = function (_a) {
|
|
|
30
30
|
return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].closer, className, (_b = {},
|
|
31
31
|
_b[styles__default['default'].sticky] = sticky,
|
|
32
32
|
_b)) },
|
|
33
|
-
React__default['default'].createElement(coreComponentsIconButton.IconButton, tslib_es6.__assign({ size: size, className: styles__default['default'].button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
|
|
33
|
+
React__default['default'].createElement(coreComponentsIconButton.IconButton, tslib_es6.__assign({ size: size, className: styles__default['default'].button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon, dataTestId: dataTestId }, restProps))));
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
exports.Closer = Closer;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
|
2
|
-
type HeaderProps = {
|
|
3
|
-
/**
|
|
4
|
-
* Контент шапки
|
|
5
|
-
*/
|
|
6
|
-
children?: ReactNode;
|
|
7
|
-
/**
|
|
8
|
-
* Слот слева
|
|
9
|
-
*/
|
|
10
|
-
leftAddons?: ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Компонент крестика
|
|
13
|
-
*/
|
|
14
|
-
closer?: ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* Дополнительный класс
|
|
17
|
-
*/
|
|
18
|
-
className?: string;
|
|
19
|
-
/**
|
|
20
|
-
* Дополнительный класс для аддонов
|
|
21
|
-
*/
|
|
22
|
-
addonClassName?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Дополнительный класс для контента
|
|
25
|
-
*/
|
|
26
|
-
contentClassName?: string;
|
|
27
|
-
/**
|
|
28
|
-
* Заголовок шапки
|
|
29
|
-
*/
|
|
30
|
-
title?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Выравнивание заголовка
|
|
33
|
-
*/
|
|
34
|
-
align?: 'left' | 'center';
|
|
35
|
-
/**
|
|
36
|
-
* Обрезать ли заголовок
|
|
37
|
-
*/
|
|
38
|
-
trim?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* Фиксирует шапку
|
|
41
|
-
*/
|
|
42
|
-
sticky?: boolean;
|
|
43
|
-
};
|
|
44
|
-
declare const Header: FC<HeaderProps>;
|
|
45
|
-
export { HeaderProps, Header };
|