Notification/NotificationTrigger

Для показа уведомлений на лейаутах можно использовать компонент NotificationTrigger (покажет уведомление по клику, если это не отключено, или при изменении входящих данных если это включено). Также можно передать массив уведомлений в пропс динамический ключ на компоненте лейаута.

Использование

И в пропс data компонента-триггера, и в пропс динамический ключ notifications компонента-лейаута нужно передавать массив элементов следующего типа:

type TNotification = {
  id: string; // Пользовательский идентефикатор
  token!: 'default' | 'timer', // С таймером или без, если не указано - 'default'
  text: string; // Основной текст уведомления
  button: string; // Текст кнопки действия под основным текстом
  seconds: number; // Время на которое будет запущен уведомление исчезнет (если это token: 'timer', а это поле не передано будет установлено 5 секунд по умолчанию)
  icon: string; // Иконка, не будет показана если token: 'timer'
  color: string; // Цвет иконки
  hidden: boolean; // Отключает контрол крестика, "закрыть" на уведомлении
};

WARNING

Внимание! Вы должны всегда использовать копоненты-триггеры внутри лейаута в основном слоте.

WARNING

Внимание! Если вы передадите seconds для уведомления без таймера - оно будет удалено через указанное количество секунд, как и уведомление с таймером.

WARNING

Внимание! Вы можете отключить показ уведомлений по клику на триггере с помощью логического пропса noclick и дублирующего строкового _noclick. А также, включить пропсы reflect или _reflect, для того чтобы пропс data стал "динамическим ключем" - компонент начал реагировать на изменения приходящих данных, пробрасывая новые уведомления на лейаут.

  <ds-layout id="layout">
    <div slot="main">
      <ds-notification-trigger noclick><span slot="main">Текст триггера уведомления не реагирующего на клик</span></ds-notification-trigger>

      <ds-notification-trigger _noclick="true"><span slot="main">Текст триггера уведомления не реагирующего на клик</span></ds-notification-trigger>

      <ds-notification-trigger reflect><span slot="main">Текст триггера, который покажет пришедшие уведомления при изменении пропса data</span></ds-notification-trigger>

      <ds-notification-trigger _reflect="true"><span slot="main">Текст триггера, который покажет пришедшие уведомления при изменении пропса data</span></ds-notification-trigger>
    </div>
  </ds-layout>

Сделано так для большей гибкости, и для того чтобы не диктовать пользователям способы использования жестко. Например, в случае когда вы, предположим, собираете ошибки с API-сервиса - вам будет удобно показывать их в одном "верхнем" месте - через пропс лейаута (который всегда работает как "динамический ключ" - обновились входящие данные - все уведомления из новой стопки будут показаны). Если же уведомления должны происходить в разных местах разметки и интерфейса - вероятно будет намного удобнее использовать компоненты-триггеры (в структуре компонент проекта). Они могут быть как кликабельными контролами, так и "скрытым узлом", но который может работать как динамический ключ.

Небезопасные стили

При необходимости (например, для того чтобы изменить тип отображения элемента-триггера - например - скрыть его визуально) вы можете передать правила стилевой разметки в хост компонента через атрибут styles. Внимание!!! Это небезопасно! По умолчанию хост элемента отображается как display: inline-flex;;

HTML

  <ds-layout id="layout">
    <div slot="main">
      <ds-notification-trigger id="trigger" data='[{ "token": "timer", "id": "11111111111111", "icon": "selected", "color": "matrix", "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit", "button": "Button text" }]'>
        <span slot="main">Текст триггера уведомления</span>
      </ds-notification-trigger>
    </div>
  </ds-layout>

  <script>
    // Пример как отследить клик на кнопке действия в уведомлении:
    const layout = document.getElementById('layout');
    layout.addEventListener('notify', (e) => {
      console.log('Событие клика по кнопке в уведомлении!, ', e.detail.id);
    });

    const notify1 = {
      token: 'timer',
      id: '1',
      text: 'Текст 1',
    };
    const notify2 = {
      token: 'timer',
      id: '2',
      text: 'Текст 2',
    };

    // Показать пачку уведомлений через пропс компонента-триггера
    // (если клик не отключен - данный код изменит набор уведомлений которые показываются по нему,
    // если включена "рефлексия" - то код сразу покажет эти уведомления):
    setTimeout(() => {
      const trigger = document.getElementById('trigger');
      if (trigger) trigger.setAttribute('data', JSON.stringify([notify1, notify2]));
    }, 2000);

    // Как показать пачку уведомлений через пропс лейаута:
    setTimeout(() => {
      const layout = document.getElementById('layout');
      if (layout) layout.setAttribute('notifications', JSON.stringify([notify1, notify2]));
    }, 2000);
  </script>

React

import { Layout, NotificationTrigger } from '@rir/ds-library';
import { useState, useCallback } from 'react';

const data = [
  {
    token: 'timer',
    id: '1',
    text: 'Текст 1',
  },
  {
    token: 'timer',
    id: '2',
    text: 'Текст 2',
  }
];

function Component() {
  const [data, setData] = useState('');

  return (
    <>
      <Layout>
        <div slot="main">
          <NotificationTrigger
            data={data}
          >
            <div slot="main">Текст триггера уведомления</div>
          </NotificationTrigger>
        </div>
      </Layout>
    </>
  );
}

export default Component;

API NotificationTrigger

Props

Name	Type	Description	Default
data	TNotification[]	Идентефикатор модали для которой работает триггер.	[]
noclick	Boolean	Отключить показ уведомлений по клику?	false
_noclick	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
reflect	Boolean	Включить показ уведомлений при изменении входящих данных?	false
_reflect	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
styles	String	"Небезопастная" строка для передачи правил CSS в компонент	''

Slots

Name	Description
main	Основной контент триггера

Примеры проектов

React

Angular

Vue