@alfalab/core-components 27.13.1 → 27.14.0

package/side-panel/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/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/components/header/Component.desktop.js

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-46fc2207.js');
+var React = require('react');
+var cn = require('classnames');
+require('../../../base-modal');
+require('../../Context.js');
+var components_header_Component = require('./Component.js');
+require('../../../icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+var components_closer_Component = require('../closer/Component.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"content":"side-panel__content_1gynr","s":"side-panel__s_1gynr","hasContent":"side-panel__hasContent_1gynr","sticky":"side-panel__sticky_1gynr"};
+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__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"]);
+    var hasContent = Boolean(title || children);
+    return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, size && styles[size], (_b = {},
+            _b[styles.sticky] = sticky,
+            _b[styles.hasContent] = hasContent,
+            _b)), contentClassName: cn__default['default'](styles.content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer, null) : null, leftAddons: leftAddons, sticky: sticky, title: title }, restProps), children));
+};
+
+exports.HeaderDesktop = HeaderDesktop;

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

@@ -0,0 +1,38 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+require('../../../base-modal');
+var Context = require('../../Context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"header":"side-panel__header_1io7a","hasContent":"side-panel__hasContent_1io7a","highlighted":"side-panel__highlighted_1io7a","sticky":"side-panel__sticky_1io7a","content":"side-panel__content_1io7a","title":"side-panel__title_1io7a","addon":"side-panel__addon_1io7a","closer":"side-panel__closer_1io7a","left":"side-panel__left_1io7a","center":"side-panel__center_1io7a","right":"side-panel__right_1io7a","trim":"side-panel__trim_1io7a"};
+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 = React.useContext(Context.ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
+    var hasContent = Boolean(title || children);
+    React.useEffect(function () {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.header, className, (_b = {},
+            _b[styles.highlighted] = hasContent && sticky && headerHighlighted,
+            _b[styles.sticky] = sticky,
+            _b[styles.hasContent] = hasContent,
+            _b)) },
+        leftAddons && React__default['default'].createElement("div", { className: cn__default['default'](styles.addon, addonClassName) }, leftAddons),
+        hasContent && (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, contentClassName, styles[align], (_c = {},
+                _c[styles.trim] = trim,
+                _c)) },
+            children,
+            title && React__default['default'].createElement("div", { className: styles.title }, title))),
+        closer && (React__default['default'].createElement("div", { className: cn__default['default'](styles.addon, styles.closer, addonClassName) }, closer))));
+};
+
+exports.Header = Header;

package/side-panel/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/components/header/Component.mobile.js

@@ -0,0 +1,31 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-46fc2207.js');
+var React = require('react');
+var cn = require('classnames');
+require('../../../base-modal');
+require('../../Context.js');
+var components_header_Component = require('./Component.js');
+require('../../../icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+var components_closer_Component = require('../closer/Component.js');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var CrossMIcon__default = /*#__PURE__*/_interopDefaultLegacy(CrossMIcon);
+
+var styles = {"sticky":"side-panel__sticky_vwpuy","content":"side-panel__content_vwpuy"};
+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 = tslib_es6.__rest(_a, ["className", "contentClassName", "hasCloser", "sticky"]);
+    return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, (_b = {},
+            _b[styles.sticky] = sticky,
+            _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)));
+};
+
+exports.HeaderMobile = HeaderMobile;