pragmate-ui/menu/menu.amd.js

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.

define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/icons", "pragmate-ui/image", "@beyond-js/kernel/routing"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.hmr = _exports.__beyond_pkg = _exports.Menu = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "pragmate-ui@1.0.1/menu"
    },
    "type": "code"
  }, _amd_module.uri).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');
  const 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"
  }];
  let Menu = _exports.Menu = void 0;

  // Module exports
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'Menu') && (_exports.Menu = Menu = require ? require('./index').Menu : value);
  };
  const __beyond_pkg = _exports.__beyond_pkg = __pkg;
  const hmr = _exports.hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  __pkg.initialise(ims);
});
//# sourceMappingURL=menu.amd.js.map