@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
package/Component.d.ts
CHANGED
|
@@ -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>>;
|
package/Component.js.map
CHANGED
|
@@ -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":["forwardRef","useState","useRef","useLayoutEffect_SAFE_FOR_SSR","useEffect","React","cn","styles","BackArrowAddon","__assign","getDataTestId","Closer","mergeRefs"],"mappings":";;;;;;;;;;;;;;;;;;;;AAcA,IAAM,aAAa,GAAG,EAAE;IAEX,oBAAoB,GAAGA,gBAAU,CAC1C,UACI,EA+BC,EACD,GAAG,EAAA;;QA/BC,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,gBAAgB,GAAA,EAAA,CAAA,gBAAA,EAChB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,qBAAqB,GAAA,EAAA,CAAA,qBAAA,EACrB,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,KAAc,EAAd,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,MAAM,GAAA,EAAA,EACd,EAAW,GAAA,EAAA,CAAA,IAAA,EAAX,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACX,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAAA,GAAA,EAAA,CAAA,SAAqB,EAArB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,SAAS,GAAA,EAAA,EACrB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,EAAA,GAAA,EAAA,CAAA,WAAgB,EAAhB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EAChB,aAAa,mBAAA,EACb,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,MAAM,YAAA,EACN,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,QAAQ,GAAA,EAAA,CAAA,QAAA;IAIN,IAAA,EAAA,GAA4BC,cAAQ,CAAC,CAAC,CAAC,EAAtC,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,GAAA,EAAA,CAAA,CAAA,CAAe;AACvC,IAAA,IAAA,KAAgCA,cAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAA9D,WAAW,QAAA,EAAE,cAAc,QAAmC;AACrE,IAAA,IAAM,gBAAgB,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,IAAM,SAAS,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAC9C,IAAA,IAAM,qBAAqB,GAAGA,YAAM,CAAS,KAAK,CAAC;AACnD,IAAA,IAAM,aAAa,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAClD,IAAA,IAAM,cAAc,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAEnD,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,IAAM,YAAY,GAAG,QAAQ,IAAI,SAAS,KAAK,SAAS;IACxD,IAAM,WAAW,GAAG,OAAO,CAAC,UAAU,IAAI,aAAa,CAAC;IACxD,IAAM,YAAY,GAAG,OAAO,CAAC,WAAW,IAAI,SAAS,CAAC;IACtD,IAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAC7C,IAAA,IAAM,aAAa,GAAG,OAAO,CAAC,QAAQ,IAAI,WAAW,IAAI,MAAM,IAAI,CAAC,YAAY,CAAC;IACjF,IAAM,gBAAgB,GAAG,UAAU,KAAK,YAAY,IAAI,CAAC,WAAW,CAAC;IACrE,IAAM,gBAAgB,GAAG,UAAU,IAAI,CAAC,YAAY,IAAI,WAAW;AACnE,IAAA,IAAM,sBAAsB,GAAG,CAAC,aAAa,IAAI,gBAAgB;AACjE,IAAA,IAAM,sBAAsB,GAAG,CAAC,aAAa,IAAI,gBAAgB;IACjE,IAAM,wBAAwB,GAC1B,aAAa,IAAI,gBAAgB,IAAI,SAAS,GAAG,aAAa;AAClE,IAAA,IAAM,wBAAwB,GAAG,aAAa,IAAI,gBAAgB;AAClE,IAAA,IAAM,gBAAgB,GAAG,qBAAqB,CAAC,OAAO;AAEtD,IAAAC,kCAA4B,CAAC,YAAA;;QACzB,IAAI,KAAK,KAAK,QAAQ,KAAK,sBAAsB,IAAI,wBAAwB,CAAC,EAAE;YAC5E,IAAM,eAAe,GAAG,CAAA,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,KAAI,CAAC;YAC/D,IAAM,gBAAgB,GAAG,CAAA,CAAA,EAAA,GAAA,cAAc,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,KAAI,CAAC;YAEjE,IAAM,YAAU,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,eAAe,CAAC;AAC/D,YAAA,IAAM,qBAAmB,GAAG,gBAAgB,GAAG,eAAe,GAAG,CAAC;YAElE,cAAc,CAAC,UAAC,IAAI,EAAA;gBAChB,IAAM,QAAQ,GAAG;sBACX,EAAE,IAAI,EAAE,YAAU,EAAE,KAAK,EAAE,CAAC;sBAC5B,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,YAAU,EAAE;AAEpC,gBAAA,IAAM,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;AAEF,IAAAC,eAAS,CAAC,YAAA;QACN,IAAM,MAAM,GAAG,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,MAAA,GAAA,MAAA,GAAA,mBAAmB,CAAE,OAAO;QAE3C,IAAM,YAAY,GAAG,UAAC,EAAS,EAAA;AAC3B,YAAA,IAAM,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;AAED,QAAA,OAAO,cAAM,OAAA,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA,EAAA;AACpE,KAAC,EAAE,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC;AAExC,IAAA,IAAM,gBAAgB,GAAG,YAAA;QACrB,IAAI,WAAW,GAAG,CAAC;AAEnB,QAAA,IAAI,aAAa,EAAE;AACf,YAAA,IAAM,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,QACIC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAA;YACjDF,sBAAC,CAAA,aAAA,CAAAG,wBAAc,EACGC,cAAA,CAAA,EAAA,cAAA,EAAAC,kCAAa,CAAC,UAAU,EAAE,aAAa,CAAC,EAClD,EAAA,eAAe,EACnB,EAAA,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,MAAM,EAAA,CAAA,CACjB,CACA;AAEd,KAAC;IAED,IAAM,aAAa,GAAG,UAAC,IAAwB,EAAA;;AAAxB,QAAA,IAAA,IAAA,KAAA,MAAA,EAAA,EAAA,IAAwB,GAAA,EAAA,CAAA;QACnC,IAAA,cAAc,GAA4C,IAAI,CAAhD,cAAA,EAAE,UAAU,GAAgC,IAAI,CAApC,UAAA,EAAE,KAAK,GAAyB,IAAI,CAA7B,KAAA,EAAE,MAAM,GAAiB,IAAI,CAAA,MAArB,EAAE,UAAU,GAAK,IAAI,CAAA,UAAT;AAE7D,QAAA,QACIL,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAOI,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,KAAK,KAAE,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,EAC5D,CAAA,EAAA,GAAG,EAAE,UAAU,EACf,SAAS,EAAEH,mBAAE,CACTC,YAAM,CAAC,OAAO,EACd,cAAc,EACd,gBAAgB,EAChBA,YAAM,CAAC,UAAU,IAAI,KAAK,CAAC,GAAA,EAAA,GAAA,EAAA;AAEvB,gBAAA,EAAA,CAACA,YAAM,CAAC,IAAI,CAAA,GAAG,IAAI;gBACnB,EAAC,CAAAA,YAAM,CAAC,gBAAgB,CAAA,GAAG,QAAQ,IAAI,YAAY,IAAI,UAAU;AAExE,gBAAA,EAAA,EAAA,EAAA,aAAA,EACY,MAAM,EAAA;YAElB,QAAQ,IAAIF,8CAAK,SAAS,EAAEE,YAAM,CAAC,QAAQ,EAAG,EAAA,QAAQ,CAAO;AAC7D,YAAA,KAAK,KACFF,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,KAAK,EAAE,cAAc,CAAC,EAAA,cAAA,EAC7B,MAAM,GAAG,SAAS,GAAGG,kCAAa,CAAC,UAAU,EAAE,OAAO,CAAC,EACrE,GAAG,EAAE,QAAQ,EAEZ,EAAA,KAAK,CACJ,CACT;YACA,YAAY,IAAI,QAAQ,KACrBL,8CACI,SAAS,EAAEE,YAAM,CAAC,QAAQ,EAAA,cAAA,EACZG,kCAAa,CAAC,UAAU,EAAE,UAAU,CAAC,EAAA,EAElD,QAAQ,CACP,CACT,CACC;AAEd,KAAC;AAED,IAAA,IAAM,YAAY,GAAG,YAAA,EAAM,QACvBL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,KAAK,EAAEA,YAAM,CAAC,MAAM,EAAE,eAAe,CAAC,EAAA;AAC5D,QAAAF,sBAAA,CAAA,aAAA,CAACM,kBAAM,EAAAF,cAAA,CAAA,EACH,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,UAAU,EAChB,UAAU,EAAEC,kCAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,OAAO,EAAE,OAAO,EACZ,EAAA,WAAW,CACjB,CAAA,CACA,EACT,EAAA;IAED,QACIL,8CACI,GAAG,EAAEO,0BAAS,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,EAChC,SAAS,EAAEN,mBAAE,CAACC,YAAM,CAAC,MAAM,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA,EAAI,EAAC,CAAAA,YAAM,CAAC,eAAe,CAAA,GAAG,QAAQ,EAAA,EAAA,EAAG,EACjE,cAAA,EAAAG,kCAAa,CAAC,UAAU,CAAC,EACvC,KAAK,EACED,cAAA,CAAAA,cAAA,CAAA,EAAA,GAAC,QAAQ,IAAI,EAAE,eAAe,EAAE,MAAO,CAAA,MAAA,CAAA,QAAQ,MAAG,EAAE,EACpD,GAAC,aAAa;YACb,gBAAgB,CAAC,OAAO,IAAI;AACxB,YAAA,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAAY;AAC9C,SAAA,iBAEE,QAAQ,EAAA;AAEnB,QAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,QAAQ,GAAA,EAAA,GAAA,EAAA;AACzB,gBAAA,EAAA,CAACA,YAAM,CAAC,cAAc,CAAA,GAAG,aAAa;AACtC,gBAAA,EAAA,CAACA,YAAM,CAAC,mBAAmB,CAAA,GAAG,QAAQ;oBACxC,EACF,KAAK,EACEE,cAAA,CAAA,EAAA,GAAC;AACA,kBAAE;oBACI,SAAS,EAAE,GAAI,CAAA,MAAA,CAAA,gBAAgB,CAAE;AACjC,oBAAA,UAAU,EAAE,gBAAgB;AAC/B;kBACD,IAAI,EAAC,EAAA;YAGd,WAAW,KACRJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,YAAM,CAAC,aAAa,EAAE,GAAG,EAAE,aAAa,EAAA;gBACnD,aAAa,IAAI,gBAAgB,EAAE;AACnC,gBAAA,UAAU,KACPF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,KAAK,EAAE,cAAc,CAAC,EAAA,EAAG,UAAU,CAAO,CACvE,CACC,CACT;YAEA,sBAAsB;AACnB,gBAAA,aAAa,CACNE,cAAA,CAAA,EAAA,GAAC,KAAK,KAAK;AACV,sBAAE;AACI,wBAAA,KAAK,EAAE;4BACH,UAAU,EAAE,WAAW,CAAC,IAAI;4BAC5B,WAAW,EAAE,WAAW,CAAC,KAAK;AACjC,yBAAA;AACJ;sBACD,IAAI,EACZ,CAAA;YAEL,wBAAwB;AACrB,gBAAA,aAAa,CAAC;oBACV,cAAc,EAAEF,YAAM,CAAC,cAAc;oBACrC,KAAK,EAAAE,cAAA,CAAA,EACD,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,aAAa,IAAI,aAAa,CAAC,EAC9D,GAAC,KAAK,KAAK;AACV,0BAAE;4BACI,UAAU,EAAE,WAAW,CAAC,IAAI;4BAC5B,WAAW,EAAE,WAAW,CAAC,KAAK;AACjC;0BACD,IAAI,EACb;AACD,oBAAA,UAAU,EAAE,QAAQ;iBACvB,CAAC;AAEL,YAAA,YAAY,KACTJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,aAAa,EAAEA,YAAM,CAAC,WAAW,CAAC,EACvD,GAAG,EAAE,cAAc,EAAA;AAElB,gBAAA,WAAW,KACRF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,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,EAAEA,YAAM,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;AACV,gBAAA,cAAc,EAAED,mBAAE,EAAA,EAAA,GAAA,EAAA;AACd,oBAAA,EAAA,CAACC,YAAM,CAAC,mBAAmB,CAAG,GAAA,IAAI,KAAK,SAAS;AAChD,oBAAA,EAAA,CAACA,YAAM,CAAC,kBAAkB,CAAA,GAAG,QAAQ;AACvC,oBAAA,EAAA,EAAA;AACF,gBAAA,UAAU,EAAE,MAAM;aACrB,CAAC;AAEL,QAAA,YAAY,KACTF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,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":["forwardRef","useState","useRef","useLayoutEffect_SAFE_FOR_SSR","useEffect","React","cn","styles","BackArrowAddon","__assign","getDataTestId","Closer","mergeRefs"],"mappings":"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"}
|
|
@@ -17,48 +17,48 @@
|
|
|
17
17
|
--color-static-monochrome-white-4: rgba(255, 255, 255, 0.04);
|
|
18
18
|
} :root {
|
|
19
19
|
--navigation-bar-back-arrow-mobile-fill: var(--color-light-neutral-translucent-700);
|
|
20
|
-
} .navigation-bar-
|
|
20
|
+
} .navigation-bar-private__component_10nk7 {
|
|
21
21
|
height: 100%;
|
|
22
22
|
background: var(--color-static-monochrome-white-4);
|
|
23
23
|
-webkit-backdrop-filter: blur(10px);
|
|
24
24
|
backdrop-filter: blur(10px);
|
|
25
25
|
border-radius: var(--border-radius-pill);
|
|
26
|
-
min-width: 48px
|
|
27
|
-
} .navigation-bar-
|
|
26
|
+
min-width: 48px;
|
|
27
|
+
} .navigation-bar-private__component_10nk7 svg > path {
|
|
28
28
|
transition: fill 0.2s ease;
|
|
29
29
|
fill: var(--color-light-neutral-translucent-1300);
|
|
30
|
-
} .navigation-bar-
|
|
30
|
+
} .navigation-bar-private__component_10nk7:hover svg > path {
|
|
31
31
|
fill: var(--color-light-neutral-translucent-1300-hover);
|
|
32
|
-
} .navigation-bar-
|
|
32
|
+
} .navigation-bar-private__component_10nk7:active svg > path {
|
|
33
33
|
fill: var(--color-light-neutral-translucent-1300-press);
|
|
34
|
-
} .navigation-bar-
|
|
34
|
+
} .navigation-bar-private__mobileComponent_10nk7 {
|
|
35
35
|
height: 32px;
|
|
36
36
|
min-width: 32px;
|
|
37
37
|
margin: var(--gap-0) var(--gap-8);
|
|
38
38
|
-webkit-backdrop-filter: none;
|
|
39
39
|
backdrop-filter: none;
|
|
40
40
|
background: none;
|
|
41
|
-
} .navigation-bar-
|
|
41
|
+
} .navigation-bar-private__flex_10nk7 {
|
|
42
42
|
display: flex;
|
|
43
43
|
align-items: center;
|
|
44
|
-
} .navigation-bar-
|
|
44
|
+
} .navigation-bar-private__iconWrapper_10nk7 {
|
|
45
45
|
display: inline-flex;
|
|
46
46
|
align-items: center;
|
|
47
47
|
justify-content: center;
|
|
48
48
|
height: 48px;
|
|
49
49
|
margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);
|
|
50
|
-
border-radius: var(--border-radius-circle)
|
|
51
|
-
} .navigation-bar-
|
|
50
|
+
border-radius: var(--border-radius-circle);
|
|
51
|
+
} .navigation-bar-private__iconWrapper_10nk7 + .navigation-bar-private__text_10nk7 {
|
|
52
52
|
margin-right: var(--gap-12);
|
|
53
|
-
} .navigation-bar-
|
|
53
|
+
} .navigation-bar-private__mobileWrapper_10nk7 {
|
|
54
54
|
width: 32px;
|
|
55
55
|
height: 32px;
|
|
56
56
|
background: var(--color-light-neutral-translucent-100);
|
|
57
57
|
-webkit-backdrop-filter: blur(10px);
|
|
58
58
|
backdrop-filter: blur(10px);
|
|
59
|
-
margin: var(--gap-0)
|
|
60
|
-
} .navigation-bar-
|
|
59
|
+
margin: var(--gap-0);
|
|
60
|
+
} .navigation-bar-private__mobileWrapper_10nk7 + .navigation-bar-private__text_10nk7 {
|
|
61
61
|
margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);
|
|
62
|
-
} .navigation-bar-
|
|
62
|
+
} .navigation-bar-private__mobileWrapper_10nk7 svg > path {
|
|
63
63
|
fill: var(--navigation-bar-back-arrow-mobile-fill);
|
|
64
64
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"navigation-bar-
|
|
5
|
+
var styles = {"component":"navigation-bar-private__component_10nk7","mobileComponent":"navigation-bar-private__mobileComponent_10nk7","flex":"navigation-bar-private__flex_10nk7","iconWrapper":"navigation-bar-private__iconWrapper_10nk7","text":"navigation-bar-private__text_10nk7","mobileWrapper":"navigation-bar-private__mobileWrapper_10nk7"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/back-arrow-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '@alfalab/core-components-vars/src/colors-monochrome.css';\n@import '../../vars.css';\n\n.component {\n height: 100%;\n background: var(--color-static-monochrome-white-4);\n backdrop-filter: blur(10px);\n border-radius: var(--border-radius-pill);\n min-width: 48px;\n\n & svg > path {\n transition: fill 0.2s ease;\n fill: var(--color-light-neutral-translucent-1300);\n }\n\n &:hover {\n & svg > path {\n fill: var(--color-light-neutral-translucent-1300-hover);\n }\n }\n\n &:active {\n & svg > path {\n fill: var(--color-light-neutral-translucent-1300-press);\n }\n }\n}\n\n.mobileComponent {\n height: 32px;\n min-width: 32px;\n margin: var(--gap-0) var(--gap-8);\n backdrop-filter: none;\n background: none;\n}\n\n.flex {\n display: flex;\n align-items: center;\n}\n\n.iconWrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);\n border-radius: var(--border-radius-circle);\n\n & + .text {\n margin-right: var(--gap-12);\n }\n}\n\n.mobileWrapper {\n width: 32px;\n height: 32px;\n background: var(--color-light-neutral-translucent-100);\n backdrop-filter: blur(10px);\n margin: var(--gap-0);\n\n & + .text {\n margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);\n }\n\n & svg > path {\n fill: var(--navigation-bar-back-arrow-mobile-fill);\n }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yCAAyC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,MAAM,CAAC,oCAAoC,CAAC,aAAa,CAAC,2CAA2C,CAAC,MAAM,CAAC,oCAAoC,CAAC,eAAe,CAAC,6CAA6C,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/back-arrow-addon/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n@import '@alfalab/core-components-vars/src/colors-monochrome.css';\n@import '../../vars.css';\n\n.component {\n height: 100%;\n background: var(--color-static-monochrome-white-4);\n backdrop-filter: blur(10px);\n border-radius: var(--border-radius-pill);\n min-width: 48px;\n\n & svg > path {\n transition: fill 0.2s ease;\n fill: var(--color-light-neutral-translucent-1300);\n }\n\n &:hover {\n & svg > path {\n fill: var(--color-light-neutral-translucent-1300-hover);\n }\n }\n\n &:active {\n & svg > path {\n fill: var(--color-light-neutral-translucent-1300-press);\n }\n }\n}\n\n.mobileComponent {\n height: 32px;\n min-width: 32px;\n margin: var(--gap-0) var(--gap-8);\n backdrop-filter: none;\n background: none;\n}\n\n.flex {\n display: flex;\n align-items: center;\n}\n\n.iconWrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);\n border-radius: var(--border-radius-circle);\n\n & + .text {\n margin-right: var(--gap-12);\n }\n}\n\n.mobileWrapper {\n width: 32px;\n height: 32px;\n background: var(--color-light-neutral-translucent-100);\n backdrop-filter: blur(10px);\n margin: var(--gap-0);\n\n & + .text {\n margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);\n }\n\n & svg > path {\n fill: var(--navigation-bar-back-arrow-mobile-fill);\n }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yCAAyC,CAAC,iBAAiB,CAAC,+CAA+C,CAAC,MAAM,CAAC,oCAAoC,CAAC,aAAa,CAAC,2CAA2C,CAAC,MAAM,CAAC,oCAAoC,CAAC,eAAe,CAAC,6CAA6C,CAAC;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';
|
|
2
|
-
import { IconButtonProps } from '@alfalab/core-components-icon-button';
|
|
1
|
+
import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';
|
|
2
|
+
import { type IconButtonProps } from '@alfalab/core-components-icon-button';
|
|
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":["defaultColors","invertedColors","CrossHeavyMIcon","CrossMIcon","__rest","React","cn","styles","IconButton","__assign"],"mappings":";;;;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAEA,cAAa;AACtB,IAAA,QAAQ,EAAEC,eAAc;CAClB;AA+CH,IAAM,MAAM,GAAoB,UAAC,EASvC,EAAA;;AARG,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,YAAwD,EAAxD,IAAI,mBAAG,IAAI,KAAK,SAAS,GAAGC,+BAAe,GAAGC,qBAAU,GAAA,EAAA,EACxD,cAAkB,EAAlB,MAAM,mBAAG,SAAS,GAAA,EAAA,EAClB,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACJ,SAAS,GAAAC,YAAA,CAAA,EAAA,EARwB,0EASvC,CADe;IAEZ,IAAM,WAAW,GAAG,UAAC,KAA0C,EAAA;QAC3D,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACIC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,MAAM,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AAClC,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA;AAEF,QAAAF,sBAAA,CAAA,aAAA,CAACG,mCAAU,EAAAC,cAAA,CAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAEH,mBAAE,CAACC,YAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;gBACnD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,IAAI,KAAK,QAAQ;oBACjD,EACS,YAAA,EAAA,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,IAClB,SAAS,CAAA,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":["defaultColors","invertedColors","CrossHeavyMIcon","CrossMIcon","__rest","React","cn","styles","IconButton","__assign"],"mappings":";;;;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAEA,cAAa;AACtB,IAAA,QAAQ,EAAEC,eAAc;CAClB;AA+CH,IAAM,MAAM,GAAoB,UAAC,EASvC,EAAA;;AARG,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,YAAwD,EAAxD,IAAI,mBAAG,IAAI,KAAK,SAAS,GAAGC,+BAAe,GAAGC,qBAAU,GAAA,EAAA,EACxD,cAAkB,EAAlB,MAAM,mBAAG,SAAS,GAAA,EAAA,EAClB,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACJ,SAAS,GAAAC,YAAA,CAAA,EAAA,EARwB,0EASvC,CADe;IAEZ,IAAM,WAAW,GAAG,UAAC,KAA0C,EAAA;QAC3D,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACIC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,MAAM,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AAClC,YAAA,EAAA,CAACA,YAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA;AAEF,QAAAF,sBAAA,CAAA,aAAA,CAACG,mCAAU,EAAAC,cAAA,CAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAEH,mBAAE,CAACC,YAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;gBACnD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,IAAI,KAAK,QAAQ;oBACjD,EACS,YAAA,EAAA,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,IAClB,SAAS,CAAA,CACf,CACA;AAEd;;;;"}
|
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
:root {
|
|
10
10
|
--navigation-bar-closer-mobile-color: var(--color-light-neutral-translucent-700);
|
|
11
11
|
}
|
|
12
|
-
.navigation-bar-
|
|
12
|
+
.navigation-bar-private__button_3b6g1 {
|
|
13
13
|
background: var(--color-light-monochrome-white-4);
|
|
14
|
-
color: var(--color-light-neutral-translucent-1300)
|
|
14
|
+
color: var(--color-light-neutral-translucent-1300);
|
|
15
15
|
}
|
|
16
|
-
.navigation-bar-
|
|
16
|
+
.navigation-bar-private__button_3b6g1.navigation-bar-private__mobile_3b6g1 {
|
|
17
17
|
background: var(--color-light-neutral-translucent-100);
|
|
18
18
|
color: var(--navigation-bar-closer-mobile-color);
|
|
19
19
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./default.css');
|
|
4
4
|
|
|
5
|
-
var defaultColors = {"button":"navigation-bar-
|
|
5
|
+
var defaultColors = {"button":"navigation-bar-private__button_3b6g1","mobile":"navigation-bar-private__mobile_3b6g1"};
|
|
6
6
|
|
|
7
7
|
module.exports = defaultColors;
|
|
8
8
|
//# sourceMappingURL=default.module.css.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
--border-radius-circle: 50%;
|
|
3
3
|
} :root {
|
|
4
4
|
--gap-0: 0px;
|
|
5
|
-
} .navigation-bar-
|
|
5
|
+
} .navigation-bar-private__closer_15jh6 {
|
|
6
6
|
flex-shrink: 0;
|
|
7
7
|
width: 48px;
|
|
8
8
|
height: 48px;
|
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
12
|
justify-content: center;
|
|
13
|
-
} .navigation-bar-
|
|
13
|
+
} .navigation-bar-private__button_15jh6 {
|
|
14
14
|
-webkit-backdrop-filter: blur(10px);
|
|
15
15
|
backdrop-filter: blur(10px);
|
|
16
|
-
} .navigation-bar-
|
|
16
|
+
} .navigation-bar-private__button_15jh6.navigation-bar-private__button_15jh6 {
|
|
17
17
|
border-radius: var(--border-radius-circle);
|
|
18
|
-
} .navigation-bar-
|
|
18
|
+
} .navigation-bar-private__sticky_15jh6 {
|
|
19
19
|
position: sticky;
|
|
20
20
|
top: var(--gap-0);
|
|
21
21
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"closer":"navigation-bar-
|
|
5
|
+
var styles = {"closer":"navigation-bar-private__closer_15jh6","button":"navigation-bar-private__button_15jh6","sticky":"navigation-bar-private__sticky_15jh6"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/closer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.closer {\n flex-shrink: 0;\n width: 48px;\n height: 48px;\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button {\n backdrop-filter: blur(10px);\n}\n\n.button.button {\n border-radius: var(--border-radius-circle);\n}\n\n.sticky {\n position: sticky;\n top: var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,QAAQ,CAAC,sCAAsC,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/closer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.closer {\n flex-shrink: 0;\n width: 48px;\n height: 48px;\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.button {\n backdrop-filter: blur(10px);\n}\n\n.button.button {\n border-radius: var(--border-radius-circle);\n}\n\n.sticky {\n position: sticky;\n top: var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sCAAsC,CAAC,QAAQ,CAAC,sCAAsC,CAAC,QAAQ,CAAC,sCAAsC,CAAC;;;;"}
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
--color-light-neutral-translucent-700-inverted
|
|
11
11
|
);
|
|
12
12
|
}
|
|
13
|
-
.navigation-bar-
|
|
13
|
+
.navigation-bar-private__button_qbrvw {
|
|
14
14
|
background: var(--color-light-monochrome-white-4-inverted);
|
|
15
|
-
color: var(--color-light-neutral-translucent-1300-inverted)
|
|
15
|
+
color: var(--color-light-neutral-translucent-1300-inverted);
|
|
16
16
|
}
|
|
17
|
-
.navigation-bar-
|
|
17
|
+
.navigation-bar-private__button_qbrvw.navigation-bar-private__mobile_qbrvw {
|
|
18
18
|
background: var(--color-light-neutral-translucent-100-inverted);
|
|
19
19
|
color: var(--navigation-bar-closer-mobile-color-inverted);
|
|
20
20
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./inverted.css');
|
|
4
4
|
|
|
5
|
-
var invertedColors = {"button":"navigation-bar-
|
|
5
|
+
var invertedColors = {"button":"navigation-bar-private__button_qbrvw","mobile":"navigation-bar-private__mobile_qbrvw"};
|
|
6
6
|
|
|
7
7
|
module.exports = invertedColors;
|
|
8
8
|
//# sourceMappingURL=inverted.module.css.js.map
|
package/cssm/Component.d.ts
CHANGED
|
@@ -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>>;
|
package/cssm/Component.js.map
CHANGED
|
@@ -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":["forwardRef","useState","useRef","useLayoutEffect_SAFE_FOR_SSR","useEffect","React","cn","styles","BackArrowAddon","__assign","getDataTestId","Closer","mergeRefs"],"mappings":"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"}
|
|
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":["forwardRef","useState","useRef","useLayoutEffect_SAFE_FOR_SSR","useEffect","React","cn","styles","BackArrowAddon","__assign","getDataTestId","Closer","mergeRefs"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
-webkit-backdrop-filter: blur(10px);
|
|
24
24
|
backdrop-filter: blur(10px);
|
|
25
25
|
border-radius: var(--border-radius-pill);
|
|
26
|
-
min-width: 48px
|
|
26
|
+
min-width: 48px;
|
|
27
27
|
} .component svg > path {
|
|
28
28
|
transition: fill 0.2s ease;
|
|
29
29
|
fill: var(--color-light-neutral-translucent-1300);
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
justify-content: center;
|
|
48
48
|
height: 48px;
|
|
49
49
|
margin: var(--gap-0) var(--gap-8) var(--gap-0) var(--gap-12);
|
|
50
|
-
border-radius: var(--border-radius-circle)
|
|
50
|
+
border-radius: var(--border-radius-circle);
|
|
51
51
|
} .iconWrapper + .text {
|
|
52
52
|
margin-right: var(--gap-12);
|
|
53
53
|
} .mobileWrapper {
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
background: var(--color-light-neutral-translucent-100);
|
|
57
57
|
-webkit-backdrop-filter: blur(10px);
|
|
58
58
|
backdrop-filter: blur(10px);
|
|
59
|
-
margin: var(--gap-0)
|
|
59
|
+
margin: var(--gap-0);
|
|
60
60
|
} .mobileWrapper + .text {
|
|
61
61
|
margin: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-8);
|
|
62
62
|
} .mobileWrapper svg > path {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { ButtonHTMLAttributes, ElementType, FC } from 'react';
|
|
2
|
-
import { IconButtonProps } from '@alfalab/core-components-icon-button/cssm';
|
|
1
|
+
import React, { type ButtonHTMLAttributes, type ElementType, type FC } from 'react';
|
|
2
|
+
import { type IconButtonProps } from '@alfalab/core-components-icon-button/cssm';
|
|
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":["defaultColors","invertedColors","CrossHeavyMIcon","CrossMIcon","__rest","React","cn","styles","IconButton","__assign"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAEA,8BAAa;AACtB,IAAA,QAAQ,EAAEC,+BAAc;CAClB;AA+CH,IAAM,MAAM,GAAoB,UAAC,EASvC,EAAA;;AARG,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,YAAwD,EAAxD,IAAI,mBAAG,IAAI,KAAK,SAAS,GAAGC,+BAAe,GAAGC,qBAAU,GAAA,EAAA,EACxD,cAAkB,EAAlB,MAAM,mBAAG,SAAS,GAAA,EAAA,EAClB,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACJ,SAAS,GAAAC,YAAA,CAAA,EAAA,EARwB,0EASvC,CADe;IAEZ,IAAM,WAAW,GAAG,UAAC,KAA0C,EAAA;QAC3D,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACIC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,MAAM,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AAClC,YAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA;AAEF,QAAAF,sBAAA,CAAA,aAAA,CAACG,eAAU,EAAAC,cAAA,CAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAEH,mBAAE,CAACC,uBAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;gBACnD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,IAAI,KAAK,QAAQ;oBACjD,EACS,YAAA,EAAA,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,IAClB,SAAS,CAAA,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":["defaultColors","invertedColors","CrossHeavyMIcon","CrossMIcon","__rest","React","cn","styles","IconButton","__assign"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,WAAW,GAAG;AAChB,IAAA,OAAO,EAAEA,8BAAa;AACtB,IAAA,QAAQ,EAAEC,+BAAc;CAClB;AA+CH,IAAM,MAAM,GAAoB,UAAC,EASvC,EAAA;;AARG,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,YAAwD,EAAxD,IAAI,mBAAG,IAAI,KAAK,SAAS,GAAGC,+BAAe,GAAGC,qBAAU,GAAA,EAAA,EACxD,cAAkB,EAAlB,MAAM,mBAAG,SAAS,GAAA,EAAA,EAClB,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACJ,SAAS,GAAAC,YAAA,CAAA,EAAA,EARwB,0EASvC,CADe;IAEZ,IAAM,WAAW,GAAG,UAAC,KAA0C,EAAA;QAC3D,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAG,KAAK,EAAE,aAAa,CAAC;AACnC,KAAC;IAED,QACIC,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,MAAM,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AAClC,YAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,EAAA,EAAA;AAEF,QAAAF,sBAAA,CAAA,aAAA,CAACG,eAAU,EAAAC,cAAA,CAAA,EACP,IAAI,EAAE,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,EACrC,SAAS,EAAEH,mBAAE,CAACC,uBAAM,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;gBACnD,EAAC,CAAA,WAAW,CAAC,MAAM,CAAC,CAAC,MAAM,CAAA,GAAG,IAAI,KAAK,QAAQ;oBACjD,EACS,YAAA,EAAA,4CAAS,EACpB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,IAClB,SAAS,CAAA,CACf,CACA;AAEd;;;;"}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
}
|
|
12
12
|
.button {
|
|
13
13
|
background: var(--color-light-monochrome-white-4);
|
|
14
|
-
color: var(--color-light-neutral-translucent-1300)
|
|
14
|
+
color: var(--color-light-neutral-translucent-1300);
|
|
15
15
|
}
|
|
16
16
|
.button.mobile {
|
|
17
17
|
background: var(--color-light-neutral-translucent-100);
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
}
|
|
13
13
|
.button {
|
|
14
14
|
background: var(--color-light-monochrome-white-4-inverted);
|
|
15
|
-
color: var(--color-light-neutral-translucent-1300-inverted)
|
|
15
|
+
color: var(--color-light-neutral-translucent-1300-inverted);
|
|
16
16
|
}
|
|
17
17
|
.button.mobile {
|
|
18
18
|
background: var(--color-light-neutral-translucent-100-inverted);
|
package/cssm/index.module.css
CHANGED
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
} .header {
|
|
11
11
|
width: 100%;
|
|
12
12
|
box-sizing: border-box;
|
|
13
|
-
transition:
|
|
13
|
+
transition:
|
|
14
|
+
box-shadow 0.2s ease,
|
|
15
|
+
background 0.2s ease;
|
|
14
16
|
} .header.header.backgroundImage {
|
|
15
17
|
background-repeat: no-repeat;
|
|
16
18
|
background-position: center;
|
|
@@ -35,7 +37,7 @@
|
|
|
35
37
|
flex-grow: 1;
|
|
36
38
|
align-self: baseline;
|
|
37
39
|
box-sizing: border-box;
|
|
38
|
-
min-height: 48px
|
|
40
|
+
min-height: 48px;
|
|
39
41
|
} .content.withBothAddons,
|
|
40
42
|
.content.withCompactTitle {
|
|
41
43
|
font-size: 16px;
|
|
@@ -43,10 +45,10 @@
|
|
|
43
45
|
font-weight: 500;
|
|
44
46
|
align-self: center;
|
|
45
47
|
padding-top: var(--gap-4);
|
|
46
|
-
padding-bottom: var(--gap-4)
|
|
48
|
+
padding-bottom: var(--gap-4);
|
|
47
49
|
} .content.withBothAddons > .children,
|
|
48
|
-
.content.withBothAddons > .title,
|
|
49
50
|
.content.withCompactTitle > .children,
|
|
51
|
+
.content.withBothAddons > .title,
|
|
50
52
|
.content.withCompactTitle > .title {
|
|
51
53
|
-webkit-line-clamp: 1;
|
|
52
54
|
word-break: break-all;
|
|
@@ -88,7 +90,7 @@
|
|
|
88
90
|
} .center {
|
|
89
91
|
text-align: center;
|
|
90
92
|
} .trim {
|
|
91
|
-
overflow: hidden
|
|
93
|
+
overflow: hidden;
|
|
92
94
|
} .trim .title,
|
|
93
95
|
.trim .children {
|
|
94
96
|
-webkit-line-clamp: 2;
|
package/cssm/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/esm/Component.d.ts
CHANGED
|
@@ -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>>;
|