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.
126 lines (121 loc) • 4.78 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "perfect-scrollbar", "pragmate-ui/base"], function (_export, _context) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, __Bundle, __pkg, ims, ScrollContainer, __beyond_pkg, hmr;
_export("ScrollContainer", void 0);
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_beyondJsKernelStyles) {
dependency_1 = _beyondJsKernelStyles;
}, function (_react2) {
dependency_2 = _react2;
}, function (_perfectScrollbar2) {
dependency_3 = _perfectScrollbar2;
}, function (_pragmateUiBase) {
dependency_4 = _pragmateUiBase;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/perfect-scrollbar"
},
"type": "code",
"name": "perfect-scrollbar"
}, _context.meta.url).package();
;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['perfect-scrollbar', dependency_3], ['pragmate-ui/base', dependency_4]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/perfect-scrollbar');
ims = new Map();
/***************************
INTERNAL MODULE: ./container
***************************/
ims.set('./container', {
hash: 1081224750,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ScrollContainer = ScrollContainer;
var _react = require("react");
var _perfectScrollbar = require("perfect-scrollbar");
/*bundle*/ /**
* It's a React component that uses the PerfectScrollbar library to create a scrollbar that can be
* customized with CSS.
* @param {props} props - TProps
* @returns A function that returns a JSX.Element
*/
function ScrollContainer(props) {
const ref = (0, _react.useRef)(null);
(0, _react.useEffect)(() => {
const control = ref.current;
const scrollbar = new _perfectScrollbar.default(control, {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
const handleOnScrollY = event => {
props.onScrollY(event, control, scrollbar);
};
const handleOnScrollX = event => {
props.onScrollY(event, control, scrollbar);
};
const {
onScrollY,
onScrollX
} = props;
if (onScrollY) control.addEventListener("ps-scroll-y", handleOnScrollY);
if (onScrollX) control.addEventListener("ps-scroll-y", handleOnScrollX);
return () => {
scrollbar.destroy();
if (onScrollY) ref.current.removeEventListener("ps-scroll-y", onScrollY);
if (onScrollX) ref.current.removeEventListener("ps-scroll-y", handleOnScrollX);
};
}, []);
let cls = props.className ? `beyond-perfect-scrollbar ${props.className}` : "beyond-perfect-scrollbar";
return _react.default.createElement("div", {
ref: ref,
className: cls
}, props.children);
}
}
});
/*****************************
INTERNAL MODULE: ./definitions
*****************************/
ims.set('./definitions', {
hash: 1532264377,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
;
}
});
__pkg.exports.descriptor = [{
"im": "./container",
"from": "ScrollContainer",
"name": "ScrollContainer"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'ScrollContainer') && _export("ScrollContainer", ScrollContainer = require ? require('./container').ScrollContainer : 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=perfect-scrollbar.sjs.js.map