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.
591 lines (556 loc) • 21.4 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "pragmate-ui/base", "pragmate-ui/icons", "pragmate-ui/spinner", "@beyond-js/kernel/routing", "pragmate-ui/ripple", "tippy.js"], function (_export, _context2) {
"use strict";
var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5, dependency_6, dependency_7, dependency_8, __Bundle, __pkg, ims, ButtonGroup, Button, IButtonProps, ConditionalContainer, useMediaQuery, HtmlWrapper, Link, ResponsiveContainer, Spinner, __beyond_pkg, hmr;
_export({
ButtonGroup: void 0,
Button: void 0,
IButtonProps: void 0,
ConditionalContainer: void 0,
useMediaQuery: void 0,
HtmlWrapper: void 0,
Link: void 0,
ResponsiveContainer: void 0,
Spinner: void 0
});
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_beyondJsKernelStyles) {
dependency_1 = _beyondJsKernelStyles;
}, function (_react2) {
dependency_2 = _react2;
}, function (_pragmateUiBase) {
dependency_3 = _pragmateUiBase;
}, function (_pragmateUiIcons) {
dependency_4 = _pragmateUiIcons;
}, function (_pragmateUiSpinner) {
dependency_5 = _pragmateUiSpinner;
}, function (_beyondJsKernelRouting) {
dependency_6 = _beyondJsKernelRouting;
}, function (_pragmateUiRipple) {
dependency_7 = _pragmateUiRipple;
}, function (_tippyJs) {
dependency_8 = _tippyJs;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/components"
},
"type": "code"
}, _context2.meta.url).package();
;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['pragmate-ui/base', dependency_3], ['pragmate-ui/icons', dependency_4], ['pragmate-ui/spinner', dependency_5], ['@beyond-js/kernel/routing', dependency_6], ['pragmate-ui/ripple', dependency_7], ['tippy.js', dependency_8]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/components');
ims = new Map();
/*******************************************
INTERNAL MODULE: ./button-group/button-group
*******************************************/
ims.set('./button-group/button-group', {
hash: 686490675,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ButtonGroup = ButtonGroup;
var _react = require("react");
var _context = require("./context");
/*bundle*/
function ButtonGroup({
orientation = 'row',
children,
onChange,
...props
}) {
const [selected, setSelected] = _react.default.useState(props.selected);
let cls = `pui-button-group`;
cls += orientation ? ` pui-button-group ${orientation}` : '';
let disabled = !!props.disabled;
_react.default.useEffect(() => {
setSelected(props.selected);
}, [props.selected]);
const childrenWithProps = _react.default.Children.map(children, (child, index) => {
if (_react.default.isValidElement(child)) {
return _react.default.cloneElement(child, {
index,
disabled,
onClick: onChange
}); // Passing the index as a prop
}
});
return _react.default.createElement(_context.ButtonGroupContext.Provider, {
value: {
selected,
setSelected
}
}, _react.default.createElement("div", {
className: cls
}, childrenWithProps));
}
}
});
/**************************************
INTERNAL MODULE: ./button-group/context
**************************************/
ims.set('./button-group/context', {
hash: 2338960457,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useButtonGroupContext = exports.ButtonGroupContext = void 0;
var _react = require("react");
const ButtonGroupContext = exports.ButtonGroupContext = _react.default.createContext({});
const useButtonGroupContext = () => _react.default.useContext(ButtonGroupContext);
exports.useButtonGroupContext = useButtonGroupContext;
}
});
/***********************************
INTERNAL MODULE: ./button-group/type
***********************************/
ims.set('./button-group/type', {
hash: 3900894228,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
/*******************************
INTERNAL MODULE: ./button/button
*******************************/
ims.set('./button/button', {
hash: 28591129,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Button = void 0;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _spinner = require("pragmate-ui/spinner");
var _context = require("../button-group/context");
var _useRipple = require("../use-ripple");
const {
forwardRef
} = _react.default;
/*bundle*/
const Button = exports.Button = forwardRef((props, reference) => {
const {
className,
onClick,
data,
label,
title,
children,
icon,
loading,
block,
index,
fetching = false,
variant = 'default',
bordered = false,
sizing = 'md',
disabled = false,
...otherProps
} = props;
const context = _react.default.useContext(_context.ButtonGroupContext);
const [, setProcessing] = _react.default.useState(fetching || loading);
const ref = (0, _useRipple.useRipple)(title, reference);
const usingContext = typeof context?.setSelected === 'function';
const onClickButton = async event => {
try {
if (usingContext) {
context.setSelected(index);
}
if (onClick && typeof onClick === 'function') {
setProcessing(true);
//@ts-ignore
await onClick(event);
setProcessing(false);
return;
}
} finally {
setProcessing(false);
}
};
const properties = {
...otherProps,
type: props.type ? props.type : 'button'
};
if (title) properties['data-tippy-content'] = title;
if (data) {
Object.keys(data).forEach(entry => {
properties[`data-${entry}`] = data[entry];
});
}
let cls = `pui-button btn-${variant}`;
cls += className ? ` ${className}` : '';
cls += bordered ? ' outline' : '';
cls += icon ? ' has-icon' : '';
cls += block ? ' btn--block' : '';
cls += sizing ? ` btn--${sizing}` : '';
cls += loading || fetching ? ' btn--loading' : '';
const clsLoading = `button-label ${loading || fetching ? 'button-label--loading' : ''}`;
if (usingContext && context.selected === index) cls += ' pui-btn--active';
if (usingContext) properties['data-index'] = index;
return _react.default.createElement("button", {
ref: ref,
className: cls,
onClick: onClickButton,
disabled: loading || fetching || disabled,
...properties
}, icon && _react.default.createElement(_icons.Icon, {
icon: icon
}), label || children && _react.default.createElement("div", {
className: clsLoading
}, label || children), (loading || fetching) && _react.default.createElement(_spinner.Spinner, {
type: `on-${variant}`,
active: true
}));
});
}
});
/**********************************
INTERNAL MODULE: ./button/interface
**********************************/
ims.set('./button/interface', {
hash: 694968353,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
/***************************************
INTERNAL MODULE: ./conditional-container
***************************************/
ims.set('./conditional-container', {
hash: 1749837270,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ConditionalContainer = ConditionalContainer;
/*bundle*/
function ConditionalContainer({
condition,
options,
placeholder,
ternary
}) {
const evaluatedValue = typeof condition === 'function' ? condition() : condition;
let Component;
if (ternary && typeof evaluatedValue === 'boolean') {
Component = evaluatedValue ? options.true : options.false;
} else {
Component = options[evaluatedValue] || placeholder;
}
return Component ? Component : null;
}
}
});
/***************************************
INTERNAL MODULE: ./hooks/use-media-query
***************************************/
ims.set('./hooks/use-media-query', {
hash: 2034606327,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useMediaQuery = useMediaQuery;
var _react = require("react");
/*bundle*/
function useMediaQuery() {
const [size, setSize] = (0, _react.useState)('lg');
const calculateSize = () => {
const width = window.innerWidth;
if (width < 576) {
return 'xs';
} else if (width >= 576 && width < 768) {
return 'sm';
} else if (width >= 768 && width < 992) {
return 'md';
} else {
return 'lg';
}
};
(0, _react.useEffect)(() => {
const handleResize = () => {
const newSize = calculateSize();
setSize(newSize);
};
// Set initial size
handleResize();
// Set up event listener for resizing
window.addEventListener('resize', handleResize);
// Clean up function
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return size;
}
}
});
/******************************
INTERNAL MODULE: ./html-wrapper
******************************/
ims.set('./html-wrapper', {
hash: 4059971987,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.HtmlWrapper = HtmlWrapper;
var _react = require("react");
/*bundle*/
function HtmlWrapper({
className,
children,
params = {},
tag = 'span',
as = 'span'
}) {
const Control = as || tag;
const keys = Object.keys(params);
keys.forEach(key => {
const value = params[key];
children = children.replace(new RegExp(`\\{${key}\\}`, 'g'), value);
});
return _react.default.createElement(Control, {
className: className,
dangerouslySetInnerHTML: {
__html: children
}
});
}
}
});
/**********************
INTERNAL MODULE: ./link
**********************/
ims.set('./link', {
hash: 1413814841,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Link = Link;
var _react = require("react");
var _routing = require("@beyond-js/kernel/routing");
/*bundle*/
function Link({
href,
...props
}) {
const isExternal = props.target === '_blank';
const onClick = event => {
if (!isExternal) event.preventDefault();
event.stopPropagation();
if (props.onClick && typeof props.onClick === 'function') {
const result = props.onClick(event);
if (result === false) return;
}
!isExternal && _routing.routing.pushState(href);
};
const properties = {
...props
};
['href', 'onClick'].forEach(prop => delete properties[prop]);
return _react.default.createElement("a", {
...properties,
href: href,
onClick: onClick,
target: props.target
}, props.children);
}
}
});
/**************************************
INTERNAL MODULE: ./responsive-container
**************************************/
ims.set('./responsive-container', {
hash: 285431686,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ResponsiveContainer = ResponsiveContainer;
var _react = require("react");
var _useMediaQuery = require("./hooks/use-media-query");
/*bundle*/
function ResponsiveContainer(props) {
const size = (0, _useMediaQuery.useMediaQuery)();
// Ordered sizes, from smallest to largest.
const sizes = ['xs', 'sm', 'md', 'lg'];
// Function to find the first available component for the current or larger screen size.
const getComponent = currentSize => {
const currentIndex = sizes.indexOf(currentSize);
for (let i = currentIndex; i < sizes.length; i++) {
const component = props[sizes[i]];
if (component !== undefined && component !== null) {
return component;
}
}
return null;
};
const Component = getComponent(size);
// Return null if no matching component is found.
if (!Component) {
return null;
}
// Render the component matching the current or closest screen size.
return _react.default.createElement(Component, null);
}
}
});
/*************************
INTERNAL MODULE: ./spinner
*************************/
ims.set('./spinner', {
hash: 3026278285,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Spinner = void 0;
var _react = require("react");
;
const Component = (props, ref) => {
let {
color,
className,
size,
type,
active
} = props;
size = size ? size : 'xs';
const types = ['on-primary', 'on-secondary', 'on-surface', 'on-error', 'primary', 'secondary', 'tertiary'];
const clsType = types.includes(type) ? type : 'primary';
const style = {};
if (color) style.stroke = color;
className = `${clsType}${className ? ` ${className}` : ''}`;
let cls = `${className ? `${className} ` : ''}pragmate-element-spinner spinner--${size}`;
if (active) cls += ' is-active';
return _react.default.createElement("div", {
className: cls,
ref: ref
}, _react.default.createElement("svg", {
viewBox: '0 0 100 100'
}, _react.default.createElement("circle", {
cx: '50',
cy: '50',
r: '30',
style: style
})));
};
/*bundle*/
const Spinner = exports.Spinner = (0, _react.forwardRef)(Component);
}
});
/****************************
INTERNAL MODULE: ./use-ripple
****************************/
ims.set('./use-ripple', {
hash: 3800109915,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useRipple = useRipple;
var _react = require("react");
var _ripple = require("pragmate-ui/ripple");
var _tippy = require("tippy.js");
function useRipple(title, ref) {
ref = ref ?? _react.default.useRef(null);
_react.default.useEffect(() => {
const ripple = new _ripple.RippleEffect();
ripple.addRippleEffect(ref.current);
if (title) {
(0, _tippy.default)(ref.current);
}
}, [title]);
return ref;
}
}
});
__pkg.exports.descriptor = [{
"im": "./button-group/button-group",
"from": "ButtonGroup",
"name": "ButtonGroup"
}, {
"im": "./button/button",
"from": "Button",
"name": "Button"
}, {
"im": "./button/interface",
"from": "IButtonProps",
"name": "IButtonProps"
}, {
"im": "./conditional-container",
"from": "ConditionalContainer",
"name": "ConditionalContainer"
}, {
"im": "./hooks/use-media-query",
"from": "useMediaQuery",
"name": "useMediaQuery"
}, {
"im": "./html-wrapper",
"from": "HtmlWrapper",
"name": "HtmlWrapper"
}, {
"im": "./link",
"from": "Link",
"name": "Link"
}, {
"im": "./responsive-container",
"from": "ResponsiveContainer",
"name": "ResponsiveContainer"
}, {
"im": "./spinner",
"from": "Spinner",
"name": "Spinner"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'ButtonGroup') && _export("ButtonGroup", ButtonGroup = require ? require('./button-group/button-group').ButtonGroup : value);
(require || prop === 'Button') && _export("Button", Button = require ? require('./button/button').Button : value);
(require || prop === 'IButtonProps') && _export("IButtonProps", IButtonProps = require ? require('./button/interface').IButtonProps : value);
(require || prop === 'ConditionalContainer') && _export("ConditionalContainer", ConditionalContainer = require ? require('./conditional-container').ConditionalContainer : value);
(require || prop === 'useMediaQuery') && _export("useMediaQuery", useMediaQuery = require ? require('./hooks/use-media-query').useMediaQuery : value);
(require || prop === 'HtmlWrapper') && _export("HtmlWrapper", HtmlWrapper = require ? require('./html-wrapper').HtmlWrapper : value);
(require || prop === 'Link') && _export("Link", Link = require ? require('./link').Link : value);
(require || prop === 'ResponsiveContainer') && _export("ResponsiveContainer", ResponsiveContainer = require ? require('./responsive-container').ResponsiveContainer : value);
(require || prop === 'Spinner') && _export("Spinner", Spinner = require ? require('./spinner').Spinner : 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=components.sjs.js.map