lucid-ui
Version:
A UI component library from Xandr.
467 lines • 24.9 kB
JavaScript
import React, { useState } from 'react';
import createClass from 'create-react-class';
import _, { map } from 'lodash';
import Resizer from '../Resizer/Resizer';
import SearchableMultiSelect from './SearchableMultiSelect';
import Selection from '../Selection/Selection';
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
export default {
title: 'Controls/SearchableMultiSelect',
component: SearchableMultiSelect,
subcomponents: {
'SearchableMultiSelect.SelectionOption': SearchableMultiSelect.Option.Selection,
'SearchableMultiSelect.Option.Selected': SearchableMultiSelect.Option.Selected,
'SearchableMultiSelect.OptionGroup': SearchableMultiSelect.OptionGroup,
'SearchableMultiSelect.SearchFieldComponent': SearchableMultiSelect.SearchField,
'SearchableMultiSelect.Option': SearchableMultiSelect.Option,
},
parameters: {
docs: {
description: {
component: SearchableMultiSelect.peek.description,
},
},
},
args: SearchableMultiSelect.defaultProps,
};
//👇 Destructure any child components that we will need
const { Option } = SearchableMultiSelect;
//👇 Add a key prop to each element of the array
function addKeys(children) {
return map(children, (child, index) => ({ ...child, key: index }));
}
/* Basic */
export const Basic = (args) => {
return React.createElement(SearchableMultiSelect, { ...args });
};
Basic.args = {
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) => {
const { Option } = SearchableMultiSelect;
return (React.createElement(Resizer, null, (width) => {
const responsiveMode = width >= 768 ? 'large' : 'small';
return (React.createElement("section", null,
React.createElement("h5", null, "Loading"),
React.createElement(SearchableMultiSelect, { ...args, responsiveMode: responsiveMode, isLoading: true },
React.createElement(Option, null, "Alabama")),
React.createElement("h5", null, "Disabled"),
React.createElement(SearchableMultiSelect, { ...args, responsiveMode: responsiveMode, isDisabled: true },
React.createElement(Option, null, "Alabama")),
React.createElement("h5", null, "Custom option selections"),
React.createElement(SearchableMultiSelect, { ...args, responsiveMode: responsiveMode, selectedIndices: [0, 1, 2, 3] },
React.createElement(Option, { Selection: { kind: 'warning' } }, "Washington"),
React.createElement(Option, { Selection: { kind: 'success' } }, "Oregon"),
React.createElement(Option, { Selection: { kind: 'danger' } }, "California"),
React.createElement(Option, { Selection: { kind: 'container' } }, "Nevada")),
React.createElement("h5", null, "No remove all option"),
React.createElement(SearchableMultiSelect, { ...args, responsiveMode: responsiveMode, hasRemoveAll: false, initialState: {
selectedIndices: [0, 1, 2],
} },
React.createElement(Option, null, "Washington"),
React.createElement(Option, null, "Oregon"),
React.createElement(Option, null, "California"))));
}));
};
/* Asynchronous */
export const Asynchronous = (args) => {
const { Option } = SearchableMultiSelect;
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' },
};
const Component = createClass({
getInitialState() {
return {
selectedIds: [],
visibleIds: [],
isLoading: false,
};
},
componentDidMount() {
this.handleSearch('');
},
handleSearch(searchText) {
this.setState({ isLoading: true });
// Fake an API call
setTimeout(() => {
const visibleIds = _.reduce(allData, (acc, { name }, id) => {
return _.includes(name.toLowerCase(), searchText.toLowerCase())
? acc.concat(id)
: acc;
}, []);
this.setState({
visibleIds,
isLoading: false,
});
}, 750);
},
handleRemove({ props: { callbackId }, }) {
this.setState({
selectedIds: _.without(this.state.selectedIds, callbackId),
});
},
handleSelect(index, { props: { callbackId }, }) {
this.setState({
selectedIds: _.xor(this.state.selectedIds, [callbackId]),
});
},
render() {
const { isLoading, visibleIds, selectedIds } = this.state;
// Calculate selected indices based on selected ids
const selectedIndices = _.reduce(visibleIds, (acc, id, index) => {
return _.includes(selectedIds, id) ? acc.concat(index) : acc;
}, []);
return (React.createElement("section", null,
React.createElement(SearchableMultiSelect, { ...args, hasSelections: false, isLoading: isLoading, onSelect: this.handleSelect, onSearch: this.handleSearch, selectedIndices: selectedIndices, 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)))),
!_.isEmpty(selectedIds) ? (React.createElement(Selection, { isBold: true, hasBackground: true, Label: 'Selected', kind: 'container', isRemovable: false }, _.map(selectedIds, (id) => (React.createElement(Selection, { key: id, Label: allData[id].name, callbackId: id, onRemove: this.handleRemove }))))) : null));
},
});
return React.createElement(Component, null);
};
Asynchronous.args = {
...Basic.args,
};
/* Grouped Options */
export const GroupedOptions = (args) => {
const { Option, OptionGroup } = SearchableMultiSelect;
return (React.createElement(SearchableMultiSelect, { ...args, hasSelectAll: true, initialState: {
selectedIndices: [0, 1, 2, 3, 11, 12, 48, 49],
} },
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")));
};
/* Custom Selection Label */
export const CustomSelectionLabel = (args) => {
const { Option, SelectionLabel } = SearchableMultiSelect;
return (React.createElement(SearchableMultiSelect, { ...args },
React.createElement(SelectionLabel, null, "Selected States"),
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")));
};
/* Select All */
export const SelectAll = (args) => {
const { Option } = SearchableMultiSelect;
return (React.createElement("section", { style: { marginBottom: '300px' } },
React.createElement(Resizer, null, (width) => {
const responsiveMode = width >= 768 ? 'large' : 'small';
return (React.createElement(SearchableMultiSelect, { ...args, hasSelectAll: true, selectAllText: 'Custom Select All Text', responsiveMode: responsiveMode },
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")));
})));
};
/* Formatted Options */
export const FormattedOptions = (args) => {
function P({ children, ...rest }) {
return React.createElement("p", { ...rest }, children);
}
const OptionCols = ({ col1, col2, textMatch, }) => (React.createElement("div", { style: { display: 'flex' } },
React.createElement("div", { style: { width: 100 } },
React.createElement(P, { match: textMatch }, col1)),
React.createElement("div", null,
React.createElement(P, { match: textMatch }, col2))));
const optionFilter = (searchText, { filterText, }) => {
if (filterText) {
return new RegExp(_.escapeRegExp(searchText), 'i').test(filterText);
}
return true;
};
return (React.createElement(SearchableMultiSelect, { ...args, optionFilter: optionFilter },
React.createElement(SearchableMultiSelect.OptionGroup, { Selected: '' },
React.createElement("div", { style: { marginLeft: 27 } },
React.createElement(OptionCols, { col1: 'ID', col2: 'NAME' })),
React.createElement(SearchableMultiSelect.Option, { filterText: 'Foo', Selected: 'Foo (1234)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '1234', col2: 'Foo', textMatch: searchText }))),
React.createElement(SearchableMultiSelect.Option, { filterText: 'Bar', Selected: 'Bar (2345)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '2345', col2: 'Bar', textMatch: searchText }))),
React.createElement(SearchableMultiSelect.Option, { filterText: 'Baz', Selected: 'Baz (3456)' }, ({ searchText }) => (React.createElement(OptionCols, { col1: '3456', col2: 'Baz', textMatch: searchText }))))));
};
FormattedOptions.args = {
...Basic.args,
};
/* Invalid */
export const Invalid = (args) => {
const { Option } = SearchableMultiSelect;
const [selectedLength, setSelectedLength] = useState(0);
const handleChange = (option, event) => {
let count = selectedLength;
if (typeof event.props.children === 'string') {
count--;
}
else {
event.props.children.props.isSelected ? count-- : count++;
}
setSelectedLength(count);
};
const handleRemoveAll = (option, event) => {
setSelectedLength(0);
};
return (React.createElement(SearchableMultiSelect, { ...args, onRemoveAll: handleRemoveAll, onSelect: handleChange, Error: selectedLength > 1 ? null : 'Please select at least two options' },
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")));
};
//# sourceMappingURL=SearchableMultiSelect.stories.js.map