176 lines
3.9 KiB
TypeScript
176 lines
3.9 KiB
TypeScript
import { Drawer } from 'antd';
|
|
import { useEffect, useState } from 'react';
|
|
import { Avatar, Typography } from 'antd';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useUserSelector } from '@/store/userStore';
|
|
|
|
interface ContentDrawerProps {
|
|
open: boolean;
|
|
closeDrawer: () => void;
|
|
children: React.ReactNode;
|
|
type: 'create' | 'edit';
|
|
login?: string;
|
|
name?: string;
|
|
email?: string | null;
|
|
}
|
|
|
|
export default function ContentDrawer({
|
|
open,
|
|
closeDrawer,
|
|
children,
|
|
type,
|
|
login,
|
|
name,
|
|
email,
|
|
}: ContentDrawerProps) {
|
|
const user = useUserSelector();
|
|
const { t } = useTranslation();
|
|
const [width, setWidth] = useState<number | string>('30%');
|
|
|
|
const calculateWidths = () => {
|
|
const windowWidth = window.innerWidth;
|
|
const expanded = Math.max(windowWidth * 0.3, 300);
|
|
setWidth(expanded);
|
|
};
|
|
|
|
useEffect(() => {
|
|
calculateWidths();
|
|
window.addEventListener('resize', calculateWidths);
|
|
return () => window.removeEventListener('resize', calculateWidths);
|
|
}, []);
|
|
console.log(login, user?.login, login === user?.login);
|
|
|
|
const editDrawerTitle = (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 12,
|
|
}}
|
|
>
|
|
<div
|
|
onClick={closeDrawer}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
height: '24px',
|
|
width: '24px',
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
<img
|
|
src="./icons/drawer/arrow_back.svg"
|
|
alt="close_drawer"
|
|
style={{ height: '16px', width: '16px' }}
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
|
|
<Avatar
|
|
src={
|
|
login ? `https://gamma.heado.ru/go/ava?name=${login}` : undefined
|
|
}
|
|
size={40}
|
|
style={{ flexShrink: 0 }}
|
|
/>
|
|
<div>
|
|
<Typography.Text
|
|
strong
|
|
style={{ display: 'block', fontSize: '20px' }}
|
|
>
|
|
{name} {login === user?.login ? t('you') : ''}
|
|
</Typography.Text>
|
|
<Typography.Text type="secondary" style={{ fontSize: 14 }}>
|
|
{email}
|
|
</Typography.Text>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
height: '24px',
|
|
width: '24px',
|
|
}}
|
|
>
|
|
<img
|
|
src="./icons/drawer/delete.svg"
|
|
alt="delete"
|
|
style={{ height: '18px', width: '16px' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const createDrawerTitle = (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 12,
|
|
}}
|
|
>
|
|
<div
|
|
onClick={closeDrawer}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
height: '24px',
|
|
width: '24px',
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
<img
|
|
src="./icons/drawer/arrow_back.svg"
|
|
alt="close_drawer"
|
|
style={{ height: '16px', width: '16px' }}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
flex: 1,
|
|
fontSize: '20px',
|
|
}}
|
|
>
|
|
{t('newAccount')}
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
height: '24px',
|
|
width: '24px',
|
|
}}
|
|
onClick={closeDrawer}
|
|
>
|
|
<img
|
|
src="./icons/drawer/delete.svg"
|
|
alt="delete"
|
|
style={{ height: '18px', width: '16px' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<Drawer
|
|
title={type === 'create' ? createDrawerTitle : editDrawerTitle}
|
|
placement="right"
|
|
open={open}
|
|
width={width}
|
|
destroyOnHidden={true}
|
|
closable={false}
|
|
>
|
|
{children}
|
|
</Drawer>
|
|
);
|
|
}
|