react-dyn-tabs/lib/esm/utils/api/optionManager/optionManager.factory.js

React dynamic tabs with full API

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); }
import React from 'react';
import Helper from '../../helper.js';
var missingParamEr = Helper.throwMissingParam,
  uuid = Helper.uuid;
export default Helper.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.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;
  }
});