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

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Overriden = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var bundle_1 = require("@yandex-lego/components/Textinput/desktop/bundle");
var desktop_1 = require("@yandex-lego/components/Spacer/desktop");
var bundle_2 = require("@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 = react_1.createContext({});
var RenderMenu = function (props, Menu) {
    var _a = react_1.useContext(SearchContext), onChange = _a.onChange, value = _a.value;
    var controlRef = react_1.useRef(null);
    var prevActiveNode = react_1.useRef(null);
    react_1.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_1.default.createElement("div", { className: "MenuWrapper", style: { overflow: 'hidden', width: 160 } },
        react_1.default.createElement(desktop_1.Spacer, { all: "8px" },
            react_1.default.createElement(bundle_1.Textinput, { onChange: onChange, value: value, controlRef: controlRef, view: "default", size: "s" })),
        react_1.default.createElement(Menu, tslib_1.__assign({ style: { backgroundColor: 'var(--color-bg-default)' } }, props))));
};
var Overriden = function () {
    var _a = tslib_1.__read(react_1.useState('a'), 2), value = _a[0], setValue = _a[1];
    var _b = tslib_1.__read(react_1.useState(INITIAL_OPTIONS), 2), options = _b[0], setOptions = _b[1];
    var content = react_1.useMemo(function () {
        var option = INITIAL_OPTIONS.find(function (option) { return option.value === value; });
        return option ? option.content : '';
    }, [value]);
    var _c = tslib_1.__read(react_1.useState(), 2), searchValue = _c[0], setSearchValue = _c[1];
    var onInputChange = react_1.useCallback(function (event) {
        setSearchValue(event.target.value);
        setOptions(INITIAL_OPTIONS.filter(function (option) { return option.content.toLowerCase().startsWith(event.target.value); }));
    }, []);
    return (react_1.default.createElement(SearchContext.Provider, { value: { onChange: onInputChange, value: searchValue } },
        react_1.default.createElement(bundle_2.Select, { view: "default", size: "m", value: value, onChange: function (event) { return setValue(event.target.value); }, options: options, renderMenu: RenderMenu, placeholder: content, showAlwaysPlaceholder: true })));
};
exports.Overriden = Overriden;