alter propsManagers

Author: Mohsen Biglari

src/com/react-dynamic-tabs/panel/panel.js

@@ -6,7 +6,7 @@ const Panel = memo(function Panel(props) {
     React.useContext(ForceUpdateContext);
     const { id, selectedTabID } = props
         , api = useContext(ApiContext)
-        , panelProps = panelPropsManager.get({ isSelected: id === selectedTabID, api, id });
+        , panelProps = panelPropsManager({ isSelected: id === selectedTabID, api, id });
     return (
         <div {...panelProps}>
             {api.getTab(id).panelComponent}

src/com/react-dynamic-tabs/panel/panelPropsManager.js

@@ -1,29 +1,19 @@
-export default Object.create({
-    get: function (param) {
-        const { api } = param, { cssClasses, keyTemps } = api.getSetting();
-        Object.assign(param, { cssClasses, keyTemps, op: api.getOptions() });
-        return this._getA11Y(this._getSelected(this._getBase(param), param), param);
-    },
-    _getBase: function ({ id, cssClasses }) {
-        return {
+export default function ({ isSelected, api, id }) {
+    const op = api.optionsManager.options, setting = api.optionsManager.setting
+        , result = {
             'tab-id': id,
-            className: cssClasses.panel,
+            className: setting.panelClass,
         };
-    },
-    _getSelected: function (obj, { isSelected, cssClasses }) {
-        if (isSelected) {
-            const { selected } = cssClasses;
-            obj.className += ` ${selected}`;
-        };
-        return obj;
-    },
-    _getA11Y: function (obj, { op, isSelected, id, keyTemps }) {
-        if (op.accessibility && (!op.isCustomTabComponent)) {
-            obj.role = 'tabpanel';
-            obj.id = keyTemps.panel(id);
-            obj['aria-hidden'] = isSelected ? false : true;
-            obj['aria-labelledby'] = keyTemps.ariaLabelledby(id);
-        };
-        return obj;
-    }
-});
+    // check if it is selected
+    if (isSelected) {
+        result.className += ` ${setting.selectedClass}`;
+    };
+    // check if accessibility is enable
+    if (op.accessibility) {
+        result.role = 'tabpanel';
+        result.id = setting.panelIdTemplate(id);
+        result['aria-hidden'] = isSelected ? false : true;
+        result['aria-labelledby'] = setting.ariaLabelledbyIdTemplate(id);
+    };
+    return result;
+};

src/com/react-dynamic-tabs/panelList/panelList.js

@@ -5,8 +5,8 @@ import { ApiContext, StateContext } from '../utils/context.js';
 const PanelList = memo(function PanelList(props) {
     const { openTabIDs, selectedTabID } = React.useContext(StateContext)
         , api = React.useContext(ApiContext)
-        , { cssClasses, cssClasses: { panellist } } = api.getSetting()
-        , className = panellist + ' ' + cssClasses[api.getOptions().direction];
+        , setting = api.optionsManager.setting
+        , className = setting.panellistClass + ' ' + setting[api.getOption('direction') + 'class'];
     return (
         <div className={className}>
             {openTabIDs.map(id =>

src/com/react-dynamic-tabs/tab/defaulTabInner.js

@@ -1,10 +1,10 @@
 import React from "react";
 const DefaulTabInner = function (props) {
     return (
-        <button {...props.txtWidgetProps}>
+        <button  {...props.tabProps}>
             {props.children}
             {
-                props.iconProps &&
+                props.hasOwnProperty('iconProps') &&
                 <span {...props.iconProps}></span>
             }
         </button>

src/com/react-dynamic-tabs/tab/tab.js

@@ -1,23 +1,27 @@
 import React, { memo } from "react";
 import "./index.css";
 import { ApiContext, ForceUpdateContext } from "../utils/context.js";
-import propsManager from './tabPropsManager';
+import TabPropsManager from './tabPropsManager.js';
 const Tab = memo(
     function Tab(props) {
         React.useContext(ForceUpdateContext);
         const { id, selectedTabID } = props
-            , api = React.useContext(ApiContext), op = api.getOptions(), tabObj = api.getTab(id)
-            , propsManagerParam = { api, id, isSelected: selectedTabID === id }
-            , clkHandler = function (e) { api.eventHandlerFactory({ e, id }); }
-            , TabInnerComponent = op.tabComponent;
+            , api = React.useContext(ApiContext);
+        const TabInnerComponent = api.getOption('tabComponent');
+        if (!TabInnerComponent) {
+            debugger;
+        }
+        const tabObj = api.getTab(id)
+            , propsManager = new TabPropsManager({ api, id, isSelected: selectedTabID === id })
+            , clkHandler = function (e) { api.eventHandlerFactory({ e, id }); };
         return (
-            <li {...propsManager.getTabProps(propsManagerParam)} onClick={e => { clkHandler(e); }}>
-                <TabInnerComponent {...propsManager.getTabInnerProps(propsManagerParam)}>
+            <li {...propsManager.getTabProps()} onClick={e => { clkHandler(e); }}>
+                <TabInnerComponent {...propsManager.getTabInnerProps()}>
                     {tabObj.title}
                 </TabInnerComponent>
                 {
                     tabObj.closable ?
-                        (<span {...propsManager.getTabCloseIconProps(propsManagerParam)} >&times;</span>) : null
+                        (<span {...propsManager.getCloseIconProps()} >&times;</span>) : null
                 }
             </li>
         );

src/com/react-dynamic-tabs/tab/tabPropsManager.js

@@ -0,0 +1,73 @@
+const TabPropsManager = function ({ api, id, isSelected }) {
+    this._api = api;
+    this._id = id;
+    this._isSelected = isSelected;
+    this._op = api.optionsManager.options;
+    this._setting = api.optionsManager.setting;
+    this._tabObj = api.getTab(id);
+};
+TabPropsManager.prototype.getTabProps = function () {
+    const outputProps = {
+        'tab-id': this._id,
+        className: this._setting.tabClass,
+        tabIndex: -1
+    };
+
+    //check if tab is selected
+    if (this._isSelected) {
+        outputProps.tabIndex = 0;
+        outputProps.className += ` ${this._setting.selectedClass}`;
+    }
+
+    // check if tab is disable
+    if (this._tabObj.disable) {
+        outputProps.tabIndex = -1;
+        outputProps.className += ` ${this._setting.disableClass}`;
+    }
+
+    // check if accessibility option is enable
+    if (this._op.accessibility) {
+        outputProps.role = 'tab';
+        outputProps['aria-controls'] = this._setting.panelIdTemplate(this._id);
+        outputProps['aria-labelledby'] = this._setting.ariaLabelledbyIdTemplate(this._id);
+        outputProps['aria-selected'] = outputProps['aria-expanded'] = this._isSelected;
+    }
+    return outputProps;
+};
+TabPropsManager.prototype.getTabInnerProps = function () {
+    const outputProps = {
+        id: this._id,
+        isSelected: this._isSelected,
+        api: this._api.userProxy,
+        tabProps: {
+            'tab-id': this._id,
+            className: this._setting.titleClass,
+            tabIndex: -1
+        }
+    };
+    // check if there is a iconClass option
+    if (this._tabObj.iconClass) {
+        outputProps.iconProps = {
+            className: this._setting.iconClass + ' ' + this._tabObj.iconClass,
+            role: 'presentation'
+        };
+    }
+
+    // check if accessibility option is enable
+    if (this._op.accessibility) {
+        outputProps.tabProps.id = this._setting.ariaLabelledbyIdTemplate(this._id);
+        outputProps.tabProps.role = 'presentation';
+    }
+    return outputProps;
+};
+TabPropsManager.prototype.getCloseIconProps = function () {
+    const outputProps = {
+        className: this._setting.closeClass
+    };
+    // check if accessibility option is enable
+    if (this._op.accessibility) {
+        outputProps.role = 'presentation';
+    }
+    return outputProps;
+};
+export default TabPropsManager;

src/com/react-dynamic-tabs/tab/tabPropsManager/defaultTabInnerProps.js

@@ -6,7 +6,7 @@ import tablistPropsManager from './tablistPropsManager.js';
 const TabList = memo(function TabList(props) {
     const { openTabIDs, selectedTabID } = React.useContext(StateContext)
         , api = React.useContext(ApiContext)
-        , tablistProps = tablistPropsManager.get({ api });
+        , tablistProps = tablistPropsManager({ api });
     return (
         <ul {...tablistProps}>
             {openTabIDs.map(id => <Tab key={id} id={id} selectedTabID={selectedTabID}></Tab>)}

src/com/react-dynamic-tabs/tab/tabPropsManager/index.js

@@ -1,15 +1,29 @@
-export default Object.create({
-    get: function (param) {
-        const { api } = param, { cssClasses } = api.getSetting();
-        Object.assign(param, { cssClasses, op: api.getOptions() });
-        return this._getA11Y(this._getBase(param), param);
-    },
-    _getBase: function ({ cssClasses, op }) {
-        return { className: cssClasses.tablist + ' ' + cssClasses[op.direction] };
-    },
-    _getA11Y: function (obj, { op }) {
-        if (op.accessibility && (!op.isCustomTabComponent))
-            obj.role = 'tablist';
-        return obj;
+export default function ({ api }) {
+    const _setting = api.optionsManager.setting
+        , _op = api.optionsManager.options
+        , result = {
+            className: _setting.tablistClass + ' ' + _setting[_op.direction + 'class']
+        };
+    if (_op.accessibility) {
+        result.role = 'tablist';
     }
-});
+    return result;
+};
+// Object.create({
+//     get: function ({ api }) {
+//         this._setting = api.optionsManager. ;
+//         this._op = api.optionsManager.options;
+//         return this._getA11Y(this._getBase());
+//     },
+//     _getBase: function () {
+//         return {
+//             className: this._setting.tablistClass + ' ' +
+//                 this._setting[this._op.direction + 'class']
+//         };
+//     },
+//     _getA11Y: function (obj) {
+//         if (this._op.accessibility)
+//             obj.role = 'tablist';
+//         return obj;
+//     }
+// });