0.12.6 • Published 7 months ago

@snack-uikit/notification v0.12.6

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
7 months 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

1 year ago

0.10.23-preview-bc9ca5dd.0

10 months ago

0.10.18-preview-b5e187d5.0

10 months ago

0.11.8-preview-790689b4.0

10 months ago

0.10.18-preview-abb5f7dc.0

10 months ago

0.10.5-preview-aaafcc64.0

1 year ago

0.10.6-preview-582e3b50.0

1 year ago

0.10.10-preview-0ee176c6.0

12 months ago

0.10.25-preview-8b563728.0

10 months ago

0.9.8

1 year ago

0.9.7

1 year ago

0.11.11-preview-3e55020c.0

9 months ago

0.9.9

1 year ago

0.9.4

1 year ago

0.9.3

1 year ago

0.9.6

1 year ago

0.9.5

1 year ago

0.11.2-preview-9cd1b89a.0

10 months ago

0.10.9

12 months ago

0.11.11-preview-a01e5edb.0

8 months ago

0.10.1

1 year ago

0.10.2

1 year ago

0.10.3

1 year ago

0.10.4

1 year ago

0.10.5

1 year ago

0.10.13-preview-913f1101.0

11 months ago

0.10.6

1 year ago

0.10.7

1 year ago

0.10.8

1 year ago

0.10.0

1 year ago

0.12.6-preview-050dc1ef.0

7 months ago

0.10.17-preview-d9538faf.0

11 months ago

0.10.2-preview-53bd8747.0

1 year ago

0.11.5-preview-6a400eba.0

10 months ago

0.10.2-preview-2d408edb.0

1 year ago

0.11.8-preview-53302b98.0

10 months ago

0.12.6-preview-a29fd7b9.0

7 months ago

0.11.10-preview-3a05e8da.0

9 months ago

0.10.10-preview-95d8b6b7.0

12 months ago

0.10.18

10 months ago

0.10.19

10 months ago

0.10.17-preview-c95e31d1.0

11 months ago

0.10.6-preview-a289890f.0

1 year ago

0.10.14

11 months ago

0.12.4-preview-cf198ddd.0

8 months ago

0.10.15

11 months ago

0.10.16

11 months ago

0.10.17

11 months ago

0.10.10

12 months ago

0.10.11

11 months ago

0.10.4-preview-e8062bb7.0

1 year ago

0.10.12

11 months ago

0.10.13

11 months ago

0.10.20

10 months ago

0.9.9-preview-7bafd457.0

1 year ago

0.10.3-preview-8feb6773.0

1 year ago

0.11.3-preview-27ae78ba.0

10 months ago

0.10.21-preview-3566ac3d.0

10 months ago

0.11.3-preview-a0074739.0

10 months ago

0.10.21

10 months ago

0.10.22

10 months ago

0.10.23

10 months ago

0.10.1-preview-64081c67.0

1 year ago

0.10.24

10 months ago

0.9.3-preview-eca10dbc.0

1 year ago

0.12.6-preview-e4e8fc7b.0

7 months ago

0.12.2-preview-845a4e8b.0

8 months ago

0.12.6-preview-2df7e7b5.0

7 months ago

0.10.2-preview-042f5ed6.0

1 year ago

0.10.10-preview-bb2cdfb8.0

12 months ago

0.10.18-preview-922d2ce6.0

10 months ago

0.10.19-preview-20f136a2.0

10 months ago

0.9.2-preview-1becd961.0

1 year ago

0.11.10

9 months ago

0.11.8-preview-bb8e00d0.0

10 months ago

0.10.10-preview-38cf19d9.0

12 months ago

0.9.6-preview-9a7f316b.0

1 year ago

0.11.11-preview-ef227a87.0

9 months ago

0.10.2-preview-7eeb1bc1.0

1 year ago

0.9.8-preview-4c10b48c.0

1 year ago

0.10.6-preview-4d49c519.0

1 year ago

0.10.18-preview-a2a64ca4.0

10 months ago

0.10.19-preview-9ca6ecbf.0

10 months ago

0.10.6-preview-ef08d0db.0

1 year ago

0.12.7-preview-9998cc23.0

7 months ago

0.10.20-preview-d479ae3f.0

10 months ago

0.10.18-preview-ed010264.0

11 months ago

0.10.2-preview-379c4ff3.0

1 year ago

0.11.9-preview-f475624a.0

9 months ago

0.11.2-preview-0d45398a.0

10 months ago

0.10.15-preview-985e2518.0

11 months ago

0.9.3-preview-e86d2666.0

1 year ago

0.10.10-preview-a2f98ef7.0

12 months ago

0.11.4-preview-b0b25986.0

10 months ago

0.10.18-preview-f228eb9d.0

10 months ago

0.11.10-preview-943d0cf0.0

9 months ago

0.10.2-preview-baf754b1.0

1 year ago

0.10.5-preview-c6f5cbae.0

1 year ago

0.12.4-preview-2f8a726b.0

8 months ago

0.10.6-preview-681053b7.0

1 year ago

0.11.11-preview-352c392a.0

9 months ago

0.10.7-preview-95f36d41.0

1 year ago

0.10.2-preview-20b0f520.0

1 year ago

0.9.10

1 year ago

0.11.8

10 months ago

0.11.9

9 months ago

0.10.2-preview-4d81b82b.0

1 year ago

0.10.18-preview-74c13173.0

10 months ago

0.10.17-preview-704e8703.0

11 months ago

0.10.10-preview-91ef6a1d.0

12 months ago

0.12.6-preview-aba585d4.0

7 months ago

0.11.0

10 months ago

0.11.1

10 months ago

0.11.2

10 months ago

0.11.3

10 months ago

0.11.4

10 months ago

0.11.5

10 months ago

0.11.6

10 months ago

0.11.7

10 months ago

0.11.3-preview-04b740ca.0

10 months ago

0.9.2

1 year ago

0.11.11-preview-8c84e870.0

9 months ago

0.11.2-preview-5accc3bc.0

10 months ago

0.12.7-preview-69fcfa33.0

7 months ago

0.12.0

8 months ago

0.12.1

8 months ago

0.12.2

8 months ago

0.12.3

8 months ago

0.10.18-preview-e840ab81.0

10 months ago

0.12.4

8 months ago

0.12.5

7 months ago

0.12.6

7 months ago

0.9.6-preview-532f4f48.0

1 year ago

0.10.10-preview-e49c63bb.0

12 months ago

0.10.18-preview-f7ec3fa7.0

10 months ago

0.10.13-preview-08c7f775.0

11 months ago

0.11.9-preview-ccf49ef5.0

9 months ago

0.11.11-preview-8cf89a18.0

8 months ago

0.9.2-preview-eda282a2.0

1 year ago

0.9.2-preview-3e824eee.0

1 year ago

0.9.2-preview-d1a63029.0

1 year ago

0.9.2-preview-2e497be2.0

1 year ago

0.8.0

1 year ago

0.7.60-preview-71543426.0

1 year ago

0.7.60-preview-ba12ca94.0

1 year ago

0.9.0

1 year ago

0.9.1

1 year ago

0.7.57-preview-efee0b7d.0

1 year ago

0.7.57-preview-e5174ad1.0

1 year ago

0.7.57-preview-3f66d646.0

1 year ago

0.7.57-preview-7adaddbe.0

1 year ago

0.7.57-preview-c9b51578.0

1 year ago

0.7.57-preview-d96c83e8.0

1 year ago

0.7.57-preview-1f246c4a.0

1 year ago

0.7.59

1 year ago

0.7.57-preview-fc25f08d.0

1 year ago

0.7.59-preview-726d2b3b.0

1 year ago

0.7.59-preview-8252c953.0

1 year ago

0.7.59-preview-0c12d89e.0

1 year ago

0.7.58

1 year ago

0.7.57

1 year ago

0.7.57-preview-4f9628fc.0

1 year ago

0.7.57-preview-eb3592d8.0

1 year ago

0.7.56-preview-7c4b3e02.0

1 year ago

0.7.55

1 year ago

0.7.54

1 year ago

0.7.56

1 year ago

0.7.56-preview-595edd83.0

1 year ago

0.7.53

1 year ago

0.7.53-preview-e9b53c27.0

1 year ago

0.7.33

2 years ago

0.7.32

2 years ago

0.7.35

2 years ago

0.7.34

2 years ago

0.7.31

2 years ago

0.7.30

2 years ago

0.7.37

2 years ago

0.7.36

2 years 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

1 year ago

0.7.29

2 years ago

0.7.28

2 years ago

0.7.27

2 years ago

0.7.46-preview-9bfb36d6.0

1 year ago

0.7.33-preview-47f53a8c.0

2 years ago

0.7.40-preview-40c31ba9.0

1 year ago

0.7.33-preview-b7b8cddc.0

2 years ago

0.7.45-preview-3eecfbf4.0

1 year ago

0.7.39-preview-a882321d.0

1 year ago

0.7.27-preview-d74371e8.0

2 years ago

0.7.45-preview-e8249200.0

1 year ago

0.7.44-preview-3201b907.0

1 year ago

0.7.51-preview-963c3343.0

1 year ago

0.7.40-preview-b09d21bf.0

1 year ago

0.7.37-preview-d4831186.0

2 years ago

0.7.44-preview-8898cdde.0

1 year ago

0.7.29-preview-0df2fefa.0

2 years ago

0.7.33-preview-6ec2d237.0

2 years ago

0.7.29-preview-c6cf83f0.0

2 years ago

0.7.29-preview-b98b3b80.0

2 years ago

0.7.49-preview-1e2f74b2.0

1 year ago

0.7.40-preview-665bb1e8.0

1 year ago

0.7.40-preview-efdf107f.0

1 year ago

0.7.48-preview-31958b7e.0

1 year ago

0.7.35-preview-a66ce7a9.0

2 years ago

0.7.36-preview-5dc6c544.0

2 years ago

0.7.27-preview-a5a79952.0

2 years ago

0.7.40-preview-ca0a56c2.0

1 year ago

0.7.35-preview-767c086a.0

2 years ago

0.7.45-preview-2abd8357.0

1 year ago

0.7.39-preview-5f7a62c6.0

1 year ago

0.7.51

1 year ago

0.7.50

1 year ago

0.7.52

1 year ago

0.7.44

1 year ago

0.7.52-preview-94780dcd.0

1 year ago

0.7.43

1 year ago

0.7.46

1 year ago

0.7.45

1 year ago

0.7.40

1 year ago

0.7.47-preview-0406b1f2.0

1 year ago

0.7.42

1 year ago

0.7.41

1 year ago

0.7.48

1 year ago

0.7.47

1 year ago

0.7.49

1 year ago

0.7.40-preview-44f1f327.0

1 year ago

0.7.29-preview-69a8374f.0

2 years ago

0.7.35-preview-1a5a24ad.0

2 years ago

0.7.27-preview-41627947.0

2 years ago

0.7.26

2 years ago

0.7.25

2 years ago

0.7.24

2 years ago

0.7.23

2 years ago

0.7.23-preview-dff5750f.0

2 years ago

0.7.23-preview-fa3ea861.0

2 years ago

0.7.23-preview-8bb3334c.0

2 years ago

0.7.23-preview-e82f86de.0

2 years ago

0.7.22

2 years ago

0.7.21

2 years ago

0.7.22-preview-7afaf1cf.0

2 years ago

0.7.20

2 years ago

0.7.19

2 years ago

0.7.17-preview-cb79db34.0

2 years ago

0.7.18

2 years ago

0.7.17

2 years ago

0.7.17-preview-01f09206.0

2 years ago

0.7.17-preview-734de100.0

2 years ago

0.7.19-preview-5d3667ec.0

2 years ago

0.7.17-preview-c7516715.0

2 years ago

0.7.17-preview-86dac340.0

2 years ago

0.7.17-preview-5b75040d.0

2 years ago

0.7.17-preview-7a18c2ee.0

2 years ago

0.7.17-preview-08779a44.0

2 years ago

0.7.17-preview-80576138.0

2 years ago

0.7.17-preview-69abc1d3.0

2 years ago

0.7.16-preview-2855fb42.0

2 years ago

0.7.16-preview-0a44b2fc.0

2 years ago

0.7.16

2 years ago

0.7.16-preview-c8f85f20.0

2 years ago

0.7.16-preview-0f7b85a9.0

2 years ago

0.7.16-preview-86ac603c.0

2 years ago

0.7.16-preview-cc3d0341.0

2 years ago

0.7.16-preview-261fde59.0

2 years ago

0.7.16-preview-b0dbf1fa.0

2 years ago

0.7.15

2 years ago

0.7.15-preview-ed4b1f94.0

2 years ago

0.7.14

2 years ago

0.7.14-preview-e6b01723.0

2 years ago

0.7.14-preview-1fcf96b1.0

2 years ago

0.7.13

2 years ago

0.7.12

2 years ago

0.7.11

2 years ago

0.7.10

2 years ago

0.7.9-preview-16f7e04e.0

2 years ago

0.7.9-preview-428c755f.0

2 years ago

0.7.9

2 years ago

0.7.8

2 years ago

0.7.7

2 years ago

0.7.6

2 years ago

0.7.4-preview-1d9347a7.0

2 years ago

0.7.4-preview-da21d728.0

2 years ago

0.7.4

2 years ago

0.7.3

2 years ago

0.7.5

2 years ago

0.7.4-preview-3bc93fc3.0

2 years ago

0.7.4-preview-4dc69f78.0

2 years ago

0.7.3-preview-778a0ef6.0

2 years ago

0.7.3-preview-2484f987.0

2 years ago

0.7.3-preview-84a92753.0

2 years ago

0.7.2

2 years ago

0.7.1

2 years ago

0.7.1-preview-5e88828b.0

2 years ago

0.7.0

2 years ago

0.6.18-preview-99d91149.0

2 years ago

0.6.17

2 years ago

0.6.18-preview-3cdd8d31.0

2 years ago

0.6.17-preview-e40879b4.0

2 years ago

0.6.17-preview-135ad6d6.0

2 years ago

0.6.17-preview-1b0fd831.0

2 years ago

0.6.17-preview-993a9cfb.0

2 years ago

0.6.17-preview-bd8ccc1f.0

2 years ago

0.6.16

2 years ago

0.6.15

2 years ago

0.6.15-preview-bd4095bc.0

2 years ago

0.6.14-preview-da55c4c2.0

2 years ago

0.6.14-preview-48e84a60.0

2 years ago

0.6.14-preview-3e9a33fa.0

2 years ago

0.6.14

2 years ago

0.6.13

2 years ago

0.6.14-preview-3e45f5dd.0

2 years ago

0.6.12

2 years ago

0.6.12-preview-ff0b5a40.0

2 years ago

0.6.11-preview-357970fd.0

2 years ago

0.6.11-preview-744f94d0.0

2 years ago

0.6.11

2 years ago

0.6.9

2 years ago

0.6.10-preview-0cc330d4.0

2 years ago

0.6.10

2 years ago

0.6.8-preview-936bde10.0

2 years ago

0.6.8

2 years ago

0.6.9-preview-006b34c3.0

2 years ago

0.6.8-preview-4c16b47e.0

2 years ago

0.6.7

2 years ago

0.6.6

2 years ago

0.6.6-preview-a0815a00.0

2 years ago

0.6.5

2 years ago

0.6.4

2 years ago

0.6.3-preview-3f90b7f1.0

2 years ago

0.6.3

2 years ago

0.6.2

2 years ago

0.6.3-preview-3a43a07a.0

2 years ago

0.6.1-preview-57c837e3.0

2 years ago

0.6.1

2 years ago

0.5.5

2 years 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