@talend/react-components
Version:
Set of react components.
233 lines (228 loc) • 8.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactDom = _interopRequireDefault(require("react-dom"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactBootstrap = require("@talend/react-bootstrap");
var _Actions = require("../Actions");
var _Icon = _interopRequireDefault(require("../Icon"));
var _OverlayTrigger = _interopRequireDefault(require("../OverlayTrigger"));
var _Tag = _interopRequireDefault(require("../Tag"));
var _TooltipTrigger = _interopRequireDefault(require("../TooltipTrigger"));
var _getTabBarBadgeLabel = _interopRequireDefault(require("../utils/getTabBarBadgeLabel"));
var _TabBarModule = _interopRequireDefault(require("./TabBar.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable react/jsx-no-bind */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react/no-find-dom-node */
function TabBar(props) {
const tabBarContainerRef = (0, _react.useRef)();
const tabBarRef = (0, _react.useRef)();
const needsRefocus = (0, _react.useRef)();
const [showDropdown, setShowDropDown] = (0, _react.useState)(false);
const {
responsive = true
} = props;
function tryShowDropdown() {
const tabContainer = tabBarContainerRef.current;
if (tabContainer) {
// There is a TabBar, test if the right boundary point of this TabBar
// is closer than the right boundary point of its last nav item.
const lastChild = tabContainer.querySelector('li:last-child');
if (lastChild) {
if (tabContainer.getBoundingClientRect().right < lastChild.getBoundingClientRect().right) {
setShowDropDown(true);
}
}
} else {
// There is no TabBar, show it to test if dropdown is needed
setShowDropDown(false);
}
}
/**
* Just show the tabBar and test if there is enough width.
*/
function showTabBarAndTest() {
setShowDropDown(false);
tryShowDropdown();
}
(0, _react.useEffect)(() => {
if (responsive) {
const resizeListener = window.addEventListener('resize', (0, _lodash.debounce)(showTabBarAndTest, 200));
return () => window.removeEventListener('resize', resizeListener);
}
return undefined;
}, []);
(0, _react.useEffect)(() => {
if (!needsRefocus.current || !tabBarRef.current) {
return;
}
const tabBarRefNode = _reactDom.default.findDOMNode(tabBarRef.current);
if (tabBarRefNode && typeof tabBarRefNode.querySelector === 'function') {
const activeChild = tabBarRefNode.querySelector('[aria-selected=true]');
if (activeChild) {
activeChild.focus({
preventScroll: true
});
needsRefocus.current = false;
}
}
});
(0, _react.useEffect)(() => {
if (responsive) {
tryShowDropdown();
}
}, []);
const {
onSelect
} = props; // to avoid react/no-unused-prop-types
function handleSelect(selectedKey, event) {
if (selectedKey !== props.selectedKey) {
if (event) {
event.preventDefault();
}
onSelect(event, props.items.find(({
key
}) => selectedKey === key));
}
}
function handleKeyDown(event) {
const {
items
} = props;
switch (event.key) {
case 'Home':
needsRefocus.current = true;
handleSelect(items[0].key, event);
break;
case 'End':
needsRefocus.current = true;
handleSelect(items[items.length - 1].key, event);
break;
default:
break;
}
}
const {
className,
id,
items,
selectedKey,
children,
generateChildId,
tooltipPlacement,
right
} = props;
const hasChildren = children || items.some(item => item.children);
const tabContent = hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tab.Content, {
children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Tab.Pane, {
eventKey: item.key,
children: [item.children, selectedKey === item.key ? children : null]
}, item.key))
});
let tabMenu;
if (responsive && showDropdown) {
const selectedItem = items.find(item => item.key === selectedKey) || items[0];
const badgeLabel = (0, _lodash.get)(selectedItem, 'badge.label', '');
tabMenu = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.ActionDropdown, {
id: id,
className: (0, _classnames.default)(_TabBarModule.default['tc-tab-bar-dropdown'], 'tc-tab-bar-dropdown'),
badge: selectedItem.badge,
tooltipLabel: badgeLabel ? `${badgeLabel} ${selectedItem.label}` : selectedItem.label,
label: selectedItem.label,
icon: selectedItem.icon && selectedItem.icon.name,
onSelect: (event, {
key
}) => handleSelect(key, event),
items: items.map(item => ({
...item,
icon: item.icon && item.icon.name
})),
link: true
});
} else {
tabMenu = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav, {
bsStyle: "tabs",
className: (0, _classnames.default)(_TabBarModule.default['tc-tab-bar'], 'tc-tab-bar', responsive && _TabBarModule.default['tc-tab-bar-responsive'], responsive && 'tc-tab-bar-responsive'),
ref: tabBarRef,
children: items.map(({
icon,
badge,
...item
}) => /*#__PURE__*/(0, _react.createElement)(_reactBootstrap.NavItem, {
className: (0, _classnames.default)(_TabBarModule.default['tc-tab-bar-item'], 'tc-tab-bar-item', item.className),
...item,
key: item.key,
eventKey: item.key,
componentClass: "button"
}, /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
label: badge && badge.label ? `${badge.label} ${item.label}` : item.label,
tooltipPlacement: tooltipPlacement,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
className: (0, _classnames.default)(_TabBarModule.default['tc-tab-bar-item-container'], 'tc-tab-bar-item-container'),
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
className: (0, _classnames.default)(_TabBarModule.default['tc-tab-bar-item-icon'], 'tc-tab-bar-item-icon'),
...icon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _classnames.default)(_TabBarModule.default['tc-tab-bar-item-label']),
children: item.label
}), badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
className: (0, _classnames.default)(_TabBarModule.default['tc-tab-bar-item-badge'], 'tc-tab-bar-item-badge', badge.className),
bsStyle: badge.bsStyle,
children: (0, _getTabBarBadgeLabel.default)(badge.label)
})]
})
})))
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tab.Container, {
id: id,
activeKey: selectedKey,
className: className,
onSelect: handleSelect,
onKeyDown: handleKeyDown,
generateChildId: generateChildId,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: tabBarContainerRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)(_TabBarModule.default['tc-tab-bar-menu'], 'tc-tab-bar-menu'),
children: [tabMenu, right]
}), tabContent]
})
});
}
TabBar.displayName = 'TabBar';
TabBar.propTypes = {
children: _propTypes.default.node,
className: _propTypes.default.string,
generateChildId: _propTypes.default.func,
id: _propTypes.default.string.isRequired,
items: _propTypes.default.arrayOf(_propTypes.default.shape({
id: _propTypes.default.string,
key: _propTypes.default.any.isRequired,
label: _propTypes.default.string.isRequired,
icon: _propTypes.default.object,
badge: _propTypes.default.shape({
className: _propTypes.default.string,
label: _propTypes.default.string,
bsStyle: _propTypes.default.string
})
}).isRequired).isRequired,
onSelect: _propTypes.default.func.isRequired,
responsive: _propTypes.default.bool,
selectedKey: _propTypes.default.any,
tooltipPlacement: _OverlayTrigger.default.propTypes.placement,
right: _propTypes.default.node
};
TabBar.defaultProps = {
tooltipPlacement: 'top'
};
TabBar.Tab = _reactBootstrap.Tab;
var _default = exports.default = TabBar;
//# sourceMappingURL=TabBar.component.js.map