` element. E.g className, style, title, data attributes, etc.
78 |
79 | The following props are reserved: id, role, aria-expanded, aria-hidden, aria-labelledby, hidden.
80 |
81 | ```js
82 |
88 | My tab panel
89 |
90 | ```
91 |
--------------------------------------------------------------------------------
/docs/api/TabProvider.md:
--------------------------------------------------------------------------------
1 | # `
`
2 |
3 | A Higher Order Component (HOC) that provides the tab selection functionality.
4 |
5 | ```js
6 | import { TabProvider } from 'react-web-tabs'
7 |
8 |
9 |
10 | ...
11 |
12 |
13 | ```
14 |
15 | ## children: node
16 |
17 | A single child node.
18 |
19 | ```js
20 |
21 |
22 | ...
23 |
24 |
25 | ```
26 |
27 | ## defaultTab: string (optional)
28 |
29 | The id of the tab that should be selected by default. If none is provided it will be the first tab.
30 |
31 | ```js
32 |
33 |
34 |
35 | Tab 1
36 | Tab 2
37 |
38 |
39 | Tab 1 content
40 |
41 |
42 | Tab 2 content
43 |
44 |
46 | ```
47 |
48 | ## vertical: bool (optional)
49 |
50 | Provides support for vertically aligned tabs. Correct aria-attributes will be set and keyboard shortcuts will change from right/left arrow to up/down arrow.
51 |
52 | ## collapsible: bool (optional)
53 |
54 | Provides support for deselection of current tab. If an active tab is selected it will be deselected.
55 |
56 | ## onChange: func (optional)
57 |
58 | A callback that is triggered when a new tab has been selected.
59 |
60 | ```js
61 | { console.log(tabId) }}>
62 |
63 | ...
64 |
65 |
66 | ```
67 |
--------------------------------------------------------------------------------
/docs/api/Tabs.md:
--------------------------------------------------------------------------------
1 | # ``
2 |
3 | A Tabs container element that uses the `` behind the scenes.
4 |
5 | ```js
6 | import { Tabs } from 'react-web-tabs'
7 |
8 | { console.log(tabId) }}>
9 |
10 | Tab 1
11 | Tab 2
12 |
13 |
14 | Tab 1 content
15 |
16 |
17 | Tab 2 content
18 |
19 |
20 | ```
21 |
22 | ## children: node
23 |
24 | Any child node
25 |
26 | ```js
27 |
28 | Tab 1
29 | Tab 2
30 |
31 | ```
32 |
33 | ## defaultTab: string (optional)
34 |
35 | See ``.
36 |
37 | ## vertical: bool (optional)
38 |
39 | Adds the `data-rwt-vertical="true"` attribute and provides functionality for vertical tabs.
40 | See ``.
41 |
42 | ## collapsible: bool (optional)
43 |
44 | See ``.
45 |
46 | ## onChange: func (optional)
47 |
48 | See ``.
49 |
50 | ## props: mixed (optional)
51 |
52 | Any additional props that you can provide to a `` element. E.g className, style, title, data attributes, etc.
53 |
54 | ```js
55 |
60 | React web tabs
61 |
62 | ```
63 |
--------------------------------------------------------------------------------
/docs/examples/README.md:
--------------------------------------------------------------------------------
1 | # Examples
2 |
3 | * [Basic tabs](basic.md)
4 | * [Vertical tabs](vertical.md)
5 | * [Tabs with custom markup](custom_markup.md)
6 |
--------------------------------------------------------------------------------
/docs/examples/basic.md:
--------------------------------------------------------------------------------
1 | # Basic Tabs
2 |
3 | ```js
4 | import React, { Component } from 'react';
5 | import { render } from 'react-dom';
6 | import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';
7 |
8 |
9 | class MyBasicTabs extends Component {
10 | render() {
11 | return (
12 |
13 |
14 | Tab 1
15 | Tab 2
16 | Tab 3
17 |
18 |
19 | Tab 1 content
20 |
21 |
22 | Tab 2 content
23 |
24 |
25 | Tab 3 content
26 |
27 |
28 | );
29 | }
30 | }
31 |
32 | render(
13 |
14 |
15 | Tab 1
16 | •
17 | Tab 2
18 | •
19 | Tab 3
20 |
21 |
22 |
23 | Tab 1 content
24 |
25 |
26 | Tab 2 content
27 |
28 |
29 | Tab 3 content
30 |
31 |
33 |
34 | );
35 | }
36 | }
37 |
38 | render(
13 |
14 | Tab 1
15 | Tab 2
16 | Tab 3
17 |
18 |
19 | Tab 1 content
20 |
21 |
22 | Tab 2 content
23 |
24 |
25 | Tab 3 content
26 |
27 |
28 | );
29 | }
30 | }
31 |
32 | render( { this.tabComponent = e; }}
108 | >
109 | {children}
110 |
111 | );
112 | }
113 | }
114 |
115 |
116 | export default withTabSelection(Tab);
117 |
--------------------------------------------------------------------------------
/src/TabComponent.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class TabComponent extends Component {
5 | static defaultProps = {
6 | className: '',
7 | selected: false,
8 | focusable: false,
9 | onClick: undefined,
10 | onKeyDown: undefined,
11 | tabRef: undefined,
12 | }
13 |
14 | static propTypes = {
15 | tabFor: PropTypes.string.isRequired,
16 | children: PropTypes.node.isRequired,
17 | className: PropTypes.string,
18 | selected: PropTypes.bool,
19 | focusable: PropTypes.bool,
20 | onClick: PropTypes.func,
21 | onKeyDown: PropTypes.func,
22 | tabRef: PropTypes.func,
23 | }
24 |
25 | render() {
26 | const {
27 | tabFor,
28 | children,
29 | className,
30 | selected,
31 | focusable,
32 | tabRef,
33 | onClick,
34 | onKeyDown,
35 | ...props
36 | } = this.props;
37 |
38 | return (
39 |
51 | {children}
52 |
53 | );
54 | }
55 |
56 | }
57 |
58 | export default TabComponent;
59 |
--------------------------------------------------------------------------------
/src/TabList.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import TabListComponent from './TabListComponent';
4 | import withTabSelection from './withTabSelection';
5 |
6 | class TabList extends Component {
7 | static defaultProps = {
8 | className: '',
9 | }
10 |
11 | static propTypes = {
12 | selection: PropTypes.shape({
13 | isVertical: PropTypes.func.isRequired,
14 | }).isRequired,
15 | children: PropTypes.node.isRequired,
16 | className: PropTypes.string,
17 | }
18 |
19 | render() {
20 | const { selection, children, className, ...props } = this.props;
21 | const verticalOrientation = selection.isVertical();
22 |
23 | return (
24 |
29 | {children}
30 |
31 | );
32 | }
33 | }
34 |
35 |
36 | export default withTabSelection(TabList);
37 |
--------------------------------------------------------------------------------
/src/TabListComponent.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | /* eslint-disable jsx-a11y/role-supports-aria-props */
5 | class TabListComponent extends Component {
6 | static defaultProps = {
7 | className: '',
8 | verticalOrientation: false,
9 | }
10 |
11 | static propTypes = {
12 | children: PropTypes.node.isRequired,
13 | className: PropTypes.string,
14 | verticalOrientation: PropTypes.bool,
15 | }
16 |
17 | render() {
18 | const { children, className, verticalOrientation, ...props } = this.props;
19 |
20 | return (
21 |
27 | {children}
28 |
29 | );
30 | }
31 |
32 | }
33 |
34 | export default TabListComponent;
35 |
--------------------------------------------------------------------------------
/src/TabPanel.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import TabPanelComponent from './TabPanelComponent';
4 | import withTabSelection from './withTabSelection';
5 |
6 | /* eslint-disable no-nested-ternary */
7 | class TabPanel extends Component {
8 | static propTypes = {
9 | selection: PropTypes.shape({
10 | subscribe: PropTypes.func.isRequired,
11 | unsubscribe: PropTypes.func.isRequired,
12 | isSelected: PropTypes.func.isRequired,
13 | }).isRequired,
14 | tabId: PropTypes.string.isRequired,
15 | }
16 |
17 | constructor(props) {
18 | super(props);
19 | this.update = this.update.bind(this);
20 | }
21 |
22 | componentDidMount() {
23 | this.props.selection.subscribe(this.update);
24 | }
25 |
26 | componentWillUnmount() {
27 | this.props.selection.unsubscribe(this.update);
28 | }
29 |
30 | update() {
31 | this.forceUpdate();
32 | }
33 |
34 | render() {
35 | const {
36 | tabId,
37 | ...props
38 | } = this.props;
39 |
40 | const selected = this.props.selection.isSelected(tabId);
41 |
42 | return (
43 |
46 | {component ? (
47 | React.createElement(component, childProps)
48 | ) : render ? (
49 | render(childProps) : null
50 | ) : children ? (
51 | children : null
52 | ) : null}
53 |
54 | );
55 | }
56 |
57 | }
58 |
59 | export default TabPanelComponent;
60 |
--------------------------------------------------------------------------------
/src/TabProvider.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import TabSelection from './TabSelection';
4 |
5 |
6 | export const TabSelectionContext = React.createContext({
7 | selection: {},
8 | });
9 |
10 | class TabProvider extends Component {
11 | static defaultProps = {
12 | defaultTab: undefined,
13 | onChange: undefined,
14 | vertical: false,
15 | collapsible: false,
16 | }
17 |
18 | static propTypes = {
19 | children: PropTypes.node.isRequired,
20 | defaultTab: PropTypes.string,
21 | vertical: PropTypes.bool,
22 | collapsible: PropTypes.bool,
23 | onChange: PropTypes.func,
24 | }
25 |
26 | constructor(props) {
27 | super(props);
28 |
29 | this.selection = new TabSelection({
30 | defaultTab: props.defaultTab,
31 | vertical: props.vertical,
32 | collapsible: props.collapsible,
33 | onChange: props.onChange,
34 | });
35 | }
36 |
37 | componentWillReceiveProps(nextProps) {
38 | if (this.props.defaultTab !== nextProps.defaultTab && !this.selection.isSelected(nextProps.defaultTab)) {
39 | this.selection.select(nextProps.defaultTab);
40 | }
41 | }
42 |
43 | render() {
44 | const { children } = this.props;
45 | return (
46 |
47 | {children}
48 |
49 | );
50 | }
51 | }
52 |
53 | export default TabProvider;
54 |
--------------------------------------------------------------------------------
/src/TabSelection.js:
--------------------------------------------------------------------------------
1 | class TabSelection {
2 | constructor({ defaultTab, vertical = false, collapsible = false, onChange } = {}) {
3 | this.selected = defaultTab;
4 | this.tabs = [];
5 | this.subscribtions = [];
6 | this.onChange = onChange;
7 | this.vertical = vertical;
8 | this.collapsible = collapsible;
9 | }
10 |
11 | select(tabId, { focus = false } = {}) {
12 | if (!this.tabs.includes(tabId) || (!this.collapsible && this.isSelected(tabId))) {
13 | return;
14 | }
15 |
16 | if (this.isSelected(tabId)) {
17 | this.selected = undefined;
18 | } else {
19 | this.selected = tabId;
20 | }
21 |
22 | this.subscribtions.forEach(callback => callback({ focus }));
23 |
24 | if (this.onChange) {
25 | this.onChange(tabId);
26 | }
27 | }
28 |
29 | selectPrevious(options) {
30 | const prevIndex = this.tabs.indexOf(this.selected) - 1;
31 |
32 | this.select(this.tabs[prevIndex >= 0 ? prevIndex : this.tabs.length - 1], options);
33 | }
34 |
35 | selectNext(options) {
36 | const nextIndex = (this.tabs.indexOf(this.selected) + 1) % this.tabs.length;
37 |
38 | this.select(this.tabs[nextIndex], options);
39 | }
40 |
41 | selectFirst(options) {
42 | this.select(this.tabs[0], options);
43 | }
44 |
45 | selectLast(options) {
46 | this.select(this.tabs[this.tabs.length - 1], options);
47 | }
48 |
49 | isSelected(tabId) {
50 | return tabId === this.selected;
51 | }
52 |
53 | isVertical() {
54 | return this.vertical;
55 | }
56 |
57 | register(tabId) {
58 | if (this.tabs.includes(tabId)) {
59 | return;
60 | }
61 |
62 | this.tabs.push(tabId);
63 |
64 | // set the first registered tab as select if no tab was assigned as default
65 | if (!this.selected) {
66 | this.select(tabId);
67 | }
68 | }
69 |
70 | unregister(tabId) {
71 | this.tabs = this.tabs.filter(id => id !== tabId);
72 | }
73 |
74 | subscribe(callback) {
75 | this.subscribtions.push(callback);
76 | }
77 |
78 | unsubscribe(callback) {
79 | this.subscribtions = this.subscribtions.filter(cb => cb !== callback);
80 | }
81 | }
82 |
83 | export default TabSelection;
84 |
--------------------------------------------------------------------------------
/src/Tabs.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import TabProvider from './TabProvider';
4 |
5 | class Tabs extends Component {
6 | static defaultProps = {
7 | defaultTab: undefined,
8 | className: '',
9 | vertical: false,
10 | collapsible: false,
11 | onChange: undefined,
12 | }
13 |
14 | static propTypes = {
15 | children: PropTypes.node.isRequired,
16 | defaultTab: PropTypes.string,
17 | className: PropTypes.string,
18 | vertical: PropTypes.bool,
19 | collapsible: PropTypes.bool,
20 | onChange: PropTypes.func,
21 | }
22 |
23 | render() {
24 | const {
25 | children,
26 | defaultTab,
27 | onChange,
28 | vertical,
29 | collapsible,
30 | className,
31 | ...props
32 | } = this.props;
33 |
34 | return (
35 |
41 |
42 | {children}
43 |
44 |
45 | );
46 | }
47 | }
48 |
49 | export default Tabs;
50 |
--------------------------------------------------------------------------------
/src/__tests__/Tab.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 | import Tab, { KeyCode } from '../Tab';
4 |
5 | const mockSelection = () => ({
6 | register: jest.fn(),
7 | unregister: jest.fn(),
8 | subscribe: jest.fn(),
9 | unsubscribe: jest.fn(),
10 | isSelected: jest.fn(),
11 | select: jest.fn(),
12 | selectPrevious: jest.fn(),
13 | selectNext: jest.fn(),
14 | selectFirst: jest.fn(),
15 | selectLast: jest.fn(),
16 | isVertical: jest.fn(),
17 | });
18 |
19 | test('Tab 1 Tab 1 ;
29 | const tab = mount((
30 | {content}
31 | ));
32 |
33 | expect(tab.find('#content')).toBeTruthy();
34 | });
35 |
36 | test('Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 ;
23 | const tab = mount((
24 | {content}
25 | ));
26 |
27 | expect(tab.find('#content')).toBeTruthy();
28 | });
29 |
30 | test('Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1 Tab 1
13 | Foo
14 |
15 | ));
16 |
17 | expect(tabList).toBeDefined();
18 | });
19 |
20 | test('
23 | Foo
24 |
25 | ));
26 |
27 | expect(tabList.find('#content')).toBeTruthy();
28 | });
29 |
--------------------------------------------------------------------------------
/src/__tests__/TabListComponent.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 |
4 | import TabListComponent from '../TabListComponent';
5 |
6 | test('
9 | Foo
10 |
11 | ));
12 |
13 | expect(tabList).toBeDefined();
14 | });
15 |
16 | test('
19 | Foo
20 |
21 | ));
22 |
23 | expect(tabList.find('#content')).toBeTruthy();
24 | });
25 |
26 | test('
29 | Foo
30 |
31 | ));
32 |
33 | expect(tabList.prop('role')).toEqual('tablist');
34 | });
35 |
36 | test('
39 | Foo
40 |
41 | ));
42 |
43 | expect(tabList.hasClass('foo')).toBe(true);
44 | });
45 |
46 | test('Foo Foo Foo Foo Foo Foo Foo );
21 |
22 | const tabPanel = mount((
23 | (Foo )} />
33 | ));
34 |
35 | expect(tabPanel.find('#content')).toBeTruthy();
36 | });
37 |
38 | test('Foo Foo Foo Foo Foo
18 |
19 |
20 | Tab 1 Tab 2
23 |
TabPanel 1
24 |
TabPanel 2
25 |
27 | ));
28 |
29 | expect(tabs.find('#first-tab').prop('aria-selected')).toBe(false);
30 | expect(tabs.find('#first').prop('aria-expanded')).toBe(false);
31 |
32 | expect(tabs.find('#second-tab').prop('aria-selected')).toBe(true);
33 | expect(tabs.find('#second').prop('aria-expanded')).toBe(true);
34 | });
35 |
36 | test('
39 |
40 |
41 | Tab 1 Tab 2
44 |
TabPanel 1
45 |
TabPanel 2
46 |
48 | ));
49 |
50 | tabs.find('#first-tab').simulate('click');
51 |
52 | expect(tabs.find('#first-tab').prop('aria-selected')).toBe(true);
53 | expect(tabs.find('#first').prop('aria-expanded')).toBe(true);
54 |
55 | expect(tabs.find('#second-tab').prop('aria-selected')).toBe(false);
56 | expect(tabs.find('#second').prop('aria-expanded')).toBe(false);
57 | });
58 |
59 | test('
68 |
69 |
70 | Tab 1 Tab 2
73 |
TabPanel 1
74 |
TabPanel 2
75 |
77 | );
78 | }
79 | }
80 | const tabs = mount((
81 |
106 |
107 |
108 | Tab 1 Tab 2
111 |
TabPanel 1
112 |
TabPanel 2
113 |
115 | ));
116 |
117 | tabs.find('#first-tab').simulate('click');
118 |
119 | expect(onChange).toHaveBeenCalledWith('first');
120 | });
121 |
122 | test('
127 |
128 |
129 | Tab 1 Tab 2
132 |
TabPanel 1
133 |
TabPanel 2
134 |
136 | ));
137 |
138 | expect(tabs.find('#second-tab').prop('aria-selected')).toBe(true);
139 | expect(tabs.find('#second').prop('aria-expanded')).toBe(true);
140 | tabs.setProps({ defaultTab: 'first' });
141 | expect(tabs.find('#first-tab').prop('aria-selected')).toBe(true);
142 | expect(tabs.find('#first').prop('aria-expanded')).toBe(true);
143 | expect(tabs.find('#second-tab').prop('aria-selected')).toBe(false);
144 | expect(tabs.find('#second').prop('aria-expanded')).toBe(false);
145 | });
146 |
147 | test('
152 |
153 |
154 | Tab 1 Tab 2
157 |
TabPanel 1
158 |
TabPanel 2
159 |
161 | ));
162 |
163 | tabs.setProps({ defaultTab: 'second' });
164 | expect(tabs.find('#second-tab').prop('aria-selected')).toBe(true);
165 | expect(tabs.find('#second').prop('aria-expanded')).toBe(true);
166 | });
167 |
168 | test('
173 |
174 |
175 | Tab 1 Tab 2
178 |
TabPanel 1
179 |
TabPanel 2
180 |
182 | ));
183 |
184 | tabs.find('#second-tab').simulate('click');
185 | tabs.setProps({ defaultTab: 'second' });
186 | expect(tabs.find('#second-tab').prop('aria-selected')).toBe(true);
187 | expect(tabs.find('#second').prop('aria-expanded')).toBe(true);
188 | });
189 |
190 | test('
193 |
194 |
195 | Tab 1 Tab 2
198 |
TabPanel 1
199 |
TabPanel 2
200 |
202 | ));
203 |
204 | tabs.find('#second-tab').simulate('keydown', { keyCode: KeyCode.LEFT_ARROW });
205 | expect(tabs.find('#first-tab').prop('aria-selected')).toBe(true);
206 | });
207 |
208 | test('
211 |
212 |
213 | Tab 1 Tab 2
216 |
TabPanel 1
217 |
TabPanel 2
218 |
220 | ));
221 |
222 | tabs.find('#second-tab').simulate('keydown', { keyCode: KeyCode.UP_ARROW });
223 | expect(tabs.find('#first-tab').prop('aria-selected')).toBe(true);
224 | });
225 |
226 | test(' when vertical', () => {
227 | const tabs = mount((
228 |
229 |
230 |
231 | Tab 1 Tab 2
234 |
TabPanel 1
235 |
TabPanel 2
236 |
238 | ));
239 |
240 | expect(tabs.find('.rwt__tablist').prop('aria-orientation')).toBe('vertical');
241 | });
242 |
--------------------------------------------------------------------------------
/src/__tests__/TabSelection.test.js:
--------------------------------------------------------------------------------
1 | import TabSelection from '../TabSelection';
2 |
3 | test('TabSelection should accept default selection', () => {
4 | const tabSelection = new TabSelection({ defaultTab: 'foo' });
5 | expect(tabSelection).toBeDefined();
6 | expect(tabSelection.selected).toBe('foo');
7 | });
8 |
9 | test('TabSelection should be able to register new tabs', () => {
10 | const tabSelection = new TabSelection();
11 | tabSelection.register('foo');
12 | expect(tabSelection.tabs).toEqual(['foo']);
13 | });
14 |
15 | test('TabSelection should not be able to register the same tab several times', () => {
16 | const tabSelection = new TabSelection();
17 | tabSelection.register('foo');
18 | tabSelection.register('foo');
19 | tabSelection.register('foo');
20 | expect(tabSelection.tabs).toEqual(['foo']);
21 | });
22 |
23 | test('TabSelection should set first registered tab as selected if no defaultTab', () => {
24 | const tabSelection = new TabSelection();
25 | tabSelection.register('foo');
26 | expect(tabSelection.selected).toBe('foo');
27 | });
28 |
29 | test('TabSelection should be able to unregister', () => {
30 | const tabSelection = new TabSelection();
31 | tabSelection.register('foo');
32 | tabSelection.register('bar');
33 | tabSelection.unregister('bar');
34 | expect(tabSelection.tabs).toEqual(['foo']);
35 | });
36 |
37 | test('TabSelection should not be able to select unregistered tab', () => {
38 | const tabSelection = new TabSelection();
39 | tabSelection.register('foo');
40 | tabSelection.register('bar');
41 |
42 | tabSelection.select('baz');
43 | expect(tabSelection.selected).not.toBe('baz');
44 | });
45 |
46 | test('TabSelection should be able to select previous tab', () => {
47 | const tabSelection = new TabSelection({ defaultTab: 'baz' });
48 | tabSelection.register('foo');
49 | tabSelection.register('bar');
50 | tabSelection.register('baz');
51 |
52 | expect(tabSelection.selected).toBe('baz');
53 | tabSelection.selectPrevious();
54 | expect(tabSelection.selected).toBe('bar');
55 | tabSelection.selectPrevious();
56 | expect(tabSelection.selected).toBe('foo');
57 | });
58 |
59 | test('TabSelection should be able to select next tab', () => {
60 | const tabSelection = new TabSelection({ defaultTab: 'foo' });
61 | tabSelection.register('foo');
62 | tabSelection.register('bar');
63 | tabSelection.register('baz');
64 |
65 | expect(tabSelection.selected).toBe('foo');
66 | tabSelection.selectNext();
67 | expect(tabSelection.selected).toBe('bar');
68 | tabSelection.selectNext();
69 | expect(tabSelection.selected).toBe('baz');
70 | });
71 |
72 | test('TabSelection should have roving selection when selecting prev/next tab', () => {
73 | const tabSelection = new TabSelection({ defaultTab: 'foo' });
74 | tabSelection.register('foo');
75 | tabSelection.register('bar');
76 | tabSelection.register('baz');
77 |
78 | expect(tabSelection.selected).toBe('foo');
79 | tabSelection.selectPrevious();
80 | expect(tabSelection.selected).toBe('baz');
81 | tabSelection.selectNext();
82 | expect(tabSelection.selected).toBe('foo');
83 | });
84 |
85 | test('TabSelection should be able to select first tab', () => {
86 | const tabSelection = new TabSelection({ defaultTab: 'baz' });
87 | tabSelection.register('foo');
88 | tabSelection.register('bar');
89 | tabSelection.register('baz');
90 |
91 | tabSelection.selectFirst();
92 |
93 | expect(tabSelection.selected).toBe('foo');
94 | });
95 |
96 | test('TabSelection should be able to select last tab', () => {
97 | const tabSelection = new TabSelection({ defaultTab: 'foo' });
98 | tabSelection.register('foo');
99 | tabSelection.register('bar');
100 | tabSelection.register('baz');
101 |
102 | tabSelection.selectLast();
103 |
104 | expect(tabSelection.selected).toBe('baz');
105 | });
106 |
107 | test('TabSelection should be able to pass selection options', () => {
108 | const subscriber = jest.fn();
109 | const tabSelection = new TabSelection();
110 | tabSelection.register('foo');
111 | tabSelection.register('bar');
112 | tabSelection.register('baz');
113 | tabSelection.subscribe(subscriber);
114 |
115 | tabSelection.select('bar', { focus: true });
116 | expect(subscriber).toHaveBeenCalledWith({ focus: true });
117 | tabSelection.selectFirst({ focus: false });
118 | expect(subscriber).toHaveBeenCalledWith({ focus: false });
119 | tabSelection.selectNext({ focus: true });
120 | expect(subscriber).toHaveBeenCalledWith({ focus: true });
121 | tabSelection.selectLast({ focus: false });
122 | expect(subscriber).toHaveBeenCalledWith({ focus: false });
123 | tabSelection.selectPrevious({ focus: true });
124 | expect(subscriber).toHaveBeenCalledWith({ focus: true });
125 |
126 | expect(subscriber).toHaveBeenCalledTimes(5);
127 | });
128 |
129 | test('TabSelection should be able to select a tab', () => {
130 | const tabSelection = new TabSelection();
131 | tabSelection.register('foo');
132 | tabSelection.register('bar');
133 |
134 | expect(tabSelection.selected).toBe('foo');
135 |
136 | tabSelection.select('bar');
137 | expect(tabSelection.selected).not.toBe('foo');
138 | expect(tabSelection.selected).toBe('bar');
139 | });
140 |
141 | test('TabSelection should be able to subscribe for changes', () => {
142 | const subscriber = jest.fn();
143 |
144 | const tabSelection = new TabSelection();
145 | tabSelection.subscribe(subscriber);
146 |
147 | tabSelection.register('foo');
148 | tabSelection.register('bar');
149 |
150 | expect(subscriber).toHaveBeenCalledTimes(1);
151 | tabSelection.select('bar');
152 | expect(subscriber).toHaveBeenCalledTimes(2);
153 | });
154 |
155 | test('TabSelection should be able to unsubscribe', () => {
156 | const subscriber = jest.fn();
157 |
158 | const tabSelection = new TabSelection();
159 | tabSelection.subscribe(subscriber);
160 |
161 | tabSelection.register('foo');
162 | tabSelection.register('bar');
163 |
164 | expect(subscriber).toHaveBeenCalledTimes(1);
165 | tabSelection.unsubscribe(subscriber);
166 | tabSelection.select('bar');
167 | expect(subscriber).toHaveBeenCalledTimes(1);
168 | });
169 |
170 | test('TabSelection should call an optional onChange callback when something has changed', () => {
171 | const onChange = jest.fn();
172 |
173 | const tabSelection = new TabSelection({ defaultTab: 'foo', onChange });
174 | tabSelection.register('foo');
175 | tabSelection.register('bar');
176 |
177 | tabSelection.select('bar');
178 | expect(onChange).toHaveBeenCalledTimes(1);
179 | expect(onChange).toHaveBeenCalledWith('bar');
180 | });
181 |
182 | test('If the collapsible option is passed to TabSelection it should deselect the current tab if selected again', () => {
183 | const collapsible = true;
184 |
185 | const tabSelection = new TabSelection({ defaultTab: 'foo', collapsible });
186 | tabSelection.register('foo');
187 | tabSelection.register('bar');
188 |
189 | tabSelection.select('bar');
190 | expect(tabSelection.selected).toBe('bar');
191 |
192 | tabSelection.select('bar');
193 | expect(tabSelection.selected).toBe(undefined);
194 | expect(tabSelection.selected).not.toBe('bar');
195 | });
196 |
197 | test('If the collapsible option is not passed to TabSelection it should not deselect the current tab if selected again', () => {
198 | const tabSelection = new TabSelection({ defaultTab: 'foo' });
199 | tabSelection.register('foo');
200 | tabSelection.register('bar');
201 |
202 | tabSelection.select('bar');
203 | expect(tabSelection.selected).toBe('bar');
204 |
205 | tabSelection.select('bar');
206 | expect(tabSelection.selected).toBe('bar');
207 | expect(tabSelection.selected).not.toBe(undefined);
208 | });
209 |
--------------------------------------------------------------------------------
/src/__tests__/Tabs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { mount } from 'enzyme';
3 |
4 | import Tabs from '../Tabs';
5 | import TabProvider from '../TabProvider';
6 |
7 | test('Foo
Foo
Foo
Foo
Foo
Foo
Foo
9 | );
10 |
11 | test('
15 |
16 |
18 |
19 | ));
20 |
21 | expect(wrappedComponent).toBeDefined();
22 | });
23 |
24 | test('
11 | {selection =>
13 | );
14 | TabSelectionComponent.WrappedComponent = Component;
15 | TabSelectionComponent.displayName = `withTabSelection(${getDisplayName(Component)})`;
16 | return TabSelectionComponent;
17 | };
18 |
19 | export default withTabSelection;
20 |
--------------------------------------------------------------------------------
/styles/style.css:
--------------------------------------------------------------------------------
1 | .rwt__tabs[data-rwt-vertical="true"] {
2 | display: flex;
3 | }
4 |
5 | .rwt__tablist:not([aria-orientation="vertical"]) {
6 | border-bottom: 1px solid #ddd;
7 | }
8 |
9 | .rwt__tablist[aria-orientation="vertical"] {
10 | display: flex;
11 | flex-direction: column;
12 | flex-shrink: 0;
13 | flex-grow: 0;
14 | border-right: 1px solid #ddd;
15 | margin-right: 1rem;
16 | }
17 |
18 | .rwt__tab {
19 | background: transparent;
20 | border: 0;
21 | font-family: inherit;
22 | font-size: inherit;
23 | padding: 1rem 2rem;
24 | transition: background 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
25 | }
26 |
27 | .rwt__tab[aria-selected="false"]:hover,
28 | .rwt__tab:focus {
29 | outline: 0;
30 | background-color: #f4f4f4;
31 | background-color: rgba(0,0,0,0.05);
32 | }
33 |
34 | .rwt__tab[aria-selected="true"] {
35 | position: relative;
36 | }
37 |
38 | .rwt__tab[aria-selected="true"]:after {
39 | content: '';
40 | position: absolute;
41 | }
42 |
43 | .rwt__tablist:not([aria-orientation="vertical"]) .rwt__tab[aria-selected="true"]:after {
44 | bottom: -1px;
45 | left: 0;
46 | width: 100%;
47 | border-bottom: 3px solid #00d8ff;
48 | }
49 |
50 | .rwt__tablist[aria-orientation="vertical"] .rwt__tab[aria-selected="true"]:after {
51 | right: -1px;
52 | top: 0;
53 | height: 100%;
54 | border-right: 3px solid #00d8ff;
55 | }
56 |
--------------------------------------------------------------------------------
/webpack.config.babel.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 |
3 | export default ({ minify = false } = {}) => ({
4 | entry: './src/index.js',
5 |
6 | output: {
7 | path: path.resolve(__dirname, 'dist'),
8 | filename: `react-web-tabs${minify ? '.min' : ''}.js`,
9 | libraryTarget: 'umd',
10 | library: 'react-web-tabs',
11 | },
12 |
13 | externals: {
14 | react: {
15 | commonjs: 'react',
16 | commonjs2: 'react',
17 | amd: 'react',
18 | root: 'React',
19 | },
20 | 'react-dom': {
21 | commonjs: 'react-dom',
22 | commonjs2: 'react-dom',
23 | amd: 'react-dom',
24 | root: 'ReactDOM',
25 | },
26 | 'prop-types': {
27 | commonjs: 'prop-types',
28 | commonjs2: 'prop-types',
29 | amd: 'prop-types',
30 | root: 'PropTypes',
31 | },
32 | },
33 |
34 | resolve: {
35 | extensions: ['.js', '.jsx'],
36 | },
37 |
38 | module: {
39 | rules: [
40 | {
41 | test: /\.jsx?$/,
42 | exclude: /node_modules/,
43 | use: 'babel-loader',
44 | },
45 | ],
46 | },
47 | });
48 |
--------------------------------------------------------------------------------