adding new option tablistStyle

Author: dev-javascript

.npmignore

@@ -3,28 +3,22 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
 # production
-webpack*
-rollup*
-.babelrc.js
+/.github
 
 #development
 /build
 /sandbox
 
 #demo
 /example
-index.html
 /demo
 
 # testing
 /coverage
 
 # misc
-.DS_Store
 .env.local
 .env.development.local
 .env.test.local

README.md

@@ -4,12 +4,12 @@ React Dynamic Tabs with full API
 
 [![Test coverage](https://codecov.io/gh/dev-javascript/react-dyn-tabs/graph/badge.svg?token=GT1LU074L2)](https://codecov.io/gh/dev-javascript/react-dyn-tabs) [![NPM version](http://img.shields.io/npm/v/react-dyn-tabs.svg?style=flat-square)](https://www.npmjs.com/package/react-dyn-tabs) [![node](https://img.shields.io/badge/node.js-%3E=_8.0-green.svg?style=flat-square)](http://nodejs.org/download/) [![React](https://img.shields.io/badge/React-%3E=_16.8.0-green.svg?style=flat-square)](https://react.dev/) [![License](http://img.shields.io/npm/l/react-dyn-tabs.svg?style=flat-square)](LICENSE) [![npm download](https://img.shields.io/npm/dm/react-dyn-tabs.svg?style=flat-square)](https://npmjs.org/package/react-dyn-tabs) [![Build Status](https://travis-ci.org/ly-components/react-dyn-tabs.png)](https://travis-ci.org/ly-components/react-dyn-tabs)
 
-
 ## Screenshot
 
 ![Screenshot](https://github.com/user-attachments/assets/15a0860d-168d-4f21-8b9d-62fcec3f6ccf)
 
 ## Demo
+
 - [Online Demo](https://dev-javascript.github.io/react-dyn-tabs/)
 
 ## Features
@@ -42,6 +42,7 @@ React Dynamic Tabs with full API
   - [accessibility](#accessibility)
   - [isVertical](#isvertical)
   - [theme](#theme)
+  - [tablistStyle](#tabliststyle)
   - [onLoad](#onload)
   - [onInit](#oninit)
   - [onChange](#onchange)
@@ -479,6 +480,33 @@ const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
   useDynTabs({theme:'classic'});
   ```
 
+### tablistStyle
+
+<table>
+  <tbody>
+    <tr>
+      <th>type</th>
+      <th>default value</th>
+      <th>required</th>
+      <th>description</th>
+    </tr>
+    <tr>
+      <td>object</td>
+      <td>{}</td>
+      <td>no</td>
+      <td>sets the style object for root element of Tablist</td>
+    </tr>
+  </tbody>
+</table>
+
+**Example**
+
+```js
+const [TabList, PanelList, ready] = useDynTabs({
+  tablistStyle: {backgroundColor: 'blue'},
+});
+```
+
 ### onLoad
 
 <table>

src/tablistView/__snapshots__/tablistView.test.js.snap

@@ -4,6 +4,7 @@ exports[`TabListView structure :  children props 1`] = `
 <div>
   <div
     className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
+    style={{}}
   >
     <div
       className="rc-dyn-tabs-tablist-container"
@@ -16,6 +17,7 @@ exports[`TabListView structure :  default options 1`] = `
 <div>
   <div
     className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
+    style={{}}
   />
 </div>
 `;
@@ -24,6 +26,7 @@ exports[`TabListView structure :  isVertical option 1`] = `
 <div>
   <div
     className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr rc-dyn-tabs-vertical all-themes"
+    style={{}}
   />
 </div>
 `;
@@ -32,6 +35,20 @@ exports[`TabListView structure :  rtl option 1`] = `
 <div>
   <div
     className="rc-dyn-tabs-tablist-view rc-dyn-tabs-rtl all-themes"
+    style={{}}
+  />
+</div>
+`;
+
+exports[`TabListView structure :  style option 1`] = `
+<div>
+  <div
+    className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
+    style={
+      {
+        "backgroundColor": "red",
+      }
+    }
   />
 </div>
 `;

src/tablistView/tablistView.js

@@ -8,7 +8,12 @@ export const tablistViewPropsManager = function (ins) {
   if (themeName) {
     className += ' ' + themeName;
   }
-  return {className};
+  const tablistStyle = ins.getOption('tablistStyle') || {};
+  const result = {className};
+  if (typeof tablistStyle === 'object') {
+    result.style = tablistStyle;
+  }
+  return result;
 };
 export default TablistView.bind(undefined, (ins) => ({
   tablistViewPropsManager: () => tablistViewPropsManager(ins),

src/tablistView/tablistView.test.js

@@ -70,4 +70,15 @@ describe('TabListView structure : ', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test('style option', () => {
+    setMockUseContext({tablistStyle: {backgroundColor: 'red'}});
+    const tree = renderer
+      .create(
+        <div>
+          <TablistView></TablistView>
+        </div>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/utils/api/optionManager/defaultOptions.js

@@ -16,6 +16,7 @@ export default Helper.module(
         tabs: [],
         selectedTabID: '',
         theme: 'all-themes',
+        tablistStyle: {},
         beforeSelect: function () {
           return true;
         },

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

@@ -6,6 +6,7 @@ describe('DefaultOptions.prototype.getOptions : ', () => {
       tabs: [],
       selectedTabID: '',
       theme: 'all-themes',
+      tablistStyle: {},
       beforeSelect: expect.any(Function),
       beforeClose: expect.any(Function),
       onOpen: expect.any(Function),