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.
260 lines (227 loc) • 7.43 kB
JavaScript
import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'framer-motion';
const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.0-beta.7/tabs"},"type":"code"}, import.meta.url).package();;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['framer-motion', dependency_3]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.0-beta.7/tabs')
const ims = new Map();
/*************************
INTERNAL MODULE: ./context
*************************/
ims.set('./context', {hash: 3810726963, creator: function (require, exports) {
;
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: 6865605, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
}});
/***********************
INTERNAL MODULE: ./index
***********************/
ims.set('./index', {hash: 3139584800, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabsContainer = TabsContainer;
var _react = require("react");
var _context = require("./context");
var _framerMotion = require("framer-motion");
/* bundle */function TabsContainer({
active,
onChange,
className,
children,
panes
}) {
const activeIndex = active || 0;
const [activeTab, setActiveTab] = _react.default.useState(activeIndex);
const value = {
panes,
activeTab,
setActiveTab,
onChange
};
const cls = `pui-tabs-container${className ? ` ${className}` : ''}`;
return _react.default.createElement(_context.TabsContext.Provider, {
value: value
}, _react.default.createElement(_framerMotion.AnimatePresence, null, _react.default.createElement("section", {
className: cls
}, children)));
}
}});
/***********************
INTERNAL MODULE: ./panes
***********************/
ims.set('./panes', {hash: 1163881693, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Panes = Panes;
var _react = require("react");
var _context = require("./context");
/*bundle*/function Panes({
children,
className
}) {
const {
activeTab
} = (0, _context.useTabsContext)();
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: 1195217631, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tab = Tab;
var _react = require("react");
var _context = require("./context");
/*bundle */function Tab(props) {
const {
children,
index,
disabled,
className,
name
} = props;
const {
activeTab,
setActiveTab,
onChange
} = (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 (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: 1691643253, creator: function (require, exports) {
;
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
} = (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
};
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: 1907559043, creator: function (require, exports) {
;
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"}];
export let TabsContainer, Panes, Tab, Tabs;
// Module exports
__pkg.exports.process = function({require, prop, value}) {
(require || prop === 'TabsContainer') && (TabsContainer = require ? require('./index').TabsContainer : value);
(require || prop === 'Panes') && (Panes = require ? require('./panes').Panes : value);
(require || prop === 'Tab') && (Tab = require ? require('./tab').Tab : value);
(require || prop === 'Tabs') && (Tabs = require ? require('./tabs').Tabs : value);
};
export const __beyond_pkg = __pkg;
export const hmr = new (function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
});
__pkg.initialise(ims);
//# sourceMappingURL=tabs.browser.mjs.map