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.
285 lines (274 loc) • 8.96 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/icons", "pragmate-ui/base", "framer-motion"], function (_export, _context2) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5, __Bundle, __pkg, ims, CloseButton, useDrawerContext, Drawer, __beyond_pkg, hmr;
_export({
CloseButton: void 0,
useDrawerContext: void 0,
Drawer: 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 (_pragmateUiBase) {
dependency_4 = _pragmateUiBase;
}, function (_framerMotion2) {
dependency_5 = _framerMotion2;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/drawer"
},
"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/base', dependency_4], ['framer-motion', dependency_5]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/drawer');
ims = new Map();
/****************************
INTERNAL MODULE: ./animations
****************************/
ims.set('./animations', {
hash: 114192017,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.animations = void 0;
const animations = exports.animations = {
slideDown: {
initial: {
y: '-50%',
opacity: 0
},
animate: {
y: 0,
opacity: 1,
transition: {
duration: 0.3
}
},
exit: {
y: '50%',
opacity: 0,
transition: {
duration: 0.3
}
}
},
default: {
initial: {
opacity: 0
},
animate: {
y: 0,
opacity: 1,
transition: {
duration: 0.3
}
},
exit: {
y: '50%',
opacity: 0,
transition: {
duration: 0.3
}
}
},
fadeInUpfadeOutLeft: {
initial: {
y: '-90%',
opacity: 0
},
animate: {
y: 0,
opacity: 1,
transition: {
duration: 0.3
}
},
exit: {
x: '50%',
opacity: 0,
transition: {
duration: 0.3
}
}
}
};
}
});
/******************************
INTERNAL MODULE: ./close-button
******************************/
ims.set('./close-button', {
hash: 1994997619,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CloseButton = CloseButton;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _context = require("./context");
/*bundle*/
function CloseButton({
className,
onClick
}) {
const {
onClose
} = (0, _context.useDrawerContext)();
const listener = event => {
if (onClick) return onClick();
onClose();
};
const cls = `pui-drawer-close-button circle${className ? ` ${className}` : ''}`;
return _react.default.createElement(_icons.IconButton, {
className: cls,
icon: 'close',
onClick: listener
});
}
}
});
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {
hash: 3738712239,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useDrawerContext = exports.DrawerContext = void 0;
var _react = require("react");
const DrawerContext = exports.DrawerContext = _react.default.createContext({
open: false,
onClose: () => {}
});
/*bundle*/
const useDrawerContext = () => {
const context = _react.default.useContext(DrawerContext);
if (!context) {
throw new Error('useDrawerContext must be used within a DrawerProvider');
}
return context;
};
exports.useDrawerContext = useDrawerContext;
}
});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 2417431811,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Drawer = Drawer;
var React = require("react");
var _framerMotion = require("framer-motion");
var _context = require("./context");
const positionClasses = {
left: 'pui-drawer-left',
right: 'pui-drawer-right',
top: 'pui-drawer-top',
bottom: 'pui-drawer-bottom'
};
/*bundle*/
function Drawer({
className,
position = 'left',
open,
onClose,
children
}) {
let drawerClass = open ? `pui-drawer ${positionClasses[position]}` : 'pui-drawer hidden';
if (className) drawerClass += ' ' + className;
if (open) drawerClass += ` pui-drawer-open-${position}`;
if (!open) return;
const cls = `pui-drawer-container${className ? ` ${className}` : ''}`;
const onClickContent = e => {
e.stopPropagation();
};
return React.createElement(_context.DrawerContext.Provider, {
value: {
open,
onClose
}
}, React.createElement(_framerMotion.motion.div, {
className: cls,
onClick: onClose
}, React.createElement(_framerMotion.motion.div, {
onClick: onClickContent,
initial: {
x: '+100vh',
opacity: 0
},
animate: {
x: 0,
opacity: 1
},
exit: {
x: '100vh',
opacity: 0
},
transition: {
duration: 0.3,
ease: 'linear'
},
className: drawerClass
}, React.createElement("div", {
className: 'pui-drawer-content'
}, children))));
}
}
});
__pkg.exports.descriptor = [{
"im": "./close-button",
"from": "CloseButton",
"name": "CloseButton"
}, {
"im": "./context",
"from": "useDrawerContext",
"name": "useDrawerContext"
}, {
"im": "./index",
"from": "Drawer",
"name": "Drawer"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'CloseButton') && _export("CloseButton", CloseButton = require ? require('./close-button').CloseButton : value);
(require || prop === 'useDrawerContext') && _export("useDrawerContext", useDrawerContext = require ? require('./context').useDrawerContext : value);
(require || prop === 'Drawer') && _export("Drawer", Drawer = require ? require('./index').Drawer : 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=drawer.sjs.js.map