lucid-ui
Version:
A UI component library from Xandr.
249 lines • 15.3 kB
JavaScript
"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.DirectionsStatic = exports.DirectionsInteractive = exports.MenuBar = exports.BasicWithText = exports.Basic = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importStar(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var Button_1 = __importDefault(require("../Button/Button"));
var ContextMenu_1 = __importDefault(require("./ContextMenu"));
var SingleSelect_1 = __importDefault(require("../SingleSelect/SingleSelect"));
var TextField_1 = __importDefault(require("../TextField/TextField"));
exports.default = {
title: 'Utility/ContextMenu',
component: ContextMenu_1.default,
parameters: {
docs: {
description: {
component: ContextMenu_1.default.peek.description,
},
},
},
};
var EnumDirection;
(function (EnumDirection) {
EnumDirection["up"] = "up";
EnumDirection["down"] = "down";
EnumDirection["left"] = "left";
EnumDirection["right"] = "right";
})(EnumDirection || (EnumDirection = {}));
/* Basic */
var Basic = function (args) {
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement(ContextMenu_1.default, __assign({}, args),
react_1.default.createElement(ContextMenu_1.default.Target, null,
react_1.default.createElement(Button_1.default, null, "Target")),
react_1.default.createElement(ContextMenu_1.default.FlyOut, { style: {
background: 'white',
boxShadow: '1px 1px 4px black',
padding: 4,
} }, "FlyOut")));
},
});
return react_1.default.createElement(Component, null);
};
exports.Basic = Basic;
/* Basic With Text */
var BasicWithText = function (args) {
return (react_1.default.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_1.default.createElement(ContextMenu_1.default, __assign({}, args, { isExpanded: true, direction: 'up' }),
react_1.default.createElement(ContextMenu_1.default.Target, null,
react_1.default.createElement(Button_1.default, null, "Target")),
react_1.default.createElement(ContextMenu_1.default.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."));
};
exports.BasicWithText = BasicWithText;
/* Menu Bar */
var MenuBar = function (args) {
var _a = (0, react_1.useState)(false), isFileExpanded = _a[0], setIsFileExpanded = _a[1];
var _b = (0, react_1.useState)('down'), fileDirection = _b[0], setFileDirection = _b[1];
var _c = (0, react_1.useState)(false), isEditExpanded = _c[0], setIsEditExpanded = _c[1];
var _d = (0, react_1.useState)('down'), editDirection = _d[0], setEditDirection = _d[1];
var handleFileMenuToggle = function () {
setIsFileExpanded(!isFileExpanded);
};
var handleEditMenuToggle = function () {
setIsEditExpanded(!isEditExpanded);
};
return (react_1.default.createElement("section", null,
react_1.default.createElement(ContextMenu_1.default, __assign({}, args, { portalId: 'FileMenu-example', isExpanded: isFileExpanded, direction: fileDirection, onClickOut: handleFileMenuToggle }),
react_1.default.createElement(ContextMenu_1.default.Target, null,
react_1.default.createElement("div", { style: {
background: isFileExpanded ? '#fafafa' : '#eaeaea',
outline: 'solid 1px #d1d1d1',
padding: '4px',
cursor: 'pointer',
}, onClick: handleFileMenuToggle }, "File")),
react_1.default.createElement(ContextMenu_1.default.FlyOut, { style: {
background: '#fafafa',
outline: 'solid 1px #d1d1d1',
boxShadow: ' 1px 1px 2px rgba(0, 0, 0, 0.2)',
padding: '8px',
} },
react_1.default.createElement("div", null, "New Window"),
react_1.default.createElement("div", null, "New File"),
react_1.default.createElement("div", null, "Open..."),
react_1.default.createElement("div", null, "Add Folder..."),
react_1.default.createElement("div", null, "Reopen Last Item"),
react_1.default.createElement("hr", null),
react_1.default.createElement("div", null, "Save"),
react_1.default.createElement("div", null, "Save As..."),
react_1.default.createElement("div", null, "Save All"),
react_1.default.createElement("hr", null),
react_1.default.createElement("div", null, "Close Tab"),
react_1.default.createElement("div", null, "Close Pane"),
react_1.default.createElement("div", null, "Close Window"))),
react_1.default.createElement(ContextMenu_1.default, __assign({}, args, { portalId: 'EditMenu-example', isExpanded: isEditExpanded, direction: editDirection, onClickOut: handleEditMenuToggle }),
react_1.default.createElement(ContextMenu_1.default.Target, null,
react_1.default.createElement("div", { style: {
background: isEditExpanded ? '#fafafa' : '#eaeaea',
outline: 'solid 1px #d1d1d1',
padding: '4px',
cursor: 'pointer',
}, onClick: handleEditMenuToggle }, "Edit")),
react_1.default.createElement(ContextMenu_1.default.FlyOut, { style: {
background: '#fafafa',
outline: 'solid 1px #d1d1d1',
boxShadow: ' 1px 1px 2px rgba(0, 0, 0, 0.2)',
padding: '8px',
} },
react_1.default.createElement("div", null, "Undo"),
react_1.default.createElement("div", null, "Redo"),
react_1.default.createElement("hr", null),
react_1.default.createElement("div", null, "Cut"),
react_1.default.createElement("div", null, "Copy"),
react_1.default.createElement("div", null, "Paste"),
react_1.default.createElement("div", null, "Select All")))));
};
exports.MenuBar = MenuBar;
exports.MenuBar.storyName = 'MenuBar';
/* Directions Interactive */
var DirectionsInteractive = function (args) {
var CENTER = ContextMenu_1.default.CENTER, DOWN = ContextMenu_1.default.DOWN, END = ContextMenu_1.default.END, LEFT = ContextMenu_1.default.LEFT, RIGHT = ContextMenu_1.default.RIGHT, START = ContextMenu_1.default.START, UP = ContextMenu_1.default.UP;
var _a = (0, react_1.useState)('up'), direction = _a[0], setDirection = _a[1];
var _b = (0, react_1.useState)('0'), directonOffset = _b[0], setDirectionOffset = _b[1];
var _c = (0, react_1.useState)('start'), alignment = _c[0], setAlignment = _c[1];
var _d = (0, react_1.useState)('0'), alignmentOffset = _d[0], setAlignmentOffset = _d[1];
var _e = (0, react_1.useState)(function () {
return undefined;
}), getAlignmentOffset = _e[0], setGetAlignmentOffset = _e[1];
var style = {
background: 'white',
boxShadow: '1px 1px 4px black',
padding: 4,
};
var directions = [UP, DOWN, LEFT, RIGHT];
var alignments = [START, CENTER, END];
return (react_1.default.createElement("section", null,
react_1.default.createElement("section", { style: {
display: 'flex',
flexDirection: 'column',
} },
react_1.default.createElement(SingleSelect_1.default, { onSelect: function (i) { return setDirection(directions[i]); } },
react_1.default.createElement(SingleSelect_1.default.Placeholder, null, "Select a direction"),
lodash_1.default.map(directions, function (direction) { return (react_1.default.createElement(SingleSelect_1.default.Option, { key: direction }, direction)); })),
"directonOffset:",
react_1.default.createElement(TextField_1.default, { style: { width: 100 }, value: directonOffset, onChange: function (directonOffset) { return setDirectionOffset(directonOffset); } }),
react_1.default.createElement(SingleSelect_1.default, { onSelect: function (i) { return setAlignment(alignments[i]); } },
react_1.default.createElement(SingleSelect_1.default.Placeholder, null, "Select an alignment"),
lodash_1.default.map(alignments, function (alignment) { return (react_1.default.createElement(SingleSelect_1.default.Option, { key: alignment }, alignment)); })),
"alignmentOffset:",
react_1.default.createElement(TextField_1.default, { style: { width: 100 }, value: alignmentOffset, onChange: function (alignmentOffset) { return setAlignmentOffset(alignmentOffset); } }),
"getAlignmentOffset:",
react_1.default.createElement(TextField_1.default, { isDisabled: alignment !== CENTER, style: { width: 100 }, value: getAlignmentOffset, onSubmit: function () { } }),
react_1.default.createElement("code", null, getAlignmentOffset || null)),
react_1.default.createElement("section", { style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
margin: '90px',
} },
react_1.default.createElement(ContextMenu_1.default, __assign({}, args, { direction: direction, directonOffset: lodash_1.default.isEmpty(directonOffset) ? 0 : lodash_1.default.parseInt(directonOffset), alignment: alignment || undefined, alignmentOffset: lodash_1.default.isEmpty(alignmentOffset) ? undefined : lodash_1.default.parseInt(alignmentOffset), getAlignmentOffset: getAlignmentOffset }),
react_1.default.createElement(ContextMenu_1.default.Target, null, "Target"),
react_1.default.createElement(ContextMenu_1.default.FlyOut, { style: __assign({ width: 210 }, style) },
react_1.default.createElement("div", null, "direction: ".concat(direction || 'default')),
react_1.default.createElement("div", null, "directonOffset: ".concat(directonOffset || 'default')),
react_1.default.createElement("div", null, "alignment: ".concat(alignment || 'default')),
react_1.default.createElement("div", null, "alignmentOffset: ".concat(alignmentOffset || 'default')),
react_1.default.createElement("div", null, "getAlignmentOffset: ".concat(getAlignmentOffset || 'default')))))));
};
exports.DirectionsInteractive = DirectionsInteractive;
/* Directions Static */
var DirectionsStatic = function (args) {
var CENTER = ContextMenu_1.default.CENTER, DOWN = ContextMenu_1.default.DOWN, END = ContextMenu_1.default.END, LEFT = ContextMenu_1.default.LEFT, RIGHT = ContextMenu_1.default.RIGHT, START = ContextMenu_1.default.START, UP = ContextMenu_1.default.UP;
var directions = [UP, DOWN, LEFT, RIGHT];
var alignments = [START, CENTER, END];
var style = {
background: 'white',
boxShadow: '1px 1px 4px black',
padding: 4,
};
return (react_1.default.createElement("section", { style: {
display: 'flex',
flexDirection: 'row',
margin: '0 60px',
} }, lodash_1.default.map(directions, function (direction) {
return (react_1.default.createElement("section", { key: direction, style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: 1,
} }, lodash_1.default.map(alignments, function (alignment) {
return lodash_1.default.map([0, 15, -15], function (directonOffset) {
return lodash_1.default.map([0, 15, -15], function (alignmentOffset) { return (react_1.default.createElement("div", { key: "".concat(alignment).concat(alignmentOffset).concat(directonOffset), style: { marginTop: '120px' } },
react_1.default.createElement(ContextMenu_1.default, __assign({}, args, {
direction: direction,
directonOffset: directonOffset,
alignment: alignment,
alignmentOffset: alignmentOffset,
}),
react_1.default.createElement(ContextMenu_1.default.Target, null, "Target"),
react_1.default.createElement(ContextMenu_1.default.FlyOut, { style: style },
react_1.default.createElement("div", null, "direction: ".concat(direction)),
react_1.default.createElement("div", null, "directonOffset: ".concat(directonOffset)),
react_1.default.createElement("div", null, "alignment: ".concat(alignment)),
react_1.default.createElement("div", null, "alignmentOffset: ".concat(alignmentOffset)))))); });
});
})));
})));
};
exports.DirectionsStatic = DirectionsStatic;
//# sourceMappingURL=ContextMenu.stories.js.map