lucid-ui/dist/cjs/components/SearchableSingleSelect/SearchableSingleSelect.stories.js

A UI component library from Xandr.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormattedOptions = exports.InvalidOption = exports.SelectedOption = exports.GroupedOptions = exports.Asynchronous = exports.Props = exports.Basic = void 0;
var lodash_1 = require("lodash");
var react_1 = __importStar(require("react"));
var SearchableSingleSelect_1 = __importDefault(require("./SearchableSingleSelect"));
var Underline_1 = __importDefault(require("../Underline/Underline"));
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
exports.default = {
    title: 'Controls/SearchableSingleSelect',
    component: SearchableSingleSelect_1.default,
    subcomponents: {
        'SearchableSingleSelect.Placeholder': SearchableSingleSelect_1.default.SearchField,
        'SearchableSingleSelect.Option': SearchableSingleSelect_1.default.Option,
        'SearchableSingleSelect.Option.Selected': SearchableSingleSelect_1.default.Option.Selected,
        'SearchableSingleSelect.OptionGroup': SearchableSingleSelect_1.default.OptionGroup,
        'SearchableSingleSelect.SearchField': SearchableSingleSelect_1.default.SearchField,
    },
    parameters: {
        docs: {
            description: {
                component: SearchableSingleSelect_1.default.peek.description,
            },
        },
    },
};
//👇 Destructure any child components that we will need
var Option = SearchableSingleSelect_1.default.Option, OptionGroup = SearchableSingleSelect_1.default.OptionGroup;
//👇 Add a key prop to each child element of the array
function addKeys(children) {
    return (0, lodash_1.map)(children, function (child, index) { return (__assign(__assign({}, child), { key: index })); });
}
//👇 Create a “template” of how args map to rendering
var Template = function (args) {
    return (react_1.default.createElement("section", null,
        react_1.default.createElement(SearchableSingleSelect_1.default, __assign({}, args, { style: { maxWidth: '200px' } }))));
};
//👇 Each story then reuses that template
/** Basic */
exports.Basic = Template.bind({});
exports.Basic.args = {
    SearchField: { placeholder: 'Search State' },
    children: addKeys([
        react_1.default.createElement(Option, null, "Alabama"),
        react_1.default.createElement(Option, null, "Alaska"),
        react_1.default.createElement(Option, null, "Arizona"),
        react_1.default.createElement(Option, null, "Arkansas"),
        react_1.default.createElement(Option, null, "California"),
        react_1.default.createElement(Option, null, "Colorado"),
        react_1.default.createElement(Option, null, "Connecticut"),
        react_1.default.createElement(Option, null, "Delaware"),
        react_1.default.createElement(Option, null, "Florida"),
        react_1.default.createElement(Option, null, "Georgia"),
        react_1.default.createElement(Option, null, "Hawaii"),
        react_1.default.createElement(Option, null, "Idaho"),
        react_1.default.createElement(Option, null, "Illinois"),
        react_1.default.createElement(Option, null, "Indiana"),
        react_1.default.createElement(Option, null, "Iowa"),
        react_1.default.createElement(Option, null, "Kansas"),
        react_1.default.createElement(Option, null, "Kentucky"),
        react_1.default.createElement(Option, null, "Louisiana"),
        react_1.default.createElement(Option, null, "Maine"),
        react_1.default.createElement(Option, null, "Maryland"),
        react_1.default.createElement(Option, null, "Massachusetts"),
        react_1.default.createElement(Option, null, "Michigan"),
        react_1.default.createElement(Option, null, "Minnesota"),
        react_1.default.createElement(Option, null, "Mississippi"),
        react_1.default.createElement(Option, null, "Missouri"),
        react_1.default.createElement(Option, null, "Montana Nebraska"),
        react_1.default.createElement(Option, null, "Nevada"),
        react_1.default.createElement(Option, null, "New Hampshire"),
        react_1.default.createElement(Option, null, "New Jersey"),
        react_1.default.createElement(Option, null, "New Mexico"),
        react_1.default.createElement(Option, null, "New York"),
        react_1.default.createElement(Option, null, "North Carolina"),
        react_1.default.createElement(Option, null, "North Dakota"),
        react_1.default.createElement(Option, null, "Ohio"),
        react_1.default.createElement(Option, null, "Oklahoma"),
        react_1.default.createElement(Option, null, "Oregon"),
        react_1.default.createElement(Option, null, "Pennsylvania Rhode Island"),
        react_1.default.createElement(Option, null, "South Carolina"),
        react_1.default.createElement(Option, null, "South Dakota"),
        react_1.default.createElement(Option, null, "Tennessee"),
        react_1.default.createElement(Option, null, "Texas"),
        react_1.default.createElement(Option, null, "Utah"),
        react_1.default.createElement(Option, null, "Vermont"),
        react_1.default.createElement(Option, null, "Virginia"),
        react_1.default.createElement(Option, null, "Washington"),
        react_1.default.createElement(Option, null, "West Virginia"),
        react_1.default.createElement(Option, null, "Wisconsin"),
        react_1.default.createElement(Option, null, "Wyoming"),
    ]),
};
/** Props */
var Props = function (args) {
    return (react_1.default.createElement("section", null,
        react_1.default.createElement("h5", null, "Loading"),
        react_1.default.createElement(SearchableSingleSelect_1.default, __assign({}, args, { isLoading: true }),
            react_1.default.createElement(Option, null, "Alabama")),
        react_1.default.createElement("h5", null, "Disabled"),
        react_1.default.createElement(SearchableSingleSelect_1.default, __assign({}, args, { isDisabled: true }),
            react_1.default.createElement(Option, null, "Alabama"))));
};
exports.Props = Props;
exports.Props.args = __assign(__assign({}, exports.Basic.args), { SearchField: { placeholder: '' } });
exports.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.\n            ",
        },
    },
};
/** Asynchronous */
var 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' },
};
var Asynchronous = function (args) {
    var _a = (0, react_1.useState)(null), selectedId = _a[0], setSelectedId = _a[1]; // current selection
    var _b = (0, react_1.useState)([]), visibleIds = _b[0], setVisibleIds = _b[1]; // aka current search results
    var _c = (0, react_1.useState)(false), isLoading = _c[0], setIsLoading = _c[1];
    var handleSearch = function (searchText) {
        setIsLoading(true);
        // Fake an API call
        setTimeout(function () {
            var searchResults = (0, lodash_1.reduce)(allData, function (acc, _a, id) {
                var name = _a.name;
                return (0, lodash_1.includes)(name.toLowerCase(), searchText.toLowerCase())
                    ? acc.concat(id)
                    : acc;
            }, []);
            setIsLoading(false);
            setVisibleIds(searchResults);
        });
    };
    var handleSelect = function (index, event) {
        var optionsId = (0, lodash_1.get)(event, 'props.callbackId', null);
        setSelectedId(optionsId);
    };
    var selectedIndex = (0, lodash_1.indexOf)(visibleIds, selectedId) === -1
        ? null
        : (0, lodash_1.indexOf)(visibleIds, selectedId);
    return (react_1.default.createElement("section", null,
        react_1.default.createElement(SearchableSingleSelect_1.default, __assign({}, args, { isLoading: isLoading, onSelect: handleSelect, onSearch: handleSearch, selectedIndex: selectedIndex, optionFilter: (0, lodash_1.constant)(true), SearchField: {
                placeholder: 'Type here to simulate an API backed search',
            } }), (0, lodash_1.map)(visibleIds, function (id) { return (react_1.default.createElement(Option, { key: id, callbackId: id }, allData[id].name)); }))));
};
exports.Asynchronous = Asynchronous;
/** Grouped Options */
exports.GroupedOptions = Template.bind({});
exports.GroupedOptions.args = {
    children: addKeys([
        react_1.default.createElement(OptionGroup, null,
            "Northeast",
            react_1.default.createElement(Option, null, "Connecticut"),
            react_1.default.createElement(Option, null, "Delaware"),
            react_1.default.createElement(Option, null, "Maine"),
            react_1.default.createElement(Option, null, "Maryland"),
            react_1.default.createElement(Option, null, "Massachusetts"),
            react_1.default.createElement(Option, null, "New Hampshire"),
            react_1.default.createElement(Option, null, "New Jersey"),
            react_1.default.createElement(Option, null, "New York"),
            react_1.default.createElement(Option, null, "Pennsylvania"),
            react_1.default.createElement(Option, null, "Rhode Island"),
            react_1.default.createElement(Option, null, "Vermont")),
        react_1.default.createElement(OptionGroup, null,
            "Southeast",
            react_1.default.createElement(Option, null, "Alabama"),
            react_1.default.createElement(Option, null, "Arkansas"),
            react_1.default.createElement(Option, null, "Florida"),
            react_1.default.createElement(Option, null, "Georgia"),
            react_1.default.createElement(Option, null, "Kentucky"),
            react_1.default.createElement(Option, null, "Louisiana"),
            react_1.default.createElement(Option, null, "Mississippi"),
            react_1.default.createElement(Option, null, "North Carolina"),
            react_1.default.createElement(Option, null, "South Carolina"),
            react_1.default.createElement(Option, null, "Tennessee"),
            react_1.default.createElement(Option, null, "Virginia"),
            react_1.default.createElement(Option, null, "West Virginia")),
        react_1.default.createElement(OptionGroup, null,
            "Midwest",
            react_1.default.createElement(Option, null, "Illinois"),
            react_1.default.createElement(Option, null, "Indiana"),
            react_1.default.createElement(Option, null, "Iowa"),
            react_1.default.createElement(Option, null, "Kansas"),
            react_1.default.createElement(Option, null, "Michigan"),
            react_1.default.createElement(Option, null, "Minnesota"),
            react_1.default.createElement(Option, null, "Missouri"),
            react_1.default.createElement(Option, null, "Nebraska"),
            react_1.default.createElement(Option, null, "North Dakota"),
            react_1.default.createElement(Option, null, "Ohio"),
            react_1.default.createElement(Option, null, "South Dakota"),
            react_1.default.createElement(Option, null, "Wisconsin")),
        react_1.default.createElement(OptionGroup, null,
            "Southwest",
            react_1.default.createElement(Option, null, "Arizona"),
            react_1.default.createElement(Option, null, "New Mexico"),
            react_1.default.createElement(Option, null, "Oklahoma"),
            react_1.default.createElement(Option, null, "Texas")),
        react_1.default.createElement(OptionGroup, null,
            "West",
            react_1.default.createElement(Option, null, "California"),
            react_1.default.createElement(Option, null, "Colorado"),
            react_1.default.createElement(Option, null, "Idaho"),
            react_1.default.createElement(Option, null, "Montana"),
            react_1.default.createElement(Option, null, "Nevada"),
            react_1.default.createElement(Option, null, "Oregon"),
            react_1.default.createElement(Option, null, "Utah"),
            react_1.default.createElement(Option, null, "Washington"),
            react_1.default.createElement(Option, null, "Wyoming")),
        react_1.default.createElement(Option, null, "Alaska"),
        react_1.default.createElement(Option, null, "Hawaii"),
    ]),
};
exports.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.\n            ",
        },
    },
};
/** Selected Option */
exports.SelectedOption = Template.bind({});
exports.SelectedOption.args = __assign(__assign({}, exports.Basic.args), { SearchField: {
        placeholder: 'Search Color',
    }, children: addKeys([
        react_1.default.createElement(Option, { Selected: react_1.default.createElement("div", { style: { color: 'red' } }, "RED") }, "Red"),
        react_1.default.createElement(Option, { Selected: react_1.default.createElement("div", { style: { color: 'blue' } }, "BLUE") }, "Blue"),
        react_1.default.createElement(Option, { Selected: react_1.default.createElement("div", { style: { color: 'green' } }, "GREEN") }, "Green"),
    ]) });
/** Invalid Option */
var InvalidOption = function () {
    var _a = (0, react_1.useState)(null), selectedIndex = _a[0], setSelectedIndex = _a[1];
    var handleSelect = function (optionIndex) {
        setSelectedIndex(optionIndex);
    };
    return (react_1.default.createElement(SearchableSingleSelect_1.default, { onSelect: handleSelect, Error: selectedIndex === 2 ? null : 'Please Choose Green' },
        react_1.default.createElement(Option, { Selected: react_1.default.createElement("div", { style: { color: 'red' } }, "RED") }, "Red"),
        react_1.default.createElement(Option, { Selected: react_1.default.createElement("div", { style: { color: 'blue' } }, "BLUE") }, "Blue"),
        react_1.default.createElement(Option, { Selected: react_1.default.createElement("div", { style: { color: 'green' } }, "GREEN") }, "Green")));
};
exports.InvalidOption = InvalidOption;
/** Formatted Options */
var OptionCols = function (_a) {
    var col1 = _a.col1, col2 = _a.col2, col3 = _a.col3, textMatch = _a.textMatch;
    return (react_1.default.createElement("div", { style: { display: 'flex' } },
        react_1.default.createElement("div", { style: { width: 100 } },
            react_1.default.createElement(Underline_1.default, { match: textMatch }, col1)),
        react_1.default.createElement("div", { style: { width: 100 } },
            react_1.default.createElement(Underline_1.default, { match: textMatch }, col2)),
        react_1.default.createElement("div", { style: { width: 200 } },
            react_1.default.createElement(Underline_1.default, { match: textMatch }, col3))));
};
var optionFilter = function (searchText, _a) {
    var filterText = _a.filterText;
    if (filterText) {
        return new RegExp((0, lodash_1.escapeRegExp)(searchText), 'i').test(filterText);
    }
    return true;
};
exports.FormattedOptions = Template.bind({});
exports.FormattedOptions.args = __assign(__assign({}, exports.Basic.args), { SearchField: {
        placeholder: 'Search Options',
    }, optionFilter: optionFilter, children: addKeys([
        react_1.default.createElement(OptionGroup, null,
            react_1.default.createElement(OptionCols, { col1: 'ID', col2: 'NAME', col3: 'DESCRIPTION' }),
            react_1.default.createElement(Option, { filterText: '13 Drone lorem ipsum dolor sit', Selected: 'Drone (13)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: '13', col2: 'Drone', col3: 'lorem ipsum dolor sit', textMatch: searchText }));
            }),
            react_1.default.createElement(Option, { filterText: '14 Appa dolor sit amet consectetur', Selected: 'Appa (14)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: '14', col2: 'Appa', col3: 'dolor sit amet consectetur', textMatch: searchText }));
            }),
            react_1.default.createElement(Option, { filterText: '15 Breakfast amet consectetur adipiscing elit', Selected: 'Breakfast (14)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: '14', col2: 'Breakfast', col3: 'amet consectetur adipiscing elit', textMatch: searchText }));
            }),
            react_1.default.createElement(Option, { filterText: '16 Scout adipiscing elit sed do', Selected: 'Scout (15)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: '15', col2: 'Scout', col3: 'adipiscing elit sed do', textMatch: searchText }));
            })),
    ]) });
exports.FormattedOptions.parameters = {
    docs: {
        description: {
            story: "Use multiple columns of data in your dropdown when additional information is needed to make a selection.\n            ",
        },
    },
};
//# sourceMappingURL=SearchableSingleSelect.stories.js.map