@yandex/ui
Version:
Yandex UI components
79 lines (78 loc) • 3.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComboBoxExample = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var index_1 = require("./index");
var examples_config_1 = require("../examples-config");
var desktop_1 = require("../../../Text/Text.bundle/desktop");
var desktop_2 = require("../../../Link/Link.bundle/desktop");
exports.default = {
title: examples_config_1.EXAMPLE_DESKTOP_TOKEN,
decorators: examples_config_1.createDecorators(),
parameters: examples_config_1.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,
},
];
var ComboBoxExample = function () {
var _a = tslib_1.__read(react_1.default.useState(items[1]), 2), value = _a[0], setValue = _a[1];
var _b = tslib_1.__read(react_1.default.useState(''), 2), searchText = _b[0], setSearchText = _b[1];
var _c = tslib_1.__read(react_1.default.useState(false), 2), progress = _c[0], setProgress = _c[1];
var options = react_1.default.useMemo(function () {
return items.filter(function (item) {
var text = (item.title + " " + item.subtitle).toLocaleLowerCase();
var term = searchText.toLocaleLowerCase();
return text.includes(term);
});
}, [searchText]);
react_1.default.useEffect(function () {
setProgress(true);
var timer = setTimeout(function () { return setProgress(false); }, 300);
return function () { return clearTimeout(timer); };
}, [searchText]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(desktop_1.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_1.default.createElement(desktop_1.Text, { color: "brand" }, "\u041B\u0435\u0433\u043E"),
" \u043C\u043E\u0436\u043D\u043E \u0441\u043E\u0431\u0440\u0430\u0442\u044C ",
react_1.default.createElement(desktop_1.Text, { color: "success" }, "ComboBox"),
"?"),
react_1.default.createElement(index_1.ComboBox, { style: { width: 300 }, value: value, onChange: function (newValue) { return newValue && setValue(newValue); }, searchText: searchText, searchInProgress: progress, onChangeSearchText: setSearchText, options: options }),
react_1.default.createElement(desktop_1.Text, { as: "p", typography: "body-long-m" },
react_1.default.createElement(desktop_2.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"))));
};
exports.ComboBoxExample = ComboBoxExample;
exports.ComboBoxExample.story = {
name: 'ComboBox',
};