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.
345 lines (322 loc) • 10.7 kB
JavaScript
define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "@beyond-js/kernel/routing"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3) {
"use strict";
Object.defineProperty(_exports, "__esModule", {
value: true
});
_exports.hmr = _exports.__beyond_pkg = _exports.TabsContainer = _exports.Tabs = _exports.Tab = _exports.Panes = void 0;
const {
Bundle: __Bundle
} = dependency_0;
const __pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/tabs"
},
"type": "code"
}, _amd_module.uri).package();
;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['@beyond-js/kernel/routing', dependency_3]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/tabs');
const ims = new Map();
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {
hash: 451487243,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useTabsContext = exports.TabsContext = void 0;
var _react = require("react");
const TabsContext = exports.TabsContext = _react.default.createContext({});
const useTabsContext = () => _react.default.useContext(TabsContext);
exports.useTabsContext = useTabsContext;
}
});
/*****************************
INTERNAL MODULE: ./definitions
*****************************/
ims.set('./definitions', {
hash: 1537491585,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
}
});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {
hash: 1102662752,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabsContainer = TabsContainer;
var _routing = require("@beyond-js/kernel/routing");
var _react = require("react");
var _context = require("./context");
/* bundle */
function TabsContainer({
active = 0,
onChange,
className,
current,
children,
tabs = [],
panes,
trackUrl
}) {
// Extract tab names from children
if (trackUrl) {
const tab = _routing.routing.uri.qs.get('tab');
current = current ?? tab;
}
const activeIndex = tabs.includes(current) ? tabs.indexOf(current) : active;
const [activeTab, setActiveTab] = _react.default.useState(activeIndex);
const [currentTabName, setCurrentTabName] = _react.default.useState(current);
// Update active tab if `current` prop changes
const value = {
panes,
activeTab,
setActiveTab,
onChange,
trackUrl,
current: currentTabName,
currentTabName,
setCurrentTabName,
names: tabs
};
const cls = `pui-tabs-container${className ? ` ${className}` : ''}`;
return _react.default.createElement(_context.TabsContext.Provider, {
value: value
}, _react.default.createElement("section", {
className: cls
}, children));
}
}
});
/***********************
INTERNAL MODULE: ./panes
***********************/
ims.set('./panes', {
hash: 1726352262,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Panes = Panes;
var _react = require("react");
var _context = require("./context");
/*bundle*/
function Panes({
children,
className,
items
}) {
const {
activeTab
} = (0, _context.useTabsContext)();
if (items) {
const Control = items[activeTab];
return _react.default.createElement("section", {
className: `tab-content ${className ? ` ${className}` : ''}`
}, _react.default.createElement(Control, null));
}
const childrenArray = _react.default.Children.toArray(children);
const Control = childrenArray[activeTab];
const cls = `tab-content ${className ? ` ${className}` : ''}`;
return _react.default.createElement("section", {
className: cls
}, Control);
}
}
});
/*********************
INTERNAL MODULE: ./tab
*********************/
ims.set('./tab', {
hash: 588532965,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tab = Tab;
var _react = require("react");
var _context = require("./context");
var _routing = require("@beyond-js/kernel/routing");
/*bundle */
function Tab(props) {
const {
children,
index,
disabled,
className,
name
} = props;
const {
activeTab,
setActiveTab,
onChange,
trackUrl
} = (0, _context.useTabsContext)();
let cls = `tab ${index === activeTab ? 'active' : ''} ${disabled ? ' is-disabled' : ''}`;
if (className) cls += ' ' + className;
const onClick = event => {
// todo: this event must be removed
if (trackUrl) {
// Convert `routing.uri.qs.entries` to an object
const queryParams = Object.fromEntries(_routing.routing.uri.qs.entries());
// Update the `tab` parameter
queryParams.tab = name;
// Build the new query string
const queryString = new URLSearchParams(queryParams).toString();
// Update the URL without reloading the page
_routing.routing.replaceState({}, '', `${_routing.routing.uri.pathname}?${queryString}`);
}
if (onChange) onChange(event, index);
setActiveTab(index);
};
const attrs = {};
if (!disabled) attrs.onClick = onClick;
return _react.default.createElement("div", {
className: cls,
...attrs,
"data-name": name,
"data-index": index
}, children);
}
}
});
/**********************
INTERNAL MODULE: ./tabs
**********************/
ims.set('./tabs', {
hash: 1755048068,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tabs = void 0;
var _react = require("react");
var _context = require("./context");
var _useScroll = require("./use-scroll");
var _tab = require("./tab");
/*bundle*/
const Tabs = ({
children,
className
}) => {
const {
activeTab,
names
} = (0, _context.useTabsContext)();
const ref = _react.default.useRef(null);
const cls = `pui-tabs-menu tabs${className ? ` ${className}` : ''}`;
const clone = (item, index) => {
if (!_react.default.isValidElement(item) || item.type !== _tab.Tab) return item;
const props = {
...item.props,
index,
key: index,
name: names[index]
};
const tabChild = item;
return _react.default.cloneElement(tabChild, props);
};
const output = _react.default.Children.map(children, clone);
(0, _useScroll.useScroll)(ref, activeTab);
return _react.default.createElement("header", {
className: cls,
ref: ref
}, output);
};
exports.Tabs = Tabs;
}
});
/****************************
INTERNAL MODULE: ./use-scroll
****************************/
ims.set('./use-scroll', {
hash: 1668718188,
creator: function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useScroll = useScroll;
var _react = require("react");
function useScroll(tabRef, activeTab) {
_react.default.useEffect(() => {
const scrollToTab = index => {
const tabElement = tabRef.current?.querySelectorAll('.tab')[index];
if (tabElement) {
const container = tabRef.current;
const containerRect = container.getBoundingClientRect();
const tabRect = tabElement.getBoundingClientRect();
const scrollLeft = container.scrollLeft;
if (tabRect.left < containerRect.left) {
container.scrollTo({
left: scrollLeft + tabRect.left - containerRect.left,
behavior: 'smooth'
});
} else if (tabRect.right > containerRect.right) {
container.scrollTo({
left: scrollLeft + tabRect.right - containerRect.right,
behavior: 'smooth'
});
}
}
};
scrollToTab(activeTab);
}, [activeTab]);
}
}
});
__pkg.exports.descriptor = [{
"im": "./index",
"from": "TabsContainer",
"name": "TabsContainer"
}, {
"im": "./panes",
"from": "Panes",
"name": "Panes"
}, {
"im": "./tab",
"from": "Tab",
"name": "Tab"
}, {
"im": "./tabs",
"from": "Tabs",
"name": "Tabs"
}];
let TabsContainer = _exports.TabsContainer = void 0,
Panes = _exports.Panes = void 0,
Tab = _exports.Tab = void 0,
Tabs = _exports.Tabs = void 0;
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'TabsContainer') && (_exports.TabsContainer = TabsContainer = require ? require('./index').TabsContainer : value);
(require || prop === 'Panes') && (_exports.Panes = Panes = require ? require('./panes').Panes : value);
(require || prop === 'Tab') && (_exports.Tab = Tab = require ? require('./tab').Tab : value);
(require || prop === 'Tabs') && (_exports.Tabs = Tabs = require ? require('./tabs').Tabs : 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=tabs.amd.js.map