@spaced-out/ui-design-system
Version:
Sense UI components library
129 lines (128 loc) • 4.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabList = void 0;
var React = _interopRequireWildcard(require("react"));
var _useWindowSize = require("../../../hooks/useWindowSize/useWindowSize");
var _size = require("../../../styles/variables/_size");
var _space = require("../../../styles/variables/_space");
var _classify = require("../../../utils/classify");
var _TabDropdown = require("./TabDropdown");
var _TabListModule = _interopRequireDefault(require("./TabList.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
let {
classNames,
children,
size,
onSelect,
selectedTab,
menuWidth,
elevation = 'modal'
} = _ref;
const ref = React.useRef(null);
React.useImperativeHandle(forwardRef, () => ref.current);
const {
width
} = (0, _useWindowSize.useWindowSize)();
const [containerWidth, setContainerWidth] = React.useState(0);
const childrenWithProps = () => {
const childrenArray = React.Children.toArray(children);
const totalChildCount = childrenArray.length;
let tabListWidth = 0;
const menuOptions = [];
let nodes = [];
const tabListNodes = [];
for (let i = 0; i < totalChildCount; i++) {
const child = childrenArray[i];
const {
width = _size.size100,
tabId,
label,
disabled,
iconName,
iconType
} = child.props;
const widthInt = parseInt(width);
tabListWidth = tabListWidth + widthInt;
if (tabListWidth < containerWidth || i === 0) {
const childOnSelect = params => {
onSelect && onSelect(params); // call the tab level onSelect
};
tabListNodes.push(/*#__PURE__*/React.cloneElement(child, {
size,
onSelect: childOnSelect,
selectedTab
}));
} else {
menuOptions.push({
key: tabId,
label,
disabled,
iconLeft: iconName,
iconLeftType: iconType
});
}
}
const menuOnSelect = _ref2 => {
let {
key,
label
} = _ref2;
onSelect && onSelect({
tabId: key,
label
});
};
const selectedKeys = [selectedTab?.tabId || ''];
const isMenuOptionSelected = (() => {
for (let i = 0; i < menuOptions.length; i++) {
if (menuOptions[i].key === selectedTab?.tabId) {
return true;
}
}
return false;
})();
const tabDropDownNode = menuOptions.length ? /*#__PURE__*/React.createElement(_TabDropdown.TabDropdown, {
key: 'tabDropdown' + menuOptions.length,
size: size,
onOptionSelect: menuOnSelect,
props: {
tab: {
iconName: 'ellipsis',
tabId: 'tab-dropdown',
selectedTab: {
tabId: isMenuOptionSelected ? 'tab-dropdown' : ''
}
},
menu: {
isFluid: false,
menuDisabled: false,
options: menuOptions,
selectedKeys,
width: menuWidth
}
},
elevation: elevation
}) : null;
nodes = [...tabListNodes, tabDropDownNode];
return nodes;
};
React.useLayoutEffect(() => {
if (ref.current && ref.current.offsetWidth) {
const availableContainerWidth = ref.current.offsetWidth - (parseInt(_size.size36) + parseInt(_space.spaceMedium));
setContainerWidth(availableContainerWidth);
}
// it depends on width of the screen as ref.current.offsetWidth will not provide the events when changed.
}, [ref.current, width]);
return /*#__PURE__*/React.createElement("div", {
ref: ref,
"data-testid": "Tabs",
className: (0, _classify.classify)(_TabListModule.default.tabsContainer, {
[_TabListModule.default.mediumSize]: size === 'medium',
[_TabListModule.default.smallSize]: size === 'small'
}, classNames?.wrapper)
}, containerWidth ? childrenWithProps() : null);
});