muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 21:06:42 +07:00
Code Packages Activity Actions

moved tags to sidebar (#135)

Browse source
This commit is contained in:
muerwre 2022-08-15 12:33:50 +07:00 • committed by GitHub
parent a8ac233140
commit b36dcca0df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 99 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/containers/sidebars/ProfileSidebar/index.tsx
View file

@ -7,9 +7,9 @@ import { ProfileSidebarNotes } from '~/components/profile/ProfileSidebarNotes';
import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
import { SidebarStack } from '~/components/sidebar/SidebarStack';
import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
import { SidebarWrapper } from '~/components/sidebar/SidebarWrapper';
import { SidebarName } from '~/constants/sidebar';
import { ProfileSidebarMenu } from '~/containers/profile/ProfileSidebarMenu';
import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
import { useAuth } from '~/hooks/auth/useAuth';
import { useUser } from '~/hooks/auth/useUser';
import type { SidebarComponentProps } from '~/types/sidebar';
@ -17,12 +17,12 @@ import type { SidebarComponentProps } from '~/types/sidebar';
const tabs = ['profile', 'bookmarks'] as const;
type TabName = typeof tabs[number];
interface ProfileSidebarProps
interface SettingsSidebarProps
extends SidebarComponentProps<SidebarName.Settings> {
page?: TabName;
}
const ProfileSidebar: VFC<ProfileSidebarProps> = ({
const SettingsSidebar: VFC<SettingsSidebarProps> = ({
onRequestClose,
page,
openSidebar,
@ -79,4 +79,4 @@ const ProfileSidebar: VFC<ProfileSidebarProps> = ({
);
};
export { ProfileSidebar };
export { SettingsSidebar };

45
src/containers/sidebars/SidebarWrapper/index.tsx
View file

@ -1,45 +0,0 @@
import React, { FC, ReactNode, useEffect, useRef } from 'react';
import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
import { useCloseOnEscape } from '~/hooks';
import styles from './styles.module.scss';
interface IProps {
onClose?: () => void;
closeOnBackdropClick?: boolean;
backdrop?: ReactNode;
}
const SidebarWrapper: FC<IProps> = ({
children,
onClose,
closeOnBackdropClick = true,
backdrop,
}) => {
const ref = useRef<HTMLDivElement>(null);
useCloseOnEscape(onClose);
useEffect(() => {
if (!ref.current) return;
disableBodyScroll(ref.current, { reserveScrollBarGap: true });
return () => clearAllBodyScrollLocks();
}, []);
return (
<div className={styles.wrapper} ref={ref}>
{(closeOnBackdropClick || backdrop) && (
<div className={styles.backdrop} onClick={onClose}>
{backdrop}
</div>
)}
{children}
</div>
);
};
export { SidebarWrapper };

35
src/containers/sidebars/SidebarWrapper/styles.module.scss
View file

@ -1,35 +0,0 @@
@import "src/styles/variables";
@keyframes appear {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slideIn {
100% { transform: translate(0, 0); }
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
z-index: 26;
justify-content: flex-end;
overflow: hidden;
animation: appear 0.25s forwards;
& > * {
z-index: 4;
}
}
.backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
cursor: pointer;
}

68
src/containers/sidebars/TagSidebar/index.tsx
View file

@ -1,18 +1,20 @@
import React, { useMemo, VFC } from 'react';
import { useMemo, VFC } from 'react';
import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
import { Icon } from '~/components/input/Icon';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import { SidebarStack } from '~/components/sidebar/SidebarStack';
import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
import { SidebarWrapper } from '~/components/sidebar/SidebarWrapper';
import { TagSidebarList } from '~/components/sidebar/TagSidebarList';
import { Tag } from '~/components/tags/Tag';
import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
import { SidebarName } from '~/constants/sidebar';
import { useTagNodes } from '~/hooks/tag/useTagNodes';
import { DialogComponentProps } from '~/types/modal';
import { SidebarComponentProps } from '~/types/sidebar';
import styles from './styles.module.scss';
interface TagSidebarProps extends DialogComponentProps {
interface TagSidebarProps extends SidebarComponentProps<SidebarName.Tag> {
tag: string;
}
@ -23,43 +25,35 @@ const TagSidebar: VFC<TagSidebarProps> = ({ tag, onRequestClose }) => {
return (
<SidebarWrapper onClose={onRequestClose}>
<SidebarStack>
<div className={styles.wrap}>
<div className={styles.content}>
<div className={styles.head}>
<div className={styles.tag}>
<Tag tag={{ title }} size="big" />
</div>
{isLoading && (
<div className={styles.sync}>
<LoaderCircle size={20} />
<SidebarStackCard
headerFeature="close"
title={<Tag tag={{ title }} />}
onBackPress={onRequestClose}
>
<div className={styles.wrap}>
<div className={styles.content}>
{!nodes.length && !isLoading ? (
<div className={styles.none}>
<Icon icon="sad" size={120} />
<div>
У этого тэга нет постов
<br />
<br />
Такие дела
</div>
</div>
) : (
<InfiniteScroll
hasMore={hasMore}
loadMore={loadMore}
className={styles.list}
>
<TagSidebarList nodes={nodes} onClick={onRequestClose} />
</InfiniteScroll>
)}
<div className={styles.close}>
<button onClick={onRequestClose}>
<Icon icon="close" size={32} />
</button>
</div>
</div>
{!nodes.length && !isLoading ? (
<div className={styles.none}>
<Icon icon="sad" size={120} />
<div>
У этого тэга нет постов
<br />
<br />
Такие дела
</div>
</div>
) : (
<InfiniteScroll hasMore={hasMore} loadMore={loadMore} className={styles.list}>
<TagSidebarList nodes={nodes} onClick={onRequestClose} />
</InfiniteScroll>
)}
</div>
</div>
</SidebarStackCard>
</SidebarStack>
</SidebarWrapper>
);