Перейти к основному содержанию

Список бейджей

import { GMFYBadgesList } from 'gmfy-sdk'

Мотивация​

Компонент для отображения списка бейджей пользователя с userId. В случае, если был передан updateInterval в конфиг компонента провайдера, будет происходить ререндер, как будут получены новые значения раз в updateInterval мс.

Свойства​

type BadgeIcon = 'star' | 'cake' | 'eye' | 'donut' | 'diamond' | 'critical';

type GMFYBadgesListProps = {
    icons?: Record<string, BadgeIcon>;
    listClassName?: string;
    badgeClassName?: string;
}
  • icons - объект, ключами которого являются ID бейджей, а значения один из вариантов иконок, для этих бейджей. Если для какого-то ID бейджа не будет определена иконка, то по умолчанию возьмётся star
  • listClassName - имя класса для списка бейджей
  • badgeClassName - имя класса для карточки бейджа

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

const icons={
    'example-badge-id-4': 'diamond',
    'example-badge-id-8': 'eye',
    'example-badge-id-15': 'cake',
    'example-badge-id-16': 'donut',
    'example-badge-id-23': 'diamond',
}

<GMFYBadgesList icons={icons}/>

В данном примере бейджи, чьи ID совпадут с указанным списком, будут иметь иконки отличные от других

Отображение​

card.png

На элементе списка отображается

  • иконка бейджа
  • название
  • описание
  • дата получения
  • флаг отображающий постоянный бейдж или временный (иконка часов). Если бейдж постоянный, иконка отсутствует