@yandex/ui
Version:
Yandex UI components
38 lines (37 loc) • 2 kB
JavaScript
import { __read } from "tslib";
import React, { useState } from 'react';
import { select, boolean, text } from '@storybook/addon-knobs';
import { Textinput } from '@yandex-lego/components/Textinput/desktop/bundle';
import { Icon } from '@yandex-lego/components/Icon/bundle';
export var Playground = function () {
var _a = __read(useState(''), 2), value = _a[0], setValue = _a[1];
var view = select('view', ['default', 'material', ''], 'default');
var theme = view === '' ? select('theme', ['normal', 'websearch'], 'normal') : null;
var size = theme !== 'websearch' ? select('size', ['m', 's'], 'm') : null;
var pin = select('pin', [
'',
'brick-brick',
'brick-clear',
'brick-round',
'clear-brick',
'clear-clear',
'clear-round',
'round-brick',
'round-clear',
'round-round',
], '');
var type = select('type', ['text', 'password', 'number'], 'text');
var hasClear = boolean('hasClear', false);
var disabled = boolean('disabled', false);
var state = select('state', ['error', ''], '');
var hint = text('hint', '');
var leftIcon = boolean('leftIcon', false);
var rightIcon = boolean('rightIcon', false);
var variant;
var label;
if (view === 'material') {
variant = select('variant', ['filled', 'outlined', ''], '');
label = text('label', 'Label');
}
return (React.createElement(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.createElement(Icon, { size: "xs", glyph: "type-cross-websearch" }) : undefined, iconRight: rightIcon ? React.createElement(Icon, { size: "ns", glyph: "type-cross-websearch" }) : undefined }));
};