lucid-ui
Version:
A UI component library from Xandr.
140 lines • 8.75 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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NoAnimations = exports.NestedFullWidth = exports.NestedWithExpander = exports.Basic = void 0;
var lodash_1 = require("lodash");
var react_1 = __importStar(require("react"));
var VerticalListMenu_1 = __importDefault(require("./VerticalListMenu"));
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
exports.default = {
title: 'Navigation/VerticalListMenu',
component: VerticalListMenu_1.default,
parameters: {
docs: {
description: {
component: VerticalListMenu_1.default.peek.description,
},
},
},
args: VerticalListMenu_1.default.defaultProps,
};
//👇 Add a key prop to each child 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) {
return (react_1.default.createElement("section", null,
react_1.default.createElement(VerticalListMenu_1.default, __assign({}, args, { style: { width: 250 } }))));
};
//👇 Each story then reuses that template
/** Basic VerticalListMenu */
exports.Basic = Template.bind({});
exports.Basic.args = {
children: addKeys([
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one"),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one"),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one"),
]),
};
/** Nested With Expander */
var NestedWithExpander = function (args) {
var _a = (0, react_1.useState)('one'), currentList = _a[0], setCurrentList = _a[1];
var _b = (0, react_1.useState)([0]), selectedIndices = _b[0], setSelectedIndices = _b[1];
var handleSelect = function (currentList, index) {
setCurrentList(currentList);
setSelectedIndices([index]);
};
return (react_1.default.createElement(VerticalListMenu_1.default, __assign({}, args, { style: { width: 250 }, onSelect: (0, lodash_1.partial)(handleSelect, 'one'), selectedIndices: currentList === 'one' ? selectedIndices : [] }),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one"),
react_1.default.createElement(VerticalListMenu_1.default.Item, { hasExpander: true },
"Level one with VerticalListMenu",
react_1.default.createElement(VerticalListMenu_1.default, { onSelect: (0, lodash_1.partial)(handleSelect, 'two'), selectedIndices: currentList === 'two' ? selectedIndices : [] },
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level two"),
react_1.default.createElement(VerticalListMenu_1.default.Item, { hasExpander: true },
"Level two with VerticalListMenu and lots of text. Lorem quos natus mollitia nihil quasi! Necessitatibus corporis aliquam quam laborum nesciunt quaerat. Nostrum distinctio officiis adipisci nulla unde repellat. Soluta eaque ex obcaecati molestiae provident aspernatur sit! Expedita et.",
react_1.default.createElement(VerticalListMenu_1.default, { onSelect: (0, lodash_1.partial)(handleSelect, 'three'), selectedIndices: currentList === 'three' ? selectedIndices : [] }, (0, lodash_1.times)(20, function (n) {
return (react_1.default.createElement(VerticalListMenu_1.default.Item, { key: n }, "Level three"));
}))),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level two"))),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one")));
};
exports.NestedWithExpander = NestedWithExpander;
/** Nested Full Width */
var NestedFullWidth = function (args) {
var _a = (0, react_1.useState)('one'), currentList = _a[0], setCurrentList = _a[1];
var _b = (0, react_1.useState)([0]), selectedIndices = _b[0], setSelectedIndices = _b[1];
var handleSelect = function (currentList, index) {
setCurrentList(currentList);
setSelectedIndices([index]);
};
return (react_1.default.createElement(VerticalListMenu_1.default, __assign({}, args, { onSelect: (0, lodash_1.partial)(handleSelect, 'one'), selectedIndices: currentList === 'one' ? selectedIndices : [] }),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one"),
react_1.default.createElement(VerticalListMenu_1.default.Item, { isExpanded: true },
"Level one with VerticalListMenu",
react_1.default.createElement(VerticalListMenu_1.default, { onSelect: (0, lodash_1.partial)(handleSelect, 'two'), selectedIndices: currentList === 'two' ? selectedIndices : [] },
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level two"),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level two"))),
react_1.default.createElement(VerticalListMenu_1.default.Item, { isExpanded: true },
"Level one with VerticalListMenu",
react_1.default.createElement(VerticalListMenu_1.default, { onSelect: (0, lodash_1.partial)(handleSelect, 'three'), selectedIndices: currentList === 'three' ? selectedIndices : [] },
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level two"),
react_1.default.createElement(VerticalListMenu_1.default.Item, { isExpanded: false },
"Level two with closed VerticalListMenu",
react_1.default.createElement(VerticalListMenu_1.default, { onSelect: (0, lodash_1.partial)(handleSelect, 'four'), selectedIndices: currentList === 'four' ? selectedIndices : [] },
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level three"),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level three"),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level three"))),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level two"))),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one")));
};
exports.NestedFullWidth = NestedFullWidth;
/** No Animations */
exports.NoAnimations = Template.bind({});
exports.NoAnimations.args = {
children: addKeys([
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one"),
react_1.default.createElement(VerticalListMenu_1.default.Item, { Collapsible: {
isAnimated: false,
isMountControlled: false, // don't remove items from the dom when they are hidden
}, hasExpander: true },
"Level one with VerticalListMenu",
react_1.default.createElement(VerticalListMenu_1.default, null, (0, lodash_1.times)(20, function (n) {
return (react_1.default.createElement(VerticalListMenu_1.default.Item, { key: n }, "Level two"));
}))),
react_1.default.createElement(VerticalListMenu_1.default.Item, null, "Level one"),
]),
};
//# sourceMappingURL=VerticalListMenu.stories.js.map