@yandex/ui/esm/Select/Select.examples/ComboBox/index.examples.js

Yandex UI components

import { __read } from "tslib";
import React from 'react';
import { ComboBox } from './index';
import { EXAMPLE_DESKTOP_TOKEN, createDecorators, parameters } from '../examples-config';
import { Text } from '../../../Text/Text.bundle/desktop';
import { Link } from '../../../Link/Link.bundle/desktop';
export default {
    title: EXAMPLE_DESKTOP_TOKEN,
    decorators: createDecorators(),
    parameters: parameters,
};
var items = [
    {
        id: '1',
        avatar: require('./images/shadrin.png'),
        title: 'Роман Шадрин',
        subtitle: '2340 подписчиков',
    },
    {
        id: '2',
        avatar: require('./images/regina.png'),
        title: 'Регина Тодаренко',
        subtitle: '2340 подписчиков',
    },
    {
        id: '3',
        avatar: require('./images/tvrain.png'),
        title: 'Телеканал Дождь',
        subtitle: '2340 подписчиков',
    },
    {
        id: '4',
        avatar: require('./images/ivleeva.png'),
        title: 'AgentShow',
        subtitle: '2340 подписчиков',
    },
    {
        id: '5',
        avatar: require('./images/shadrin.png'),
        title: 'Вадим Галыгин',
        subtitle: '2340 подписчиков',
        disabled: true,
    },
];
export var ComboBoxExample = function () {
    var _a = __read(React.useState(items[1]), 2), value = _a[0], setValue = _a[1];
    var _b = __read(React.useState(''), 2), searchText = _b[0], setSearchText = _b[1];
    var _c = __read(React.useState(false), 2), progress = _c[0], setProgress = _c[1];
    var options = React.useMemo(function () {
        return items.filter(function (item) {
            var text = (item.title + " " + item.subtitle).toLocaleLowerCase();
            var term = searchText.toLocaleLowerCase();
            return text.includes(term);
        });
    }, [searchText]);
    React.useEffect(function () {
        setProgress(true);
        var timer = setTimeout(function () { return setProgress(false); }, 300);
        return function () { return clearTimeout(timer); };
    }, [searchText]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Text, { as: "p", typography: "headline-m" },
            "\u0410 \u0432\u044B \u0437\u043D\u0430\u043B\u0438, \u0447\u0442\u043E \u0438\u0437 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u043E\u0432 ",
            React.createElement(Text, { color: "brand" }, "\u041B\u0435\u0433\u043E"),
            " \u043C\u043E\u0436\u043D\u043E \u0441\u043E\u0431\u0440\u0430\u0442\u044C ",
            React.createElement(Text, { color: "success" }, "ComboBox"),
            "?"),
        React.createElement(ComboBox, { style: { width: 300 }, value: value, onChange: function (newValue) { return newValue && setValue(newValue); }, searchText: searchText, searchInProgress: progress, onChangeSearchText: setSearchText, options: options }),
        React.createElement(Text, { as: "p", typography: "body-long-m" },
            React.createElement(Link, { view: "default", href: "https://github.yandex-team.ru/search-interfaces/frontend/tree/master/packages/lego-components/src/Select/Select.examples/ComboBox" }, "\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0438\u0441\u0445\u043E\u0434\u043D\u0438\u043A\u0438"))));
};
ComboBoxExample.story = {
    name: 'ComboBox',
};