pragmate-ui
Version:
An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.
273 lines (256 loc) • 8.98 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/icons", "pragmate-ui/image", "@beyond-js/kernel/routing"], function (_export, _context2) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5, __Bundle, __pkg, ims, Menu, __beyond_pkg, hmr;
_export("Menu", void 0);
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_beyondJsKernelStyles) {
dependency_1 = _beyondJsKernelStyles;
}, function (_react2) {
dependency_2 = _react2;
}, function (_pragmateUiIcons) {
dependency_3 = _pragmateUiIcons;
}, function (_pragmateUiImage) {
dependency_4 = _pragmateUiImage;
}, function (_beyondJsKernelRouting) {
dependency_5 = _beyondJsKernelRouting;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/menu"
},
"type": "code"
}, _context2.meta.url).package();
;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['pragmate-ui/icons', dependency_3], ['pragmate-ui/image', dependency_4], ['@beyond-js/kernel/routing', dependency_5]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/menu');
ims = new Map();
/*************************
INTERNAL MODULE: ./content
*************************/
ims.set('./content', {
hash: 2796574182,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SideMenuContent = void 0;
var _react = require("react");
var _list = require("./list");
var _icons = require("pragmate-ui/icons");
var _context = require("./context");
const SideMenuContent = ({
title
}) => {
const {
toggleMenu,
isOpen
} = (0, _context.useMenuContext)();
const cls = isOpen ? "side-menu__content" : "side-menu__content__hide side-menu__content";
const defaultTitle = title ?? "Title";
return _react.default.createElement("div", {
className: cls
}, _react.default.createElement(_icons.IconButton, {
icon: "close",
className: "side-menu__toggle",
onClick: toggleMenu
}), _react.default.createElement("header", null, _react.default.createElement("span", null, defaultTitle)), _react.default.createElement(_list.SideMenuList, null));
};
exports.SideMenuContent = SideMenuContent;
}
});
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {
hash: 4010051245,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useMenuContext = exports.MenuContext = void 0;
var _react = require("react");
const MenuContext = exports.MenuContext = (0, _react.createContext)({});
const useMenuContext = () => (0, _react.useContext)(MenuContext);
exports.useMenuContext = useMenuContext;
}
});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 3369479835,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Menu = void 0;
var _react = require("react");
var _content = require("./content");
var _icons = require("pragmate-ui/icons");
var _context = require("./context");
/*bundle*/
const Menu = ({
items,
title
}) => {
const [isOpen, setIsOpen] = (0, _react.useState)(false);
const toggleMenu = () => {
setIsOpen(!isOpen);
};
return _react.default.createElement(_context.MenuContext.Provider, {
value: {
isOpen,
items,
toggleMenu
}
}, _react.default.createElement(_icons.IconButton, {
onClick: toggleMenu,
icon: "menu"
}), _react.default.createElement(_content.SideMenuContent, {
title: title
}), isOpen && _react.default.createElement("div", {
onClick: toggleMenu,
className: "background-black"
}));
};
exports.Menu = Menu;
}
});
/***********************
INTERNAL MODULE: ./items
***********************/
ims.set('./items', {
hash: 2650623906,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.menuItems = void 0;
const menuItems = exports.menuItems = [{
title: "Sub title",
link: "#",
icon: "user"
}, {
title: "Sub title",
link: "#",
icon: "favorite"
}, {
title: "Sub title",
link: "#",
icon: "star"
}, {
title: "Sub title",
link: "#",
icon: "off"
}, {
title: "Sub title",
link: "#",
icon: "bell"
}];
}
});
/****************************
INTERNAL MODULE: ./list/index
****************************/
ims.set('./list/index', {
hash: 1267445682,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SideMenuList = void 0;
var _react = require("react");
var _context = require("../context");
var _item = require("./item");
const SideMenuList = () => {
const {
items
} = (0, _context.useMenuContext)();
const output = items.map(item => _react.default.createElement(_item.SideMenuItem, {
key: item.icon,
item: item
}));
return _react.default.createElement("ul", {
className: 'side-menu__list'
}, output);
};
exports.SideMenuList = SideMenuList;
}
});
/***************************
INTERNAL MODULE: ./list/item
***************************/
ims.set('./list/item', {
hash: 2834511559,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SideMenuItem = void 0;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _routing = require("@beyond-js/kernel/routing");
var _context = require("../context");
const SideMenuItem = ({
item
}) => {
const {
title,
link,
icon
} = item;
const {
toggleMenu
} = (0, _context.useMenuContext)();
const onClick = event => {
event.preventDefault();
event.stopPropagation();
_routing.routing.pushState(link);
toggleMenu();
};
return _react.default.createElement("li", {
className: "side-menu__item"
}, _react.default.createElement("a", {
onClick: onClick
}, _react.default.createElement(_icons.Icon, {
icon: icon
}), _react.default.createElement("span", null, title)));
};
exports.SideMenuItem = SideMenuItem;
}
});
__pkg.exports.descriptor = [{
"im": "./index",
"from": "Menu",
"name": "Menu"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'Menu') && _export("Menu", Menu = require ? require('./index').Menu : value);
};
_export("__beyond_pkg", __beyond_pkg = __pkg);
_export("hmr", hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}());
__pkg.initialise(ims);
}
};
});
//# sourceMappingURL=menu.sjs.js.map