Skip to content

Commit

Permalink
Remove z-index change of Tabbar during swipe back
Browse files Browse the repository at this point in the history 
We don't need it as Tabbar is probably will be used
inside Epic and tabbar will always be on top of panel overlay
  • Loading branch information
@mendrew
mendrew committed Sep 19, 2023
1 parent ff54d10 commit d396506
Show file tree
Hide file tree
Showing 3 changed files with 0 additions and 95 deletions.
77 changes: 0 additions & 77 deletions packages/vkui/src/components/View/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,81 +256,6 @@ const Content = () => {
);
};

const TabbarExample = () => {
return (
<Epic
tabbar={
<Tabbar>
<TabbarItem data-story="feed" text="Новости">
<Icon28NewsfeedOutline />
</TabbarItem>
<TabbarItem data-story="services" text="Сервисы">
<Icon28ServicesOutline />
</TabbarItem>
<TabbarItem
data-story="messages"
indicator={
<Counter size="s" mode="prominent">
12
</Counter>
}
text="Сообщения"
>
<Icon28MessageOutline />
</TabbarItem>
<TabbarItem data-story="clips" text="Клипы">
<Icon28ClipOutline />
</TabbarItem>
<TabbarItem data-story="profile" indicator={<Badge mode="prominent" />} text="Профиль">
<Icon28UserCircleOutline />
</TabbarItem>
</Tabbar>
}
>
<View id="feed" activePanel="feed">
<Panel id="feed">
<PanelHeader before={<PanelHeaderBack />}>Новости</PanelHeader>
<Group style={{ height: '1000px' }}>
<Placeholder icon={<Icon56NewsfeedOutline width={56} height={56} />} />
</Group>
</Panel>
</View>
<View id="services" activePanel="services">
<Panel id="services">
<PanelHeader before={<PanelHeaderBack />}>Сервисы</PanelHeader>
<Group style={{ height: '1000px' }}>
<Placeholder icon={<Icon28ServicesOutline width={56} height={56} />}></Placeholder>
</Group>
</Panel>
</View>
<View id="messages" activePanel="messages">
<Panel id="messages">
<PanelHeader before={<PanelHeaderBack />}>Сообщения</PanelHeader>
<Group style={{ height: '1000px' }}>
<Placeholder icon={<Icon28MessageOutline width={56} height={56} />}></Placeholder>
</Group>
</Panel>
</View>
<View id="clips" activePanel="clips">
<Panel id="clips">
<PanelHeader before={<PanelHeaderBack />}>Клипы</PanelHeader>
<Group style={{ height: '1000px' }}>
<Placeholder icon={<Icon28ClipOutline width={56} height={56} />}></Placeholder>
</Group>
</Panel>
</View>
<View id="profile" activePanel="profile">
<Panel id="profile">
<PanelHeader before={<PanelHeaderBack />}>Профиль</PanelHeader>
<Group style={{ height: '1000px' }}>
<Placeholder icon={<Icon28UserCircleOutline width={56} height={56} />}></Placeholder>
</Group>
</Panel>
</View>
</Epic>
);
};

const Example = () => {
const [activeView, setActiveView] = useState('view1');
const [activePanel, setActivePanel] = useState(1);
Expand Down Expand Up @@ -431,12 +356,10 @@ const Example = () => {
<PanelHeader>П.1 iOS Swipe Back</PanelHeader>
{navigationButtons}
<Content />
<TabbarExample />
</Panel>
<Panel id="swipeView.2">
<PanelHeader>П.2 iOS Swipe Back</PanelHeader>
{navigationButtons}
<TabbarExample />
<Content />
</Panel>
<Panel id="swipeView.3">
Expand Down
9 changes: 0 additions & 9 deletions packages/vkui/src/components/View/View.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,6 @@
background-color: rgba(0, 0, 0, 0.1);
}

/* Не затемняем Tabbar при свайбеке от одной панели с Tabbar к другой панели с Tabbar.
* Увеличиваем z-index Tabbar следующей панели, чтобы overlay панели не закрывал его.
* Только при условии что текущая панель тоже имеет в себе Tabbar. */
.View--ios
.View__panel--swipe-back-next.View__panel--active-panel-has-tabbar
:global(.vkuiInternalTabbar) {
z-index: calc(var(--vkui_internal--z_index_panel_header_fade) + 1);
}

.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-success .View__panel-overlay,
.View--ios .View__panel--swipe-back-next.View__panel--swipe-back-failed .View__panel-overlay {
transition: opacity 0.3s var(--vkui--animation_easing_platform);
Expand Down
9 changes: 0 additions & 9 deletions packages/vkui/src/components/View/View.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,6 @@ export const View = ({
const [swipeBackNextPanel, setSwipeBackNextPanel] = React.useState<string | null>(null);
const [swipeBackPrevPanel, setSwipeBackPrevPanel] = React.useState<string | null>(null);
const [swipeBackResult, setSwipeBackResult] = React.useState<SwipeBackResults | null>(null);
const [swipeBackActivePanelHasTabbar, setSwipeBackActivePanelHasTabbar] =
React.useState<boolean>(false);

const [browserSwipe, setBrowserSwipe] = React.useState(false);

Expand Down Expand Up @@ -297,10 +295,6 @@ export const View = ({
setSwipeBackStartX(event.startX);
setSwipeBackPrevPanel(activePanel);
setSwipeBackNextPanel(history.slice(-2)[0]);
setSwipeBackActivePanelHasTabbar(
// eslint-disable-next-line no-restricted-properties
Boolean(pickPanel(activePanel)?.querySelector('.vkuiInternalTabbar')),
);
}

if (swipingBack) {
Expand Down Expand Up @@ -547,9 +541,6 @@ export const View = ({
panelId === nextPanel && styles['View__panel--next'],
panelId === swipeBackPrevPanel && styles['View__panel--swipe-back-prev'],
panelId === swipeBackNextPanel && styles['View__panel--swipe-back-next'],
panelId === swipeBackNextPanel &&
swipeBackActivePanelHasTabbar &&
styles['View__panel--active-panel-has-tabbar'],
swipeBackResult === SwipeBackResults.success &&
styles['View__panel--swipe-back-success'],
swipeBackResult === SwipeBackResults.fail &&
Expand Down

0 comments on commit d396506

Please sign in to comment.