lucid-ui/dist/esm/components/DropMenu/DropMenu.stories.js

A UI component library from Xandr.

import React, { useState } from 'react';
import _ from 'lodash';
import DropMenu from './DropMenu';
import TextField from '../TextField/TextField';
import ChevronIcon from '../Icon/ChevronIcon/ChevronIcon';
import Button from '../Button/Button';
export default {
    title: 'Helpers/DropMenu',
    component: DropMenu,
    parameters: {
        docs: {
            description: {
                component: DropMenu.peek.description,
            },
        },
        layout: 'centered',
    },
    argTypes: {
        children: { control: false },
    },
};
/* Basic */
export const Basic = (args) => {
    const [selectedIndices, setSelectedIndices] = useState([]);
    const { Control, Option } = DropMenu;
    const handleSelect = (optionIndex) => {
        setSelectedIndices((selectedIndices) => [...selectedIndices, optionIndex]);
    };
    const options = [
        'MS-DOS',
        'Windows',
        'OS/2',
        'Windows Phone',
        'Windows Mobile',
        'Pocket PC',
    ];
    return (React.createElement(DropMenu, { ...args, onSelect: (i) => handleSelect(i) },
        React.createElement(Control, null, _.isEmpty(selectedIndices)
            ? 'Select OS'
            : options[_.last(selectedIndices)]),
        _.map(options, (optionText, index) => (React.createElement(Option, { key: 'Option-' + index }, optionText)))));
};
/* Button Menu */
export const ButtonMenu = (args) => {
    const [selectedIndices, setSelectedIndices] = useState([]);
    const { Control, Option } = DropMenu;
    const options = ['Red', 'Green', 'Blue'];
    const handleSelect = (optionIndex) => {
        setSelectedIndices((selectedIndices) => [...selectedIndices, optionIndex]);
    };
    return (React.createElement(DropMenu, { ...args, onSelect: (i) => handleSelect(i) },
        React.createElement(Control, null,
            React.createElement(Button, { style: { minWidth: '90px' } }, _.isEmpty(selectedIndices)
                ? 'Select Color'
                : options[_.last(selectedIndices)])),
        _.map(options, (optionText, index) => (React.createElement(Option, { key: 'Option-' + index }, optionText)))));
};
/* Disabled Control */
export const DisabledControl = (args) => {
    const { Control, Option } = DropMenu;
    return (React.createElement(DropMenu, { ...args },
        React.createElement(Control, null,
            React.createElement(Button, { tabIndex: -1 }, "Select Color")),
        React.createElement(Option, null, "Red"),
        React.createElement(Option, null, "Green"),
        React.createElement(Option, null, "Blue")));
};
DisabledControl.args = {
    isDisabled: true,
};
/* Disabled Options */
export const DisabledOptions = (args) => {
    const { Control, Option } = DropMenu;
    const [selectedIndices, setSelectedIndices] = useState([]);
    const options = ['Red', 'Green', 'Blue'];
    const handleSelect = (optionIndex) => {
        setSelectedIndices((selectedIndices) => [...selectedIndices, optionIndex]);
    };
    return (React.createElement(DropMenu, { ...args, onSelect: (i) => handleSelect(i) },
        React.createElement(Control, null, _.isEmpty(selectedIndices)
            ? 'Select Color'
            : options[_.last(selectedIndices)]),
        _.map(options, (optionText, index) => (React.createElement(Option, { key: 'Option-' + index, isDisabled: true }, optionText)))));
};
/* Grouped Options */
export const GroupedOptions = (args) => {
    const { Control, Option, OptionGroup } = DropMenu;
    return (React.createElement(DropMenu, { ...args },
        React.createElement(Control, null,
            React.createElement(Button, null, "Select Color")),
        React.createElement(OptionGroup, null,
            React.createElement(Option, null, "Select Color")),
        React.createElement(OptionGroup, null,
            "Screen",
            React.createElement(Option, null, "Red"),
            React.createElement(Option, null, "Green"),
            React.createElement(Option, null, "Blue")),
        React.createElement(OptionGroup, null,
            "Print",
            React.createElement(Option, null, "Cyan"),
            React.createElement(Option, null, "Yellow"),
            React.createElement(Option, null, "Magenta"),
            React.createElement(Option, null, "Black"))));
};
/* Text Menu */
export const TextMenu = (args) => {
    const [selectedIndices, setSelectedIndices] = useState([]);
    const { Control, Option } = DropMenu;
    const options = ['Red', 'Green', 'Blue'];
    const handleSelect = (optionIndex) => {
        setSelectedIndices((selectedIndices) => [...selectedIndices, optionIndex]);
    };
    return (React.createElement(DropMenu, { ...args, onSelect: (i) => handleSelect(i) },
        React.createElement(Control, null, _.isEmpty(selectedIndices) ? (React.createElement(TextField, { placeholder: 'Text DropMenu' })) : (options[_.last(selectedIndices)])),
        _.map(options, (optionText, index) => (React.createElement(Option, { key: 'Option-' + index }, optionText)))));
};
/* Action Menu */
export const ActionMenu = (args) => {
    const [selectedIndices, setSelectedIndices] = useState([]);
    const { Control, Option } = DropMenu;
    const options = ['Select Color', 'Red', 'Green', 'Blue'];
    const handleSelect = (optionIndex) => {
        setSelectedIndices((selectedIndices) => [...selectedIndices, optionIndex]);
    };
    return (React.createElement(DropMenu, { ...args, onSelect: (i) => handleSelect(i) },
        React.createElement(Control, null,
            _.isEmpty(selectedIndices)
                ? 'Select Color'
                : options[_.last(selectedIndices)],
            React.createElement(ChevronIcon, { direction: 'down', style: { marginLeft: '5px' } })),
        _.map(options, (optionText, index) => (React.createElement(Option, { key: 'Option-' + index }, optionText)))));
};
/* No Wrapping */
export const NoWrapping = (args) => {
    const options = [
        'Intentionally run off screen -- Adipisicing totam saepe officia repellat quo cupiditate ducimus hic? Quod temporibus corrupti eaque ullam quo nulla corporis !',
        'Adipisicing totam provident excepturi officia non cum alias? Labore possimus adipisci id eveniet numquam tempora totam est. Explicabo recusandae quo tempore',
        'Consectetur doloribus dignissimos exercitationem vel tempora praesentium nostrum eveniet inventore. Odit inventore quas optio id eum nisi. Minima consequuntur',
    ];
    const { Control, Option } = DropMenu;
    const [selectedIndices, setSelectedIndices] = useState([]);
    const handleSelect = (optionIndex) => {
        setSelectedIndices((selectedIndices) => [...selectedIndices, optionIndex]);
    };
    return (React.createElement("div", { style: { textAlign: 'right' } },
        React.createElement(DropMenu, { ...args, onSelect: (i) => handleSelect(i), alignment: 'center' },
            React.createElement(Control, null,
                React.createElement(Button, null, _.isEmpty(selectedIndices)
                    ? 'Click Me'
                    : options[_.last(selectedIndices)])),
            _.map(options, (optionText, index) => (React.createElement(Option, { isWrapped: false, key: 'Option-' + index }, optionText))))));
};
/* Stateless */
export const Stateless = (args) => {
    const { Control, Option, OptionGroup } = DropMenu;
    return (React.createElement(DropMenu, { ...args, selectedIndices: [0], focusedIndex: 3, isExpanded: true, direction: 'down' },
        React.createElement(Control, null,
            React.createElement(Button, null, "Select Color")),
        React.createElement(OptionGroup, null,
            "Preferred",
            React.createElement(Option, null, "Red"),
            React.createElement(Option, null, "Green"),
            React.createElement(Option, null, "Blue")),
        React.createElement(Option, null, "Orange"),
        React.createElement(Option, { isDisabled: true }, "Violet"),
        React.createElement(Option, { isDisabled: true }, "Brown")));
};
//# sourceMappingURL=DropMenu.stories.js.map