lucid-ui
Version:
A UI component library from Xandr.
240 lines • 12.7 kB
JavaScript
import { map, isNil, escapeRegExp } from 'lodash';
import React, { useState } from 'react';
import SearchableSelect from './SearchableSelect';
import Underline from '../Underline/Underline';
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
export default {
title: 'Controls/SearchableSelect',
component: SearchableSelect,
subcomponents: {
'SearchableSelect.Placeholder': SearchableSelect.Placeholder,
'SearchableSelect.Option': SearchableSelect.Option,
'SearchableSelect.Option.Selected': SearchableSelect.Option.Selected,
'SearchableSelect.OptionGroup': SearchableSelect.OptionGroup,
'SearchableSelect.SearchField': SearchableSelect.SearchField,
'SearchableSelect.NullOption': SearchableSelect.NullOption,
'SearchableSelect.FixedOption': SearchableSelect.FixedOption,
},
parameters: {
docs: {
description: {
component: SearchableSelect.peek.description,
},
},
},
};
//👇 Destructure any child components that we will need
const { Option, OptionGroup, SearchField } = SearchableSelect;
//👇 Add a key prop to each element of the array
function addKeys(children) {
return map(children, (child, index) => ({ ...child, key: index }));
}
//👇 Create a “template” of how args map to rendering
const Template = (args) => {
const [selectedIndex, setSelectedIndex] = useState(null);
const handleSelect = (optionIndex) => {
setSelectedIndex(optionIndex);
};
return (React.createElement("section", { style: { minHeight: 120 } },
React.createElement(SearchableSelect, { ...args, onSelect: handleSelect }),
!isNil(selectedIndex) && (React.createElement("section", { style: { paddingTop: 9, paddingLeft: 9 } },
"Selected Index: ",
JSON.stringify(selectedIndex)))));
};
//👇 Each story then reuses that template
/** Basic */
export const Basic = Template.bind({});
Basic.args = {
Placeholder: 'Select State',
maxMenuHeight: '200',
children: addKeys([
React.createElement(Option, { value: 'AK' }, "Alaska"),
React.createElement(Option, { value: 'HI' }, "Hawaii"),
React.createElement(OptionGroup, null,
"PST",
React.createElement(Option, { value: 'CA' }, "California"),
React.createElement(Option, { value: 'NV' }, "Nevada"),
React.createElement(Option, { value: 'OR' }, "Oregon"),
React.createElement(Option, { value: 'WA' }, "Washington")),
React.createElement(OptionGroup, null,
"MST",
React.createElement(Option, { value: 'CO' }, "Colorado"),
React.createElement(Option, { value: 'ID' }, "Idaho"),
React.createElement(Option, { value: 'MT' }, "Montana"),
React.createElement(Option, { value: 'NM' }, "New Mexico"),
React.createElement(Option, { value: 'ND' }, "North Dakota"),
React.createElement(Option, { value: 'SD' }, "South Dakota"),
React.createElement(Option, { value: 'WI' }, "Wisconsin"),
React.createElement(Option, { value: 'WY' }, "Wyoming")),
React.createElement(OptionGroup, null,
"CST",
React.createElement(Option, { value: 'AR' }, "Arkansas"),
React.createElement(Option, { value: 'IL' }, "Illinois"),
React.createElement(Option, { value: 'IN' }, "Indiana"),
React.createElement(Option, { value: 'IA' }, "Iowa"),
React.createElement(Option, { value: 'KS' }, "Kansas"),
React.createElement(Option, { value: 'KY' }, "Kentucky"),
React.createElement(Option, { value: 'MI' }, "Michigan"),
React.createElement(Option, { value: 'MN' }, "Minnesota"),
React.createElement(Option, { value: 'MS' }, "Mississippi"),
React.createElement(Option, { value: 'MO' }, "Missouri"),
React.createElement(Option, { value: 'NE' }, "Nebraska"),
React.createElement(Option, { value: 'OH' }, "Ohio"),
React.createElement(Option, { value: 'OK' }, "Oklahoma"),
React.createElement(Option, { value: 'TN' }, "Tennessee"),
React.createElement(Option, { value: 'TX' }, "Texas"),
React.createElement(Option, { value: 'UT' }, "Utah")),
React.createElement(OptionGroup, null,
"EST",
React.createElement(Option, { value: 'AL' },
React.createElement("span", null, "USA: "),
"Alabama"),
React.createElement(Option, { value: 'AZ' }, "Arizona"),
React.createElement(Option, { value: 'CT' }, "Connecticut"),
React.createElement(Option, { value: 'DE' }, "Delaware"),
React.createElement(Option, { value: 'DC' }, "District Of Columbia"),
React.createElement(Option, { value: 'FL' }, "Florida"),
React.createElement(Option, { value: 'GA' }, "Georgia"),
React.createElement(Option, { value: 'LA' }, "Louisiana"),
React.createElement(Option, { value: 'ME' }, "Maine"),
React.createElement(Option, { value: 'MD' }, "Maryland"),
React.createElement(Option, { value: 'MA' }, "Massachusetts"),
React.createElement(Option, { value: 'NH' }, "New Hampshire"),
React.createElement(Option, { value: 'NJ' }, "New Jersey"),
React.createElement(Option, { value: 'NY' }, "New York"),
React.createElement(Option, { value: 'NC' }, "North Carolina"),
React.createElement(Option, { value: 'PA' }, "Pennsylvania"),
React.createElement(Option, { value: 'RI' }, "Rhode Island"),
React.createElement(Option, { value: 'SC' }, "South Carolina"),
React.createElement(Option, { value: 'VT' }, "Vermont"),
React.createElement(Option, { value: 'VA' }, "Virginia"),
React.createElement(Option, { value: 'WV' }, "West Virginia")),
]),
};
/** Loading */
export const Loading = Template.bind({});
Loading.args = {
...Basic.args,
isLoading: true,
children: addKeys([
React.createElement(Option, { value: 'AL' }, "Alabama"),
React.createElement(Option, { value: 'AK' }, "Alaska"),
React.createElement(Option, { value: 'AZ' }, "Arizona"),
React.createElement(Option, { value: 'AR' }, "Arkansas"),
React.createElement(Option, { value: 'CA' }, "California"),
React.createElement(Option, { value: 'CO' }, "Colorado"),
React.createElement(Option, { value: 'CT' }, "Connecticut"),
React.createElement(Option, { value: 'DE' }, "Delaware"),
React.createElement(Option, { value: 'DC' }, "District Of Columbia"),
React.createElement(Option, { value: 'FL' }, "Florida"),
React.createElement(Option, { value: 'GA' }, "Georgia"),
React.createElement(Option, { value: 'HI' }, "Hawaii"),
React.createElement(Option, { value: 'ID' }, "Idaho"),
React.createElement(Option, { value: 'IL' }, "Illinois"),
React.createElement(Option, { value: 'IN' }, "Indiana"),
React.createElement(Option, { value: 'IA' }, "Iowa"),
React.createElement(Option, { value: 'KS' }, "Kansas"),
React.createElement(Option, { value: 'KY' }, "Kentucky"),
React.createElement(Option, { value: 'LA' }, "Louisiana"),
React.createElement(Option, { value: 'ME' }, "Maine"),
React.createElement(Option, { value: 'MD' }, "Maryland"),
React.createElement(Option, { value: 'MA' }, "Massachusetts"),
React.createElement(Option, { value: 'MI' }, "Michigan"),
React.createElement(Option, { value: 'MN' }, "Minnesota"),
React.createElement(Option, { value: 'MS' }, "Mississippi"),
React.createElement(Option, { value: 'MO' }, "Missouri"),
React.createElement(Option, { value: 'MT' }, "Montana"),
React.createElement(Option, { value: 'NE' }, "Nebraska"),
React.createElement(Option, { value: 'NV' }, "Nevada"),
React.createElement(Option, { value: 'NH' }, "New Hampshire"),
React.createElement(Option, { value: 'NJ' }, "New Jersey"),
React.createElement(Option, { value: 'NM' }, "New Mexico"),
React.createElement(Option, { value: 'NY' }, "New York"),
React.createElement(Option, { value: 'NC' }, "North Carolina"),
React.createElement(Option, { value: 'ND' }, "North Dakota"),
React.createElement(Option, { value: 'OH' }, "Ohio"),
React.createElement(Option, { value: 'OK' }, "Oklahoma"),
React.createElement(Option, { value: 'OR' }, "Oregon"),
React.createElement(Option, { value: 'PA' }, "Pennsylvania"),
React.createElement(Option, { value: 'RI' }, "Rhode Island"),
React.createElement(Option, { value: 'SC' }, "South Carolina"),
React.createElement(Option, { value: 'SD' }, "South Dakota"),
React.createElement(Option, { value: 'TN' }, "Tennessee"),
React.createElement(Option, { value: 'TX' }, "Texas"),
React.createElement(Option, { value: 'UT' }, "Utah"),
React.createElement(Option, { value: 'VT' }, "Vermont"),
React.createElement(Option, { value: 'VA' }, "Virginia"),
React.createElement(Option, { value: 'WA' }, "Washington"),
React.createElement(Option, { value: 'WV' }, "West Virginia"),
React.createElement(Option, { value: 'WI' }, "Wisconsin"),
React.createElement(Option, { value: 'WY' }, "Wyoming"),
]),
};
/** Custom Search Placeholder */
export const CustomSearchPlaceholder = Template.bind({});
CustomSearchPlaceholder.args = {
...Basic.args,
Placeholder: 'Select Color',
children: addKeys([
React.createElement(SearchField, { placeholder: 'Type here to filter...' }),
React.createElement(Option, null, "Blue"),
React.createElement(Option, null, "Green"),
React.createElement(Option, null, "Orange"),
React.createElement(Option, null, "Red"),
]),
};
/** Invisible */
export const Invisible = Template.bind({});
Invisible.args = {
...Basic.args,
isInvisible: true,
};
/** Formatted Options */
const OptionCols = ({ col1, col2, textMatch, }) => (React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", { style: { width: 100 } },
React.createElement(Underline, { match: textMatch }, col1)),
React.createElement("div", null,
React.createElement(Underline, { match: textMatch }, col2))));
const optionFilter = (searchText, { filterText }) => {
if (filterText) {
return new RegExp(escapeRegExp(searchText), 'i').test(filterText);
}
return true;
};
export const FormattedOptions = Template.bind({});
FormattedOptions.args = {
...Basic.args,
Placeholder: 'Select Color',
optionFilter: optionFilter,
children: addKeys([
React.createElement(OptionGroup, null,
React.createElement(OptionCols, { col1: 'Name', col2: 'ID' }),
React.createElement(Option, { filterText: 'Red', Selected: 'Red (#FF0000)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: 'Red', col2: '#FF0000', textMatch: searchText }))),
React.createElement(Option, { filterText: 'Green', Selected: 'Green (#00FF00)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: 'Green', col2: '#00FF00', textMatch: searchText }))),
React.createElement(Option, { filterText: 'Blue', Selected: 'Blue (#0000FF)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: 'Blue', col2: '#0000FF', textMatch: searchText })))),
]),
};
FormattedOptions.parameters = {
docs: {
description: {
story: `Use multiple columns of data in your dropdown when additional information is needed to make a selection.
`,
},
},
};
/** Invalid */
export const Invalid = (args) => {
const [selectedIndex, setSelectedIndex] = useState(null);
const handleSelect = (optionIndex) => {
setSelectedIndex(optionIndex);
};
return (React.createElement("section", { style: { minHeight: 120 } },
React.createElement(SearchableSelect, { ...args, Error: selectedIndex === 0 ? null : 'Please choose option California', onSelect: handleSelect }),
!isNil(selectedIndex) && (React.createElement("section", { style: { paddingTop: 9, paddingLeft: 9 } },
"Selected Index: ",
JSON.stringify(selectedIndex)))));
};
Invalid.args = {
...Basic.args,
};
//# sourceMappingURL=SearchableSelect.stories.js.map