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

A UI component library from Xandr.

import _ from 'lodash';
import React, { useState } from 'react';
import createClass from 'create-react-class';
import Button from '../Button/Button';
import ContextMenu from './ContextMenu';
import SingleSelect from '../SingleSelect/SingleSelect';
import TextField from '../TextField/TextField';
export default {
    title: 'Utility/ContextMenu',
    component: ContextMenu,
    parameters: {
        docs: {
            description: {
                component: ContextMenu.peek.description,
            },
        },
    },
};
var EnumDirection;
(function (EnumDirection) {
    EnumDirection["up"] = "up";
    EnumDirection["down"] = "down";
    EnumDirection["left"] = "left";
    EnumDirection["right"] = "right";
})(EnumDirection || (EnumDirection = {}));
/* Basic */
export const Basic = (args) => {
    const Component = createClass({
        render() {
            return (React.createElement(ContextMenu, { ...args },
                React.createElement(ContextMenu.Target, null,
                    React.createElement(Button, null, "Target")),
                React.createElement(ContextMenu.FlyOut, { style: {
                        background: 'white',
                        boxShadow: '1px 1px 4px black',
                        padding: 4,
                    } }, "FlyOut")));
        },
    });
    return React.createElement(Component, null);
};
/* Basic With Text */
export const BasicWithText = (args) => {
    return (React.createElement("section", null,
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget tempor mi. Curabitur eget risus ac diam euismod ultricies ac in est. Morbi in vehicula arcu, at laoreet libero. Phasellus nisi dolor, porta et erat quis, egestas mattis purus.",
        React.createElement(ContextMenu, { ...args, isExpanded: true, direction: 'up' },
            React.createElement(ContextMenu.Target, null,
                React.createElement(Button, null, "Target")),
            React.createElement(ContextMenu.FlyOut, { style: {
                    background: 'white',
                    boxShadow: '1px -1px 4px black',
                    padding: 4,
                } }, "FlyOut")),
        "Sed vel ex iaculis, tincidunt magna in, fringilla urna. Aenean congue est nec elit molestie, nec mollis mi rutrum. Quisque hendrerit nisl placerat tempus sodales. Vivamus et tortor vulputate, elementum turpis tempor, condimentum sapien. Nunc ac imperdiet ipsum, vitae ullamcorper sem."));
};
/* Menu Bar */
export const MenuBar = (args) => {
    const [isFileExpanded, setIsFileExpanded] = useState(false);
    const [fileDirection, setFileDirection] = useState('down');
    const [isEditExpanded, setIsEditExpanded] = useState(false);
    const [editDirection, setEditDirection] = useState('down');
    const handleFileMenuToggle = () => {
        setIsFileExpanded(!isFileExpanded);
    };
    const handleEditMenuToggle = () => {
        setIsEditExpanded(!isEditExpanded);
    };
    return (React.createElement("section", null,
        React.createElement(ContextMenu, { ...args, portalId: 'FileMenu-example', isExpanded: isFileExpanded, direction: fileDirection, onClickOut: handleFileMenuToggle },
            React.createElement(ContextMenu.Target, null,
                React.createElement("div", { style: {
                        background: isFileExpanded ? '#fafafa' : '#eaeaea',
                        outline: 'solid 1px #d1d1d1',
                        padding: '4px',
                        cursor: 'pointer',
                    }, onClick: handleFileMenuToggle }, "File")),
            React.createElement(ContextMenu.FlyOut, { style: {
                    background: '#fafafa',
                    outline: 'solid 1px #d1d1d1',
                    boxShadow: ' 1px 1px 2px rgba(0, 0, 0, 0.2)',
                    padding: '8px',
                } },
                React.createElement("div", null, "New Window"),
                React.createElement("div", null, "New File"),
                React.createElement("div", null, "Open..."),
                React.createElement("div", null, "Add Folder..."),
                React.createElement("div", null, "Reopen Last Item"),
                React.createElement("hr", null),
                React.createElement("div", null, "Save"),
                React.createElement("div", null, "Save As..."),
                React.createElement("div", null, "Save All"),
                React.createElement("hr", null),
                React.createElement("div", null, "Close Tab"),
                React.createElement("div", null, "Close Pane"),
                React.createElement("div", null, "Close Window"))),
        React.createElement(ContextMenu, { ...args, portalId: 'EditMenu-example', isExpanded: isEditExpanded, direction: editDirection, onClickOut: handleEditMenuToggle },
            React.createElement(ContextMenu.Target, null,
                React.createElement("div", { style: {
                        background: isEditExpanded ? '#fafafa' : '#eaeaea',
                        outline: 'solid 1px #d1d1d1',
                        padding: '4px',
                        cursor: 'pointer',
                    }, onClick: handleEditMenuToggle }, "Edit")),
            React.createElement(ContextMenu.FlyOut, { style: {
                    background: '#fafafa',
                    outline: 'solid 1px #d1d1d1',
                    boxShadow: ' 1px 1px 2px rgba(0, 0, 0, 0.2)',
                    padding: '8px',
                } },
                React.createElement("div", null, "Undo"),
                React.createElement("div", null, "Redo"),
                React.createElement("hr", null),
                React.createElement("div", null, "Cut"),
                React.createElement("div", null, "Copy"),
                React.createElement("div", null, "Paste"),
                React.createElement("div", null, "Select All")))));
};
MenuBar.storyName = 'MenuBar';
/* Directions Interactive */
export const DirectionsInteractive = (args) => {
    const { CENTER, DOWN, END, LEFT, RIGHT, START, UP } = ContextMenu;
    const [direction, setDirection] = useState('up');
    const [directonOffset, setDirectionOffset] = useState('0');
    const [alignment, setAlignment] = useState('start');
    const [alignmentOffset, setAlignmentOffset] = useState('0');
    const [getAlignmentOffset, setGetAlignmentOffset] = useState(() => {
        return undefined;
    });
    const style = {
        background: 'white',
        boxShadow: '1px 1px 4px black',
        padding: 4,
    };
    const directions = [UP, DOWN, LEFT, RIGHT];
    const alignments = [START, CENTER, END];
    return (React.createElement("section", null,
        React.createElement("section", { style: {
                display: 'flex',
                flexDirection: 'column',
            } },
            React.createElement(SingleSelect, { onSelect: (i) => setDirection(directions[i]) },
                React.createElement(SingleSelect.Placeholder, null, "Select a direction"),
                _.map(directions, (direction) => (React.createElement(SingleSelect.Option, { key: direction }, direction)))),
            "directonOffset:",
            React.createElement(TextField, { style: { width: 100 }, value: directonOffset, onChange: (directonOffset) => setDirectionOffset(directonOffset) }),
            React.createElement(SingleSelect, { onSelect: (i) => setAlignment(alignments[i]) },
                React.createElement(SingleSelect.Placeholder, null, "Select an alignment"),
                _.map(alignments, (alignment) => (React.createElement(SingleSelect.Option, { key: alignment }, alignment)))),
            "alignmentOffset:",
            React.createElement(TextField, { style: { width: 100 }, value: alignmentOffset, onChange: (alignmentOffset) => setAlignmentOffset(alignmentOffset) }),
            "getAlignmentOffset:",
            React.createElement(TextField, { isDisabled: alignment !== CENTER, style: { width: 100 }, value: getAlignmentOffset, onSubmit: () => { } }),
            React.createElement("code", null, getAlignmentOffset || null)),
        React.createElement("section", { style: {
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'center',
                margin: '90px',
            } },
            React.createElement(ContextMenu, { ...args, direction: direction, directonOffset: _.isEmpty(directonOffset) ? 0 : _.parseInt(directonOffset), alignment: alignment || undefined, alignmentOffset: _.isEmpty(alignmentOffset) ? undefined : _.parseInt(alignmentOffset), getAlignmentOffset: getAlignmentOffset },
                React.createElement(ContextMenu.Target, null, "Target"),
                React.createElement(ContextMenu.FlyOut, { style: { width: 210, ...style } },
                    React.createElement("div", null, `direction: ${direction || 'default'}`),
                    React.createElement("div", null, `directonOffset: ${directonOffset || 'default'}`),
                    React.createElement("div", null, `alignment: ${alignment || 'default'}`),
                    React.createElement("div", null, `alignmentOffset: ${alignmentOffset || 'default'}`),
                    React.createElement("div", null, `getAlignmentOffset: ${getAlignmentOffset || 'default'}`))))));
};
/* Directions Static */
export const DirectionsStatic = (args) => {
    const { CENTER, DOWN, END, LEFT, RIGHT, START, UP } = ContextMenu;
    const directions = [UP, DOWN, LEFT, RIGHT];
    const alignments = [START, CENTER, END];
    const style = {
        background: 'white',
        boxShadow: '1px 1px 4px black',
        padding: 4,
    };
    return (React.createElement("section", { style: {
            display: 'flex',
            flexDirection: 'row',
            margin: '0 60px',
        } }, _.map(directions, (direction) => {
        return (React.createElement("section", { key: direction, style: {
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                flexGrow: 1,
            } }, _.map(alignments, (alignment) => _.map([0, 15, -15], (directonOffset) => _.map([0, 15, -15], (alignmentOffset) => (React.createElement("div", { key: `${alignment}${alignmentOffset}${directonOffset}`, style: { marginTop: '120px' } },
            React.createElement(ContextMenu, { ...args, ...{
                    direction,
                    directonOffset,
                    alignment,
                    alignmentOffset,
                } },
                React.createElement(ContextMenu.Target, null, "Target"),
                React.createElement(ContextMenu.FlyOut, { style: style },
                    React.createElement("div", null, `direction: ${direction}`),
                    React.createElement("div", null, `directonOffset: ${directonOffset}`),
                    React.createElement("div", null, `alignment: ${alignment}`),
                    React.createElement("div", null, `alignmentOffset: ${alignmentOffset}`))))))))));
    })));
};
//# sourceMappingURL=ContextMenu.stories.js.map