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.
356 lines (336 loc) • 11.5 kB
JavaScript
define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/icons", "pragmate-ui/base"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4) {
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports.hmr = _exports.__beyond_pkg = _exports.Item = _exports.Header = _exports.Container = _exports.CollapsibleHeader = _exports.CollapsibleContent = _exports.CollapsibleContainer = _exports.Accordion = void 0;
const {
Bundle: __Bundle
} = dependency_0;
const __pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/collapsible"
},
"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/base', dependency_4]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/collapsible');
const ims = new Map();
/***************************
INTERNAL MODULE: ./accordion
***************************/
ims.set('./accordion', {
hash: 2388911095,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AccordionContext = exports.Accordion = void 0;
exports.Container = Container;
exports.Header = Header;
exports.Item = Item;
exports.useAccordionContext = void 0;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
const AccordionContext = exports.AccordionContext = _react.default.createContext({});
const useAccordionContext = () => _react.default.useContext(AccordionContext);
exports.useAccordionContext = useAccordionContext;
/*bundle */
function Header({
disabled,
children,
index
}) {
const {
setOpened,
opened
} = useAccordionContext();
const onClick = event => {
event.stopPropagation();
event.currentTarget.classList.toggle('accordion-item__header-icon--opened');
setOpened(index === opened ? false : index);
};
const attrs = {};
if (!disabled) attrs.onClick = onClick;
const icon = opened ? 'expandMore' : 'chevronRight';
return _react.default.createElement("header", {
...attrs,
className: "accordion-item__header"
}, children, _react.default.createElement("div", {
className: "accordion-item__header-icon"
}, _react.default.createElement(_icons.IconButton, {
icon: icon,
className: "accordion-item__icon-button circle"
})));
}
/*bundle */
function Item({
disabled,
children,
title,
index
}) {
const {
opened
} = useAccordionContext();
let cls = `accordion-item${index === opened ? ` accordion-item--opened` : ``}`;
if (disabled) cls += ` accordion-item--disabled`;
return _react.default.createElement("article", {
className: cls
}, title && _react.default.createElement(Header, {
disabled: disabled,
index: index
}, title), _react.default.createElement("div", {
className: "accordion-item__content"
}, children));
}
/*bundle */
function Container({
children,
active = 0
}) {
const [opened, setOpened] = _react.default.useState(active);
const onChange = event => {};
const value = {
onChange,
opened,
setOpened
};
_react.default.useEffect(() => setOpened(active), [active]);
const output = [];
_react.default.Children.map(children, (child, index) => {
if (!child) return null;
output.push(_react.default.cloneElement(child, {
index,
key: `item$.${index}`
}));
});
return _react.default.createElement(AccordionContext.Provider, {
value: value
}, _react.default.createElement("div", {
className: "accordion"
}, output));
}
/*bundle */
const Accordion = exports.Accordion = {
Header,
Item,
Container
};
}
});
/*************************
INTERNAL MODULE: ./content
*************************/
ims.set('./content', {
hash: 4052548813,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollapsibleContent = CollapsibleContent;
var _react = require("react");
var _context = require("./context");
/*bundle */
function CollapsibleContent({
className,
children
}) {
const {
open,
toggleable
} = (0, _context.useCollapsibleContext)();
const cls = `collapsible__content${className ? ` ${className}` : ''} ${open ? ' collapsible__content--opened' : ''}`;
if (!toggleable) return null;
return _react.default.createElement("section", {
className: cls
}, children);
}
}
});
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {
hash: 4042704803,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useCollapsibleContext = exports.CollapsibleContext = void 0;
var _react = require("react");
const CollapsibleContext = exports.CollapsibleContext = _react.default.createContext(null);
const useCollapsibleContext = () => _react.default.useContext(CollapsibleContext);
exports.useCollapsibleContext = useCollapsibleContext;
}
});
/************************
INTERNAL MODULE: ./header
************************/
ims.set('./header', {
hash: 1101998287,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollapsibleHeader = CollapsibleHeader;
var _react = require("react");
var _context = require("./context");
var _icons = require("pragmate-ui/icons");
/*bundle */
function CollapsibleHeader({
children,
className,
toggleTitle = true
}) {
const {
setOpen,
onToggle,
open,
toggleable
} = (0, _context.useCollapsibleContext)();
const onClick = async () => {
if (!onToggle) {
setOpen(!open);
return;
}
if (await onToggle(!open)) setOpen(!open);
};
const cls = `collapsible__header ${className ? ` ${className}` : ''} ${open ? 'open' : ''}`;
const clsButton = `collapsible__button circle ${open ? ' collapsible__button--opened' : ''}`;
const attrs = {
className: cls
};
if (toggleTitle) {
attrs.onClick = onClick;
}
return _react.default.createElement("header", {
...attrs
}, _react.default.createElement("div", {
className: "collapsible__header-content"
}, children), toggleable && _react.default.createElement(_icons.IconButton, {
onClick: onClick,
className: clsButton,
icon: 'left'
}));
}
}
});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 4233091753,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollapsibleContainer = CollapsibleContainer;
var _react = require("react");
var _context = require("./context");
/*bundle */
function CollapsibleContainer({
children,
onToggle,
open = false,
className,
toggleable = true,
data
}) {
open;
const [opened, setOpen] = _react.default.useState(open);
const value = {
open: opened,
setOpen,
onToggle,
toggleable,
...data
};
const cls = `collapsible__container ${className ? ` ${className}` : ''} `;
_react.default.useEffect(() => {
setOpen(open);
}, [open]);
return _react.default.createElement(_context.CollapsibleContext.Provider, {
value: value
}, _react.default.createElement("article", {
className: cls
}, children));
}
}
});
/***********************
INTERNAL MODULE: ./types
***********************/
ims.set('./types', {
hash: 1378472229,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
__pkg.exports.descriptor = [{
"im": "./accordion",
"from": "Header",
"name": "Header"
}, {
"im": "./accordion",
"from": "Item",
"name": "Item"
}, {
"im": "./accordion",
"from": "Container",
"name": "Container"
}, {
"im": "./accordion",
"from": "Accordion",
"name": "Accordion"
}, {
"im": "./content",
"from": "CollapsibleContent",
"name": "CollapsibleContent"
}, {
"im": "./header",
"from": "CollapsibleHeader",
"name": "CollapsibleHeader"
}, {
"im": "./index",
"from": "CollapsibleContainer",
"name": "CollapsibleContainer"
}];
let Header = _exports.Header = void 0,
Item = _exports.Item = void 0,
Container = _exports.Container = void 0,
Accordion = _exports.Accordion = void 0,
CollapsibleContent = _exports.CollapsibleContent = void 0,
CollapsibleHeader = _exports.CollapsibleHeader = void 0,
CollapsibleContainer = _exports.CollapsibleContainer = void 0;
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'Header') && (_exports.Header = Header = require ? require('./accordion').Header : value);
(require || prop === 'Item') && (_exports.Item = Item = require ? require('./accordion').Item : value);
(require || prop === 'Container') && (_exports.Container = Container = require ? require('./accordion').Container : value);
(require || prop === 'Accordion') && (_exports.Accordion = Accordion = require ? require('./accordion').Accordion : value);
(require || prop === 'CollapsibleContent') && (_exports.CollapsibleContent = CollapsibleContent = require ? require('./content').CollapsibleContent : value);
(require || prop === 'CollapsibleHeader') && (_exports.CollapsibleHeader = CollapsibleHeader = require ? require('./header').CollapsibleHeader : value);
(require || prop === 'CollapsibleContainer') && (_exports.CollapsibleContainer = CollapsibleContainer = require ? require('./index').CollapsibleContainer : 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=collapsible.amd.js.map