Droplist

import { Button } from '@cloud-ru/ds-button';
import { Droplist } from '@cloud-ru/ds-list';
import { useState } from 'react';

import styles from './styles.module.scss';

export function BasicDroplist() {
  const [value, setValue] = useState<string | number | undefined>('rub');

  return (
    <div className={styles.wrapper}>
      <Droplist
        trigger='click'
        placement='bottom-start'
        closeDroplistOnItemClick
        selection={{ mode: 'single', value, onChange: setValue }}
        items={[
          { id: 'usd', content: { label: 'USD — Доллар США' } },
          { id: 'eur', content: { label: 'EUR — Евро' } },
          { id: 'rub', content: { label: 'RUB — Российский рубль' } },
          { id: 'cny', content: { label: 'CNY — Китайский юань' } },
        ]}
      >
        <Button size='s' appearance='neutral' view='outline' label={`Валюта: ${String(value).toUpperCase()}`} />
      </Droplist>
    </div>
  );
}

import { Button } from '@cloud-ru/ds-button';
import { Droplist } from '@cloud-ru/ds-list';
import { useState } from 'react';

import styles from './styles.module.scss';

export function DroplistMultiple() {
  const [value, setValue] = useState<(string | number)[]>(['email']);

  return (
    <div className={styles.wrapper}>
      <Droplist
        trigger='click'
        placement='bottom-start'
        selection={{ mode: 'multiple', value, onChange: setValue }}
        items={[
          { id: 'email', content: { label: 'Email' } },
          { id: 'push', content: { label: 'Push-уведомления' } },
          { id: 'sms', content: { label: 'SMS' } },
          { id: 'telegram', content: { label: 'Telegram' } },
        ]}
      >
        <Button size='s' appearance='neutral' view='outline' label={`Каналы: ${value.length}`} />
      </Droplist>
    </div>
  );
}

import { Button } from '@cloud-ru/ds-button';
import { Droplist } from '@cloud-ru/ds-list';
import { useMemo, useState } from 'react';

import styles from './styles.module.scss';

const COUNTRIES = [
  'Австрия',
  'Армения',
  'Беларусь',
  'Бразилия',
  'Германия',
  'Грузия',
  'Индия',
  'Казахстан',
  'Китай',
  'Россия',
  'США',
  'Турция',
];

export function DroplistWithSearch() {
  const [value, setValue] = useState<string | number | undefined>('Россия');
  const [query, setQuery] = useState('');

  const items = useMemo(
    () =>
      COUNTRIES.filter(name => name.toLowerCase().includes(query.toLowerCase())).map(name => ({
        id: name,
        content: { label: name },
      })),
    [query],
  );

  return (
    <div className={styles.wrapper}>
      <Droplist
        trigger='click'
        placement='bottom-start'
        closeDroplistOnItemClick
        selection={{ mode: 'single', value, onChange: setValue }}
        search={{ value: query, onChange: setQuery, placeholder: 'Поиск страны' }}
        items={items}
      >
        <Button size='s' appearance='neutral' view='outline' label={`Страна: ${value}`} />
      </Droplist>
    </div>
  );
}

import { Button } from '@cloud-ru/ds-button';
import { Droplist } from '@cloud-ru/ds-list';
import { useState } from 'react';

import styles from './styles.module.scss';

export function DroplistAsFormSelect() {
  const [value, setValue] = useState<string | number | undefined>('m');

  const options = [
    { id: 's', content: { label: 'Small (1 vCPU, 2 GB RAM)' } },
    { id: 'm', content: { label: 'Medium (2 vCPU, 4 GB RAM)' } },
    { id: 'l', content: { label: 'Large (4 vCPU, 8 GB RAM)' } },
    { id: 'xl', content: { label: 'X-Large (8 vCPU, 16 GB RAM)' } },
  ];
  const label = options.find(o => o.id === value)?.content.label ?? 'Выбрать';

  return (
    <div className={styles.formSelect}>
      <Droplist
        trigger='click'
        placement='bottom-start'
        closeDroplistOnItemClick
        widthStrategy='eq'
        selection={{ mode: 'single', value, onChange: setValue }}
        items={options}
      >
        <Button size='s' appearance='neutral' view='outline' label={label} fullWidth />
      </Droplist>
    </div>
  );
}

import { Button } from '@cloud-ru/ds-button';
import { Droplist } from '@cloud-ru/ds-list';
import { useState } from 'react';

import styles from './styles.module.scss';

export function DroplistWithHeader() {
  const [value, setValue] = useState<string | number | undefined>('relevance');

  return (
    <div className={styles.wrapper}>
      <Droplist
        trigger='click'
        placement='bottom-start'
        closeDroplistOnItemClick
        selection={{ mode: 'single', value, onChange: setValue }}
        header='Сортировать по'
        headerDivider
        footer='4 варианта сортировки'
        footerDivider
        items={[
          { id: 'relevance', content: { label: 'Релевантности' } },
          { id: 'date', content: { label: 'Дате создания' } },
          { id: 'name', content: { label: 'Имени' } },
          { id: 'size', content: { label: 'Размеру' } },
        ]}
      >
        <Button size='s' appearance='neutral' view='outline' label='Сортировка' />
      </Droplist>
    </div>
  );
}

import { AdaptiveProvider, LAYOUT_TYPE } from '@cloud-ru/ds-adaptive';
import { Button } from '@cloud-ru/ds-button';
import { Droplist } from '@cloud-ru/ds-list';
import { useState } from 'react';

import styles from './styles.module.scss';

export function MobileDroplist() {
  const [value, setValue] = useState<string | number | undefined>('rub');

  return (
    <AdaptiveProvider layoutType={LAYOUT_TYPE.Mobile}>
      <div className={styles.wrapper}>
        <Droplist
          label='Валюта'
          closeDroplistOnItemClick
          selection={{ mode: 'single', value, onChange: setValue }}
          items={[
            { id: 'usd', content: { label: 'USD — Доллар США' } },
            { id: 'eur', content: { label: 'EUR — Евро' } },
            { id: 'rub', content: { label: 'RUB — Российский рубль' } },
            { id: 'cny', content: { label: 'CNY — Китайский юань' } },
          ]}
        >
          <Button size='s' appearance='neutral' view='outline' label={`Валюта: ${String(value).toUpperCase()}`} />
        </Droplist>
      </div>
    </AdaptiveProvider>
  );
}