@yandex/ui
Version:
Yandex UI components
42 lines (41 loc) • 2.39 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Playground = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var addon_knobs_1 = require("@storybook/addon-knobs");
var bundle_1 = require("@yandex-lego/components/Textinput/desktop/bundle");
var bundle_2 = require("@yandex-lego/components/Icon/bundle");
var Playground = function () {
var _a = tslib_1.__read(react_1.useState(''), 2), value = _a[0], setValue = _a[1];
var view = addon_knobs_1.select('view', ['default', 'material', ''], 'default');
var theme = view === '' ? addon_knobs_1.select('theme', ['normal', 'websearch'], 'normal') : null;
var size = theme !== 'websearch' ? addon_knobs_1.select('size', ['m', 's'], 'm') : null;
var pin = addon_knobs_1.select('pin', [
'',
'brick-brick',
'brick-clear',
'brick-round',
'clear-brick',
'clear-clear',
'clear-round',
'round-brick',
'round-clear',
'round-round',
], '');
var type = addon_knobs_1.select('type', ['text', 'password', 'number'], 'text');
var hasClear = addon_knobs_1.boolean('hasClear', false);
var disabled = addon_knobs_1.boolean('disabled', false);
var state = addon_knobs_1.select('state', ['error', ''], '');
var hint = addon_knobs_1.text('hint', '');
var leftIcon = addon_knobs_1.boolean('leftIcon', false);
var rightIcon = addon_knobs_1.boolean('rightIcon', false);
var variant;
var label;
if (view === 'material') {
variant = addon_knobs_1.select('variant', ['filled', 'outlined', ''], '');
label = addon_knobs_1.text('label', 'Label');
}
return (react_1.default.createElement(bundle_1.Textinput, { variant: variant, disabled: disabled, theme: theme, size: size, view: view, pin: pin, hasClear: hasClear, placeholder: "Placeholder", value: value, type: type, onChange: function (event) { return setValue(event.target.value); }, onClearClick: function () { return setValue(''); }, state: state, hint: hint, label: label, iconLeft: leftIcon ? react_1.default.createElement(bundle_2.Icon, { size: "xs", glyph: "type-cross-websearch" }) : undefined, iconRight: rightIcon ? react_1.default.createElement(bundle_2.Icon, { size: "ns", glyph: "type-cross-websearch" }) : undefined }));
};
exports.Playground = Playground;