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.
323 lines (284 loc) • 10.4 kB
JavaScript
import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'framer-motion';
import * as dependency_4 from 'pragmate-ui/components';
import * as dependency_5 from 'pragmate-ui/base';
const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/dropdown"},"type":"code"}, import.meta.url).package();;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['framer-motion', dependency_3],['pragmate-ui/components', dependency_4],['pragmate-ui/base', dependency_5]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/dropdown')
const ims = new Map();
/*****************************************
INTERNAL MODULE: ./components/animated-div
*****************************************/
ims.set('./components/animated-div', {hash: 744696097, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AnimatedDiv = AnimatedDiv;
var React = require("react");
var _framerMotion = require("framer-motion");
function AnimatedDiv({
children,
className
} = {
children: null,
className: ''
}) {
return React.createElement(_framerMotion.motion.div, {
className: className,
animate: {
opacity: 1,
transition: {
duration: 0.1
},
y: 0
},
exit: {
transition: {
duration: 0.3
},
opacity: 0
}
}, children);
}
}});
/**************************************
INTERNAL MODULE: ./components/container
**************************************/
ims.set('./components/container', {hash: 4207993415, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DropdownContainer = DropdownContainer;
var _react = require("react");
var _context = require("../context");
var _useClickContainer = require("../hooks/use-click-container");
/*bundle*/function DropdownContainer({
children,
className
}) {
const {
toggleMenu,
setToggleMenu
} = (0, _context.useDropdownContext)();
const {
ref
} = (0, _useClickContainer.useClickContainer)({
toggleMenu,
setToggleMenu
});
const cls = `pui-dropdown-container${className ? ` ${className}` : ''}${toggleMenu ? ' pui-dropdown-container--opened' : ''}`;
return _react.default.createElement("div", {
ref: ref,
className: cls
}, children);
}
}});
/*********************************
INTERNAL MODULE: ./components/item
*********************************/
ims.set('./components/item', {hash: 2807941339, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DropdownItem = DropdownItem;
var _react = require("react");
var _context = require("../context");
var _components = require("pragmate-ui/components");
/*bundle*/function DropdownItem(props) {
const {
setToggleMenu
} = (0, _context.useDropdownContext)();
const {
children,
className,
onClick,
as = _components.Link,
tag = _components.Link
} = props;
const handleClick = async event => {
event.stopPropagation();
if (!!onClick && typeof onClick === 'function') await onClick(event);
setToggleMenu(false);
};
const Control = tag ?? 'div';
const cls = `pui-dropdown-menu__item${className ? ` ${className}` : ''}`;
const properties = Object.assign({}, props);
const toDelete = ['children', 'className', 'onClick', 'tag', 'id'];
toDelete.forEach(key => delete properties[key]);
return _react.default.createElement("li", null, _react.default.createElement(Control, {
className: cls,
onClick: handleClick,
...properties
}, children));
}
}});
/*********************************
INTERNAL MODULE: ./components/menu
*********************************/
ims.set('./components/menu', {hash: 1155104003, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DropdownMenu = DropdownMenu;
var _react = require("react");
var _context = require("../context");
var _animatedDiv = require("./animated-div");
/*bundle*/function DropdownMenu(props) {
const {
toggleMenu
} = (0, _context.useDropdownContext)();
if (!toggleMenu) return null;
let cls = `pui-dropdown-menu pui-dropdown-menu--opened`;
return _react.default.createElement(_animatedDiv.AnimatedDiv, {
className: cls
}, _react.default.createElement("ul", {
className: 'pui-dropdown-menu__list'
}, props.children));
}
}});
/***********************************
INTERNAL MODULE: ./components/toggle
***********************************/
ims.set('./components/toggle', {hash: 2994452618, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DropdownToggle = DropdownToggle;
var React = require("react");
var _context = require("../context");
/*bundle*/function DropdownToggle({
children,
className
}) {
const cls = `pui-dropdown__toggle${className ? ` ${className}` : ''}`;
const {
toggleMenu,
setToggleMenu
} = (0, _context.useDropdownContext)();
const onClick = event => {
event.stopPropagation();
setToggleMenu(!toggleMenu);
};
return React.createElement("div", {
onClick: onClick,
className: cls
}, children);
}
}});
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {hash: 3840324528, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useDropdownContext = exports.DropdownContext = void 0;
var _react = require("react");
const DropdownContext = exports.DropdownContext = _react.default.createContext(null);
/*bundle */const useDropdownContext = () => (0, _react.useContext)(DropdownContext);
exports.useDropdownContext = useDropdownContext;
}});
/*******************************************
INTERNAL MODULE: ./hooks/use-click-container
*******************************************/
ims.set('./hooks/use-click-container', {hash: 2744155022, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useClickContainer = useClickContainer;
var _react = require("react");
function useClickContainer({
toggleMenu,
setToggleMenu
}) {
const ref = _react.default.useRef(null);
_react.default.useEffect(() => {
const onClick = event => {
const {
current
} = ref;
const {
target,
currentTarget
} = event;
const path = event.composedPath ? event.composedPath() : [];
const pathTarget = path.length > 0 ? path[0] : null;
const isSameNode = current === target || current === currentTarget || pathTarget === current;
const isAChildren = current?.contains(pathTarget);
if (toggleMenu && !isSameNode && !isAChildren) setToggleMenu(false);
};
globalThis.document.addEventListener('click', onClick);
return () => globalThis.document.removeEventListener('click', onClick);
}, [toggleMenu]);
return {
ref
};
}
}});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {hash: 2450413676, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Dropdown = Dropdown;
var _react = require("react");
var _context = require("./context");
var _container = require("./components/container");
/*bundle*/function Dropdown({
children,
className
}) {
const [toggleMenu, setToggleMenu] = _react.default.useState(false);
const value = {
toggleMenu,
setToggleMenu
};
return _react.default.createElement(_context.DropdownContext.Provider, {
value: value
}, _react.default.createElement(_container.DropdownContainer, {
className: className
}, children));
}
}});
/***********************
INTERNAL MODULE: ./types
***********************/
ims.set('./types', {hash: 382438008, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
}});
__pkg.exports.descriptor = [{"im":"./components/container","from":"DropdownContainer","name":"DropdownContainer"},{"im":"./components/item","from":"DropdownItem","name":"DropdownItem"},{"im":"./components/menu","from":"DropdownMenu","name":"DropdownMenu"},{"im":"./components/toggle","from":"DropdownToggle","name":"DropdownToggle"},{"im":"./context","from":"useDropdownContext","name":"useDropdownContext"},{"im":"./index","from":"Dropdown","name":"Dropdown"},{"im":"./types","from":"IDropdownProps","name":"IDropdownProps"},{"im":"./types","from":"IDropdownItemProps","name":"IDropdownItemProps"}];
export let DropdownContainer, DropdownItem, DropdownMenu, DropdownToggle, useDropdownContext, Dropdown, IDropdownProps, IDropdownItemProps;
// Module exports
__pkg.exports.process = function({require, prop, value}) {
(require || prop === 'DropdownContainer') && (DropdownContainer = require ? require('./components/container').DropdownContainer : value);
(require || prop === 'DropdownItem') && (DropdownItem = require ? require('./components/item').DropdownItem : value);
(require || prop === 'DropdownMenu') && (DropdownMenu = require ? require('./components/menu').DropdownMenu : value);
(require || prop === 'DropdownToggle') && (DropdownToggle = require ? require('./components/toggle').DropdownToggle : value);
(require || prop === 'useDropdownContext') && (useDropdownContext = require ? require('./context').useDropdownContext : value);
(require || prop === 'Dropdown') && (Dropdown = require ? require('./index').Dropdown : value);
(require || prop === 'IDropdownProps') && (IDropdownProps = require ? require('./types').IDropdownProps : value);
(require || prop === 'IDropdownItemProps') && (IDropdownItemProps = require ? require('./types').IDropdownItemProps : value);
};
export const __beyond_pkg = __pkg;
export const hmr = new (function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
});
__pkg.initialise(ims);
//# sourceMappingURL=dropdown.browser.mjs.map