0.12.6 • Published 1 month ago

@snack-uikit/notification v0.12.6

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 month ago

Notification

Installation

npm i @snack-uikit/notification

Changelog

TODO:

  • remove custom hook for droplist keyboard handles

Example

import { NotificationCard, NotificationPanel } from '@snack-uikit/notification';

const cards = [
  {
    id: 'cardId',
    label: ['Category', 'Subcategory'].join('・'),
    appearance: 'errorCritical',
    title: 'Title truncate two line',
    content: `Demo content.`,
    link: {
      text: 'Link to detailed information',
      href: '#',
    },
    date: 'DD.MM.YYYY HH:MM',
    actions: [
      {
        option: 'action 1',
        onClick: handleActionClick,
      },
      {
        option: 'action 2',
        onClick: handleActionClick,
      },
    ],
  }
];

// ...

<NotificationPanel
  title='Notifications'
  triggerElement={<ButtonTonal label='open' />}
  readAllButton={{
    label: 'Mark all as read',
    onClick() {},
  }}
  chips={[
    {
      label: 'all',
      checked: true,
      onChange() { /* */ },
    },
    {
      label: 'unread',
      checked: false,
      onChange() { /* */ },
    },
  ]}
  content={
    !cards.length ? (
      <NotificationPanel.Blank
        icon={PlaceholderSVG}
        title='No notifications'
        description={'Here you will see new event notifications\nwhen something happens'}
      />
    ) : (
      cards.map(card => <NotificationCard {...card} key={card.id} />)
    )
  }
/>

NotificationCard

Компонент карточки уведомления

Props

nametypedefault valuedescription
date*string-Дата уведомления
content*ReactNode-Контент уведомления
title*string-Заголовок уведомления
id*string-Идентификатор уведомления
appearanceenum Appearance: "neutral", "error", "errorCritical", "warning", "success"neutralТип уведомления
labelstring-Лейбл перед заголовком
unreadboolean-Управление состоянием прочитано/не прочитано
linkOmit<LinkProps, "data-test-id" \| "appearance" \| "size" \| "textMode">-Ссылка
onClickMouseEventHandler<HTMLDivElement>-Колбэк клика по карточке
onVisible(cardId: string) => void-Колбэк при попадании карточки в область видимости на 80%
primaryButtonOmit<ButtonTonalProps, "data-test-id" \| "appearance" \| "size">-Кнопка главного действия у карточки
secondaryButtonOmit<ButtonSimpleProps, "data-test-id" \| "appearance" \| "size">-Кнопка второстепенного действия у карточки
actionsAction[]-Дополнительные действия у карточки
classNamestring-CSS-класс

NotificationPanel

Компонент панели для уведомлений

Props

nametypedefault valuedescription
title*string-Заголовок панели
settingsNotificationPanelSettingsProps-Кнопка настроек и выпадающий список
chipsOmit<ChipToggleProps, "data-test-id" \| "size">[]-Чипы для фильтрации
readAllButtonOmit<ButtonFunctionProps, "data-test-id"> & { onClick: MouseEventHandler<HTMLElement>; }-Кнопка в "шапке" панели
footerButton{ label: string; onClick: MouseEventHandler<HTMLButtonElement>; }-Кнопка внизу панели
classNamestring-CSS-класс
loadingboolean-Состояние загрузки
contentReactNode-Контент для отрисовки (e.g NotificationCard | NotificationPanel.Blank)
skeletonsAmountnumber2Количество скелетонов карточек для отображения при загрузке
scrollEndRefRefObject<HTMLDivElement>-Ссылка на элемент, обозначающий самый конец прокручиваемого списка
scrollContainerRefRefObject<HTMLElement>-Ссылка на контейнер, который скроллится

NotificationPanel.Blank

Props

nametypedefault valuedescription
titlestring-Заголовок
classNamestring-CSS-класс
iconPick<IconPredefinedProps, "appearance" \| "icon" \| "decor">-Иконка
descriptionReactNode-Подзаголовок

NotificationPanel.Divider

Props

nametypedefault valuedescription
text*string-Текст разделителя
classNamestring-CSS-класс

NotificationPanelPopover

Компонент-обёртка для NotificationPanel для использования как выпадающий элемент

Props

nametypedefault valuedescription
children*ReactNode \| ChildrenFunction-Триггер поповера (подробнее читайте ниже)
content*ReactElement<NotificationPanelProps, typeof NotificationPanel>-
contentClassNamestring-CSS-класс для элемента содержащего контент
classNamestring-CSS-класс
triggerClassNamestring-CSS-класс триггера
openboolean-Управляет состоянием показан/не показан.
onOpenChange(isOpen: boolean) => void-Колбек отображения компонента. Срабатывает при изменении состояния open.
hoverDelayOpennumber-Задержка открытия по ховеру
hoverDelayClosenumber-Задержка закрытия по ховеру
offsetnumber0Отступ поповера от его триггер-элемента (в пикселях).
closeOnEscapeKeybooleantrueЗакрывать ли по нажатию на кнопку Esc
triggerClickByKeysbooleantrueВызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = click)
triggerRefForwardedRef<HTMLElement \| ReferenceType>-Ref ссылка на триггер
triggerenum Trigger: "click", "hover", "focusVisible", "focus", "hoverAndFocusVisible", "hoverAndFocus", "clickAndFocusVisible"clickУсловие отображения поповера: - click - открывать по клику - hover - открывать по ховеру - focusVisible - открывать по focus-visible - focus - открывать по фокусу - hoverAndFocusVisible - открывать по ховеру и focus-visible - hoverAndFocus - открывать по ховеру и фокусу - clickAndFocusVisible - открывать по клику и focus-visible
placementenum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"bottom-endПоложение поповера относительно своего триггера (children).
@snack-uikit/button@snack-uikit/chips@snack-uikit/icons@snack-uikit/info-block@snack-uikit/link@snack-uikit/list@snack-uikit/popover-private@snack-uikit/scroll@snack-uikit/skeleton@snack-uikit/tag@snack-uikit/truncate-string@snack-uikit/typography@snack-uikit/utilsclassnames
@everything-registry/sub-chunk-847
0.10.6-preview-d736f028.0

7 months ago

0.10.23-preview-bc9ca5dd.0

4 months ago

0.10.18-preview-b5e187d5.0

5 months ago

0.11.8-preview-790689b4.0

4 months ago

0.10.18-preview-abb5f7dc.0

4 months ago

0.10.5-preview-aaafcc64.0

7 months ago

0.10.6-preview-582e3b50.0

7 months ago

0.10.10-preview-0ee176c6.0

6 months ago

0.10.25-preview-8b563728.0

4 months ago

0.9.8

8 months ago

0.9.7

8 months ago

0.11.11-preview-3e55020c.0

3 months ago

0.9.9

8 months ago

0.9.4

8 months ago

0.9.3

8 months ago

0.9.6

8 months ago

0.9.5

8 months ago

0.11.2-preview-9cd1b89a.0

4 months ago

0.10.9

6 months ago

0.11.11-preview-a01e5edb.0

3 months ago

0.10.1

7 months ago

0.10.2

7 months ago

0.10.3

7 months ago

0.10.4

7 months ago

0.10.5

7 months ago

0.10.13-preview-913f1101.0

6 months ago

0.10.6

7 months ago

0.10.7

7 months ago

0.10.8

7 months ago

0.10.0

8 months ago

0.12.6-preview-050dc1ef.0

1 month ago

0.10.17-preview-d9538faf.0

5 months ago

0.10.2-preview-53bd8747.0

7 months ago

0.11.5-preview-6a400eba.0

4 months ago

0.10.2-preview-2d408edb.0

7 months ago

0.11.8-preview-53302b98.0

4 months ago

0.12.6-preview-a29fd7b9.0

2 months ago

0.11.10-preview-3a05e8da.0

3 months ago

0.10.10-preview-95d8b6b7.0

6 months ago

0.10.18

5 months ago

0.10.19

4 months ago

0.10.17-preview-c95e31d1.0

5 months ago

0.10.6-preview-a289890f.0

7 months ago

0.10.14

5 months ago

0.12.4-preview-cf198ddd.0

2 months ago

0.10.15

5 months ago

0.10.16

5 months ago

0.10.17

5 months ago

0.10.10

6 months ago

0.10.11

6 months ago

0.10.4-preview-e8062bb7.0

7 months ago

0.10.12

6 months ago

0.10.13

5 months ago

0.10.20

4 months ago

0.9.9-preview-7bafd457.0

8 months ago

0.10.3-preview-8feb6773.0

7 months ago

0.11.3-preview-27ae78ba.0

4 months ago

0.10.21-preview-3566ac3d.0

4 months ago

0.11.3-preview-a0074739.0

4 months ago

0.10.21

4 months ago

0.10.22

4 months ago

0.10.23

4 months ago

0.10.1-preview-64081c67.0

8 months ago

0.10.24

4 months ago

0.9.3-preview-eca10dbc.0

8 months ago

0.12.6-preview-e4e8fc7b.0

1 month ago

0.12.2-preview-845a4e8b.0

2 months ago

0.12.6-preview-2df7e7b5.0

2 months ago

0.10.2-preview-042f5ed6.0

7 months ago

0.10.10-preview-bb2cdfb8.0

6 months ago

0.10.18-preview-922d2ce6.0

5 months ago

0.10.19-preview-20f136a2.0

5 months ago

0.9.2-preview-1becd961.0

8 months ago

0.11.10

3 months ago

0.11.8-preview-bb8e00d0.0

4 months ago

0.10.10-preview-38cf19d9.0

6 months ago

0.9.6-preview-9a7f316b.0

8 months ago

0.11.11-preview-ef227a87.0

3 months ago

0.10.2-preview-7eeb1bc1.0

7 months ago

0.9.8-preview-4c10b48c.0

8 months ago

0.10.6-preview-4d49c519.0

7 months ago

0.10.18-preview-a2a64ca4.0

5 months ago

0.10.19-preview-9ca6ecbf.0

5 months ago

0.10.6-preview-ef08d0db.0

7 months ago

0.12.7-preview-9998cc23.0

1 month ago

0.10.20-preview-d479ae3f.0

4 months ago

0.10.18-preview-ed010264.0

5 months ago

0.10.2-preview-379c4ff3.0

7 months ago

0.11.9-preview-f475624a.0

4 months ago

0.11.2-preview-0d45398a.0

4 months ago

0.10.15-preview-985e2518.0

5 months ago

0.9.3-preview-e86d2666.0

8 months ago

0.10.10-preview-a2f98ef7.0

6 months ago

0.11.4-preview-b0b25986.0

4 months ago

0.10.18-preview-f228eb9d.0

5 months ago

0.11.10-preview-943d0cf0.0

3 months ago

0.10.2-preview-baf754b1.0

7 months ago

0.10.5-preview-c6f5cbae.0

7 months ago

0.12.4-preview-2f8a726b.0

2 months ago

0.10.6-preview-681053b7.0

7 months ago

0.11.11-preview-352c392a.0

3 months ago

0.10.7-preview-95f36d41.0

7 months ago

0.10.2-preview-20b0f520.0

7 months ago

0.9.10

8 months ago

0.11.8

4 months ago

0.11.9

4 months ago

0.10.2-preview-4d81b82b.0

7 months ago

0.10.18-preview-74c13173.0

5 months ago

0.10.17-preview-704e8703.0

5 months ago

0.10.10-preview-91ef6a1d.0

6 months ago

0.12.6-preview-aba585d4.0

1 month ago

0.11.0

4 months ago

0.11.1

4 months ago

0.11.2

4 months ago

0.11.3

4 months ago

0.11.4

4 months ago

0.11.5

4 months ago

0.11.6

4 months ago

0.11.7

4 months ago

0.11.3-preview-04b740ca.0

4 months ago

0.9.2

8 months ago

0.11.11-preview-8c84e870.0

3 months ago

0.11.2-preview-5accc3bc.0

4 months ago

0.12.7-preview-69fcfa33.0

1 month ago

0.12.0

3 months ago

0.12.1

2 months ago

0.12.2

2 months ago

0.12.3

2 months ago

0.10.18-preview-e840ab81.0

5 months ago

0.12.4

2 months ago

0.12.5

2 months ago

0.12.6

2 months ago

0.9.6-preview-532f4f48.0

8 months ago

0.10.10-preview-e49c63bb.0

6 months ago

0.10.18-preview-f7ec3fa7.0

5 months ago

0.10.13-preview-08c7f775.0

6 months ago

0.11.9-preview-ccf49ef5.0

4 months ago

0.11.11-preview-8cf89a18.0

3 months ago

0.9.2-preview-eda282a2.0

9 months ago

0.9.2-preview-3e824eee.0

9 months ago

0.9.2-preview-d1a63029.0

9 months ago

0.9.2-preview-2e497be2.0

9 months ago

0.8.0

9 months ago

0.7.60-preview-71543426.0

9 months ago

0.7.60-preview-ba12ca94.0

9 months ago

0.9.0

9 months ago

0.9.1

9 months ago

0.7.57-preview-efee0b7d.0

9 months ago

0.7.57-preview-e5174ad1.0

9 months ago

0.7.57-preview-3f66d646.0

9 months ago

0.7.57-preview-7adaddbe.0

9 months ago

0.7.57-preview-c9b51578.0

9 months ago

0.7.57-preview-d96c83e8.0

9 months ago

0.7.57-preview-1f246c4a.0

9 months ago

0.7.59

9 months ago

0.7.57-preview-fc25f08d.0

9 months ago

0.7.59-preview-726d2b3b.0

9 months ago

0.7.59-preview-8252c953.0

9 months ago

0.7.59-preview-0c12d89e.0

9 months ago

0.7.58

9 months ago

0.7.57

9 months ago

0.7.57-preview-4f9628fc.0

9 months ago

0.7.57-preview-eb3592d8.0

9 months ago

0.7.56-preview-7c4b3e02.0

9 months ago

0.7.55

10 months ago

0.7.54

10 months ago

0.7.56

9 months ago

0.7.56-preview-595edd83.0

10 months ago

0.7.53

10 months ago

0.7.53-preview-e9b53c27.0

10 months ago

0.7.33

1 year ago

0.7.32

1 year ago

0.7.35

1 year ago

0.7.34

1 year ago

0.7.31

1 year ago

0.7.30

1 year ago

0.7.37

1 year ago

0.7.36

1 year ago

0.7.39

1 year ago

0.7.38

1 year ago

0.7.40-preview-b0a54706.0

1 year ago

0.7.40-preview-1ab5fc2e.0

12 months ago

0.7.29

1 year ago

0.7.28

1 year ago

0.7.27

1 year ago

0.7.46-preview-9bfb36d6.0

11 months ago

0.7.33-preview-47f53a8c.0

1 year ago

0.7.40-preview-40c31ba9.0

12 months ago

0.7.33-preview-b7b8cddc.0

1 year ago

0.7.45-preview-3eecfbf4.0

11 months ago

0.7.39-preview-a882321d.0

12 months ago

0.7.27-preview-d74371e8.0

1 year ago

0.7.45-preview-e8249200.0

11 months ago

0.7.44-preview-3201b907.0

11 months ago

0.7.51-preview-963c3343.0

10 months ago

0.7.40-preview-b09d21bf.0

12 months ago

0.7.37-preview-d4831186.0

1 year ago

0.7.44-preview-8898cdde.0

11 months ago

0.7.29-preview-0df2fefa.0

1 year ago

0.7.33-preview-6ec2d237.0

1 year ago

0.7.29-preview-c6cf83f0.0

1 year ago

0.7.29-preview-b98b3b80.0

1 year ago

0.7.49-preview-1e2f74b2.0

11 months ago

0.7.40-preview-665bb1e8.0

12 months ago

0.7.40-preview-efdf107f.0

12 months ago

0.7.48-preview-31958b7e.0

11 months ago

0.7.35-preview-a66ce7a9.0

1 year ago

0.7.36-preview-5dc6c544.0

1 year ago

0.7.27-preview-a5a79952.0

1 year ago

0.7.40-preview-ca0a56c2.0

1 year ago

0.7.35-preview-767c086a.0

1 year ago

0.7.45-preview-2abd8357.0

11 months ago

0.7.39-preview-5f7a62c6.0

1 year ago

0.7.51

10 months ago

0.7.50

11 months ago

0.7.52

10 months ago

0.7.44

11 months ago

0.7.52-preview-94780dcd.0

10 months ago

0.7.43

12 months ago

0.7.46

11 months ago

0.7.45

11 months ago

0.7.40

12 months ago

0.7.47-preview-0406b1f2.0

11 months ago

0.7.42

12 months ago

0.7.41

12 months ago

0.7.48

11 months ago

0.7.47

11 months ago

0.7.49

11 months ago

0.7.40-preview-44f1f327.0

12 months ago

0.7.29-preview-69a8374f.0

1 year ago

0.7.35-preview-1a5a24ad.0

1 year ago

0.7.27-preview-41627947.0

1 year ago

0.7.26

1 year ago

0.7.25

1 year ago

0.7.24

1 year ago

0.7.23

1 year ago

0.7.23-preview-dff5750f.0

1 year ago

0.7.23-preview-fa3ea861.0

1 year ago

0.7.23-preview-8bb3334c.0

1 year ago

0.7.23-preview-e82f86de.0

1 year ago

0.7.22

1 year ago

0.7.21

1 year ago

0.7.22-preview-7afaf1cf.0

1 year ago

0.7.20

1 year ago

0.7.19

1 year ago

0.7.17-preview-cb79db34.0

1 year ago

0.7.18

1 year ago

0.7.17

1 year ago

0.7.17-preview-01f09206.0

1 year ago

0.7.17-preview-734de100.0

1 year ago

0.7.19-preview-5d3667ec.0

1 year ago

0.7.17-preview-c7516715.0

1 year ago

0.7.17-preview-86dac340.0

1 year ago

0.7.17-preview-5b75040d.0

1 year ago

0.7.17-preview-7a18c2ee.0

1 year ago

0.7.17-preview-08779a44.0

1 year ago

0.7.17-preview-80576138.0

1 year ago

0.7.17-preview-69abc1d3.0

1 year ago

0.7.16-preview-2855fb42.0

1 year ago

0.7.16-preview-0a44b2fc.0

1 year ago

0.7.16

1 year ago

0.7.16-preview-c8f85f20.0

1 year ago

0.7.16-preview-0f7b85a9.0

1 year ago

0.7.16-preview-86ac603c.0

1 year ago

0.7.16-preview-cc3d0341.0

1 year ago

0.7.16-preview-261fde59.0

1 year ago

0.7.16-preview-b0dbf1fa.0

1 year ago

0.7.15

1 year ago

0.7.15-preview-ed4b1f94.0

1 year ago

0.7.14

1 year ago

0.7.14-preview-e6b01723.0

1 year ago

0.7.14-preview-1fcf96b1.0

1 year ago

0.7.13

1 year ago

0.7.12

1 year ago

0.7.11

1 year ago

0.7.10

1 year ago

0.7.9-preview-16f7e04e.0

1 year ago

0.7.9-preview-428c755f.0

1 year ago

0.7.9

1 year ago

0.7.8

1 year ago

0.7.7

1 year ago

0.7.6

1 year ago

0.7.4-preview-1d9347a7.0

1 year ago

0.7.4-preview-da21d728.0

1 year ago

0.7.4

1 year ago

0.7.3

1 year ago

0.7.5

1 year ago

0.7.4-preview-3bc93fc3.0

1 year ago

0.7.4-preview-4dc69f78.0

1 year ago

0.7.3-preview-778a0ef6.0

1 year ago

0.7.3-preview-2484f987.0

1 year ago

0.7.3-preview-84a92753.0

1 year ago

0.7.2

1 year ago

0.7.1

1 year ago

0.7.1-preview-5e88828b.0

1 year ago

0.7.0

1 year ago

0.6.18-preview-99d91149.0

1 year ago

0.6.17

1 year ago

0.6.18-preview-3cdd8d31.0

1 year ago

0.6.17-preview-e40879b4.0

1 year ago

0.6.17-preview-135ad6d6.0

1 year ago

0.6.17-preview-1b0fd831.0

1 year ago

0.6.17-preview-993a9cfb.0

1 year ago

0.6.17-preview-bd8ccc1f.0

1 year ago

0.6.16

1 year ago

0.6.15

1 year ago

0.6.15-preview-bd4095bc.0

1 year ago

0.6.14-preview-da55c4c2.0

1 year ago

0.6.14-preview-48e84a60.0

1 year ago

0.6.14-preview-3e9a33fa.0

1 year ago

0.6.14

1 year ago

0.6.13

1 year ago

0.6.14-preview-3e45f5dd.0

1 year ago

0.6.12

1 year ago

0.6.12-preview-ff0b5a40.0

1 year ago

0.6.11-preview-357970fd.0

1 year ago

0.6.11-preview-744f94d0.0

1 year ago

0.6.11

1 year ago

0.6.9

1 year ago

0.6.10-preview-0cc330d4.0

1 year ago

0.6.10

1 year ago

0.6.8-preview-936bde10.0

1 year ago

0.6.8

1 year ago

0.6.9-preview-006b34c3.0

1 year ago

0.6.8-preview-4c16b47e.0

1 year ago

0.6.7

1 year ago

0.6.6

1 year ago

0.6.6-preview-a0815a00.0

1 year ago

0.6.5

1 year ago

0.6.4

1 year ago

0.6.3-preview-3f90b7f1.0

1 year ago

0.6.3

1 year ago

0.6.2

1 year ago

0.6.3-preview-3a43a07a.0

1 year ago

0.6.1-preview-57c837e3.0

1 year ago

0.6.1

1 year ago

0.5.5

1 year ago

0.5.4

2 years ago

0.5.3

2 years ago

0.5.3-preview-00fa1de0.0

2 years ago

0.5.2

2 years ago

0.5.1

2 years ago

0.5.0

2 years ago

0.4.2

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.3.17-preview-85c5f47b.0

2 years ago