@snack-uikit/notification v0.7.24

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

NotificationPanel

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

Props

NotificationPanel.Blank

Props

NotificationPanel.Divider

Props

NotificationPanelPopover

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

Props