lucid-ui
Version:
A UI component library from Xandr.
301 lines • 14.9 kB
JavaScript
import { includes, map, reduce, indexOf, constant, escapeRegExp, get, } from 'lodash';
import React, { useState } from 'react';
import SearchableSingleSelect from './SearchableSingleSelect';
import Underline from '../Underline/Underline';
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
export default {
title: 'Controls/SearchableSingleSelect',
component: SearchableSingleSelect,
subcomponents: {
'SearchableSingleSelect.Placeholder': SearchableSingleSelect.SearchField,
'SearchableSingleSelect.Option': SearchableSingleSelect.Option,
'SearchableSingleSelect.Option.Selected': SearchableSingleSelect.Option.Selected,
'SearchableSingleSelect.OptionGroup': SearchableSingleSelect.OptionGroup,
'SearchableSingleSelect.SearchField': SearchableSingleSelect.SearchField,
},
parameters: {
docs: {
description: {
component: SearchableSingleSelect.peek.description,
},
},
},
};
//👇 Destructure any child components that we will need
const { Option, OptionGroup } = SearchableSingleSelect;
//👇 Add a key prop to each child 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) => {
return (React.createElement("section", null,
React.createElement(SearchableSingleSelect, { ...args, style: { maxWidth: '200px' } })));
};
//👇 Each story then reuses that template
/** Basic */
export const Basic = Template.bind({});
Basic.args = {
SearchField: { placeholder: 'Search State' },
children: addKeys([
React.createElement(Option, null, "Alabama"),
React.createElement(Option, null, "Alaska"),
React.createElement(Option, null, "Arizona"),
React.createElement(Option, null, "Arkansas"),
React.createElement(Option, null, "California"),
React.createElement(Option, null, "Colorado"),
React.createElement(Option, null, "Connecticut"),
React.createElement(Option, null, "Delaware"),
React.createElement(Option, null, "Florida"),
React.createElement(Option, null, "Georgia"),
React.createElement(Option, null, "Hawaii"),
React.createElement(Option, null, "Idaho"),
React.createElement(Option, null, "Illinois"),
React.createElement(Option, null, "Indiana"),
React.createElement(Option, null, "Iowa"),
React.createElement(Option, null, "Kansas"),
React.createElement(Option, null, "Kentucky"),
React.createElement(Option, null, "Louisiana"),
React.createElement(Option, null, "Maine"),
React.createElement(Option, null, "Maryland"),
React.createElement(Option, null, "Massachusetts"),
React.createElement(Option, null, "Michigan"),
React.createElement(Option, null, "Minnesota"),
React.createElement(Option, null, "Mississippi"),
React.createElement(Option, null, "Missouri"),
React.createElement(Option, null, "Montana Nebraska"),
React.createElement(Option, null, "Nevada"),
React.createElement(Option, null, "New Hampshire"),
React.createElement(Option, null, "New Jersey"),
React.createElement(Option, null, "New Mexico"),
React.createElement(Option, null, "New York"),
React.createElement(Option, null, "North Carolina"),
React.createElement(Option, null, "North Dakota"),
React.createElement(Option, null, "Ohio"),
React.createElement(Option, null, "Oklahoma"),
React.createElement(Option, null, "Oregon"),
React.createElement(Option, null, "Pennsylvania Rhode Island"),
React.createElement(Option, null, "South Carolina"),
React.createElement(Option, null, "South Dakota"),
React.createElement(Option, null, "Tennessee"),
React.createElement(Option, null, "Texas"),
React.createElement(Option, null, "Utah"),
React.createElement(Option, null, "Vermont"),
React.createElement(Option, null, "Virginia"),
React.createElement(Option, null, "Washington"),
React.createElement(Option, null, "West Virginia"),
React.createElement(Option, null, "Wisconsin"),
React.createElement(Option, null, "Wyoming"),
]),
};
/** Props */
export const Props = (args) => {
return (React.createElement("section", null,
React.createElement("h5", null, "Loading"),
React.createElement(SearchableSingleSelect, { ...args, isLoading: true },
React.createElement(Option, null, "Alabama")),
React.createElement("h5", null, "Disabled"),
React.createElement(SearchableSingleSelect, { ...args, isDisabled: true },
React.createElement(Option, null, "Alabama"))));
};
Props.args = {
...Basic.args,
SearchField: { placeholder: '' },
};
Props.parameters = {
docs: {
description: {
story: `Apply \`isLoading\` to the dropdown when it is loading, and apply \`isDisabled\` to the dropdown if none of the options are currently available.
`,
},
},
};
/** Asynchronous */
const allData = {
100: { name: 'Rita Daniel' },
101: { name: 'Meghan Mcgowan' },
102: { name: 'Latisha Kent' },
103: { name: 'Jeannine Horton' },
104: { name: 'Noreen Joyner' },
105: { name: 'Angelique Head' },
106: { name: 'Kim Salinas' },
107: { name: 'Alexis Small' },
108: { name: 'Fernandez Singleton' },
109: { name: 'Jacqueline Alvarado' },
110: { name: 'Cornelia Roman' },
111: { name: 'John Gonzales' },
112: { name: 'Mcleod Hodge' },
113: { name: 'Fry Barrera' },
114: { name: 'Jannie Compton' },
115: { name: 'June Odom' },
116: { name: 'Rose Foster' },
117: { name: 'Kathryn Prince' },
118: { name: 'Hebert Bowman' },
119: { name: 'Shawn Burgess' },
};
export const Asynchronous = (args) => {
const [selectedId, setSelectedId] = useState(null); // current selection
const [visibleIds, setVisibleIds] = useState([]); // aka current search results
const [isLoading, setIsLoading] = useState(false);
const handleSearch = (searchText) => {
setIsLoading(true);
// Fake an API call
setTimeout(() => {
const searchResults = reduce(allData, (acc, { name }, id) => {
return includes(name.toLowerCase(), searchText.toLowerCase())
? acc.concat(id)
: acc;
}, []);
setIsLoading(false);
setVisibleIds(searchResults);
});
};
const handleSelect = (index, event) => {
const optionsId = get(event, 'props.callbackId', null);
setSelectedId(optionsId);
};
const selectedIndex = indexOf(visibleIds, selectedId) === -1
? null
: indexOf(visibleIds, selectedId);
return (React.createElement("section", null,
React.createElement(SearchableSingleSelect, { ...args, isLoading: isLoading, onSelect: handleSelect, onSearch: handleSearch, selectedIndex: selectedIndex, optionFilter: constant(true), SearchField: {
placeholder: 'Type here to simulate an API backed search',
} }, map(visibleIds, (id) => (React.createElement(Option, { key: id, callbackId: id }, allData[id].name))))));
};
/** Grouped Options */
export const GroupedOptions = Template.bind({});
GroupedOptions.args = {
children: addKeys([
React.createElement(OptionGroup, null,
"Northeast",
React.createElement(Option, null, "Connecticut"),
React.createElement(Option, null, "Delaware"),
React.createElement(Option, null, "Maine"),
React.createElement(Option, null, "Maryland"),
React.createElement(Option, null, "Massachusetts"),
React.createElement(Option, null, "New Hampshire"),
React.createElement(Option, null, "New Jersey"),
React.createElement(Option, null, "New York"),
React.createElement(Option, null, "Pennsylvania"),
React.createElement(Option, null, "Rhode Island"),
React.createElement(Option, null, "Vermont")),
React.createElement(OptionGroup, null,
"Southeast",
React.createElement(Option, null, "Alabama"),
React.createElement(Option, null, "Arkansas"),
React.createElement(Option, null, "Florida"),
React.createElement(Option, null, "Georgia"),
React.createElement(Option, null, "Kentucky"),
React.createElement(Option, null, "Louisiana"),
React.createElement(Option, null, "Mississippi"),
React.createElement(Option, null, "North Carolina"),
React.createElement(Option, null, "South Carolina"),
React.createElement(Option, null, "Tennessee"),
React.createElement(Option, null, "Virginia"),
React.createElement(Option, null, "West Virginia")),
React.createElement(OptionGroup, null,
"Midwest",
React.createElement(Option, null, "Illinois"),
React.createElement(Option, null, "Indiana"),
React.createElement(Option, null, "Iowa"),
React.createElement(Option, null, "Kansas"),
React.createElement(Option, null, "Michigan"),
React.createElement(Option, null, "Minnesota"),
React.createElement(Option, null, "Missouri"),
React.createElement(Option, null, "Nebraska"),
React.createElement(Option, null, "North Dakota"),
React.createElement(Option, null, "Ohio"),
React.createElement(Option, null, "South Dakota"),
React.createElement(Option, null, "Wisconsin")),
React.createElement(OptionGroup, null,
"Southwest",
React.createElement(Option, null, "Arizona"),
React.createElement(Option, null, "New Mexico"),
React.createElement(Option, null, "Oklahoma"),
React.createElement(Option, null, "Texas")),
React.createElement(OptionGroup, null,
"West",
React.createElement(Option, null, "California"),
React.createElement(Option, null, "Colorado"),
React.createElement(Option, null, "Idaho"),
React.createElement(Option, null, "Montana"),
React.createElement(Option, null, "Nevada"),
React.createElement(Option, null, "Oregon"),
React.createElement(Option, null, "Utah"),
React.createElement(Option, null, "Washington"),
React.createElement(Option, null, "Wyoming")),
React.createElement(Option, null, "Alaska"),
React.createElement(Option, null, "Hawaii"),
]),
};
GroupedOptions.parameters = {
docs: {
description: {
story: `Grouped options allows you to have sections within your dropdown. Use this to help frame users' understanding of the options.
`,
},
},
};
/** Selected Option */
export const SelectedOption = Template.bind({});
SelectedOption.args = {
...Basic.args,
SearchField: {
placeholder: 'Search Color',
},
children: addKeys([
React.createElement(Option, { Selected: React.createElement("div", { style: { color: 'red' } }, "RED") }, "Red"),
React.createElement(Option, { Selected: React.createElement("div", { style: { color: 'blue' } }, "BLUE") }, "Blue"),
React.createElement(Option, { Selected: React.createElement("div", { style: { color: 'green' } }, "GREEN") }, "Green"),
]),
};
/** Invalid Option */
export const InvalidOption = () => {
const [selectedIndex, setSelectedIndex] = useState(null);
const handleSelect = (optionIndex) => {
setSelectedIndex(optionIndex);
};
return (React.createElement(SearchableSingleSelect, { onSelect: handleSelect, Error: selectedIndex === 2 ? null : 'Please Choose Green' },
React.createElement(Option, { Selected: React.createElement("div", { style: { color: 'red' } }, "RED") }, "Red"),
React.createElement(Option, { Selected: React.createElement("div", { style: { color: 'blue' } }, "BLUE") }, "Blue"),
React.createElement(Option, { Selected: React.createElement("div", { style: { color: 'green' } }, "GREEN") }, "Green")));
};
/** Formatted Options */
const OptionCols = ({ col1, col2, col3, textMatch, }) => (React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", { style: { width: 100 } },
React.createElement(Underline, { match: textMatch }, col1)),
React.createElement("div", { style: { width: 100 } },
React.createElement(Underline, { match: textMatch }, col2)),
React.createElement("div", { style: { width: 200 } },
React.createElement(Underline, { match: textMatch }, col3))));
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,
SearchField: {
placeholder: 'Search Options',
},
optionFilter,
children: addKeys([
React.createElement(OptionGroup, null,
React.createElement(OptionCols, { col1: 'ID', col2: 'NAME', col3: 'DESCRIPTION' }),
React.createElement(Option, { filterText: '13 Drone lorem ipsum dolor sit', Selected: 'Drone (13)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '13', col2: 'Drone', col3: 'lorem ipsum dolor sit', textMatch: searchText }))),
React.createElement(Option, { filterText: '14 Appa dolor sit amet consectetur', Selected: 'Appa (14)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '14', col2: 'Appa', col3: 'dolor sit amet consectetur', textMatch: searchText }))),
React.createElement(Option, { filterText: '15 Breakfast amet consectetur adipiscing elit', Selected: 'Breakfast (14)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '14', col2: 'Breakfast', col3: 'amet consectetur adipiscing elit', textMatch: searchText }))),
React.createElement(Option, { filterText: '16 Scout adipiscing elit sed do', Selected: 'Scout (15)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '15', col2: 'Scout', col3: 'adipiscing elit sed do', textMatch: searchText })))),
]),
};
FormattedOptions.parameters = {
docs: {
description: {
story: `Use multiple columns of data in your dropdown when additional information is needed to make a selection.
`,
},
},
};
//# sourceMappingURL=SearchableSingleSelect.stories.js.map