@alfalab/core-components 27.13.0 → 27.15.0

package/side-panel/esm/components/header/Component.d.ts

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from 'react';
+type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Компонент крестика
+     */
+    closer?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: 'left' | 'center';
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+};
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/side-panel/esm/components/header/Component.desktop.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { HeaderProps } from "./Component";
+import { SidePanelDesktopProps } from "../../Component.desktop";
+type HeaderDesktopProps = Omit<HeaderProps, 'closer'> & {
+    /**
+     * Размер
+     */
+    size?: SidePanelDesktopProps['size'];
+    /**
+     * Наличие крестика
+     */
+    hasCloser?: boolean;
+};
+declare const HeaderDesktop: FC<HeaderDesktopProps>;
+export { HeaderDesktopProps, HeaderDesktop };

package/side-panel/esm/components/header/Component.desktop.js

@@ -0,0 +1,24 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-01e92c53.js';
+import React from 'react';
+import cn from 'classnames';
+import '../../../../base-modal/esm';
+import '../../Context.js';
+import { Header } from './Component.js';
+import '../../../../icon-button/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from '../closer/Component.js';
+
+var styles = {"content":"side-panel__content_c4zev","s":"side-panel__s_c4zev","hasContent":"side-panel__hasContent_c4zev","sticky":"side-panel__sticky_c4zev"};
+require('./desktop.css');
+
+var HeaderDesktop = function (_a) {
+    var _b;
+    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.createElement("span", null) : _d, title = _a.title, children = _a.children, restProps = __rest(_a, ["size", "className", "contentClassName", "hasCloser", "sticky", "leftAddons", "title", "children"]);
+    var hasContent = Boolean(title || children);
+    return (React.createElement(Header, __assign({ className: cn(className, size && styles[size], (_b = {},
+            _b[styles.sticky] = sticky,
+            _b[styles.hasContent] = hasContent,
+            _b)), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, null) : null, leftAddons: leftAddons, sticky: sticky, title: title }, restProps), children));
+};
+
+export { HeaderDesktop };

package/side-panel/esm/components/header/Component.js

@@ -0,0 +1,31 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import '../../../../base-modal/esm';
+import { ModalContext } from '../../Context.js';
+
+var styles = {"header":"side-panel__header_i94xo","hasContent":"side-panel__hasContent_i94xo","highlighted":"side-panel__highlighted_i94xo","sticky":"side-panel__sticky_i94xo","content":"side-panel__content_i94xo","title":"side-panel__title_i94xo","addon":"side-panel__addon_i94xo","closer":"side-panel__closer_i94xo","left":"side-panel__left_i94xo","center":"side-panel__center_i94xo","right":"side-panel__right_i94xo","trim":"side-panel__trim_i94xo"};
+require('./index.css');
+
+var Header = function (_a) {
+    var _b, _c;
+    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;
+    var _f = useContext(ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
+    var hasContent = Boolean(title || children);
+    useEffect(function () {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    return (React.createElement("div", { className: cn(styles.header, className, (_b = {},
+            _b[styles.highlighted] = hasContent && sticky && headerHighlighted,
+            _b[styles.sticky] = sticky,
+            _b[styles.hasContent] = hasContent,
+            _b)) },
+        leftAddons && React.createElement("div", { className: cn(styles.addon, addonClassName) }, leftAddons),
+        hasContent && (React.createElement("div", { className: cn(styles.content, contentClassName, styles[align], (_c = {},
+                _c[styles.trim] = trim,
+                _c)) },
+            children,
+            title && React.createElement("div", { className: styles.title }, title))),
+        closer && (React.createElement("div", { className: cn(styles.addon, styles.closer, addonClassName) }, closer))));
+};
+
+export { Header };

package/side-panel/esm/components/header/Component.mobile.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { HeaderProps } from "./Component";
+type HeaderMobileProps = Omit<HeaderProps, 'closer'> & {
+    /**
+     * Наличие крестика
+     */
+    hasCloser?: boolean;
+};
+declare const HeaderMobile: FC<HeaderMobileProps>;
+export { HeaderMobileProps, HeaderMobile };

package/side-panel/esm/components/header/Component.mobile.js

@@ -0,0 +1,23 @@
+import { _ as __rest, a as __assign } from '../../tslib.es6-01e92c53.js';
+import React from 'react';
+import cn from 'classnames';
+import '../../../../base-modal/esm';
+import '../../Context.js';
+import { Header } from './Component.js';
+import '../../../../icon-button/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from '../closer/Component.js';
+import CrossMIcon from '@alfalab/icons-glyph/CrossMIcon';
+
+var styles = {"sticky":"side-panel__sticky_neyew","content":"side-panel__content_neyew"};
+require('./mobile.css');
+
+var HeaderMobile = function (_a) {
+    var _b;
+    var className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, restProps = __rest(_a, ["className", "contentClassName", "hasCloser", "sticky"]);
+    return (React.createElement(Header, __assign({ className: cn(className, (_b = {},
+            _b[styles.sticky] = sticky,
+            _b)), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, { icon: CrossMIcon, size: 'xs' }) : null, sticky: sticky }, restProps)));
+};
+
+export { HeaderMobile };