Figma

ListData

import { ListData } from '@megafon/ui-core';
Примеры и код
Свойства и методы

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

<ListData
      title="Заголовок"
      subTitle="Подзаголовок. Пример, пакет интернета для поездок в СНГ, Европу, а так же Турцию"
  />
  <ListData
      title="Заголовок"
      subTitle="Подзаголовок. Пример, пакет интернета для поездок в СНГ, Европу, а так же Турцию"
      value="600&nbsp;₽"
  />
  <ListData
      title="Заголовок"
      subTitle="Подзаголовок. Пример, пакет интернета для поездок в СНГ, Европу, а так же Турцию"
      value="600 ₽"
      subValue="Описание"
  />
  <ListData icon={<MegafonTvIcon />} title="Заголовок" value="600 ₽" subValue="Описание" />
  <ListData
      icon={<MegafonTvIcon />}
      title={{ text: 'Title link', href: '#' }}
      subTitle="Подзаголовок. Пример, пакет интернета для поездок в СНГ, Европу, а так же Турцию"
      value="600 ₽"
      subValue="Описание"
      isIconColored
  />
  <ListData
      icon={<MegafonTvIcon />}
      title={{ text: 'Title link', href: '#' }}
      subTitle="Подзаголовок. Пример, пакет интернета для поездок в СНГ, Европу, а так же Турцию"
      value="600&nbsp;₽"
      disabled
  />

Особенности текста

<ListData
      icon={<MegafonTvIcon />}
      title="Длинный заголовок максимум в две строки, далее будет троеточие"
      subTitle="Длинный подзаголовок только в одну строку, далее троеточие"
      value="Может быть в две строки, далее будет троеточие"
      subValue="110px потом троеточие"
  />
  <ListData
      icon={<MegafonTvIcon />}
      title="Заголовок"
      subTitle="Длинный подзаголовок только в одну строку, далее троеточие"
      value="Может быть в две строки, далее будет троеточие"
      subValue="110px потом троеточие"
  />

Варианты дополнительных действий

<ListData
      icon={<MegafonTvIcon />}
      title={{ text: 'Title link', href: '#' }}
      subTitle="Переход по ссылке при клике на заголовок"
      value="Text"
      subValue="Value"
  />
  <ListData
      icon={<MegafonTvIcon />}
      title="Control"
      subTitle="Обработчик клика по иконке дополнительного действия"
      actionType="control"
      onAction={handleClick}
  />
  <ListData
      icon={<MegafonTvIcon />}
      title="Delete"
      subTitle="Обработчик клика по иконке дополнительного действия"
      actionType="delete"
      onAction={handleClick}
  />
  <ListData
      icon={<MegafonTvIcon />}
      title="Delete"
      subTitle="Disabled"
      actionType="delete"
      onAction={handleClick}
      disabled
  />

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

import { Avatar, ListData } from '@megafon/ui-core';
<ListData
      avatar={<Avatar src={ImageSrc.src} alt="аватар" />}
      title="Avatar"
      subTitle="Avatar имеет приоритет над icon"
      value="Text"
      subValue="Value"
  />
  <ListData
      avatar={<Avatar src={ImageSrc.src} alt="аватар" />}
      title="Avatar"
      subTitle="Avatar имеет приоритет над icon"
      value="Text"
      subValue="Value"
      disabled
  />

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

import { Button, ListData } from '@megafon/ui-core';
<ListData icon={<MegafonTvIcon />} title="Button" subTitle="Обработчик клика на кнопке">
      <Button sizeAll="small" sizeMobile="extra-small" onClick={handleClick}>
          Подключить
      </Button>
  </ListData>
  <ListData icon={<MegafonTvIcon />} title="Button" subTitle="Disabled" disabled>
      <Button sizeAll="small" sizeMobile="extra-small" disabled>
          Отключено
      </Button>
  </ListData>

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

import { ListData, Selector } from '@megafon/ui-core';
Код Wrapper
const Wrapper = ({ children }: IProps) => {
    const [checked, setChecked] = React.useState<boolean>(true);


    const handleChange = () => {
        setChecked(!checked);
    };


    return <div style={blockStyle}>{children({ checked, onChange: handleChange })}</div>;
};
<Wrapper>
      {({ checked, onChange }) => (
          <>
              <ListData
                  icon={<MegafonTvIcon />}
                  title="Selector"
                  subTitle="Обработчик клика на родительском компоненте"
                  onClick={onChange}
              >
                  <Selector value="value" checked={checked} />
              </ListData>
              <ListData icon={<MegafonTvIcon />} title="Selector" subTitle="Disabled" disabled>
                  <Selector value="value" checked disabled />
              </ListData>
          </>
      )}
  </Wrapper>

Код SelectorWrapper
const SelectorWrapper = ({ children }) => {
        const [selectedOption, setSelectedOption] = React.useState<string>('1');


        const handleChange = (value: string): void => {
            setSelectedOption(value);
        };


        return <div style={blockStyle}>{children({ onChange: handleChange, selectedOption })}</div>;
    };
<SelectorWrapper>
      {({ onChange, selectedOption }) => (
          <>
              <ListData
                  icon={<MegafonTvIcon />}
                  title={{ text: 'Title link', href: '#' }}
                  subTitle="Обработчик клика на дочернем компоненте"
              >
                  <Selector value="1" checked={selectedOption === '1'} onChange={onChange} />
              </ListData>
              <ListData
                  icon={<MegafonTvIcon />}
                  title={{ text: 'Title link', href: '#' }}
                  subTitle="Обработчик клика на дочернем компоненте"
              >
                  <Selector value="2" checked={selectedOption === '2'} onChange={onChange} />
              </ListData>
          </>
      )}
  </SelectorWrapper>

ListDataGroup

import { ListDataGroup } from '@megafon/ui-core';
<ListDataGroup
      activatorNode="control"
      gap="small"
      items={['1', '2', '3', '4', '5'].map(item => ({
          id: item,
          icon: <MegafonTvIcon />,
          title: 'Заголовок ' + item,
      }))}
  />
  <ListDataGroup
      activatorNode="cell"
      gap="large"
      showDivider
      items={['1', '2', '3', '4', '5'].map(item => ({
          id: item,
          avatar: <Avatar src={ImageSrc.src} alt="аватар" />,
          title: 'Заголовок ' + item,
          subTitle: 'Подзаголовок. Пример, пакет интернета для поездок в СНГ, Европу, а так же Турцию',
      }))}
  />

ListData

Prop nameTypeDefaultDescription
title*string | TitlePropsTypeЗаголовок
subTitlestringПодзаголовок
valuestringЗначение
valueColorValueColorsTypeЦвет
subValuestringДополнительное значение
iconElementИконка
isIconColoredbooleanfalseФоновая заливка у иконки
avatarElementАватар
disabledbooleanfalseОтключение компонента
actionTypeActionsTypeЭлемент дополнительного действия
onAction(e: SyntheticEvent<EventTarget, Event>) => voidОбработчик дополнительного действия
onClick(e: SyntheticEvent<EventTarget, Event>) => voidОбработчик клика
classNamestringДополнительный класс корневого элемента
classes{ root?: string; title?: string; subtitle?: string; }{}Дополнительные классы для внутренних элементов
dataAttrs{ root?: Record<string, string>; actionIcon?: Record<string, string>; }Дополнительные data атрибуты к внутренним элементам
childrenReactNodeДочерние элементы: Button, Selector
type TitlePropsType = {
    /** Текст заголовка */
    text: string;
    /** Ссылка */
    href: string;
    /** Атрибут ссылки target */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /** Атрибут ссылки rel */
    rel?: string;
};

ListDataGroup

Prop nameTypeDefaultDescription
items*ListItemPropsType[]Массив элементов
activatorNodeActivatorNodesTypecontrolАктиватор события перетаскивания
gapGapSizesTypenoneОтступ между элементами
showDividerbooleanfalseПоказать разделитель
onDragStart(event?: DragStartEvent) => voidОбработчик начала процесса перетаскивания
onDragEnd(items: ListItemPropsType[], event?: DragEndEvent) => voidОбработчик окончания процесса перетаскивания
disabledbooleanfalseОтключить перетаскивание
dragOverlayPropsDragOverlayPropsTypeПараметры DragOverlay элемента
classNamestringДополнительный класс корневого элемента
classes{ root?: string; cell?: string; control?: string; }{}Дополнительные классы для внутренних элементов
dataAttrs{ root?: Record<string, string>; cell?: Record<string, string>; control?: Record<string, string>; }Дополнительные data атрибуты к внутренним элементам
type ListItemPropsType = ListDataProps & { id: string | number }
type DragOverlayPropsType = {
    className?: string;
    zIndex?: number;
};