/
dedaMazai
/
TestServer
Обзор
Документация
Войти
/
dedaMazai
/
TestServer
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/features/notificationButton/ui/NotificationButton/NotificationButton.tsx
55 строк
2 KB
Andrey Chipizubov
fix
23 апр 2023, 17:32
23 апр 2023, 17:32
cc424e9
Код
Авторство
О чём код?
import React, { memo, useCallback, useState } from 'react'; import { BrowserView, MobileView } from 'react-device-detect'; import { classNames } from '@/shared/lib/classNames/classNames'; import { Button, ButtonTheme } from '@/shared/ui/Button'; import { Icon } from '@/shared/ui/Icon'; import NotificationIcon from '@/shared/assets/icons/notification-20-20.svg'; import { NotificationList } from '@/entities/Notification'; import { Popover } from '@/shared/ui/Popups'; import { Drawer } from '@/shared/ui/Drawer'; import cls from './NotificationButton.module.scss'; interface NotificationButtonProps { className?: string; } export const NotificationButton = memo((props: NotificationButtonProps) => { const { className } = props; const [isOpen, setIsOpen] = useState(false); const onOpenDrawer = useCallback(() => { setIsOpen(true); }, []); const onCloseDrawer = useCallback(() => { setIsOpen(false); }, []); const trigger = ( <Button onClick={onOpenDrawer} theme={ButtonTheme.CLEAR}> <Icon Svg={NotificationIcon} inverted /> </Button> ); return ( <div> <BrowserView> <Popover className={classNames(cls.NotificationButton, {}, [ className, ])} direction="bottom left" trigger={trigger} > <NotificationList className={cls.notifications} /> </Popover> </BrowserView> <MobileView> {trigger} <Drawer isOpen={isOpen} onClose={onCloseDrawer}> <NotificationList /> </Drawer> </MobileView> </div> ); });