lucid-ui
Version:
A UI component library from Xandr.
64 lines • 3.05 kB
JavaScript
import React, { useState } from 'react';
import TextField from './TextField';
import Button from '../Button/Button';
export default {
title: 'Controls/TextField',
component: TextField,
parameters: {
docs: {
description: {
component: TextField.peek.description,
},
},
},
};
const style = {
marginBottom: '10px',
};
export const Basic = (args) => {
const [value, setValue] = useState('');
return (React.createElement("div", null,
React.createElement(TextField, { ...args, style: style, placeholder: 'default', value: value, onChange: (value) => setValue(value) })));
};
export const Plain = (args) => {
return (React.createElement("div", null,
React.createElement(TextField, { ...args, style: style, placeholder: 'Plain Textfield example' }),
React.createElement(TextField, { ...args, isMultiLine: true, rows: 5, style: style, placeholder: 'Plain Textfield multiline example' })));
};
export const OnSubmit = (args) => {
const [value, setValue] = useState('Enter some text in and hit enter');
return (React.createElement("div", null,
React.createElement(TextField, { ...args, style: style, value: value, onSubmit: (value) => setValue(value) }),
React.createElement("div", { style: { marginTop: '10px', marginLeft: '10px' } },
"state.value: ",
value)));
};
export const Debounced = (args) => {
const [value, setValue] = useState('foo');
return (React.createElement("div", null,
React.createElement(TextField, { ...args, style: style, value: value, onChangeDebounced: (value) => setValue(value) }),
React.createElement("div", { style: { marginBottom: '10px', marginLeft: '10px' } },
"state.value: ",
value),
React.createElement(Button, { ...Button.defaultProps, onClick: () => {
setValue('foo');
} }, "Set TextField to \"foo\"")));
};
export const Multiline = (args) => {
const [value, setValue] = useState('');
return (React.createElement("div", null,
React.createElement(TextField, { ...args, placeholder: 'default', style: style, value: value, onChange: (value) => setValue(value) }),
React.createElement(TextField, { ...args, isMultiLine: true, placeholder: 'isMultiline', style: style, value: value, onChange: (value) => setValue(value) }),
React.createElement("div", { style: { marginBottom: '10px', marginLeft: '10px' } },
"state.value: ",
value),
React.createElement(Button, { ...Button.defaultProps, onClick: () => {
setValue('foo');
} }, "Set TextField to \"foo\"")));
};
export const Disabled = (args) => {
const [value, setValue] = useState('foo');
return (React.createElement("div", null,
React.createElement(TextField, { ...args, placeholder: 'disabled', isDisabled: true, style: style, value: value, onChange: (value) => setValue(value) })));
};
//# sourceMappingURL=TextField.stories.js.map