@yandex/ui/esm/withDebounceInput/examples/minlength.examples.js

Yandex UI components

import { __read } from "tslib";
import React, { useState } from 'react';
import { withDebounceInput } from '@yandex-lego/components/withDebounceInput';
import { Textinput } from '@yandex-lego/components/Textinput/Textinput.bundle/desktop';
var DebouncedInput = withDebounceInput(Textinput);
export var MinLength = function () {
    var _a = __read(useState(''), 2), value1 = _a[0], setValue1 = _a[1];
    var _b = __read(useState(''), 2), value2 = _b[0], setValue2 = _b[1];
    return (React.createElement(React.Fragment, null,
        "\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0434\u043B\u0438\u043D\u0430 4 \u0441\u0438\u043C\u0432\u043E\u043B\u0430",
        React.createElement(DebouncedInput, { value: value1, onChange: function (e) { return setValue1(e.target.value); }, debounceTimeout: 1000, minLength: 4, view: "default", size: "m" }),
        " ",
        React.createElement("br", null),
        React.createElement("b", null, "Value 1:"),
        " ",
        value1,
        " ",
        React.createElement("br", null),
        " ",
        React.createElement("br", null),
        "\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0434\u043B\u0438\u043D\u0430 8 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
        React.createElement(DebouncedInput, { value: value2, onChange: function (e) { return setValue2(e.target.value); }, debounceTimeout: 1000, minLength: 8, view: "default", size: "m" }),
        " ",
        React.createElement("br", null),
        React.createElement("b", null, "Value 2:"),
        " ",
        value2));
};