react-elegant-ui
Version:
Elegant UI components, made by BEM best practices for react
80 lines • 2.91 kB
JavaScript
var __assign = this && this.__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { cn } from '@bem-react/classname';
import { useComponentRegistry } from '../../lib/di';
import { useEqualMemo } from '../../hooks/useEqualMemo';
export var cnTabsPanes = cn('TabsPanes');
/**
* Component for making tabs with some contents.
* Switching between tabs can be implement for example with use `TabsMenu`, `Select`.
*
* @param {ITabsPanesProps} props
*/
export var TabsPanes = function (_a) {
var panes = _a.panes,
activePane = _a.activePane,
renderAll = _a.renderAll,
className = _a.className,
innerRef = _a.innerRef,
props = __rest(_a, ["panes", "activePane", "renderAll", "className", "innerRef"]);
var Pane = useComponentRegistry(cnTabsPanes()).Pane;
// Render panes
var content = useEqualMemo(function () {
// Select first matched pane
var activePaneIndex = panes.findIndex(function (_a) {
var id = _a.id,
disabled = _a.disabled;
return id === activePane && !disabled;
});
// TODO: write to docs about dev mode
if (process.env.NODE_ENV !== 'production') {
if (activePaneIndex === -1) {
console.warn("Pane with id \"".concat(activePane, "\" is not found in list of panes"));
}
}
if (renderAll) {
// Render all panes and hide inactive
return panes.map(function (pane, index) {
var disabled = pane.disabled,
content = pane.content;
var isHidden = disabled || index !== activePaneIndex;
return /*#__PURE__*/React.createElement(Pane, {
key: index,
hidden: isHidden
}, content);
});
} else {
// Render only active pane
var pane = panes[activePaneIndex];
// Render nothing
if (pane === undefined || pane.disabled) {
return undefined;
}
return /*#__PURE__*/React.createElement(Pane, null, pane.content);
}
}, [Pane, panes, activePane, renderAll]);
return /*#__PURE__*/React.createElement("div", __assign({
role: "tabpanel"
}, props, {
ref: innerRef,
className: cnTabsPanes({}, [className])
}), content);
};
TabsPanes.displayName = cnTabsPanes();