Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DRAFT] feat: navigation bar private - add split d/m #1475

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[DRAFT] feat: navigation bar private - add split d/m #1475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2199683
feat: navigation bar private - add split d/m;
denisx Dec 1, 2024
981628d
fix: ts;
denisx Dec 1, 2024
499fbb2
fix: rollback snaps;
Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/forty-years-sneeze.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@alfalab/core-components-navigation-bar-private': minor
---

- Добавлен сплит д/м
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

не экономь буквы плиз)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

прнято

- Добавлено sideEffects: false
2 changes: 1 addition & 1 deletion packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
>
<button
aria-label="закрыть"
class="component text size-48 hug size-48 component text component text cc-icon-button button mobile primary component border-32"
class="component text size-48 hug size-48 component text component text cc-icon-button button primary component border-32"
type="button"
>
<span
Expand Down
10 changes: 5 additions & 5 deletions packages/modal/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
</div>
</div>
<div
class="content contentOnBotDesktop left trim"
class="content contentOnBot left trim"
style="visibility: visible;"
>
<div
Expand Down Expand Up @@ -161,7 +161,7 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
>
<button
aria-label="назад"
class="component text size-32 hug size-32 component text component text component mobileComponent"
class="component text size-32 hug size-32 component text component text component"
type="button"
>
<span
Expand All @@ -171,7 +171,7 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
class="flex"
>
<div
class="iconWrapper mobileWrapper"
class="iconWrapper"
>
<svg
fill="currentColor"
Expand Down Expand Up @@ -208,7 +208,7 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
>
<button
aria-label="закрыть"
class="component text size-48 hug size-48 component text component text cc-icon-button button mobile primary component border-32"
class="component text size-48 hug size-48 component text component text cc-icon-button button primary component border-32"
type="button"
>
<span
Expand Down Expand Up @@ -238,7 +238,7 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
</div>
</div>
<div
class="content contentOnBotMobile content left trim"
class="content contentOnBot content left trim"
style="visibility: visible;"
>
<div
Expand Down
1 change: 1 addition & 0 deletions packages/navigation-bar-private/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"access": "public",
"directory": "dist"
},
"sideEffects": false,
"dependencies": {
"@alfalab/core-components-icon-button": "^6.11.2",
"@alfalab/core-components-button": "^11.10.2",
Expand Down
3 changes: 1 addition & 2 deletions packages/navigation-bar-private/src/Component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import { render } from '@testing-library/react';
import { NavigationBarPrivate } from './Component';
import { NavigationBarPrivateProps } from './types';
import { NavigationBarPrivate, type NavigationBarPrivateProps } from '.';

const dti = 'navigation-bar-dti';

Expand Down
133 changes: 96 additions & 37 deletions packages/navigation-bar-private/src/Component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,46 @@ import cn from 'classnames';
import { getDataTestId } from '@alfalab/core-components-shared';
import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';

import { BackArrowAddon } from './components/back-arrow-addon';
import { Closer } from './components/closer';
import type { ContentParams, NavigationBarPrivateProps } from './types';

import styles from './index.module.css';
import {
type BackArrowAddon,
type BackArrowAddonDesktop,
type BackArrowAddonMobile,
} from './components/back-arrow-addon';
import { type Closer, type CloserDesktop, type CloserMobile } from './components/closer';
import type styles from './index.module.css';
import type { ContentParams, NavigationBarBasePrivateProps } from './types';

type NavigationBarBaseHiddenProps = {
/**
* Вид шапки - мобильный или десктоп
*/
view: 'desktop' | 'mobile';

/**
* Вид шапки - мобильный или десктоп
*/
styles: typeof styles;

/**
* Компонент BackArrowAddon
*/
BackArrowAddon:
| typeof BackArrowAddonDesktop
| typeof BackArrowAddonMobile
| typeof BackArrowAddon;

/**
* Компонент Closer
*/
Closer: typeof CloserDesktop | typeof CloserMobile | typeof Closer;
};

const ADDONS_HEIGHT = 48;

export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPrivateProps>(
export const NavigationBarPrivateBase = forwardRef<
HTMLDivElement,
NavigationBarBasePrivateProps & NavigationBarBaseHiddenProps
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

не хватает еще SecretProps для полной картины )

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

private уже был, что мне было делать? )

>(
(
{
addonClassName,
Expand Down Expand Up @@ -43,6 +74,9 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
scrollableParentRef,
sticky,
onBack,
styles,
BackArrowAddon,
Closer,
},
ref,
) => {
Expand All @@ -54,18 +88,28 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
const leftAddonsRef = useRef<HTMLDivElement>(null);
const rightAddonsRef = useRef<HTMLDivElement>(null);

// MOBILE
const compactTitle = view === 'mobile' && titleSize === 'compact';

const hasLeftPart = Boolean(leftAddons || hasBackButton);
const hasRightPart = Boolean(rightAddons || hasCloser);
const hasContent = Boolean(title || children);

// MOBILE
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

возможно стоит эти пропсы сгруппировать как-то?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

если так делать, то точно не в этом пр-е )

const withAnimation = Boolean(view === 'mobile' && hasLeftPart && sticky && !compactTitle);

const showContentOnTop = hasContent && (compactTitle || !hasLeftPart);
const showContentOnBot = hasContent && !compactTitle && hasLeftPart;
const showStaticContentOnTop = !withAnimation && showContentOnTop;
const showStaticContentOnBot = !withAnimation && showContentOnBot;

// MOBILE
const showAnimatedContentOnTop =
withAnimation && showContentOnBot && scrollTop > ADDONS_HEIGHT;

// MOBILE
const showAnimatedContentOnBot = withAnimation && showContentOnBot;

const headerPaddingTop = mainLinePaddingTopRef.current;

useLayoutEffect_SAFE_FOR_SSR(() => {
Expand Down Expand Up @@ -106,10 +150,12 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
setScrollTop(divElement.scrollTop);
};

// MOBILE
if (withAnimation && headerRef.current) {
mainLinePaddingTopRef.current = getComputedStyle(headerRef.current).paddingTop;
}

// MOBILE
if (withAnimation && parent) {
parent.addEventListener('scroll', handleScroll);
}
Expand All @@ -120,11 +166,14 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
const renderBackButton = () => {
let textOpacity = 1;

// MOBILE
if (withAnimation) {
const height = hasContent ? ADDONS_HEIGHT : ADDONS_HEIGHT / 2;

textOpacity = Math.max(0, 1 - scrollTop / height);
} else if (compactTitle) {
}
// MOBILE
else if (compactTitle) {
textOpacity = 0;
}

Expand All @@ -150,6 +199,7 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
ref={wrapperRef}
className={cn(styles.content, extraClassName, contentClassName, styles[align], {
[styles.trim]: trim,
// MOBILE
[styles.withCompactTitle]: view === 'mobile' && compactTitle && hasContent,
})}
aria-hidden={hidden}
Expand All @@ -163,7 +213,12 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
{title}
</div>
)}
{compactTitle && subtitle && <div className={styles.subtitle}>{subtitle}</div>}
{
// MOBILE
compactTitle && subtitle && (
<div className={styles.subtitle}>{subtitle}</div>
)
}
</div>
);
};
Expand All @@ -186,6 +241,7 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
data-test-id={getDataTestId(dataTestId)}
style={{
...(imageUrl && { backgroundImage: `url(${imageUrl})` }),
// MOBILE
...(withAnimation &&
bottomContentRef.current && {
top: -bottomContentRef.current.scrollHeight,
Expand All @@ -194,10 +250,12 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
>
<div
className={cn(styles.mainLine, {
// MOBILE
[styles.mainLineSticky]: withAnimation,
[styles.mainLineWithImageBg]: imageUrl,
})}
style={{
// MOBILE
...(withAnimation
? {
marginTop: `-${headerPaddingTop}`,
Expand Down Expand Up @@ -227,19 +285,25 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
: null),
})}

{showAnimatedContentOnTop &&
renderContent({
extraClassName: styles.withBothAddons,
style: {
opacity: Math.min(1, (scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT),
...(align === 'center'
? {
marginLeft: titleMargin.left,
marginRight: titleMargin.right,
}
: null),
},
})}
{
// MOBILE
showAnimatedContentOnTop &&
renderContent({
extraClassName: styles.withBothAddons,
style: {
opacity: Math.min(
1,
(scrollTop - ADDONS_HEIGHT) / ADDONS_HEIGHT,
),
...(align === 'center'
? {
marginLeft: titleMargin.left,
marginRight: titleMargin.right,
}
: null),
},
})
}

{hasRightPart && (
<div
Expand All @@ -256,22 +320,17 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
</div>
)}
</div>
{
// MOBILE
showAnimatedContentOnBot &&
renderContent({
wrapperRef: bottomContentRef,
style: { opacity: Math.max(0, 1 - scrollTop / ADDONS_HEIGHT) },
hidden: scrollTop / ADDONS_HEIGHT > 1,
})
}

{showAnimatedContentOnBot &&
renderContent({
wrapperRef: bottomContentRef,
extraClassName: styles.underAddons,
style: { opacity: Math.max(0, 1 - scrollTop / ADDONS_HEIGHT) },
hidden: scrollTop / ADDONS_HEIGHT > 1,
})}

{showStaticContentOnBot &&
renderContent({
extraClassName: cn({
[styles.contentOnBotDesktop]: view === 'desktop',
[styles.contentOnBotMobile]: view === 'mobile',
}),
})}
{showStaticContentOnBot && renderContent({ extraClassName: styles.contentOnBot })}

{bottomAddons && (
<div className={cn(styles.bottomAddons, bottomAddonsClassName)}>
Expand All @@ -283,4 +342,4 @@ export const NavigationBarPrivate = forwardRef<HTMLDivElement, NavigationBarPriv
},
);

NavigationBarPrivate.displayName = 'NavigationBarPrivate';
NavigationBarPrivateBase.displayName = 'NavigationBarPrivate';
2 changes: 1 addition & 1 deletion packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
</div>
</div>
<div
class="content contentOnBotDesktop left trim"
class="content contentOnBot left trim"
style="visibility: visible;"
>
<div
Expand Down
Loading
Loading