lucid-ui
Version:
A UI component library from Xandr.
222 lines • 12.8 kB
JavaScript
;
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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stateless = exports.NoWrapping = exports.ActionMenu = exports.TextMenu = exports.GroupedOptions = exports.DisabledOptions = exports.DisabledControl = exports.ButtonMenu = exports.Basic = void 0;
var react_1 = __importStar(require("react"));
var lodash_1 = __importDefault(require("lodash"));
var DropMenu_1 = __importDefault(require("./DropMenu"));
var TextField_1 = __importDefault(require("../TextField/TextField"));
var ChevronIcon_1 = __importDefault(require("../Icon/ChevronIcon/ChevronIcon"));
var Button_1 = __importDefault(require("../Button/Button"));
exports.default = {
title: 'Helpers/DropMenu',
component: DropMenu_1.default,
parameters: {
docs: {
description: {
component: DropMenu_1.default.peek.description,
},
},
layout: 'centered',
},
argTypes: {
children: { control: false },
},
};
/* Basic */
var Basic = function (args) {
var _a = (0, react_1.useState)([]), selectedIndices = _a[0], setSelectedIndices = _a[1];
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option;
var handleSelect = function (optionIndex) {
setSelectedIndices(function (selectedIndices) { return __spreadArray(__spreadArray([], selectedIndices, true), [optionIndex], false); });
};
var options = [
'MS-DOS',
'Windows',
'OS/2',
'Windows Phone',
'Windows Mobile',
'Pocket PC',
];
return (react_1.default.createElement(DropMenu_1.default, __assign({}, args, { onSelect: function (i) { return handleSelect(i); } }),
react_1.default.createElement(Control, null, lodash_1.default.isEmpty(selectedIndices)
? 'Select OS'
: options[lodash_1.default.last(selectedIndices)]),
lodash_1.default.map(options, function (optionText, index) { return (react_1.default.createElement(Option, { key: 'Option-' + index }, optionText)); })));
};
exports.Basic = Basic;
/* Button Menu */
var ButtonMenu = function (args) {
var _a = (0, react_1.useState)([]), selectedIndices = _a[0], setSelectedIndices = _a[1];
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option;
var options = ['Red', 'Green', 'Blue'];
var handleSelect = function (optionIndex) {
setSelectedIndices(function (selectedIndices) { return __spreadArray(__spreadArray([], selectedIndices, true), [optionIndex], false); });
};
return (react_1.default.createElement(DropMenu_1.default, __assign({}, args, { onSelect: function (i) { return handleSelect(i); } }),
react_1.default.createElement(Control, null,
react_1.default.createElement(Button_1.default, { style: { minWidth: '90px' } }, lodash_1.default.isEmpty(selectedIndices)
? 'Select Color'
: options[lodash_1.default.last(selectedIndices)])),
lodash_1.default.map(options, function (optionText, index) { return (react_1.default.createElement(Option, { key: 'Option-' + index }, optionText)); })));
};
exports.ButtonMenu = ButtonMenu;
/* Disabled Control */
var DisabledControl = function (args) {
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option;
return (react_1.default.createElement(DropMenu_1.default, __assign({}, args),
react_1.default.createElement(Control, null,
react_1.default.createElement(Button_1.default, { tabIndex: -1 }, "Select Color")),
react_1.default.createElement(Option, null, "Red"),
react_1.default.createElement(Option, null, "Green"),
react_1.default.createElement(Option, null, "Blue")));
};
exports.DisabledControl = DisabledControl;
exports.DisabledControl.args = {
isDisabled: true,
};
/* Disabled Options */
var DisabledOptions = function (args) {
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option;
var _a = (0, react_1.useState)([]), selectedIndices = _a[0], setSelectedIndices = _a[1];
var options = ['Red', 'Green', 'Blue'];
var handleSelect = function (optionIndex) {
setSelectedIndices(function (selectedIndices) { return __spreadArray(__spreadArray([], selectedIndices, true), [optionIndex], false); });
};
return (react_1.default.createElement(DropMenu_1.default, __assign({}, args, { onSelect: function (i) { return handleSelect(i); } }),
react_1.default.createElement(Control, null, lodash_1.default.isEmpty(selectedIndices)
? 'Select Color'
: options[lodash_1.default.last(selectedIndices)]),
lodash_1.default.map(options, function (optionText, index) { return (react_1.default.createElement(Option, { key: 'Option-' + index, isDisabled: true }, optionText)); })));
};
exports.DisabledOptions = DisabledOptions;
/* Grouped Options */
var GroupedOptions = function (args) {
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option, OptionGroup = DropMenu_1.default.OptionGroup;
return (react_1.default.createElement(DropMenu_1.default, __assign({}, args),
react_1.default.createElement(Control, null,
react_1.default.createElement(Button_1.default, null, "Select Color")),
react_1.default.createElement(OptionGroup, null,
react_1.default.createElement(Option, null, "Select Color")),
react_1.default.createElement(OptionGroup, null,
"Screen",
react_1.default.createElement(Option, null, "Red"),
react_1.default.createElement(Option, null, "Green"),
react_1.default.createElement(Option, null, "Blue")),
react_1.default.createElement(OptionGroup, null,
"Print",
react_1.default.createElement(Option, null, "Cyan"),
react_1.default.createElement(Option, null, "Yellow"),
react_1.default.createElement(Option, null, "Magenta"),
react_1.default.createElement(Option, null, "Black"))));
};
exports.GroupedOptions = GroupedOptions;
/* Text Menu */
var TextMenu = function (args) {
var _a = (0, react_1.useState)([]), selectedIndices = _a[0], setSelectedIndices = _a[1];
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option;
var options = ['Red', 'Green', 'Blue'];
var handleSelect = function (optionIndex) {
setSelectedIndices(function (selectedIndices) { return __spreadArray(__spreadArray([], selectedIndices, true), [optionIndex], false); });
};
return (react_1.default.createElement(DropMenu_1.default, __assign({}, args, { onSelect: function (i) { return handleSelect(i); } }),
react_1.default.createElement(Control, null, lodash_1.default.isEmpty(selectedIndices) ? (react_1.default.createElement(TextField_1.default, { placeholder: 'Text DropMenu' })) : (options[lodash_1.default.last(selectedIndices)])),
lodash_1.default.map(options, function (optionText, index) { return (react_1.default.createElement(Option, { key: 'Option-' + index }, optionText)); })));
};
exports.TextMenu = TextMenu;
/* Action Menu */
var ActionMenu = function (args) {
var _a = (0, react_1.useState)([]), selectedIndices = _a[0], setSelectedIndices = _a[1];
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option;
var options = ['Select Color', 'Red', 'Green', 'Blue'];
var handleSelect = function (optionIndex) {
setSelectedIndices(function (selectedIndices) { return __spreadArray(__spreadArray([], selectedIndices, true), [optionIndex], false); });
};
return (react_1.default.createElement(DropMenu_1.default, __assign({}, args, { onSelect: function (i) { return handleSelect(i); } }),
react_1.default.createElement(Control, null,
lodash_1.default.isEmpty(selectedIndices)
? 'Select Color'
: options[lodash_1.default.last(selectedIndices)],
react_1.default.createElement(ChevronIcon_1.default, { direction: 'down', style: { marginLeft: '5px' } })),
lodash_1.default.map(options, function (optionText, index) { return (react_1.default.createElement(Option, { key: 'Option-' + index }, optionText)); })));
};
exports.ActionMenu = ActionMenu;
/* No Wrapping */
var NoWrapping = function (args) {
var 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',
];
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option;
var _a = (0, react_1.useState)([]), selectedIndices = _a[0], setSelectedIndices = _a[1];
var handleSelect = function (optionIndex) {
setSelectedIndices(function (selectedIndices) { return __spreadArray(__spreadArray([], selectedIndices, true), [optionIndex], false); });
};
return (react_1.default.createElement("div", { style: { textAlign: 'right' } },
react_1.default.createElement(DropMenu_1.default, __assign({}, args, { onSelect: function (i) { return handleSelect(i); }, alignment: 'center' }),
react_1.default.createElement(Control, null,
react_1.default.createElement(Button_1.default, null, lodash_1.default.isEmpty(selectedIndices)
? 'Click Me'
: options[lodash_1.default.last(selectedIndices)])),
lodash_1.default.map(options, function (optionText, index) { return (react_1.default.createElement(Option, { isWrapped: false, key: 'Option-' + index }, optionText)); }))));
};
exports.NoWrapping = NoWrapping;
/* Stateless */
var Stateless = function (args) {
var Control = DropMenu_1.default.Control, Option = DropMenu_1.default.Option, OptionGroup = DropMenu_1.default.OptionGroup;
return (react_1.default.createElement(DropMenu_1.default, __assign({}, args, { selectedIndices: [0], focusedIndex: 3, isExpanded: true, direction: 'down' }),
react_1.default.createElement(Control, null,
react_1.default.createElement(Button_1.default, null, "Select Color")),
react_1.default.createElement(OptionGroup, null,
"Preferred",
react_1.default.createElement(Option, null, "Red"),
react_1.default.createElement(Option, null, "Green"),
react_1.default.createElement(Option, null, "Blue")),
react_1.default.createElement(Option, null, "Orange"),
react_1.default.createElement(Option, { isDisabled: true }, "Violet"),
react_1.default.createElement(Option, { isDisabled: true }, "Brown")));
};
exports.Stateless = Stateless;
//# sourceMappingURL=DropMenu.stories.js.map