react-cm-ui
Version:
React UI for Healthy Church
669 lines (579 loc) • 27.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactResizeDetector = _interopRequireDefault(require("react-resize-detector"));
var _constants = require("../../global/constants");
var _constants2 = require("./constants");
var _dropdownButton = _interopRequireDefault(require("../../inputs/dropdownButton"));
var _sectionalTab = _interopRequireDefault(require("./sectionalTab"));
var _sectionalTabContent = _interopRequireDefault(require("./sectionalTabContent"));
var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var PREFIX_TAB = 'tab-';
var CONTENT_PREFIX = 'content-';
var HIDDEN_TABS_ICON_WIDTH = 30;
var WIDTH_OFFSET = 5; // it ain't neccesary to be too precise when resizing and calculating hidden tabs
var propTypes = {
/**
* beforeChange callback: return false to prevent tab change
*/
beforeChange: _propTypes["default"].func,
/**
* Custom classes to override the default styling
*/
classes: _propTypes["default"].shape({
indicator: _propTypes["default"].string,
root: _propTypes["default"].string,
sectionalTab: _propTypes["default"].string,
sectionalTabsPanel: _propTypes["default"].string,
sectionalTabsPanelContent: _propTypes["default"].string
}),
/**
* onChange active tab callback
*/
onChange: _propTypes["default"].func,
/**
* List of the tabs objects
*/
items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
key: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
title: _propTypes["default"].string.isRequired,
getContent: _propTypes["default"].func,
onClick: _propTypes["default"].func
})),
/**
* Resize recalculation frecuency in milliseconds
*/
resizeThrottle: _propTypes["default"].number,
/**
* Use this prop to programatically change the selected tab
*/
selectedTabKey: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
/**
* Renders the content set inside the item object under the tabs panel
*/
withContent: _propTypes["default"].bool
};
var defaultProps = {
beforeChange: undefined,
classes: null,
items: [],
onChange: undefined,
resizeThrottle: 100,
selectedTabKey: undefined,
withContent: false
};
var styles = function styles(theme) {
var borderColorSecondary = (0, _lodash.get)(theme, 'palette.border.secondary');
var colorActivePrimary = (0, _lodash.get)(theme, 'palette.active.primary');
var colorHighlight = (0, _lodash.get)(theme, 'palette.cyan[500]');
var fontWeightMedium = (0, _lodash.get)(theme, 'typography.fontWeightMedium');
var textColorSecondary = (0, _lodash.get)(theme, 'palette.text.secondary');
var textColorPrimary = (0, _lodash.get)(theme, 'palette.text.primary');
return {
indicator: {
backgroundColor: colorActivePrimary,
bottom: 0,
height: 2,
position: 'absolute',
transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
},
root: {
position: 'relative',
'& .button_dropdown': {
margin: '0',
padding: 0,
width: HIDDEN_TABS_ICON_WIDTH,
'& .icon': {
marginRight: '00 !important'
},
'&-open': {
'& .icon-use-path': {
fill: "".concat(colorHighlight, " !important")
}
}
}
},
sectionalTabsPanel: {
display: 'flex',
flexWrap: 'wrap',
margin: [[0, -_constants2.PADDING_X]]
},
sectionalTabsPanelContent: {
padding: [[_constants2.PADDING_X, 0]],
borderTop: "1px solid ".concat(borderColorSecondary)
},
sectionalTab: {
backgroundColor: 'transparent',
border: 0,
borderRadius: 0,
cursor: 'pointer',
outline: 'none',
padding: [[5, _constants2.PADDING_X]],
whiteSpace: 'nowrap',
zIndex: 1
},
sectionalTabLabel: {
fontWeight: fontWeightMedium,
color: textColorSecondary,
transition: 'color 0.1s, border-bottom 0.1s',
'&:hover': {
color: textColorPrimary
}
},
sectionalTabLabelSelected: {
color: "".concat(textColorPrimary, " !important")
}
};
};
/**
* Component capable to hide/show its tabs under a drop down button according to the container size.
* It swipes the hidden tabs on click making them visible.
*/
var SectionalTabs = /*#__PURE__*/function (_Component) {
_inherits(SectionalTabs, _Component);
var _super = _createSuper(SectionalTabs);
function SectionalTabs(props) {
var _this;
_classCallCheck(this, SectionalTabs);
_this = _super.call(this, props);
_this.state = {
blockWidth: 0,
items: props.items || [],
selectedTabKey: props.selectedTabKey,
selectedTabDimensions: {
left: null,
width: null
},
tabDimensions: {},
tabsTotalWidth: 0
};
_this.getClassNamesFor = _this.getClassNamesFor.bind(_assertThisInitialized(_this));
_this.getExpandedTabs = _this.getExpandedTabs.bind(_assertThisInitialized(_this));
_this.getPanelProps = _this.getPanelProps.bind(_assertThisInitialized(_this));
_this.getSelectedTabKey = _this.getSelectedTabKey.bind(_assertThisInitialized(_this));
_this.getTabs = _this.getTabs.bind(_assertThisInitialized(_this));
_this.getTabProps = _this.getTabProps.bind(_assertThisInitialized(_this));
_this.onChangeTab = _this.onChangeTab.bind(_assertThisInitialized(_this));
_this.onResize = _this.onResize.bind(_assertThisInitialized(_this));
_this.onResizeThrottled = (0, _lodash.throttle)(_this.onResize, props.resizeThrottle, {
trailing: true
});
_this.selectedTabKeyProp = props.selectedTabKey;
_this.setTabsDimensions = _this.setTabsDimensions.bind(_assertThisInitialized(_this));
_this.setSelectedTabDimensions = _this.setSelectedTabDimensions.bind(_assertThisInitialized(_this));
_this.tabRefs = {};
return _this;
}
_createClass(SectionalTabs, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setTabsDimensions();
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
var items = this.props.items;
var _this$state = this.state,
blockWidth = _this$state.blockWidth,
selectedTabKey = _this$state.selectedTabKey,
selectedTabDimensions = _this$state.selectedTabDimensions,
tabsTotalWidth = _this$state.tabsTotalWidth,
itemsState = _this$state.items;
var shouldUpdate = !(0, _lodash.isEqual)(nextProps.items, items) || nextState.tabsTotalWidth !== tabsTotalWidth || nextState.blockWidth !== blockWidth || nextProps.selectedTabKey !== this.selectedTabKeyProp || nextState.selectedTabKey !== selectedTabKey || !(0, _lodash.isEqual)(itemsState, nextState.items) || !(0, _lodash.isEqual)(selectedTabDimensions, nextState.selectedTabDimensions);
return shouldUpdate;
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props = this.props,
items = _this$props.items,
selectedTabKey = _this$props.selectedTabKey;
var prevItems = prevProps.items;
var didPropsItemsChange = !(0, _lodash.isEqual)(prevItems, items);
var didSelectedTabKeyChange = this.selectedTabKeyProp !== selectedTabKey;
var shouldUpdateState = didPropsItemsChange || didSelectedTabKeyChange;
if (shouldUpdateState) {
var newState = _objectSpread(_objectSpread({}, didSelectedTabKeyChange && {
selectedTabKey: selectedTabKey
}), didPropsItemsChange && {
items: items,
selectedTabKey: selectedTabKey
});
this.setState(newState);
}
if (didPropsItemsChange) {
this.setTabsDimensions();
}
this.selectedTabKeyProp = selectedTabKey;
}
}, {
key: "onResize",
value: function onResize() {
if (this.tabsWrapperRef) {
this.setState({
blockWidth: this.tabsWrapperRef.offsetWidth
});
}
}
}, {
key: "onChangeTab",
value: function onChangeTab(nextTabKey, evt) {
var _this$props2 = this.props,
beforeChange = _this$props2.beforeChange,
onChange = _this$props2.onChange;
var selectedTabKey = this.state.selectedTabKey;
if ((0, _lodash.isFunction)(beforeChange)) {
var beforeChangeRes = beforeChange({
selectedTabKey: selectedTabKey,
nextTabKey: nextTabKey
});
if (beforeChangeRes === false) {
if (evt) {
evt.preventDefault();
}
return null;
}
}
this.setState({
selectedTabKey: nextTabKey
});
if ((0, _lodash.isFunction)(onChange)) {
onChange(nextTabKey);
}
return null;
}
}, {
key: "setTabsDimensions",
value: function setTabsDimensions() {
var _this2 = this;
if (this.tabsWrapperRef) {
var blockWidth = this.tabsWrapperRef.offsetWidth;
var updatedTabDimensions = {};
var tabRefsKeys = Object.keys(this.tabRefs);
var updatedTabsTotalWidth = 0;
tabRefsKeys.forEach(function (key) {
if (_this2.tabRefs[key]) {
var width = _this2.tabRefs[key].tab.offsetWidth;
updatedTabDimensions[key.replace(PREFIX_TAB, '')] = {
width: width,
offset: updatedTabsTotalWidth
};
updatedTabsTotalWidth += width;
}
});
this.setState({
tabDimensions: updatedTabDimensions,
tabsTotalWidth: updatedTabsTotalWidth,
blockWidth: blockWidth
});
}
}
}, {
key: "setSelectedTabDimensions",
value: function setSelectedTabDimensions() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
left: null,
width: null
},
left = _ref.left,
width = _ref.width;
this.setState({
selectedTabDimensions: {
left: left,
width: width
}
});
}
}, {
key: "getTabs",
value: function getTabs() {
var _this$state2 = this.state,
blockWidth = _this$state2.blockWidth,
items = _this$state2.items,
tabDimensions = _this$state2.tabDimensions,
tabsTotalWidth = _this$state2.tabsTotalWidth;
var selectedTabKey = this.getSelectedTabKey();
var tabIndex = 0;
var availableWidth = blockWidth - (tabsTotalWidth > blockWidth ? HIDDEN_TABS_ICON_WIDTH : 0);
var reducedItems = items.reduce(function (result, item, index) {
var content = item.content,
disabled = item.disabled,
getContent = item.getContent,
_item$key = item.key,
key = _item$key === void 0 ? index : _item$key,
onClick = item.onClick,
panelClassName = item.panelClassName,
tabClassName = item.tabClassName,
title = item.title;
var selected = selectedTabKey === key;
var payload = {
disabled: disabled,
key: key,
selected: selected,
tabIndex: tabIndex
};
var tabPayload = _objectSpread(_objectSpread({}, payload), {}, {
className: tabClassName,
onClick: onClick,
title: title
});
var panelPayload = _objectSpread(_objectSpread({}, payload), {}, {
className: panelClassName,
content: content,
getContent: getContent
});
var tabWidth = tabDimensions[key] ? tabDimensions[key].width : 0;
tabIndex += 1;
var isTabVisible = // initial call
!blockWidth || tabsTotalWidth === 0 || tabWidth === 0 || // posibily re render from a items.prop change
// all tabs are fit into the block
tabWidth > 0 && blockWidth > tabsTotalWidth + WIDTH_OFFSET || // current tab fit into the block
tabWidth > 0 && availableWidth - tabWidth > WIDTH_OFFSET;
if (isTabVisible) {
result.tabsVisible.push(tabPayload);
} else {
result.tabsHidden.push(tabPayload);
if (selected && tabWidth > 0) {
// eslint-disable-next-line no-param-reassign
result.isSelectedTabHidden = true;
}
} // eslint-disable-next-line no-param-reassign
result.panels[key] = panelPayload;
availableWidth -= tabWidth;
return result;
}, {
isSelectedTabHidden: false,
panels: {},
tabsHidden: [],
tabsVisible: []
});
var sortedHiddenTabs = (0, _lodash.sortBy)(reducedItems.tabsHidden, ['key']);
var sortedVisibleTabs = (0, _lodash.sortBy)(reducedItems.tabsVisible, ['key']);
if (reducedItems.isSelectedTabHidden) {
var lastVisibleTab = reducedItems.tabsVisible[reducedItems.tabsVisible.length - 1];
var hiddenSelectedTab = (0, _lodash.find)(reducedItems.tabsHidden, {
selected: true
});
var hiddenSelectedTabIndex = (0, _lodash.findIndex)(reducedItems.tabsHidden, {
selected: true
});
reducedItems.tabsVisible.splice(reducedItems.tabsVisible.length - 1, 1, hiddenSelectedTab);
reducedItems.tabsHidden.splice(hiddenSelectedTabIndex, 1, lastVisibleTab);
sortedHiddenTabs = (0, _lodash.sortBy)(reducedItems.tabsHidden, ['key']);
sortedVisibleTabs = (0, _lodash.sortBy)(reducedItems.tabsVisible, ['key']);
var reSortedItems = [].concat(_toConsumableArray(reducedItems.tabsVisible), _toConsumableArray(sortedHiddenTabs)).filter(function (tab) {
return !!tab;
}) // makes sure there's no undefined tab when several resize events happen rapidly
.map(function (tab) {
return (0, _lodash.find)(items, {
key: tab.key
});
});
this.setState({
items: reSortedItems
});
}
reducedItems = _objectSpread(_objectSpread({}, reducedItems), {}, {
isSelectedTabHidden: false,
tabsHidden: sortedHiddenTabs,
tabsVisible: sortedVisibleTabs
});
return reducedItems;
}
}, {
key: "getTabProps",
value: function getTabProps() {
var _this3 = this;
var tab = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var classes = this.props.classes;
var className = tab.className,
collapsed = tab.collapsed,
disabled = tab.disabled,
key = tab.key,
onClick = tab.onClick,
selected = tab.selected,
tabIndex = tab.tabIndex,
title = tab.title;
return {
children: title,
classNames: this.getClassNamesFor('tab', {
className: className,
collapsed: collapsed,
disabled: disabled,
selected: selected,
tabIndex: tabIndex
}),
classes: classes,
id: PREFIX_TAB + key,
key: PREFIX_TAB + key,
originalKey: key,
onClick: onClick,
onChange: this.onChangeTab,
ref: function ref(_ref2) {
_this3.tabRefs[PREFIX_TAB + key] = _ref2;
},
selected: selected,
setSelectedTabDimensions: this.setSelectedTabDimensions
};
}
}, {
key: "getPanelProps",
value: function getPanelProps(panel, isHidden) {
var className = panel.className,
content = panel.content,
getContent = panel.getContent,
key = panel.key;
return {
getContent: getContent,
children: content,
key: CONTENT_PREFIX + key,
id: CONTENT_PREFIX + key,
tabId: PREFIX_TAB + key,
classNames: this.getClassNamesFor('content', {
className: className,
isHidden: isHidden
}),
isHidden: isHidden
};
}
}, {
key: "getClassNamesFor",
value: function getClassNamesFor(type, itemStates) {
var _ClassNames;
var classes = this.props.classes;
var _itemStates$className = itemStates.className,
className = _itemStates$className === void 0 ? '' : _itemStates$className,
disabled = itemStates.disabled,
selected = itemStates.selected,
tabIndex = itemStates.tabIndex;
switch (type) {
case 'tab':
return (0, _classnames["default"])(classes.sectionalTab, "".concat(_constants.BEM_NAVIGATION_TAB_ROOT_CLASS), className, (_ClassNames = {}, _defineProperty(_ClassNames, "".concat(_constants.BEM_NAVIGATION_TAB_ROOT_CLASS, "--first"), !tabIndex), _defineProperty(_ClassNames, "".concat(_constants.BEM_NAVIGATION_TAB_ROOT_CLASS, "--selected"), selected), _defineProperty(_ClassNames, "".concat(_constants.BEM_NAVIGATION_TAB_ROOT_CLASS, "--disabled"), disabled), _ClassNames));
case 'content':
return (0, _classnames["default"])(classes.sectionalTabsPanelContent, "".concat(_constants.BEM_NAVIGATION_SECTIONAL_TABS, "--content"), className);
default:
return '';
}
}
}, {
key: "getSelectedTabKey",
value: function getSelectedTabKey() {
var items = this.props.items;
var selectedTabKey = this.state.selectedTabKey;
if (!selectedTabKey) {
if (!items[0]) {
return undefined;
}
return items[0].key;
}
return selectedTabKey;
}
}, {
key: "getExpandedTabs",
value: function getExpandedTabs(panels, selectedTabKey) {
if (panels[selectedTabKey]) {
// eslint-disable-next-line react/jsx-props-no-spreading
return /*#__PURE__*/_react["default"].createElement(_sectionalTabContent["default"], this.getPanelProps(panels[selectedTabKey]));
}
return null;
}
}, {
key: "render",
value: function render() {
var _this4 = this,
_selectedTabDimension;
var _this$props3 = this.props,
classes = _this$props3.classes,
withContent = _this$props3.withContent;
var selectedTabDimensions = this.state.selectedTabDimensions;
var _this$getTabs = this.getTabs(),
panels = _this$getTabs.panels,
tabsHidden = _this$getTabs.tabsHidden,
tabsVisible = _this$getTabs.tabsVisible;
var selectedTabKey = this.getSelectedTabKey();
var rootClasses = (0, _classnames["default"])(classes.root, "".concat(_constants.BEM_NAVIGATION_SECTIONAL_TABS, "--container"));
var tabsClasses = (0, _classnames["default"])(classes.sectionalTabsPanel, "".concat(_constants.BEM_NAVIGATION_SECTIONAL_TABS, "--panel"));
var hiddenTabsDropDown = tabsHidden.length > 0 && /*#__PURE__*/_react["default"].createElement(_dropdownButton["default"], {
iconType: "ellipsis-h",
optionsTheme: "light",
color: "transparent"
}, tabsHidden.map(function (tab) {
var _this4$getTabProps = _this4.getTabProps(tab),
children = _this4$getTabProps.children,
_onClick = _this4$getTabProps.onClick,
originalKey = _this4$getTabProps.originalKey;
return /*#__PURE__*/_react["default"].createElement(_dropdownButton["default"].Option, {
id: originalKey,
key: originalKey,
label: children,
onClick: function onClick(event, clickedTabKey) {
if ((0, _lodash.isFunction)(_onClick)) {
_onClick(tab);
}
_this4.onChangeTab(clickedTabKey);
}
}, children);
}));
var indicatorStyle = {
left: (_selectedTabDimension = selectedTabDimensions === null || selectedTabDimensions === void 0 ? void 0 : selectedTabDimensions.left) !== null && _selectedTabDimension !== void 0 ? _selectedTabDimension : 0,
width: (selectedTabDimensions === null || selectedTabDimensions === void 0 ? void 0 : selectedTabDimensions.width) ? selectedTabDimensions.width : 0
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses,
ref: function ref(_ref3) {
_this4.tabsWrapperRef = _ref3;
},
role: "presentation"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: tabsClasses
}, tabsVisible.reduce(function (result, tab) {
result.push( /*#__PURE__*/_react["default"].createElement(_sectionalTab["default"] // eslint-disable-next-line react/jsx-props-no-spreading
, _this4.getTabProps(tab)));
return result;
}, []), /*#__PURE__*/_react["default"].createElement("span", {
className: classes.indicator,
style: _objectSpread({}, indicatorStyle)
}), hiddenTabsDropDown), withContent && this.getExpandedTabs(panels, selectedTabKey), /*#__PURE__*/_react["default"].createElement(_reactResizeDetector["default"], {
handleWidth: true,
onResize: this.onResizeThrottled
}));
}
}]);
return SectionalTabs;
}(_react.Component);
SectionalTabs.propTypes = propTypes;
SectionalTabs.defaultProps = defaultProps;
var SectionalTabsWithStyles = (0, _withStyles["default"])(styles, {
withTheme: true
})(SectionalTabs);
var _default = SectionalTabsWithStyles;
exports["default"] = _default;