Skip to content

Commit c64986e

Browse files
adding new option tablistStyle
1 parent 7565ce1 commit c64986e

File tree

7 files changed

+66
-9
lines changed

7 files changed

+66
-9
lines changed

.npmignore

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,22 @@
33

44
# dependencies
55
/node_modules
6-
/.pnp
7-
.pnp.js
86

97
# production
10-
webpack*
11-
rollup*
12-
.babelrc.js
8+
/.github
139

1410
#development
1511
/build
1612
/sandbox
1713

1814
#demo
1915
/example
20-
index.html
2116
/demo
2217

2318
# testing
2419
/coverage
2520

2621
# misc
27-
.DS_Store
2822
.env.local
2923
.env.development.local
3024
.env.test.local

README.md

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ React Dynamic Tabs with full API
44

55
[![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)
66

7-
87
## Screenshot
98

109
![Screenshot](https://github.com/user-attachments/assets/15a0860d-168d-4f21-8b9d-62fcec3f6ccf)
1110

1211
## Demo
12+
1313
- [Online Demo](https://dev-javascript.github.io/react-dyn-tabs/)
1414

1515
## Features
@@ -42,6 +42,7 @@ React Dynamic Tabs with full API
4242
- [accessibility](#accessibility)
4343
- [isVertical](#isvertical)
4444
- [theme](#theme)
45+
- [tablistStyle](#tabliststyle)
4546
- [onLoad](#onload)
4647
- [onInit](#oninit)
4748
- [onChange](#onchange)
@@ -479,6 +480,33 @@ const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
479480
useDynTabs({theme:'classic'});
480481
```
481482

483+
### tablistStyle
484+
485+
<table>
486+
<tbody>
487+
<tr>
488+
<th>type</th>
489+
<th>default value</th>
490+
<th>required</th>
491+
<th>description</th>
492+
</tr>
493+
<tr>
494+
<td>object</td>
495+
<td>{}</td>
496+
<td>no</td>
497+
<td>sets the style object for root element of Tablist</td>
498+
</tr>
499+
</tbody>
500+
</table>
501+
502+
**Example**
503+
504+
```js
505+
const [TabList, PanelList, ready] = useDynTabs({
506+
tablistStyle: {backgroundColor: 'blue'},
507+
});
508+
```
509+
482510
### onLoad
483511

484512
<table>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ exports[`TabListView structure : children props 1`] = `
44
<div>
55
<div
66
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
7+
style={{}}
78
>
89
<div
910
className="rc-dyn-tabs-tablist-container"
@@ -16,6 +17,7 @@ exports[`TabListView structure : default options 1`] = `
1617
<div>
1718
<div
1819
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
20+
style={{}}
1921
/>
2022
</div>
2123
`;
@@ -24,6 +26,7 @@ exports[`TabListView structure : isVertical option 1`] = `
2426
<div>
2527
<div
2628
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr rc-dyn-tabs-vertical all-themes"
29+
style={{}}
2730
/>
2831
</div>
2932
`;
@@ -32,6 +35,20 @@ exports[`TabListView structure : rtl option 1`] = `
3235
<div>
3336
<div
3437
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-rtl all-themes"
38+
style={{}}
39+
/>
40+
</div>
41+
`;
42+
43+
exports[`TabListView structure : style option 1`] = `
44+
<div>
45+
<div
46+
className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
47+
style={
48+
{
49+
"backgroundColor": "red",
50+
}
51+
}
3552
/>
3653
</div>
3754
`;

src/tablistView/tablistView.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ export const tablistViewPropsManager = function (ins) {
88
if (themeName) {
99
className += ' ' + themeName;
1010
}
11-
return {className};
11+
const tablistStyle = ins.getOption('tablistStyle') || {};
12+
const result = {className};
13+
if (typeof tablistStyle === 'object') {
14+
result.style = tablistStyle;
15+
}
16+
return result;
1217
};
1318
export default TablistView.bind(undefined, (ins) => ({
1419
tablistViewPropsManager: () => tablistViewPropsManager(ins),

src/tablistView/tablistView.test.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,15 @@ describe('TabListView structure : ', () => {
7070
.toJSON();
7171
expect(tree).toMatchSnapshot();
7272
});
73+
test('style option', () => {
74+
setMockUseContext({tablistStyle: {backgroundColor: 'red'}});
75+
const tree = renderer
76+
.create(
77+
<div>
78+
<TablistView></TablistView>
79+
</div>,
80+
)
81+
.toJSON();
82+
expect(tree).toMatchSnapshot();
83+
});
7384
});

src/utils/api/optionManager/defaultOptions.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export default Helper.module(
1616
tabs: [],
1717
selectedTabID: '',
1818
theme: 'all-themes',
19+
tablistStyle: {},
1920
beforeSelect: function () {
2021
return true;
2122
},

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ describe('DefaultOptions.prototype.getOptions : ', () => {
66
tabs: [],
77
selectedTabID: '',
88
theme: 'all-themes',
9+
tablistStyle: {},
910
beforeSelect: expect.any(Function),
1011
beforeClose: expect.any(Function),
1112
onOpen: expect.any(Function),

0 commit comments

Comments
 (0)