feat(UIKIT-873,ui,NotificationList): Добавлен компонент NotificationList #739
Conversation
max-cepelev
requested review from
a team and
DesignASoft
and removed request for
a team
|
уведомления считаются прочитанными, если пользователь открыл NotificationList и закрыл его. При этом Прочитанными будут только те уведомления, которые попали в поле зрения на странице. Те уведомления, которые были под скроллом и пользователь их не видел, должны остаться не прочитанными Кнопка Отметить все как прочитанные находится в правом нижнем углу модалки и имеет фиксированное положение. В Storybook для вариантов With button этой кнопки нет, в варианте with icon есть кнопка отметить как прочитанное есть в каждом непрочитанном уведомлении. Со стороны дизайна такие варианты не рассматривались |
packages/components/src/NotificationList/NotificationListEmpty/NotificationListEmpty.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/NotificationList/NotificationListItem/NotificationListItem.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/NotificationList/hooks/useIntersectionObserver.ts
Outdated
Show resolved
Hide resolved
|
Для варианта with links в notification list нет кнопки "Отметить все как прочитанные" |
Кнопка "Отметить все как прочитанные" сделана опциональной, т.к. в реализации ЭДО ее, скорее всего не будет, поэтому ее там специально нет. В without tabs пример сделан только для демонстрации, что есть такой вариант. Но логику добавлю. Вообще, логика обработки прочитанных уведомлений вынесена из компонента, т.к. предполагается, что она на каждом проекте может быть разной. У нас в ЭДО она будет реализована при переходе в определенный раздел. |
| @@ -0,0 +1,3 @@ | |||
| export { DialogHeader as SideDialogHeader } from '../DialogHeader'; | |||
|
|
|||
| export type { DialogHeaderProps as SideDialogHeaderProps } from '../DialogHeader'; | |||
There was a problem hiding this comment.
Для каждого компонента должен быть storybook. Смотри в contributing
There was a problem hiding this comment.
Добавил пример с использованием SideDialogHeader в storybook SideDialog, нужно его перенести в SideDialogHeader?
There was a problem hiding this comment.
Да, можно просто продублировать кейс
packages/components/src/NotificationList/NotificationListTabs/NotificationListTabs.tsx
Outdated
Show resolved
Hide resolved
|
Тригерни design review |
| @@ -0,0 +1,3 @@ | |||
| export { DialogHeader as SideDialogHeader } from '../DialogHeader'; | |||
|
|
|||
| export type { DialogHeaderProps as SideDialogHeaderProps } from '../DialogHeader'; | |||
packages/components/src/NotificationList/NotificationList.stories.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/NotificationList/NotificationList.stories.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/NotificationList/NotificationList.stories.tsx
Outdated
Show resolved
Hide resolved
…ний из ConfigProvider
| */ | ||
| title?: string; | ||
| /** | ||
| * @description Кнопка для закрытия модального окна |
There was a problem hiding this comment.
Это ж не кнопка, а обработчик. Здесь вообще комент не нужен и так все понятно из названия. В title также
| </Typography> | ||
| {actions && <ListItemActions>{actions}</ListItemActions>} | ||
| </div> | ||
| {isDeleteButtonVisible ? ( |
There was a problem hiding this comment.
isDeleteButtonVisible && <Listiem
Так проще и лучше читается
| imgAlt: '', | ||
| errorList: [errorMessage || ''], | ||
| onRetry: handleRetry, | ||
| imgSrc: imagesMap.defaultErrorImgSrc, |
There was a problem hiding this comment.
Должно браться либо из пропсов, либо из контекста
There was a problem hiding this comment.
imagesMap берется из ConfigContext, а из imagesMap берем источники для изображений состояния
| * @description флаг управляет, какие уведомления выводить при открытии списка, все/непрочитанные | ||
| * @default undefined | ||
| * */ | ||
| isInitialUnreadOnly?: boolean; |
There was a problem hiding this comment.
А если добавиться еще один таб, что делать?
|
🎉 This PR is included in version 3.55.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Чеклист