@alfalab/core-components-modal 4.1.0 → 5.0.1

package/dist/modern/components/header/Component.desktop.js

@@ -2,13 +2,20 @@ import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/modern';
 import '../../Context.js';
-import '@alfalab/core-components-button/dist/modern';
-import '../closer/Component.js';
 import { Header } from './Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from '../closer/Component.js';
 
-var styles = {"header":"modal__header_df06s modal__header_1u4m1","s":"modal__s_df06s","m":"modal__m_df06s","l":"modal__l_df06s","fullscreen":"modal__fullscreen_df06s","sticky":"modal__sticky_df06s modal__sticky_1u4m1","highlighted":"modal__highlighted_df06s modal__highlighted_1u4m1","content":"modal__content_df06s modal__content_1u4m1","title":"modal__title_df06s modal__title_1u4m1"};
+var styles = {"header":"modal__header_lew6e","content":"modal__content_lew6e","s":"modal__s_lew6e","m":"modal__m_lew6e","l":"modal__l_lew6e","xl":"modal__xl_lew6e","fullscreen":"modal__fullscreen_lew6e","hasContent":"modal__hasContent_lew6e","sticky":"modal__sticky_lew6e"};
 require('./desktop.css')
 
-const HeaderDesktop = ({ size, className, fullscreen, ...restProps }) => (React.createElement(Header, Object.assign({ className: cn(className, size && styles[size], fullscreen && styles.fullscreen), styles: styles }, restProps)));
+const HeaderDesktop = ({ size, className, contentClassName, hasCloser = true, sticky, leftAddons = React.createElement("span", null), title, children, ...restProps }) => {
+    const hasContent = title || Boolean(children);
+    return (React.createElement(Header, Object.assign({ className: cn(className, styles.header, size && styles[size], {
+            [styles.sticky]: sticky,
+            [styles.hasContent]: hasContent,
+        }), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, null) : null, leftAddons: leftAddons, sticky: sticky, title: title }, restProps), children));
+};
 
 export { HeaderDesktop };

package/dist/modern/components/header/Component.js

@@ -2,23 +2,28 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/modern';
 import { ModalContext } from '../../Context.js';
-import '@alfalab/core-components-button/dist/modern';
-import { Closer } from '../closer/Component.js';
 
-const Header = ({ className, children, title, hasCloser = true, sticky, styles, }) => {
+var styles = {"header":"modal__header_33dzh","hasContent":"modal__hasContent_33dzh","highlighted":"modal__highlighted_33dzh","sticky":"modal__sticky_33dzh","content":"modal__content_33dzh","title":"modal__title_33dzh","addon":"modal__addon_33dzh","closer":"modal__closer_33dzh","left":"modal__left_33dzh","center":"modal__center_33dzh","right":"modal__right_33dzh","trim":"modal__trim_33dzh"};
+require('./index.css')
+
+const Header = ({ className, addonClassName, contentClassName, leftAddons, children, align = 'left', trim = true, title, closer, sticky, }) => {
     const { headerHighlighted, setHasHeader } = useContext(ModalContext);
     const hasContent = title || Boolean(children);
     useEffect(() => {
         setHasHeader(true);
     }, [setHasHeader]);
     return (React.createElement("div", { className: cn(styles.header, className, {
-            [styles.highlighted]: sticky && headerHighlighted,
+            [styles.highlighted]: hasContent && sticky && headerHighlighted,
             [styles.sticky]: sticky,
+            [styles.hasContent]: hasContent,
         }) },
-        hasContent && (React.createElement("div", { className: styles.content },
+        leftAddons && React.createElement("div", { className: cn(styles.addon, addonClassName) }, leftAddons),
+        hasContent && (React.createElement("div", { className: cn(styles.content, contentClassName, styles[align], {
+                [styles.trim]: trim,
+            }) },
             children,
             title && React.createElement("div", { className: styles.title }, title))),
-        hasCloser && React.createElement(Closer, null)));
+        closer && (React.createElement("div", { className: cn(styles.addon, styles.closer, addonClassName) }, closer))));
 };
 
 export { Header };

package/dist/modern/components/header/Component.mobile.d.ts

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

package/dist/modern/components/header/Component.mobile.js

@@ -1,14 +1,18 @@
 import React from 'react';
-import 'classnames';
+import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/modern';
 import '../../Context.js';
-import '@alfalab/core-components-button/dist/modern';
-import '../closer/Component.js';
 import { Header } from './Component.js';
+import '@alfalab/core-components-icon-button/dist/modern';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from '../closer/Component.js';
+import CrossMIcon from '@alfalab/icons-glyph/CrossMIcon';
 
-var styles = {"header":"modal__header_1mqiy modal__header_1u4m1","sticky":"modal__sticky_1mqiy modal__sticky_1u4m1","highlighted":"modal__highlighted_1mqiy modal__highlighted_1u4m1","content":"modal__content_1mqiy modal__content_1u4m1","title":"modal__title_1mqiy modal__title_1u4m1"};
+var styles = {"sticky":"modal__sticky_1qd2v","content":"modal__content_1qd2v"};
 require('./mobile.css')
 
-const HeaderMobile = props => React.createElement(Header, Object.assign({ styles: styles }, props));
+const HeaderMobile = ({ className, contentClassName, hasCloser = true, sticky, ...restProps }) => (React.createElement(Header, Object.assign({ className: cn(className, {
+        [styles.sticky]: sticky,
+    }), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, { icon: CrossMIcon, size: 'xs' }) : null, sticky: sticky }, restProps)));
 
 export { HeaderMobile };