@atlaskit/tabs
Version:
Tabs are used to organize content by grouping similar information on the same page.
127 lines (124 loc) • 6.24 kB
JavaScript
/* tabs.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./tabs.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
var _tabListContext = require("../internal/tab-list-context");
var _tabPanelContext = require("../internal/tab-panel-context");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var baseStyles = null;
var tabsStyles = null;
var analyticsAttributes = {
componentName: 'tabs',
packageName: "@atlaskit/tabs",
packageVersion: "21.2.1"
};
var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
var tabPanel = _ref.tabPanel,
index = _ref.index,
isSelected = _ref.isSelected,
tabsId = _ref.tabsId;
return (
// Ensure tabPanel exists in case it has been removed
tabPanel && /*#__PURE__*/React.createElement(_tabPanelContext.TabPanelContext.Provider, {
value: {
role: 'tabpanel',
id: "".concat(tabsId, "-").concat(index, "-tab"),
hidden: isSelected ? undefined : true,
'aria-labelledby': "".concat(tabsId, "-").concat(index),
tabIndex: isSelected ? 0 : -1
},
key: index
}, tabPanel)
);
};
/**
* __Tabs__
*
* Tabs acts as a container for all Tab components.
*
* - [Examples](https://atlassian.design/components/tabs/examples)
* - [Code](https://atlassian.design/components/tabs/code)
* - [Usage](https://atlassian.design/components/tabs/usage)
*/
var Tabs = function Tabs(props) {
var _props$shouldUnmountT = props.shouldUnmountTabPanelOnChange,
shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
SelectedType = props.selected,
defaultSelected = props.defaultSelected,
onChangeProp = props.onChange,
id = props.id,
analyticsContext = props.analyticsContext,
children = props.children,
testId = props.testId;
var _useState = (0, _react.useState)(SelectedType || defaultSelected || 0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
selectedState = _useState2[0],
setSelected = _useState2[1];
var selected = SelectedType === undefined ? selectedState : SelectedType;
var childrenArray = _react.Children.toArray(children)
// Don't include any conditional children
.filter(function (child) {
return Boolean(child);
});
// First child should be a tabList followed by tab panels
var _childrenArray = (0, _toArray2.default)(childrenArray),
tabList = _childrenArray[0],
tabPanels = _arrayLikeToArray(_childrenArray).slice(1);
// Keep track of visited and add to a set
var visited = (0, _react.useRef)(new Set([selected]));
if (!visited.current.has(selected)) {
visited.current.add(selected);
}
var onChange = (0, _react.useCallback)(function (index, analyticsEvent) {
if (onChangeProp) {
onChangeProp(index, analyticsEvent);
}
setSelected(index);
}, [onChangeProp]);
var onChangeAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
fn: onChange,
action: 'clicked',
analyticsData: analyticsContext
}, analyticsAttributes));
var tabPanelsWithContext = shouldUnmountTabPanelOnChange ? getTabPanelWithContext({
tabPanel: tabPanels[selected],
index: selected,
isSelected: true,
tabsId: id
}) :
// If a panel has already been visited, don't unmount it
Array.from(visited.current).map(function (tabIndex) {
return getTabPanelWithContext({
tabPanel: tabPanels[tabIndex],
index: tabIndex,
isSelected: tabIndex === selected,
tabsId: id
});
});
return /*#__PURE__*/React.createElement("div", {
"data-testid": testId,
className: (0, _runtime.ax)(["_1e0c1txw _p12f1osq _1tkeidpf _i0dl1osq _2lx21bp4 _16jlkb7n", "_1c3y1txw _ftfaidpf _18i0kb7n _185bglyw"])
}, /*#__PURE__*/React.createElement(_tabListContext.TabListContext.Provider, {
value: {
selected: selected,
onChange: onChangeAnalytics,
tabsId: id
}
}, tabList), /*#__PURE__*/React.createElement(_react.Fragment, null, tabPanelsWithContext));
};
var _default = exports.default = Tabs;