lucid-ui
Version:
A UI component library from Xandr.
96 lines • 4.41 kB
JavaScript
import React, { useState } from 'react';
import Button from '../Button/Button';
import { SearchFieldDumb as SearchField, } from './SearchField';
import LoadingIcon from '../Icon/LoadingIcon/LoadingIcon';
export default {
title: 'Controls/SearchField',
component: SearchField,
parameters: {
docs: {
description: {
component: SearchField.peek.description,
},
},
},
};
export const Basic = (args) => {
return React.createElement(SearchField, { ...args });
};
export const Interactive = (args) => {
const [state, setState] = useState('');
return (React.createElement("div", null,
React.createElement(SearchField, { ...args, onSubmit: (value) => setState(value) }),
React.createElement("div", { style: { marginTop: '10px', marginLeft: '10px' } },
"Hit \"enter\" to submit: ",
state)));
};
export const Placeholder = (args) => {
return React.createElement(SearchField, { ...args, placeholder: 'Name/ID' });
};
export const Disabled = (args) => {
return React.createElement(SearchField, { ...args, isDisabled: true });
};
export const CustomIcon = (args) => {
return (React.createElement(SearchField, { ...args },
React.createElement(SearchField.Icon, null,
React.createElement(LoadingIcon, null))));
};
export const CustomTextField = (args) => {
const [state, setState] = useState({
value: '',
submission: '',
lastValue: '',
});
const [key, setKey] = useState('');
return (React.createElement("div", null,
React.createElement(SearchField, { ...args, placeholder: 'Name/ID' },
React.createElement(SearchField.TextField, { value: state.value, onSubmit: (submission) => setState({ ...state, submission }), onChange: (value) => setState({ ...state, value }), onKeyDown: ({ event: { key } }) => setKey(key), onBlur: (lastValue) => setState({ ...state, lastValue }) })),
React.createElement("div", { style: { marginTop: '10px', marginLeft: '10px' } },
React.createElement("div", null,
"Hit \"enter\" to submit: ",
state.submission),
React.createElement("div", null,
"Last keydown: ",
key),
React.createElement("div", null,
"Value on blur: ",
state.lastValue))));
};
export const ValidSearch = (args) => {
const [state, setState] = useState({
value: '',
submission: '',
lastValue: '',
});
return (React.createElement(SearchField, { ...args, placeholder: "Search icon doesn't become active until you type at least three characters ----->", isValid: state.value.length > 2, value: state.value, onSubmit: (submission) => setState({ ...state, submission }), onChange: (value) => setState({ ...state, value }) }));
};
export const Props = (args) => {
return (React.createElement("div", null,
React.createElement(SearchField, { ...args, value: 'foo' }),
React.createElement(SearchField, { ...args, placeholder: 'bar' }),
React.createElement(SearchField, { ...args, isDisabled: true }),
React.createElement(SearchField, { ...args, isValid: false }),
React.createElement(SearchField, { ...args },
React.createElement(SearchField.Icon, null,
React.createElement(LoadingIcon, null))),
React.createElement(SearchField, { ...args, value: 'foo' },
React.createElement(SearchField.Icon, null,
React.createElement(LoadingIcon, null))),
React.createElement(SearchField, { ...args },
React.createElement(SearchField.TextField, { value: 'bar' }))));
};
export const Debounced = (args) => {
const [value, setValue] = useState('foo');
return (React.createElement("div", null,
React.createElement(SearchField, { ...args, style: { marginBottom: '10px' }, value: value, onChangeDebounced: (value) => setValue(value) }),
React.createElement("div", { style: {
marginBottom: '10px',
marginLeft: '10px',
} },
"Value: ",
value),
React.createElement(Button, { ...Button.defaultProps, onClick: () => {
setValue('foo');
} }, "Set TextField to \"foo\"")));
};
//# sourceMappingURL=SearchField.stories.js.map