adding isVertical option

Author: dev-javascript

README.md

@@ -31,6 +31,7 @@ React Dynamic Tabs with full API
   - [tabComponent](#tabComponent)
   - [defaultPanelComponent](#defaultPanelComponent)
   - [accessibility](#accessibility)
+  - [isVertical](#isVertical)
   - [onLoad](#onLoad)
   - [onInit](#onInit)
   - [onChange](#onChange)
@@ -386,6 +387,31 @@ if (instance.getOption('accessibility') == true) {
 
 This option assigns id attribute on panel element and button element inside the tab. for having elements without id attribute, set this option to false.
 
+### isVertical
+
+<table>
+  <tbody>
+    <tr>
+      <th>type</th>
+      <th>default value</th>
+      <th>required</th>
+      <th>description</th>
+    </tr>
+    <tr>
+      <td>boolean</td>
+      <td>false</td>
+      <td>false</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
+
+**Example**
+
+```js
+const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
+```
+
 ### onLoad
 
 <table>

src/panelList/panelList.js

@@ -6,7 +6,11 @@ const PanelList = memo(
     const {openTabIDs, selectedTabID} = React.useContext(StateContext),
       api = React.useContext(ApiContext),
       setting = api.optionsManager.setting,
-      className = setting.panellistClass + ' ' + setting[api.getOption('direction') + 'Class'];
+      options = api.optionsManager.options;
+    let className = setting.panellistClass + ' ' + setting[options.direction + 'Class'];
+    if (options.isVertical) {
+      className += ' ' + setting.verticalClass;
+    }
     return (
       <div className={className}>
         {openTabIDs.map((id) => (

src/tabList/tablistPropsManager.js

@@ -4,6 +4,9 @@ export default function ({api}) {
     result = {
       className: _setting.tablistClass + ' ' + _setting[_op.direction + 'Class'],
     };
+  if (_op.isVertical) {
+    result.className += ' ' + _setting.verticalClass;
+  }
   if (_op.accessibility) {
     result.role = 'tablist';
   }

src/utils/api/optionManager/defaultOptions.js

@@ -25,6 +25,7 @@ DefaultOptions.prototype._getOptions = function () {
     onDestroy: function () {},
     onInit: function () {},
     accessibility: true,
+    isVertical: false,
     defaultPanelComponent: function defaultPanelComponent() {
       return <div></div>;
     },

src/utils/api/optionManager/defaultOptions.test.js

@@ -15,6 +15,7 @@ describe('DefaultOptions.prototype.getOptions : ', () => {
       onDestroy: expect.any(Function),
       onInit: expect.any(Function),
       accessibility: true,
+      isVertical: false,
       defaultPanelComponent: expect.any(Function),
       direction: 'ltr',
       tabComponent: expect.any(Function),

src/utils/api/optionManager/optionManager.factory.js

@@ -85,6 +85,7 @@ OptionManager.prototype._setSetting = function () {
     disableClass: 'rc-dyn-tabs-disable',
     ltrClass: 'rc-dyn-tabs-ltr',
     rtlClass: 'rc-dyn-tabs-rtl',
+    verticalClass: 'rc-dyn-tabs-vertical',
     panelIdTemplate: (id) => `rc-dyn-tabs-p-${id}`,
     ariaLabelledbyIdTemplate: (id) => `rc-dyn-tabs-l-${id}`,
     getDefaultTabData: () => {

src/utils/api/optionManager/optionManager.test.js

@@ -57,6 +57,7 @@ describe('OptionManager constructor : ', () => {
       disableClass: 'rc-dyn-tabs-disable',
       ltrClass: 'rc-dyn-tabs-ltr',
       rtlClass: 'rc-dyn-tabs-rtl',
+      verticalClass: 'rc-dyn-tabs-vertical',
       panelIdTemplate: expect.any(Function),
       ariaLabelledbyIdTemplate: expect.any(Function),
       getDefaultTabData: expect.any(Function),