lucid-ui/dist/cjs/components/SearchableSelect/SearchableSelect.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.Invalid = exports.FormattedOptions = exports.Invisible = exports.CustomSearchPlaceholder = exports.Loading = exports.Basic = void 0;
var lodash_1 = require("lodash");
var react_1 = __importStar(require("react"));
var SearchableSelect_1 = __importDefault(require("./SearchableSelect"));
var Underline_1 = __importDefault(require("../Underline/Underline"));
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
exports.default = {
    title: 'Controls/SearchableSelect',
    component: SearchableSelect_1.default,
    subcomponents: {
        'SearchableSelect.Placeholder': SearchableSelect_1.default.Placeholder,
        'SearchableSelect.Option': SearchableSelect_1.default.Option,
        'SearchableSelect.Option.Selected': SearchableSelect_1.default.Option.Selected,
        'SearchableSelect.OptionGroup': SearchableSelect_1.default.OptionGroup,
        'SearchableSelect.SearchField': SearchableSelect_1.default.SearchField,
        'SearchableSelect.NullOption': SearchableSelect_1.default.NullOption,
        'SearchableSelect.FixedOption': SearchableSelect_1.default.FixedOption,
    },
    parameters: {
        docs: {
            description: {
                component: SearchableSelect_1.default.peek.description,
            },
        },
    },
};
//👇 Destructure any child components that we will need
var Option = SearchableSelect_1.default.Option, OptionGroup = SearchableSelect_1.default.OptionGroup, SearchField = SearchableSelect_1.default.SearchField;
//👇 Add a key prop to each 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) {
    var _a = (0, react_1.useState)(null), selectedIndex = _a[0], setSelectedIndex = _a[1];
    var handleSelect = function (optionIndex) {
        setSelectedIndex(optionIndex);
    };
    return (react_1.default.createElement("section", { style: { minHeight: 120 } },
        react_1.default.createElement(SearchableSelect_1.default, __assign({}, args, { onSelect: handleSelect })),
        !(0, lodash_1.isNil)(selectedIndex) && (react_1.default.createElement("section", { style: { paddingTop: 9, paddingLeft: 9 } },
            "Selected Index: ",
            JSON.stringify(selectedIndex)))));
};
//👇 Each story then reuses that template
/** Basic */
exports.Basic = Template.bind({});
exports.Basic.args = {
    Placeholder: 'Select State',
    maxMenuHeight: '200',
    children: addKeys([
        react_1.default.createElement(Option, { value: 'AK' }, "Alaska"),
        react_1.default.createElement(Option, { value: 'HI' }, "Hawaii"),
        react_1.default.createElement(OptionGroup, null,
            "PST",
            react_1.default.createElement(Option, { value: 'CA' }, "California"),
            react_1.default.createElement(Option, { value: 'NV' }, "Nevada"),
            react_1.default.createElement(Option, { value: 'OR' }, "Oregon"),
            react_1.default.createElement(Option, { value: 'WA' }, "Washington")),
        react_1.default.createElement(OptionGroup, null,
            "MST",
            react_1.default.createElement(Option, { value: 'CO' }, "Colorado"),
            react_1.default.createElement(Option, { value: 'ID' }, "Idaho"),
            react_1.default.createElement(Option, { value: 'MT' }, "Montana"),
            react_1.default.createElement(Option, { value: 'NM' }, "New Mexico"),
            react_1.default.createElement(Option, { value: 'ND' }, "North Dakota"),
            react_1.default.createElement(Option, { value: 'SD' }, "South Dakota"),
            react_1.default.createElement(Option, { value: 'WI' }, "Wisconsin"),
            react_1.default.createElement(Option, { value: 'WY' }, "Wyoming")),
        react_1.default.createElement(OptionGroup, null,
            "CST",
            react_1.default.createElement(Option, { value: 'AR' }, "Arkansas"),
            react_1.default.createElement(Option, { value: 'IL' }, "Illinois"),
            react_1.default.createElement(Option, { value: 'IN' }, "Indiana"),
            react_1.default.createElement(Option, { value: 'IA' }, "Iowa"),
            react_1.default.createElement(Option, { value: 'KS' }, "Kansas"),
            react_1.default.createElement(Option, { value: 'KY' }, "Kentucky"),
            react_1.default.createElement(Option, { value: 'MI' }, "Michigan"),
            react_1.default.createElement(Option, { value: 'MN' }, "Minnesota"),
            react_1.default.createElement(Option, { value: 'MS' }, "Mississippi"),
            react_1.default.createElement(Option, { value: 'MO' }, "Missouri"),
            react_1.default.createElement(Option, { value: 'NE' }, "Nebraska"),
            react_1.default.createElement(Option, { value: 'OH' }, "Ohio"),
            react_1.default.createElement(Option, { value: 'OK' }, "Oklahoma"),
            react_1.default.createElement(Option, { value: 'TN' }, "Tennessee"),
            react_1.default.createElement(Option, { value: 'TX' }, "Texas"),
            react_1.default.createElement(Option, { value: 'UT' }, "Utah")),
        react_1.default.createElement(OptionGroup, null,
            "EST",
            react_1.default.createElement(Option, { value: 'AL' },
                react_1.default.createElement("span", null, "USA: "),
                "Alabama"),
            react_1.default.createElement(Option, { value: 'AZ' }, "Arizona"),
            react_1.default.createElement(Option, { value: 'CT' }, "Connecticut"),
            react_1.default.createElement(Option, { value: 'DE' }, "Delaware"),
            react_1.default.createElement(Option, { value: 'DC' }, "District Of Columbia"),
            react_1.default.createElement(Option, { value: 'FL' }, "Florida"),
            react_1.default.createElement(Option, { value: 'GA' }, "Georgia"),
            react_1.default.createElement(Option, { value: 'LA' }, "Louisiana"),
            react_1.default.createElement(Option, { value: 'ME' }, "Maine"),
            react_1.default.createElement(Option, { value: 'MD' }, "Maryland"),
            react_1.default.createElement(Option, { value: 'MA' }, "Massachusetts"),
            react_1.default.createElement(Option, { value: 'NH' }, "New Hampshire"),
            react_1.default.createElement(Option, { value: 'NJ' }, "New Jersey"),
            react_1.default.createElement(Option, { value: 'NY' }, "New York"),
            react_1.default.createElement(Option, { value: 'NC' }, "North Carolina"),
            react_1.default.createElement(Option, { value: 'PA' }, "Pennsylvania"),
            react_1.default.createElement(Option, { value: 'RI' }, "Rhode Island"),
            react_1.default.createElement(Option, { value: 'SC' }, "South Carolina"),
            react_1.default.createElement(Option, { value: 'VT' }, "Vermont"),
            react_1.default.createElement(Option, { value: 'VA' }, "Virginia"),
            react_1.default.createElement(Option, { value: 'WV' }, "West Virginia")),
    ]),
};
/** Loading */
exports.Loading = Template.bind({});
exports.Loading.args = __assign(__assign({}, exports.Basic.args), { isLoading: true, children: addKeys([
        react_1.default.createElement(Option, { value: 'AL' }, "Alabama"),
        react_1.default.createElement(Option, { value: 'AK' }, "Alaska"),
        react_1.default.createElement(Option, { value: 'AZ' }, "Arizona"),
        react_1.default.createElement(Option, { value: 'AR' }, "Arkansas"),
        react_1.default.createElement(Option, { value: 'CA' }, "California"),
        react_1.default.createElement(Option, { value: 'CO' }, "Colorado"),
        react_1.default.createElement(Option, { value: 'CT' }, "Connecticut"),
        react_1.default.createElement(Option, { value: 'DE' }, "Delaware"),
        react_1.default.createElement(Option, { value: 'DC' }, "District Of Columbia"),
        react_1.default.createElement(Option, { value: 'FL' }, "Florida"),
        react_1.default.createElement(Option, { value: 'GA' }, "Georgia"),
        react_1.default.createElement(Option, { value: 'HI' }, "Hawaii"),
        react_1.default.createElement(Option, { value: 'ID' }, "Idaho"),
        react_1.default.createElement(Option, { value: 'IL' }, "Illinois"),
        react_1.default.createElement(Option, { value: 'IN' }, "Indiana"),
        react_1.default.createElement(Option, { value: 'IA' }, "Iowa"),
        react_1.default.createElement(Option, { value: 'KS' }, "Kansas"),
        react_1.default.createElement(Option, { value: 'KY' }, "Kentucky"),
        react_1.default.createElement(Option, { value: 'LA' }, "Louisiana"),
        react_1.default.createElement(Option, { value: 'ME' }, "Maine"),
        react_1.default.createElement(Option, { value: 'MD' }, "Maryland"),
        react_1.default.createElement(Option, { value: 'MA' }, "Massachusetts"),
        react_1.default.createElement(Option, { value: 'MI' }, "Michigan"),
        react_1.default.createElement(Option, { value: 'MN' }, "Minnesota"),
        react_1.default.createElement(Option, { value: 'MS' }, "Mississippi"),
        react_1.default.createElement(Option, { value: 'MO' }, "Missouri"),
        react_1.default.createElement(Option, { value: 'MT' }, "Montana"),
        react_1.default.createElement(Option, { value: 'NE' }, "Nebraska"),
        react_1.default.createElement(Option, { value: 'NV' }, "Nevada"),
        react_1.default.createElement(Option, { value: 'NH' }, "New Hampshire"),
        react_1.default.createElement(Option, { value: 'NJ' }, "New Jersey"),
        react_1.default.createElement(Option, { value: 'NM' }, "New Mexico"),
        react_1.default.createElement(Option, { value: 'NY' }, "New York"),
        react_1.default.createElement(Option, { value: 'NC' }, "North Carolina"),
        react_1.default.createElement(Option, { value: 'ND' }, "North Dakota"),
        react_1.default.createElement(Option, { value: 'OH' }, "Ohio"),
        react_1.default.createElement(Option, { value: 'OK' }, "Oklahoma"),
        react_1.default.createElement(Option, { value: 'OR' }, "Oregon"),
        react_1.default.createElement(Option, { value: 'PA' }, "Pennsylvania"),
        react_1.default.createElement(Option, { value: 'RI' }, "Rhode Island"),
        react_1.default.createElement(Option, { value: 'SC' }, "South Carolina"),
        react_1.default.createElement(Option, { value: 'SD' }, "South Dakota"),
        react_1.default.createElement(Option, { value: 'TN' }, "Tennessee"),
        react_1.default.createElement(Option, { value: 'TX' }, "Texas"),
        react_1.default.createElement(Option, { value: 'UT' }, "Utah"),
        react_1.default.createElement(Option, { value: 'VT' }, "Vermont"),
        react_1.default.createElement(Option, { value: 'VA' }, "Virginia"),
        react_1.default.createElement(Option, { value: 'WA' }, "Washington"),
        react_1.default.createElement(Option, { value: 'WV' }, "West Virginia"),
        react_1.default.createElement(Option, { value: 'WI' }, "Wisconsin"),
        react_1.default.createElement(Option, { value: 'WY' }, "Wyoming"),
    ]) });
/** Custom Search Placeholder */
exports.CustomSearchPlaceholder = Template.bind({});
exports.CustomSearchPlaceholder.args = __assign(__assign({}, exports.Basic.args), { Placeholder: 'Select Color', children: addKeys([
        react_1.default.createElement(SearchField, { placeholder: 'Type here to filter...' }),
        react_1.default.createElement(Option, null, "Blue"),
        react_1.default.createElement(Option, null, "Green"),
        react_1.default.createElement(Option, null, "Orange"),
        react_1.default.createElement(Option, null, "Red"),
    ]) });
/** Invisible */
exports.Invisible = Template.bind({});
exports.Invisible.args = __assign(__assign({}, exports.Basic.args), { isInvisible: true });
/** Formatted Options */
var OptionCols = function (_a) {
    var col1 = _a.col1, col2 = _a.col2, 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", null,
            react_1.default.createElement(Underline_1.default, { match: textMatch }, col2))));
};
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), { Placeholder: 'Select Color', optionFilter: optionFilter, children: addKeys([
        react_1.default.createElement(OptionGroup, null,
            react_1.default.createElement(OptionCols, { col1: 'Name', col2: 'ID' }),
            react_1.default.createElement(Option, { filterText: 'Red', Selected: 'Red (#FF0000)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: 'Red', col2: '#FF0000', textMatch: searchText }));
            }),
            react_1.default.createElement(Option, { filterText: 'Green', Selected: 'Green (#00FF00)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: 'Green', col2: '#00FF00', textMatch: searchText }));
            }),
            react_1.default.createElement(Option, { filterText: 'Blue', Selected: 'Blue (#0000FF)' }, function (_a) {
                var searchText = _a.searchText;
                return (react_1.default.createElement(OptionCols, { col1: 'Blue', col2: '#0000FF', 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            ",
        },
    },
};
/** Invalid */
var Invalid = function (args) {
    var _a = (0, react_1.useState)(null), selectedIndex = _a[0], setSelectedIndex = _a[1];
    var handleSelect = function (optionIndex) {
        setSelectedIndex(optionIndex);
    };
    return (react_1.default.createElement("section", { style: { minHeight: 120 } },
        react_1.default.createElement(SearchableSelect_1.default, __assign({}, args, { Error: selectedIndex === 0 ? null : 'Please choose option California', onSelect: handleSelect })),
        !(0, lodash_1.isNil)(selectedIndex) && (react_1.default.createElement("section", { style: { paddingTop: 9, paddingLeft: 9 } },
            "Selected Index: ",
            JSON.stringify(selectedIndex)))));
};
exports.Invalid = Invalid;
exports.Invalid.args = __assign({}, exports.Basic.args);
//# sourceMappingURL=SearchableSelect.stories.js.map