@alfalab/core-components-navigation-bar-private 1.0.1 → 1.0.2
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.d.ts +1 -1
- package/Component.js.map +1 -1
- package/components/back-arrow-addon/index.css +14 -14
- package/components/back-arrow-addon/index.module.css.js +1 -1
- package/components/back-arrow-addon/index.module.css.js.map +1 -1
- package/components/closer/Component.d.ts +2 -2
- package/components/closer/Component.js.map +1 -1
- package/components/closer/default.css +3 -3
- package/components/closer/default.module.css.js +1 -1
- package/components/closer/index.css +4 -4
- package/components/closer/index.module.css.js +1 -1
- package/components/closer/index.module.css.js.map +1 -1
- package/components/closer/inverted.css +3 -3
- package/components/closer/inverted.module.css.js +1 -1
- package/cssm/Component.d.ts +1 -1
- package/cssm/Component.js.map +1 -1
- package/cssm/components/back-arrow-addon/index.module.css +3 -3
- package/cssm/components/closer/Component.d.ts +2 -2
- package/cssm/components/closer/Component.js.map +1 -1
- package/cssm/components/closer/default.module.css +1 -1
- package/cssm/components/closer/inverted.module.css +1 -1
- package/cssm/index.module.css +7 -5
- package/cssm/types.d.ts +7 -7
- package/esm/Component.d.ts +1 -1
- package/esm/Component.js.map +1 -1
- package/esm/components/back-arrow-addon/index.css +14 -14
- package/esm/components/back-arrow-addon/index.module.css.js +1 -1
- package/esm/components/back-arrow-addon/index.module.css.js.map +1 -1
- package/esm/components/closer/Component.d.ts +2 -2
- package/esm/components/closer/Component.js.map +1 -1
- package/esm/components/closer/default.css +3 -3
- package/esm/components/closer/default.module.css.js +1 -1
- package/esm/components/closer/index.css +4 -4
- package/esm/components/closer/index.module.css.js +1 -1
- package/esm/components/closer/index.module.css.js.map +1 -1
- package/esm/components/closer/inverted.css +3 -3
- package/esm/components/closer/inverted.module.css.js +1 -1
- package/esm/index.css +32 -30
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/esm/types.d.ts +7 -7
- package/index.css +32 -30
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/modern/Component.d.ts +1 -1
- package/modern/Component.js.map +1 -1
- package/modern/components/back-arrow-addon/index.css +14 -14
- package/modern/components/back-arrow-addon/index.module.css.js +1 -1
- package/modern/components/back-arrow-addon/index.module.css.js.map +1 -1
- package/modern/components/closer/Component.d.ts +2 -2
- package/modern/components/closer/Component.js.map +1 -1
- package/modern/components/closer/default.css +3 -3
- package/modern/components/closer/default.module.css.js +1 -1
- package/modern/components/closer/index.css +4 -4
- package/modern/components/closer/index.module.css.js +1 -1
- package/modern/components/closer/index.module.css.js.map +1 -1
- package/modern/components/closer/inverted.css +3 -3
- package/modern/components/closer/inverted.module.css.js +1 -1
- package/modern/index.css +32 -30
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/modern/types.d.ts +7 -7
- package/moderncssm/Component.d.ts +1 -1
- package/moderncssm/Component.js.map +1 -1
- package/moderncssm/components/back-arrow-addon/index.module.css +3 -3
- package/moderncssm/components/closer/Component.d.ts +2 -2
- package/moderncssm/components/closer/Component.js.map +1 -1
- package/moderncssm/components/closer/default.module.css +1 -1
- package/moderncssm/components/closer/index.module.css +2 -0
- package/moderncssm/components/closer/inverted.module.css +1 -1
- package/moderncssm/index.module.css +9 -5
- package/moderncssm/types.d.ts +7 -7
- package/package.json +3 -3
- package/src/Component.tsx +1 -1
- package/src/components/back-arrow-addon/index.module.css +1 -1
- package/src/components/closer/Component.tsx +2 -2
- package/src/components/closer/index.module.css +1 -1
- package/src/index.module.css +4 -2
- package/src/types.ts +7 -7
- package/src/vars.css +1 -1
- package/types.d.ts +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.header {\n width: 100%;\n box-sizing: border-box;\n transition
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.header {\n width: 100%;\n box-sizing: border-box;\n transition:\n box-shadow 0.2s ease,\n background 0.2s ease;\n\n &.header.backgroundImage {\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n }\n}\n\n.mainLine {\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n z-index: 1;\n background-color: inherit;\n}\n\n.mainLineSticky {\n position: sticky;\n top: var(--gap-0);\n}\n\n.mainLineWithImageBg {\n background-color: initial;\n}\n\n.content {\n color: var(--color-light-text-primary);\n display: flex;\n flex-flow: column nowrap;\n justify-content: center;\n flex-grow: 1;\n align-self: baseline;\n box-sizing: border-box;\n min-height: 48px;\n\n &.withBothAddons,\n &.withCompactTitle {\n @mixin action_component;\n align-self: center;\n padding-top: var(--gap-4);\n padding-bottom: var(--gap-4);\n\n & > .children,\n & > .title {\n -webkit-line-clamp: 1;\n word-break: break-all;\n }\n }\n\n &.contentOnBotDesktop.contentOnBotDesktop {\n padding-top: var(--gap-12);\n }\n\n &.contentOnBotMobile.contentOnBotMobile {\n padding-top: var(--gap-12);\n }\n}\n\n.title {\n word-break: break-word;\n}\n\n.subtitle {\n @mixin paragraph_primary_small;\n @mixin row_limit 1;\n\n color: var(--color-light-text-secondary);\n word-break: break-all;\n}\n\n.addonsWrapper {\n display: flex;\n}\n\n.rightAddons {\n margin-left: auto;\n}\n\n.addon {\n min-width: 48px;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n pointer-events: all;\n}\n\n.bottomAddons {\n pointer-events: all;\n}\n\n.closer {\n margin-left: auto;\n}\n\n.left {\n text-align: left;\n}\n\n.center {\n text-align: center;\n}\n\n.trim {\n overflow: hidden;\n\n & .title,\n & .children {\n @mixin row_limit 2;\n }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,UAAU,CAAC,wCAAwC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,SAAS,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,8CAA8C,CAAC,kBAAkB,CAAC,gDAAgD,CAAC,UAAU,CAAC,wCAAwC,CAAC,OAAO,CAAC,qCAAqC,CAAC,qBAAqB,CAAC,mDAAmD,CAAC,oBAAoB,CAAC,kDAAkD,CAAC,UAAU,CAAC,wCAAwC,CAAC,eAAe,CAAC,6CAA6C,CAAC,aAAa,CAAC,2CAA2C,CAAC,OAAO,CAAC,qCAAqC,CAAC,cAAc,CAAC,4CAA4C,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,MAAM,CAAC,oCAAoC,CAAC;;;;"}
|
package/modern/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { BackArrowAddonProps } from './components/back-arrow-addon';
|
|
3
|
-
import type
|
|
1
|
+
import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
|
|
2
|
+
import { type BackArrowAddonProps } from './components/back-arrow-addon';
|
|
3
|
+
import { type CloserProps } from './components/closer';
|
|
4
4
|
export declare type NavigationBarPrivateProps = {
|
|
5
5
|
/**
|
|
6
6
|
* Контент шапки
|
|
@@ -90,7 +90,7 @@ export declare type NavigationBarPrivateProps = {
|
|
|
90
90
|
/**
|
|
91
91
|
* Иконка closer.
|
|
92
92
|
*/
|
|
93
|
-
closerIcon?:
|
|
93
|
+
closerIcon?: ElementType;
|
|
94
94
|
/**
|
|
95
95
|
* Обработчик закрытия
|
|
96
96
|
*/
|
|
@@ -110,7 +110,7 @@ export declare type NavigationBarPrivateProps = {
|
|
|
110
110
|
/**
|
|
111
111
|
* Ссылка на родительскую ноду overflow: auto
|
|
112
112
|
*/
|
|
113
|
-
scrollableParentRef?:
|
|
113
|
+
scrollableParentRef?: RefObject<HTMLDivElement>;
|
|
114
114
|
/**
|
|
115
115
|
* Data атрибут для компонента
|
|
116
116
|
*/
|
|
@@ -126,8 +126,8 @@ export declare type NavigationBarPrivateProps = {
|
|
|
126
126
|
};
|
|
127
127
|
export declare type ContentParams = {
|
|
128
128
|
extraClassName?: string;
|
|
129
|
-
wrapperRef?:
|
|
130
|
-
style?:
|
|
129
|
+
wrapperRef?: RefObject<HTMLDivElement>;
|
|
130
|
+
style?: CSSProperties;
|
|
131
131
|
hidden?: boolean;
|
|
132
132
|
extraAlign?: NavigationBarPrivateProps['align'];
|
|
133
133
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type
|
|
2
|
+
import { type NavigationBarPrivateProps } from './types';
|
|
3
3
|
export declare const NavigationBarPrivate: React.ForwardRefExoticComponent<NavigationBarPrivateProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { BackArrowAddon } from './components/back-arrow-addon';\nimport { Closer } from './components/closer';\nimport type { ContentParams, NavigationBarPrivateProps } from './types';\n\nimport styles from './index.module.css';\n\nconst ADDONS_HEIGHT = 48;\n\nexport const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPrivateProps>(\n (\n {\n addonClassName,\n className,\n contentClassName,\n closerClassName,\n leftAddons,\n rightAddons,\n bottomAddons,\n bottomAddonsClassName,\n children,\n align = 'left',\n trim = true,\n title,\n titleSize = 'default',\n subtitle,\n hasCloser,\n closerProps = {},\n hasBackButton,\n backButtonClassName,\n backButtonProps,\n dataTestId,\n imageUrl,\n closerIcon,\n onClose,\n view,\n scrollableParentRef,\n sticky,\n onBack,\n dataName,\n titleClassName,\n titleRef,\n },\n ref,\n ) => {\n const [scrollTop, setScrollTop] = useState(0);\n const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n const bottomContentRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const mainLinePaddingTopRef = useRef<string>('0px');\n const leftAddonsRef = useRef<HTMLDivElement>(null);\n const rightAddonsRef = useRef<HTMLDivElement>(null);\n\n const isMobile = view === 'mobile';\n\n const compactTitle = isMobile && titleSize === 'compact';\n const hasLeftPart = Boolean(leftAddons || hasBackButton);\n const hasRightPart = Boolean(rightAddons || hasCloser);\n const hasContent = Boolean(title || children);\n const withAnimation = Boolean(isMobile && hasLeftPart && sticky && !compactTitle);\n const showContentOnTop = hasContent && (compactTitle || !hasLeftPart);\n const showContentOnBot = hasContent && !compactTitle && hasLeftPart;\n const showStaticContentOnTop = !withAnimation && showContentOnTop;\n const showStaticContentOnBot = !withAnimation && showContentOnBot;\n const showAnimatedContentOnTop =\n withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;\n const showAnimatedContentOnBot = withAnimation && showContentOnBot;\n const headerPaddingTop = mainLinePaddingTopRef.current;\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {\n const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;\n const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;\n\n const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);\n const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;\n\n setTitleMargin((prev) => {\n const newState = shouldAddLeftMargin\n ? { left: marginSize, right: 0 }\n : { left: 0, right: marginSize };\n\n const isStateChanged =\n prev.left !== newState.left || prev.right !== newState.right;\n\n return isStateChanged ? newState : prev;\n });\n }\n }, [\n align,\n showStaticContentOnTop,\n showAnimatedContentOnTop,\n leftAddons,\n rightAddons,\n hasBackButton,\n hasCloser,\n ]);\n\n useEffect(() => {\n const parent = scrollableParentRef?.current;\n\n const handleScroll = (ev: Event) => {\n const divElement = ev.target as HTMLDivElement;\n\n setScrollTop(divElement.scrollTop);\n };\n\n if (withAnimation && headerRef.current) {\n mainLinePaddingTopRef.current = getComputedStyle(headerRef.current).paddingTop;\n }\n\n if (withAnimation && parent) {\n parent.addEventListener('scroll', handleScroll);\n }\n\n return () => parent?.removeEventListener('scroll', handleScroll);\n }, [scrollableParentRef, withAnimation]);\n\n const renderBackButton = () => {\n let textOpacity = 1;\n\n if (withAnimation) {\n const height = hasContent ? ADDONS_HEIGHT : ADDONS_HEIGHT / 2;\n\n textOpacity = Math.max(0, 1 - scrollTop / height);\n } else if (compactTitle) {\n textOpacity = 0;\n }\n\n return (\n <div className={cn(styles.addon, backButtonClassName)}>\n <BackArrowAddon\n data-test-id={getDataTestId(dataTestId, 'back-button')}\n {...backButtonProps}\n textOpacity={textOpacity}\n view={view}\n onClick={onBack}\n />\n </div>\n );\n };\n\n const renderContent = (args: ContentParams = {}) => {\n const { extraClassName, wrapperRef, style, hidden, extraAlign } = args;\n\n return (\n <div\n style={{ ...style, visibility: hidden ? 'hidden' : 'visible' }}\n ref={wrapperRef}\n className={cn(\n styles.content,\n extraClassName,\n contentClassName,\n styles[extraAlign || align],\n {\n [styles.trim]: trim,\n [styles.withCompactTitle]: isMobile && compactTitle && hasContent,\n },\n )}\n aria-hidden={hidden}\n >\n {children && <div className={styles.children}>{children}</div>}\n {title && (\n <div\n className={cn(styles.title, titleClassName)}\n data-test-id={hidden ? undefined : getDataTestId(dataTestId, 'title')}\n ref={titleRef}\n >\n {title}\n </div>\n )}\n {compactTitle && subtitle && (\n <div\n className={styles.subtitle}\n data-test-id={getDataTestId(dataTestId, 'subtitle')}\n >\n {subtitle}\n </div>\n )}\n </div>\n );\n };\n\n const renderCloser = () => (\n <div className={cn(styles.addon, styles.closer, closerClassName)}>\n <Closer\n view={view}\n icon={closerIcon}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n onClose={onClose}\n {...closerProps}\n />\n </div>\n );\n\n return (\n <div\n ref={mergeRefs([ref, headerRef])}\n className={cn(styles.header, className, { [styles.backgroundImage]: imageUrl })}\n data-test-id={getDataTestId(dataTestId)}\n style={{\n ...(imageUrl && { backgroundImage: `url(${imageUrl})` }),\n ...(withAnimation &&\n bottomContentRef.current && {\n top: -bottomContentRef.current.scrollHeight,\n }),\n }}\n data-name={dataName}\n >\n <div\n className={cn(styles.mainLine, {\n [styles.mainLineSticky]: withAnimation,\n [styles.mainLineWithImageBg]: imageUrl,\n })}\n style={{\n ...(withAnimation\n ? {\n marginTop: `-${headerPaddingTop}`,\n paddingTop: headerPaddingTop,\n }\n : null),\n }}\n >\n {hasLeftPart && (\n <div className={styles.addonsWrapper} ref={leftAddonsRef}>\n {hasBackButton && renderBackButton()}\n {leftAddons && (\n <div className={cn(styles.addon, addonClassName)}>{leftAddons}</div>\n )}\n </div>\n )}\n\n {showStaticContentOnTop &&\n renderContent({\n ...(align === 'center'\n ? {\n style: {\n marginLeft: titleMargin.left,\n marginRight: titleMargin.right,\n },\n }\n : null),\n })}\n\n {showAnimatedContentOnTop &&\n renderContent({\n extraClassName: styles.withBothAddons,\n style: {\n opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),\n ...(align === 'center'\n ? {\n marginLeft: titleMargin.left,\n marginRight: titleMargin.right,\n }\n : null),\n },\n extraAlign: 'center',\n })}\n\n {hasRightPart && (\n <div\n className={cn(styles.addonsWrapper, styles.rightAddons)}\n ref={rightAddonsRef}\n >\n {rightAddons && (\n <div className={cn(styles.addon, addonClassName)}>\n {rightAddons}\n </div>\n )}\n\n {hasCloser && renderCloser()}\n </div>\n )}\n </div>\n\n {showAnimatedContentOnBot &&\n renderContent({\n wrapperRef: bottomContentRef,\n extraClassName: styles.underAddons,\n style: { opacity: Math.max(0, 1 - scrollTop / ADDONS_HEIGHT) },\n hidden: scrollTop / ADDONS_HEIGHT > 1,\n extraAlign: 'left',\n })}\n\n {showStaticContentOnBot &&\n renderContent({\n extraClassName: cn({\n [styles.contentOnBotDesktop]: view === 'desktop',\n [styles.contentOnBotMobile]: isMobile,\n }),\n extraAlign: 'left',\n })}\n\n {bottomAddons && (\n <div className={cn(styles.bottomAddons, bottomAddonsClassName)}>\n {bottomAddons}\n </div>\n )}\n </div>\n );\n },\n);\n\nNavigationBarPrivate.displayName = 'NavigationBarPrivate';\n"],"names":[],"mappings":";;;;;;;;;AAAA;AAcA,MAAM,aAAa,GAAG,EAAE;AAEX,MAAA,oBAAoB,GAAG,UAAU,CAC1C,CACI,EACI,cAAc,EACd,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,IAAI,EACX,KAAK,EACL,SAAS,GAAG,SAAS,EACrB,QAAQ,EACR,SAAS,EACT,WAAW,GAAG,EAAE,EAChB,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,QAAQ,EACR,UAAU,EACV,OAAO,EACP,IAAI,EACJ,mBAAmB,EACnB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,cAAc,EACd,QAAQ,GACX,EACD,GAAG,KACH;IACA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC7C,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;AACrE,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC9C,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAS,KAAK,CAAC;AACnD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC;AAClD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC;AAEnD,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,MAAM,YAAY,GAAG,QAAQ,IAAI,SAAS,KAAK,SAAS;IACxD,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,IAAI,aAAa,CAAC;IACxD,MAAM,YAAY,GAAG,OAAO,CAAC,WAAW,IAAI,SAAS,CAAC;IACtD,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAC7C,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,QAAQ,IAAI,WAAW,IAAI,MAAM,IAAI,CAAC,YAAY,CAAC;IACjF,MAAM,gBAAgB,GAAG,UAAU,KAAK,YAAY,IAAI,CAAC,WAAW,CAAC;IACrE,MAAM,gBAAgB,GAAG,UAAU,IAAI,CAAC,YAAY,IAAI,WAAW;AACnE,IAAA,MAAM,sBAAsB,GAAG,CAAC,aAAa,IAAI,gBAAgB;AACjE,IAAA,MAAM,sBAAsB,GAAG,CAAC,aAAa,IAAI,gBAAgB;IACjE,MAAM,wBAAwB,GAC1B,aAAa,IAAI,gBAAgB,IAAI,SAAS,GAAG,aAAa;AAClE,IAAA,MAAM,wBAAwB,GAAG,aAAa,IAAI,gBAAgB;AAClE,IAAA,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,OAAO;IAEtD,4BAA4B,CAAC,MAAK;QAC9B,IAAI,KAAK,KAAK,QAAQ,KAAK,sBAAsB,IAAI,wBAAwB,CAAC,EAAE;YAC5E,MAAM,eAAe,GAAG,aAAa,CAAC,OAAO,EAAE,WAAW,IAAI,CAAC;YAC/D,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,EAAE,WAAW,IAAI,CAAC;YAEjE,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,eAAe,CAAC;AAC/D,YAAA,MAAM,mBAAmB,GAAG,gBAAgB,GAAG,eAAe,GAAG,CAAC;AAElE,YAAA,cAAc,CAAC,CAAC,IAAI,KAAI;gBACpB,MAAM,QAAQ,GAAG;sBACX,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;sBAC5B,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE;AAEpC,gBAAA,MAAM,cAAc,GAChB,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK;gBAEhE,OAAO,cAAc,GAAG,QAAQ,GAAG,IAAI;AAC3C,aAAC,CAAC;AACL;AACL,KAAC,EAAE;QACC,KAAK;QACL,sBAAsB;QACtB,wBAAwB;QACxB,UAAU;QACV,WAAW;QACX,aAAa;QACb,SAAS;AACZ,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,MAAM,GAAG,mBAAmB,EAAE,OAAO;AAE3C,QAAA,MAAM,YAAY,GAAG,CAAC,EAAS,KAAI;AAC/B,YAAA,MAAM,UAAU,GAAG,EAAE,CAAC,MAAwB;AAE9C,YAAA,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC;AACtC,SAAC;AAED,QAAA,IAAI,aAAa,IAAI,SAAS,CAAC,OAAO,EAAE;YACpC,qBAAqB,CAAC,OAAO,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,UAAU;AACjF;QAED,IAAI,aAAa,IAAI,MAAM,EAAE;AACzB,YAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;AAClD;QAED,OAAO,MAAM,MAAM,EAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;AACpE,KAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC;IAExC,MAAM,gBAAgB,GAAG,MAAK;QAC1B,IAAI,WAAW,GAAG,CAAC;AAEnB,QAAA,IAAI,aAAa,EAAE;AACf,YAAA,MAAM,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,aAAa,GAAG,CAAC;AAE7D,YAAA,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;AACpD;AAAM,aAAA,IAAI,YAAY,EAAE;YACrB,WAAW,GAAG,CAAC;AAClB;QAED,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAA;YACjD,KAAC,CAAA,aAAA,CAAA,cAAc,EACG,EAAA,cAAA,EAAA,aAAa,CAAC,UAAU,EAAE,aAAa,CAAC,EAClD,GAAA,eAAe,EACnB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,EAAA,CACjB,CACA;AAEd,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,IAAsB,GAAA,EAAE,KAAI;AAC/C,QAAA,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI;AAEtE,QAAA,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,EAAE,EAC9D,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,OAAO,EACd,cAAc,EACd,gBAAgB,EAChB,MAAM,CAAC,UAAU,IAAI,KAAK,CAAC,EAC3B;AACI,gBAAA,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI;gBACnB,CAAC,MAAM,CAAC,gBAAgB,GAAG,QAAQ,IAAI,YAAY,IAAI,UAAU;AACpE,aAAA,CACJ,iBACY,MAAM,EAAA;YAElB,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAG,EAAA,QAAQ,CAAO;AAC7D,YAAA,KAAK,KACF,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,EAAA,cAAA,EAC7B,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,EACrE,GAAG,EAAE,QAAQ,EAEZ,EAAA,KAAK,CACJ,CACT;YACA,YAAY,IAAI,QAAQ,KACrB,6BACI,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,cAAA,EACZ,aAAa,CAAC,UAAU,EAAE,UAAU,CAAC,EAAA,EAElD,QAAQ,CACP,CACT,CACC;AAEd,KAAC;IAED,MAAM,YAAY,GAAG,OACjB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,EAAA;QAC5D,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,UAAU,EAChB,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,OAAO,EAAE,OAAO,EAAA,GACZ,WAAW,EAAA,CACjB,CACA,CACT;AAED,IAAA,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,EAChC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,QAAQ,EAAE,CAAC,kBACjE,aAAa,CAAC,UAAU,CAAC,EACvC,KAAK,EAAE;YACH,IAAI,QAAQ,IAAI,EAAE,eAAe,EAAE,CAAO,IAAA,EAAA,QAAQ,CAAG,CAAA,CAAA,EAAE,CAAC;AACxD,YAAA,IAAI,aAAa;gBACb,gBAAgB,CAAC,OAAO,IAAI;AACxB,gBAAA,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAAY;aAC9C,CAAC;AACT,SAAA,EAAA,WAAA,EACU,QAAQ,EAAA;AAEnB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC3B,gBAAA,CAAC,MAAM,CAAC,cAAc,GAAG,aAAa;AACtC,gBAAA,CAAC,MAAM,CAAC,mBAAmB,GAAG,QAAQ;aACzC,CAAC,EACF,KAAK,EAAE;AACH,gBAAA,IAAI;AACA,sBAAE;wBACI,SAAS,EAAE,CAAI,CAAA,EAAA,gBAAgB,CAAE,CAAA;AACjC,wBAAA,UAAU,EAAE,gBAAgB;AAC/B;sBACD,IAAI,CAAC;AACd,aAAA,EAAA;YAEA,WAAW,KACR,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,aAAa,EAAA;gBACnD,aAAa,IAAI,gBAAgB,EAAE;AACnC,gBAAA,UAAU,KACP,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,EAAA,EAAG,UAAU,CAAO,CACvE,CACC,CACT;YAEA,sBAAsB;AACnB,gBAAA,aAAa,CAAC;oBACV,IAAI,KAAK,KAAK;AACV,0BAAE;AACI,4BAAA,KAAK,EAAE;gCACH,UAAU,EAAE,WAAW,CAAC,IAAI;gCAC5B,WAAW,EAAE,WAAW,CAAC,KAAK;AACjC,6BAAA;AACJ;0BACD,IAAI,CAAC;iBACd,CAAC;YAEL,wBAAwB;AACrB,gBAAA,aAAa,CAAC;oBACV,cAAc,EAAE,MAAM,CAAC,cAAc;AACrC,oBAAA,KAAK,EAAE;AACH,wBAAA,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,aAAa,IAAI,aAAa,CAAC;wBACjE,IAAI,KAAK,KAAK;AACV,8BAAE;gCACI,UAAU,EAAE,WAAW,CAAC,IAAI;gCAC5B,WAAW,EAAE,WAAW,CAAC,KAAK;AACjC;8BACD,IAAI,CAAC;AACd,qBAAA;AACD,oBAAA,UAAU,EAAE,QAAQ;iBACvB,CAAC;AAEL,YAAA,YAAY,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,WAAW,CAAC,EACvD,GAAG,EAAE,cAAc,EAAA;AAElB,gBAAA,WAAW,KACR,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,EAC3C,EAAA,WAAW,CACV,CACT;AAEA,gBAAA,SAAS,IAAI,YAAY,EAAE,CAC1B,CACT,CACC;QAEL,wBAAwB;AACrB,YAAA,aAAa,CAAC;AACV,gBAAA,UAAU,EAAE,gBAAgB;gBAC5B,cAAc,EAAE,MAAM,CAAC,WAAW;AAClC,gBAAA,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,GAAG,aAAa,CAAC,EAAE;AAC9D,gBAAA,MAAM,EAAE,SAAS,GAAG,aAAa,GAAG,CAAC;AACrC,gBAAA,UAAU,EAAE,MAAM;aACrB,CAAC;QAEL,sBAAsB;AACnB,YAAA,aAAa,CAAC;gBACV,cAAc,EAAE,EAAE,CAAC;AACf,oBAAA,CAAC,MAAM,CAAC,mBAAmB,GAAG,IAAI,KAAK,SAAS;AAChD,oBAAA,CAAC,MAAM,CAAC,kBAAkB,GAAG,QAAQ;iBACxC,CAAC;AACF,gBAAA,UAAU,EAAE,MAAM;aACrB,CAAC;AAEL,QAAA,YAAY,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,qBAAqB,CAAC,EACzD,EAAA,YAAY,CACX,CACT,CACC;AAEd,CAAC;AAGL,oBAAoB,CAAC,WAAW,GAAG,sBAAsB;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { BackArrowAddon } from './components/back-arrow-addon';\nimport { Closer } from './components/closer';\nimport { type ContentParams, type NavigationBarPrivateProps } from './types';\n\nimport styles from './index.module.css';\n\nconst ADDONS_HEIGHT = 48;\n\nexport const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPrivateProps>(\n (\n {\n addonClassName,\n className,\n contentClassName,\n closerClassName,\n leftAddons,\n rightAddons,\n bottomAddons,\n bottomAddonsClassName,\n children,\n align = 'left',\n trim = true,\n title,\n titleSize = 'default',\n subtitle,\n hasCloser,\n closerProps = {},\n hasBackButton,\n backButtonClassName,\n backButtonProps,\n dataTestId,\n imageUrl,\n closerIcon,\n onClose,\n view,\n scrollableParentRef,\n sticky,\n onBack,\n dataName,\n titleClassName,\n titleRef,\n },\n ref,\n ) => {\n const [scrollTop, setScrollTop] = useState(0);\n const [titleMargin, setTitleMargin] = useState({ left: 0, right: 0 });\n const bottomContentRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const mainLinePaddingTopRef = useRef<string>('0px');\n const leftAddonsRef = useRef<HTMLDivElement>(null);\n const rightAddonsRef = useRef<HTMLDivElement>(null);\n\n const isMobile = view === 'mobile';\n\n const compactTitle = isMobile && titleSize === 'compact';\n const hasLeftPart = Boolean(leftAddons || hasBackButton);\n const hasRightPart = Boolean(rightAddons || hasCloser);\n const hasContent = Boolean(title || children);\n const withAnimation = Boolean(isMobile && hasLeftPart && sticky && !compactTitle);\n const showContentOnTop = hasContent && (compactTitle || !hasLeftPart);\n const showContentOnBot = hasContent && !compactTitle && hasLeftPart;\n const showStaticContentOnTop = !withAnimation && showContentOnTop;\n const showStaticContentOnBot = !withAnimation && showContentOnBot;\n const showAnimatedContentOnTop =\n withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;\n const showAnimatedContentOnBot = withAnimation && showContentOnBot;\n const headerPaddingTop = mainLinePaddingTopRef.current;\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (align === 'center' && (showStaticContentOnTop || showAnimatedContentOnTop)) {\n const leftAddonsWidth = leftAddonsRef.current?.offsetWidth || 0;\n const rightAddonsWidth = rightAddonsRef.current?.offsetWidth || 0;\n\n const marginSize = Math.abs(rightAddonsWidth - leftAddonsWidth);\n const shouldAddLeftMargin = rightAddonsWidth - leftAddonsWidth > 0;\n\n setTitleMargin((prev) => {\n const newState = shouldAddLeftMargin\n ? { left: marginSize, right: 0 }\n : { left: 0, right: marginSize };\n\n const isStateChanged =\n prev.left !== newState.left || prev.right !== newState.right;\n\n return isStateChanged ? newState : prev;\n });\n }\n }, [\n align,\n showStaticContentOnTop,\n showAnimatedContentOnTop,\n leftAddons,\n rightAddons,\n hasBackButton,\n hasCloser,\n ]);\n\n useEffect(() => {\n const parent = scrollableParentRef?.current;\n\n const handleScroll = (ev: Event) => {\n const divElement = ev.target as HTMLDivElement;\n\n setScrollTop(divElement.scrollTop);\n };\n\n if (withAnimation && headerRef.current) {\n mainLinePaddingTopRef.current = getComputedStyle(headerRef.current).paddingTop;\n }\n\n if (withAnimation && parent) {\n parent.addEventListener('scroll', handleScroll);\n }\n\n return () => parent?.removeEventListener('scroll', handleScroll);\n }, [scrollableParentRef, withAnimation]);\n\n const renderBackButton = () => {\n let textOpacity = 1;\n\n if (withAnimation) {\n const height = hasContent ? ADDONS_HEIGHT : ADDONS_HEIGHT / 2;\n\n textOpacity = Math.max(0, 1 - scrollTop / height);\n } else if (compactTitle) {\n textOpacity = 0;\n }\n\n return (\n <div className={cn(styles.addon, backButtonClassName)}>\n <BackArrowAddon\n data-test-id={getDataTestId(dataTestId, 'back-button')}\n {...backButtonProps}\n textOpacity={textOpacity}\n view={view}\n onClick={onBack}\n />\n </div>\n );\n };\n\n const renderContent = (args: ContentParams = {}) => {\n const { extraClassName, wrapperRef, style, hidden, extraAlign } = args;\n\n return (\n <div\n style={{ ...style, visibility: hidden ? 'hidden' : 'visible' }}\n ref={wrapperRef}\n className={cn(\n styles.content,\n extraClassName,\n contentClassName,\n styles[extraAlign || align],\n {\n [styles.trim]: trim,\n [styles.withCompactTitle]: isMobile && compactTitle && hasContent,\n },\n )}\n aria-hidden={hidden}\n >\n {children && <div className={styles.children}>{children}</div>}\n {title && (\n <div\n className={cn(styles.title, titleClassName)}\n data-test-id={hidden ? undefined : getDataTestId(dataTestId, 'title')}\n ref={titleRef}\n >\n {title}\n </div>\n )}\n {compactTitle && subtitle && (\n <div\n className={styles.subtitle}\n data-test-id={getDataTestId(dataTestId, 'subtitle')}\n >\n {subtitle}\n </div>\n )}\n </div>\n );\n };\n\n const renderCloser = () => (\n <div className={cn(styles.addon, styles.closer, closerClassName)}>\n <Closer\n view={view}\n icon={closerIcon}\n dataTestId={getDataTestId(dataTestId, 'closer')}\n onClose={onClose}\n {...closerProps}\n />\n </div>\n );\n\n return (\n <div\n ref={mergeRefs([ref, headerRef])}\n className={cn(styles.header, className, { [styles.backgroundImage]: imageUrl })}\n data-test-id={getDataTestId(dataTestId)}\n style={{\n ...(imageUrl && { backgroundImage: `url(${imageUrl})` }),\n ...(withAnimation &&\n bottomContentRef.current && {\n top: -bottomContentRef.current.scrollHeight,\n }),\n }}\n data-name={dataName}\n >\n <div\n className={cn(styles.mainLine, {\n [styles.mainLineSticky]: withAnimation,\n [styles.mainLineWithImageBg]: imageUrl,\n })}\n style={{\n ...(withAnimation\n ? {\n marginTop: `-${headerPaddingTop}`,\n paddingTop: headerPaddingTop,\n }\n : null),\n }}\n >\n {hasLeftPart && (\n <div className={styles.addonsWrapper} ref={leftAddonsRef}>\n {hasBackButton && renderBackButton()}\n {leftAddons && (\n <div className={cn(styles.addon, addonClassName)}>{leftAddons}</div>\n )}\n </div>\n )}\n\n {showStaticContentOnTop &&\n renderContent({\n ...(align === 'center'\n ? {\n style: {\n marginLeft: titleMargin.left,\n marginRight: titleMargin.right,\n },\n }\n : null),\n })}\n\n {showAnimatedContentOnTop &&\n renderContent({\n extraClassName: styles.withBothAddons,\n style: {\n opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),\n ...(align === 'center'\n ? {\n marginLeft: titleMargin.left,\n marginRight: titleMargin.right,\n }\n : null),\n },\n extraAlign: 'center',\n })}\n\n {hasRightPart && (\n <div\n className={cn(styles.addonsWrapper, styles.rightAddons)}\n ref={rightAddonsRef}\n >\n {rightAddons && (\n <div className={cn(styles.addon, addonClassName)}>\n {rightAddons}\n </div>\n )}\n\n {hasCloser && renderCloser()}\n </div>\n )}\n </div>\n\n {showAnimatedContentOnBot &&\n renderContent({\n wrapperRef: bottomContentRef,\n extraClassName: styles.underAddons,\n style: { opacity: Math.max(0, 1 - scrollTop / ADDONS_HEIGHT) },\n hidden: scrollTop / ADDONS_HEIGHT > 1,\n extraAlign: 'left',\n })}\n\n {showStaticContentOnBot &&\n renderContent({\n extraClassName: cn({\n [styles.contentOnBotDesktop]: view === 'desktop',\n [styles.contentOnBotMobile]: isMobile,\n }),\n extraAlign: 'left',\n })}\n\n {bottomAddons && (\n <div className={cn(styles.bottomAddons, bottomAddonsClassName)}>\n {bottomAddons}\n </div>\n )}\n </div>\n );\n },\n);\n\nNavigationBarPrivate.displayName = 'NavigationBarPrivate';\n"],"names":[],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
-webkit-backdrop-filter: blur(10px);
|
|
11
11
|
backdrop-filter: blur(10px);
|
|
12
12
|
border-radius: var(--border-radius-pill);
|
|
13
|
-
min-width: 48px
|
|
13
|
+
min-width: 48px;
|
|
14
14
|
}
|
|
15
15
|
.component svg > path {
|
|
16
16
|
transition: fill 0.2s ease;
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
justify-content: center;
|
|
41
41
|
height: 48px;
|
|
42
42
|
margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);
|
|
43
|
-
border-radius: var(--border-radius-circle)
|
|
43
|
+
border-radius: var(--border-radius-circle);
|
|
44
44
|
}
|
|
45
45
|
.iconWrapper + .text {
|
|
46
46
|
margin-right: var(--gap-12);
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
background: var(--color-light-neutral-translucent-100);
|
|
52
52
|
-webkit-backdrop-filter: blur(10px);
|
|
53
53
|
backdrop-filter: blur(10px);
|
|
54
|
-
margin: var(--gap-0)
|
|
54
|
+
margin: var(--gap-0);
|
|
55
55
|
}
|
|
56
56
|
.mobileWrapper + .text {
|
|
57
57
|
margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';
|
|
2
|
-
import { IconButtonProps } from '@alfalab/core-components-icon-button/moderncssm';
|
|
1
|
+
import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';
|
|
2
|
+
import { type IconButtonProps } from '@alfalab/core-components-icon-button/moderncssm';
|
|
3
3
|
export interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
4
|
/**
|
|
5
5
|
* Вид компонента
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/closer/Component.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultColors,\n inverted: invertedColors,\n} as const;\n\nexport interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * Вид компонента\n */\n view: 'desktop' | 'mobile';\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Позиция крестика\n */\n align?: 'left' | 'right';\n\n /**\n * Фиксирует крестик\n */\n sticky?: boolean;\n\n /**\n * Иконка\n */\n icon?: ElementType;\n\n /**\n * Набор цветов для компонента\n */\n colors?: IconButtonProps['colors'];\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Коллбэк закрытия.\n */\n onClose?: (\n event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick',\n ) => void;\n}\n\nexport const Closer: FC<CloserProps> = ({\n view,\n className,\n sticky,\n icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon,\n colors = 'default',\n dataTestId,\n onClose,\n ...restProps\n}) => {\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onClose?.(event, 'closerClick');\n };\n\n return (\n <div\n className={cn(styles.closer, className, {\n [styles.sticky]: sticky,\n })}\n >\n <IconButton\n size={view === 'desktop' ? 's' : 'xs'}\n className={cn(styles.button, colorStyles[colors].button, {\n [colorStyles[colors].mobile]: view === 'mobile',\n })}\n aria-label='закрыть'\n onClick={handleClick}\n icon={icon}\n colors={colors}\n dataTestId={dataTestId}\n {...restProps}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAClB;AA+CG,MAAA,MAAM,GAAoB,CAAC,EACpC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,eAAe,GAAG,UAAU,EACxD,MAAM,GAAG,SAAS,EAClB,UAAU,EACV,OAAO,EACP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AAC/D,QAAA,OAAO,GAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;AACpC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;SAC1B,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;gBACrD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;aAClD,CAAC,EAAA,YAAA,EACS,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,KAClB,SAAS,EAAA,CACf,CACA;AAEd;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/closer/Component.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\n\nimport defaultColors from './default.module.css';\nimport styles from './index.module.css';\nimport invertedColors from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultColors,\n inverted: invertedColors,\n} as const;\n\nexport interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * Вид компонента\n */\n view: 'desktop' | 'mobile';\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Позиция крестика\n */\n align?: 'left' | 'right';\n\n /**\n * Фиксирует крестик\n */\n sticky?: boolean;\n\n /**\n * Иконка\n */\n icon?: ElementType;\n\n /**\n * Набор цветов для компонента\n */\n colors?: IconButtonProps['colors'];\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Коллбэк закрытия.\n */\n onClose?: (\n event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick',\n ) => void;\n}\n\nexport const Closer: FC<CloserProps> = ({\n view,\n className,\n sticky,\n icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon,\n colors = 'default',\n dataTestId,\n onClose,\n ...restProps\n}) => {\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n onClose?.(event, 'closerClick');\n };\n\n return (\n <div\n className={cn(styles.closer, className, {\n [styles.sticky]: sticky,\n })}\n >\n <IconButton\n size={view === 'desktop' ? 's' : 'xs'}\n className={cn(styles.button, colorStyles[colors].button, {\n [colorStyles[colors].mobile]: view === 'mobile',\n })}\n aria-label='закрыть'\n onClick={handleClick}\n icon={icon}\n colors={colors}\n dataTestId={dataTestId}\n {...restProps}\n />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;CAClB;AA+CG,MAAA,MAAM,GAAoB,CAAC,EACpC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,eAAe,GAAG,UAAU,EACxD,MAAM,GAAG,SAAS,EAClB,UAAU,EACV,OAAO,EACP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;AAC/D,QAAA,OAAO,GAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;AACpC,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;SAC1B,CAAC,EAAA;AAEF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE;gBACrD,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;aAClD,CAAC,EAAA,YAAA,EACS,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,KAClB,SAAS,EAAA,CACf,CACA;AAEd;;;;"}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
}
|
|
9
9
|
.button {
|
|
10
10
|
background: var(--color-light-monochrome-white-4-inverted);
|
|
11
|
-
color: var(--color-light-neutral-translucent-1300-inverted)
|
|
11
|
+
color: var(--color-light-neutral-translucent-1300-inverted);
|
|
12
12
|
}
|
|
13
13
|
.button.mobile {
|
|
14
14
|
background: var(--color-light-neutral-translucent-100-inverted);
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
1
3
|
.header {
|
|
2
4
|
width: 100%;
|
|
3
5
|
box-sizing: border-box;
|
|
4
|
-
transition:
|
|
6
|
+
transition:
|
|
7
|
+
box-shadow 0.2s ease,
|
|
8
|
+
background 0.2s ease;
|
|
5
9
|
}
|
|
6
10
|
|
|
7
11
|
.header.header.backgroundImage {
|
|
@@ -36,7 +40,7 @@
|
|
|
36
40
|
flex-grow: 1;
|
|
37
41
|
align-self: baseline;
|
|
38
42
|
box-sizing: border-box;
|
|
39
|
-
min-height: 48px
|
|
43
|
+
min-height: 48px;
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
.content.withBothAddons,
|
|
@@ -46,12 +50,12 @@
|
|
|
46
50
|
font-weight: 500;
|
|
47
51
|
align-self: center;
|
|
48
52
|
padding-top: var(--gap-4);
|
|
49
|
-
padding-bottom: var(--gap-4)
|
|
53
|
+
padding-bottom: var(--gap-4);
|
|
50
54
|
}
|
|
51
55
|
|
|
52
56
|
.content.withBothAddons > .children,
|
|
53
|
-
.content.withBothAddons > .title,
|
|
54
57
|
.content.withCompactTitle > .children,
|
|
58
|
+
.content.withBothAddons > .title,
|
|
55
59
|
.content.withCompactTitle > .title {
|
|
56
60
|
-webkit-line-clamp: 1;
|
|
57
61
|
word-break: break-all;
|
|
@@ -117,7 +121,7 @@
|
|
|
117
121
|
}
|
|
118
122
|
|
|
119
123
|
.trim {
|
|
120
|
-
overflow: hidden
|
|
124
|
+
overflow: hidden;
|
|
121
125
|
}
|
|
122
126
|
|
|
123
127
|
.trim .title,
|
package/moderncssm/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { BackArrowAddonProps } from './components/back-arrow-addon';
|
|
3
|
-
import type
|
|
1
|
+
import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
|
|
2
|
+
import { type BackArrowAddonProps } from './components/back-arrow-addon';
|
|
3
|
+
import { type CloserProps } from './components/closer';
|
|
4
4
|
export declare type NavigationBarPrivateProps = {
|
|
5
5
|
/**
|
|
6
6
|
* Контент шапки
|
|
@@ -90,7 +90,7 @@ export declare type NavigationBarPrivateProps = {
|
|
|
90
90
|
/**
|
|
91
91
|
* Иконка closer.
|
|
92
92
|
*/
|
|
93
|
-
closerIcon?:
|
|
93
|
+
closerIcon?: ElementType;
|
|
94
94
|
/**
|
|
95
95
|
* Обработчик закрытия
|
|
96
96
|
*/
|
|
@@ -110,7 +110,7 @@ export declare type NavigationBarPrivateProps = {
|
|
|
110
110
|
/**
|
|
111
111
|
* Ссылка на родительскую ноду overflow: auto
|
|
112
112
|
*/
|
|
113
|
-
scrollableParentRef?:
|
|
113
|
+
scrollableParentRef?: RefObject<HTMLDivElement>;
|
|
114
114
|
/**
|
|
115
115
|
* Data атрибут для компонента
|
|
116
116
|
*/
|
|
@@ -126,8 +126,8 @@ export declare type NavigationBarPrivateProps = {
|
|
|
126
126
|
};
|
|
127
127
|
export declare type ContentParams = {
|
|
128
128
|
extraClassName?: string;
|
|
129
|
-
wrapperRef?:
|
|
130
|
-
style?:
|
|
129
|
+
wrapperRef?: RefObject<HTMLDivElement>;
|
|
130
|
+
style?: CSSProperties;
|
|
131
131
|
hidden?: boolean;
|
|
132
132
|
extraAlign?: NavigationBarPrivateProps['align'];
|
|
133
133
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-navigation-bar-private",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Navigation bar private component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"@alfalab/core-components-button": "^12.0.1",
|
|
14
14
|
"@alfalab/core-components-icon-button": "^7.0.1",
|
|
15
15
|
"@alfalab/core-components-shared": "^1.1.0",
|
|
16
|
-
"@alfalab/core-components-typography": "^5.0.
|
|
16
|
+
"@alfalab/core-components-typography": "^5.0.2",
|
|
17
17
|
"@alfalab/hooks": "^1.13.1",
|
|
18
18
|
"@alfalab/icons-glyph": "^2.247.0",
|
|
19
19
|
"classnames": "^2.5.1",
|
|
@@ -28,6 +28,6 @@
|
|
|
28
28
|
"access": "public",
|
|
29
29
|
"directory": "dist"
|
|
30
30
|
},
|
|
31
|
-
"themesVersion": "14.1.
|
|
31
|
+
"themesVersion": "14.1.2",
|
|
32
32
|
"varsVersion": "10.1.0"
|
|
33
33
|
}
|
package/src/Component.tsx
CHANGED
|
@@ -8,7 +8,7 @@ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
|
|
|
8
8
|
|
|
9
9
|
import { BackArrowAddon } from './components/back-arrow-addon';
|
|
10
10
|
import { Closer } from './components/closer';
|
|
11
|
-
import type
|
|
11
|
+
import { type ContentParams, type NavigationBarPrivateProps } from './types';
|
|
12
12
|
|
|
13
13
|
import styles from './index.module.css';
|
|
14
14
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';
|
|
1
|
+
import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
|
|
4
|
-
import { IconButton, IconButtonProps } from '@alfalab/core-components-icon-button';
|
|
4
|
+
import { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';
|
|
5
5
|
import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
|
|
6
6
|
import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
|
|
7
7
|
|
package/src/index.module.css
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
@import '@alfalab/core-components-vars/src/index.css';
|
|
1
|
+
@import '@alfalab/core-components-vars/src/no-typography-index.css';
|
|
2
2
|
|
|
3
3
|
.header {
|
|
4
4
|
width: 100%;
|
|
5
5
|
box-sizing: border-box;
|
|
6
|
-
transition:
|
|
6
|
+
transition:
|
|
7
|
+
box-shadow 0.2s ease,
|
|
8
|
+
background 0.2s ease;
|
|
7
9
|
|
|
8
10
|
&.header.backgroundImage {
|
|
9
11
|
background-repeat: no-repeat;
|
package/src/types.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
|
|
2
2
|
|
|
3
|
-
import { BackArrowAddonProps } from './components/back-arrow-addon';
|
|
4
|
-
import type
|
|
3
|
+
import { type BackArrowAddonProps } from './components/back-arrow-addon';
|
|
4
|
+
import { type CloserProps } from './components/closer';
|
|
5
5
|
|
|
6
6
|
export type NavigationBarPrivateProps = {
|
|
7
7
|
/**
|
|
@@ -113,7 +113,7 @@ export type NavigationBarPrivateProps = {
|
|
|
113
113
|
/**
|
|
114
114
|
* Иконка closer.
|
|
115
115
|
*/
|
|
116
|
-
closerIcon?:
|
|
116
|
+
closerIcon?: ElementType;
|
|
117
117
|
|
|
118
118
|
/**
|
|
119
119
|
* Обработчик закрытия
|
|
@@ -138,7 +138,7 @@ export type NavigationBarPrivateProps = {
|
|
|
138
138
|
/**
|
|
139
139
|
* Ссылка на родительскую ноду overflow: auto
|
|
140
140
|
*/
|
|
141
|
-
scrollableParentRef?:
|
|
141
|
+
scrollableParentRef?: RefObject<HTMLDivElement>;
|
|
142
142
|
|
|
143
143
|
/**
|
|
144
144
|
* Data атрибут для компонента
|
|
@@ -158,8 +158,8 @@ export type NavigationBarPrivateProps = {
|
|
|
158
158
|
|
|
159
159
|
export type ContentParams = {
|
|
160
160
|
extraClassName?: string;
|
|
161
|
-
wrapperRef?:
|
|
162
|
-
style?:
|
|
161
|
+
wrapperRef?: RefObject<HTMLDivElement>;
|
|
162
|
+
style?: CSSProperties;
|
|
163
163
|
hidden?: boolean;
|
|
164
164
|
extraAlign?: NavigationBarPrivateProps['align'];
|
|
165
165
|
};
|
package/src/vars.css
CHANGED
package/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { BackArrowAddonProps } from './components/back-arrow-addon';
|
|
3
|
-
import type
|
|
1
|
+
import { type CSSProperties, type ElementType, type ReactNode, type RefObject } from 'react';
|
|
2
|
+
import { type BackArrowAddonProps } from './components/back-arrow-addon';
|
|
3
|
+
import { type CloserProps } from './components/closer';
|
|
4
4
|
export declare type NavigationBarPrivateProps = {
|
|
5
5
|
/**
|
|
6
6
|
* Контент шапки
|
|
@@ -90,7 +90,7 @@ export declare type NavigationBarPrivateProps = {
|
|
|
90
90
|
/**
|
|
91
91
|
* Иконка closer.
|
|
92
92
|
*/
|
|
93
|
-
closerIcon?:
|
|
93
|
+
closerIcon?: ElementType;
|
|
94
94
|
/**
|
|
95
95
|
* Обработчик закрытия
|
|
96
96
|
*/
|
|
@@ -110,7 +110,7 @@ export declare type NavigationBarPrivateProps = {
|
|
|
110
110
|
/**
|
|
111
111
|
* Ссылка на родительскую ноду overflow: auto
|
|
112
112
|
*/
|
|
113
|
-
scrollableParentRef?:
|
|
113
|
+
scrollableParentRef?: RefObject<HTMLDivElement>;
|
|
114
114
|
/**
|
|
115
115
|
* Data атрибут для компонента
|
|
116
116
|
*/
|
|
@@ -126,8 +126,8 @@ export declare type NavigationBarPrivateProps = {
|
|
|
126
126
|
};
|
|
127
127
|
export declare type ContentParams = {
|
|
128
128
|
extraClassName?: string;
|
|
129
|
-
wrapperRef?:
|
|
130
|
-
style?:
|
|
129
|
+
wrapperRef?: RefObject<HTMLDivElement>;
|
|
130
|
+
style?: CSSProperties;
|
|
131
131
|
hidden?: boolean;
|
|
132
132
|
extraAlign?: NavigationBarPrivateProps['align'];
|
|
133
133
|
};
|