@yandex/ui/esm/Select/Select.examples/desktop/overriden.examples.js

Yandex UI components

import { __assign, __read } from "tslib";
import React, { useState, useRef, useLayoutEffect, createContext, useCallback, useContext, useMemo } from 'react';
import { Textinput } from '@yandex-lego/components/Textinput/desktop/bundle';
import { Spacer } from '@yandex-lego/components/Spacer/desktop';
import { Select } from '@yandex-lego/components/Select/desktop/bundle';
var INITIAL_OPTIONS = [
    { value: 'a', content: 'Каждый' },
    { value: 'b', content: 'Охотник' },
    { value: 'c', content: 'Желает' },
    { value: 'd', content: 'Знать' },
    { value: 'e', content: 'Где' },
    { value: 'f', content: 'Сидит' },
    { value: 'g', content: 'Фазан' },
];
var SearchContext = createContext({});
var RenderMenu = function (props, Menu) {
    var _a = useContext(SearchContext), onChange = _a.onChange, value = _a.value;
    var controlRef = useRef(null);
    var prevActiveNode = useRef(null);
    useLayoutEffect(function () {
        if (props.focused) {
            prevActiveNode.current = document.activeElement;
            controlRef.current && controlRef.current.focus();
        }
        else if (controlRef.current === document.activeElement && prevActiveNode.current !== null) {
            prevActiveNode.current.focus();
        }
    }, [props.focused]);
    return (React.createElement("div", { className: "MenuWrapper", style: { overflow: 'hidden', width: 160 } },
        React.createElement(Spacer, { all: "8px" },
            React.createElement(Textinput, { onChange: onChange, value: value, controlRef: controlRef, view: "default", size: "s" })),
        React.createElement(Menu, __assign({ style: { backgroundColor: 'var(--color-bg-default)' } }, props))));
};
export var Overriden = function () {
    var _a = __read(useState('a'), 2), value = _a[0], setValue = _a[1];
    var _b = __read(useState(INITIAL_OPTIONS), 2), options = _b[0], setOptions = _b[1];
    var content = useMemo(function () {
        var option = INITIAL_OPTIONS.find(function (option) { return option.value === value; });
        return option ? option.content : '';
    }, [value]);
    var _c = __read(useState(), 2), searchValue = _c[0], setSearchValue = _c[1];
    var onInputChange = useCallback(function (event) {
        setSearchValue(event.target.value);
        setOptions(INITIAL_OPTIONS.filter(function (option) { return option.content.toLowerCase().startsWith(event.target.value); }));
    }, []);
    return (React.createElement(SearchContext.Provider, { value: { onChange: onInputChange, value: searchValue } },
        React.createElement(Select, { view: "default", size: "m", value: value, onChange: function (event) { return setValue(event.target.value); }, options: options, renderMenu: RenderMenu, placeholder: content, showAlwaysPlaceholder: true })));
};