lucid-ui
Version:
A UI component library from Xandr.
38 lines • 1.77 kB
JavaScript
import React, { useState } from 'react';
import TextFieldValidated from './TextFieldValidated';
export default {
title: 'Controls/TextFieldValidated',
component: TextFieldValidated,
parameters: {
docs: {
description: {
component: TextFieldValidated.peek.description,
},
},
},
};
const style = {
marginBottom: '10px',
};
export const Basic = (args) => {
return React.createElement(TextFieldValidated, { ...args });
};
export const Debounced = (args) => {
const [value, setValue] = useState('');
return (React.createElement("div", null,
React.createElement(TextFieldValidated, { ...args, style: style, value: value, onChangeDebounced: (value) => setValue(value), Error: value === 'foo' ? null : 'Please enter "foo"' })));
};
export const ErrorTypes = (args) => {
const [value, setValue] = useState('');
return (React.createElement("div", null,
React.createElement(TextFieldValidated, { ...args, style: style, value: value, onChangeDebounced: () => { }, Error: 'This is an error' }),
React.createElement(TextFieldValidated, { ...args, style: style, value: value, onChangeDebounced: () => { }, Error: null, Info: 'This is an info' }),
React.createElement(TextFieldValidated, { ...args, style: style, value: value, onChangeDebounced: () => { }, Error: null, Success: {
message: 'This is a Success',
} }),
React.createElement(TextFieldValidated, { ...args, style: style, value: value, onChangeDebounced: () => { }, Error: null, Success: {
message: 'This is a disappearing Success',
disappearing: true,
} })));
};
//# sourceMappingURL=TextFieldValidated.stories.js.map