react-dyn-tabs
Version:
React dynamic tabs with full API
128 lines (127 loc) • 4.93 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _helper = _interopRequireDefault(require("../../helper.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var missingParamEr = _helper["default"].throwMissingParam,
uuid = _helper["default"].uuid;
var _default = exports["default"] = _helper["default"].module(function (getDeps, _ref) {
var options = _ref.options;
var _getDeps = getDeps(),
globalDefaultOptions = _getDeps.globalDefaultOptions;
this._defaultOptions = globalDefaultOptions;
this._validateOptions(options);
this.options = Object.assign({}, this._defaultOptions, options);
this.setting = {};
this.initialState = {};
this.initialTabs = [];
this._setSetting()._setInitialData();
}, {
getOption: function getOption(optionName) {
if (optionName === 'tabs') {
// returned result should be immutable
var arr = [];
for (var i = 0, tabs = this.options.tabs, l = tabs.length; i < l; i++) {
arr.push(_extends({}, tabs[i]));
}
return arr;
}
return this.options[optionName];
},
setOption: function setOption(name, value) {
if (name === void 0) {
name = missingParamEr('setOption');
}
if (value === void 0) {
value = missingParamEr('setOption');
}
if (['SELECTEDTABID', 'TABS'].indexOf(name.toUpperCase()) >= 0) return this;
this.options[name] = value;
return this;
},
validatePanelComponent: function validatePanelComponent(tabData) {
// convert panel element into a function component.
if (tabData.panelComponent && typeof tabData.panelComponent !== 'function' && /*#__PURE__*/_react["default"].isValidElement(tabData.panelComponent)) {
var PanelElement = tabData.panelComponent;
tabData.panelComponent = function () {
return PanelElement;
};
}
return this;
},
validateObjectiveTabData: function validateObjectiveTabData(tabData) {
if (Object.prototype.toString.call(tabData) !== '[object Object]') throw new Error('tabData must be type of Object');
return this;
},
validateTabData: function validateTabData(tabData) {
this.validateObjectiveTabData(tabData).validatePanelComponent(tabData);
tabData = Object.assign(this.setting.getDefaultTabData(), tabData);
tabData.id = tabData.id + ''; //make sure id is string
return tabData;
},
_validateOptions: function _validateOptions(options) {
if (Object.prototype.toString.call(options) !== '[object Object]') throw 'Invalid argument in "useDynamicTabs" function. Argument must be type of an object';
return this;
},
_setInitialData: function _setInitialData() {
var _this = this;
// set this.initialTabs and this.initialState
var _this$options = this.options,
selectedTabID = _this$options.selectedTabID,
tabs = _this$options.tabs,
openTabIDs = [];
tabs.forEach(function (tab) {
var newTab = _this.validateTabData(tab);
_this.initialTabs.push(newTab);
openTabIDs.push(newTab.id);
});
this.initialState = {
selectedTabID: selectedTabID + '',
//make sure it is type of string
openTabIDs: openTabIDs
};
return this;
},
_setSetting: function _setSetting() {
var _this2 = this;
this.setting = {
tabClass: 'rc-dyn-tabs-tab',
titleClass: 'rc-dyn-tabs-title',
iconClass: 'rc-dyn-tabs-icon',
selectedClass: 'rc-dyn-tabs-selected',
hoverClass: 'rc-dyn-tabs-hover',
closeClass: 'rc-dyn-tabs-close',
panelClass: 'rc-dyn-tabs-panel',
panellistClass: 'rc-dyn-tabs-panellist',
disableClass: 'rc-dyn-tabs-disable',
ltrClass: 'rc-dyn-tabs-ltr',
rtlClass: 'rc-dyn-tabs-rtl',
verticalClass: 'rc-dyn-tabs-vertical',
tablistViewClass: 'rc-dyn-tabs-tablist-view',
tablistContainerClass: 'rc-dyn-tabs-tablist-container',
tablistOverflowClass: 'rc-dyn-tabs-tablist-overflow',
tablistClass: 'rc-dyn-tabs-tablist',
panelIdTemplate: function panelIdTemplate(id) {
return "rc-dyn-tabs-p-" + id;
},
ariaLabelledbyIdTemplate: function ariaLabelledbyIdTemplate(id) {
return "rc-dyn-tabs-l-" + id;
},
getDefaultTabData: function getDefaultTabData() {
return {
title: '',
tooltip: '',
panelComponent: _this2.options.defaultPanelComponent,
closable: true,
iconClass: '',
disable: false,
lazy: false,
id: "tab_" + uuid()
};
}
};
return this;
}
});