From 00a8401d100be0c3ec193f761ed1de4d10ef0642 Mon Sep 17 00:00:00 2001 From: Chris Silivestru Date: Fri, 15 Sep 2017 11:13:03 -0400 Subject: [PATCH] feat(tablist): Enable overwriting tabIndex on and allow tabbing among s by using tab key and enter/space. --- README.md | 6 + examples/tab_enabled/app.js | 115 ++++++++++++++++++ examples/tab_enabled/index.html | 18 +++ src/components/Tab.js | 4 +- src/components/UncontrolledTabs.js | 14 ++- src/components/__tests__/Tab-test.js | 4 + .../__tests__/__snapshots__/Tab-test.js.snap | 14 +++ 7 files changed, 173 insertions(+), 2 deletions(-) create mode 100644 examples/tab_enabled/app.js create mode 100644 examples/tab_enabled/index.html diff --git a/README.md b/README.md index a775f372c1..c750c2b4fa 100644 --- a/README.md +++ b/README.md @@ -192,6 +192,12 @@ Provide a custom class name for the active tab. > This option can also be set for all `` components with the prop `selectedTabClassName` on ``. +#### tabIndex: `string` + +> default: if selected `"0"` otherwise `null` + +Overrides the tabIndex to enabled tabbing between tabs. + ### <TabPanel /> If you specify additional props on the `` component they will be forwarded to the rendered `
`. diff --git a/examples/tab_enabled/app.js b/examples/tab_enabled/app.js new file mode 100644 index 0000000000..ca1e68757b --- /dev/null +++ b/examples/tab_enabled/app.js @@ -0,0 +1,115 @@ +import React from 'react'; +import { render } from 'react-dom'; +import { Tab, Tabs, TabList, TabPanel } from '../../src/index'; +import '../../style/react-tabs.css'; + +const App = () => { + return ( +
+

Hint:

+
    +
  • use keyboard tab to focus tabs
    • +
  • use arrow keys to navigate focused tabs
    • +
+ + + + React + Ember + Angular + + + + + + +

Just The UI

+

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

+ +

Virtual DOM

+

React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.

+ +

Data Flow

+

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

+ +

Source: React

+ + +

Handlebars

+

Write dramatically less code with Ember's Handlebars integrated templates that update automatically when the underlying data changes.

+ +

Architecture

+

Don't waste time making trivial choices. Ember.js incorporates common idioms so you can focus on what makes your app special, not reinventing the wheel.

+ +

Productivity

+

Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast.

+ +

Source: Ember

+ + +

Why AngularJS?

+

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

+ +

Alternatives

+

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

+ +

Extensibility

+

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

+ +

Source: Angular

+ + + + + + Mario + Luigi + Peach + Yoshi + + + +

Mario (Japanese: マリオ Hepburn: Mario?) is a fictional character in the Mario video game franchise by Nintendo, created by Japanese video game designer Shigeru Miyamoto. Serving as Nintendo's mascot and the eponymous protagonist of the series, he has a younger brother Luigi. Mario has appeared in over 200 video games since his creation. Depicted as a short, pudgy, Italian plumber who resides in the Mushroom Kingdom, he repeatedly rescues Princess Peach from the Koopa villain Bowser and stops his numerous plans to destroy him and take over the kingdom.

+

Source: Wikipedia

+ + +

Luigi (Japanese: ルイージ Hepburn: Ruīji?) is a fictional character featured in video games and related media released by Nintendo. Created by prominent game designer Shigeru Miyamoto, Luigi is portrayed as the slightly younger but taller fraternal twin brother of Nintendo's mascot Mario, and appears in many games throughout the Mario franchise, frequently as a sidekick to his brother.

+

Source: Wikipedia

+ + +

Princess Peach (Japanese: ピーチ姫 Hepburn: Pīchi-hime?) is a character in Nintendo's Mario franchise. Originally created by Shigeru Miyamoto, Peach is the princess of the fictional Mushroom Kingdom, which is constantly under attack by Bowser. She often plays the damsel in distress role within the series and is the lead female.[1] She is often portrayed as Mario's love interest and has appeared in nearly all the Mario games to date with the notable exception of Super Princess Peach, where she is the main playable character.

+ + +

Yoshi (ヨッシー Yosshī?) /ˈjoʊʃi/ or /ˈjɒʃi/, once romanized as Yossy, is a fictional anthropomorphic dinosaur (referred to as a dragon at times) who appears in video games published by Nintendo. He debuted in Super Mario World (1990) on the Super Nintendo Entertainment System as Mario and Luigi's sidekick (a role he has often reprised), and he later established his own series with several platform and puzzle games, including Super Mario World 2: Yoshi's Island. He has also appeared in many of the spin-off Mario games including the Mario Party, the Mario Kart, and the Super Smash Bros. series, as well as in other various Mario sports titles. Yoshi also appears in New Super Mario Bros. Wii (2009) as the characters' companion and steed, similar to his original debut role in Super Mario World. Yoshi belongs to the species of the same name which comes in various colors, with green being the most common.

+

Source: Wikipedia

+ + + + + + Tabs: + Tab A + Tab B + (separator) + Tab C + End of tabs + + + +

This is Tab A

+

You can put arbitrary elements inside {''}.

+ + +

This is Tab B

+

Navigating through the tabs with the keyboard will skip these arbitrary elements.

+ + +

This is Tab C

+

Just mind that the output might be invalid HTML ({'

'} inside a {'
    '} for instance).

    + + +
+ ); +}; + +render(, document.getElementById('example')); + diff --git a/examples/tab_enabled/index.html b/examples/tab_enabled/index.html new file mode 100644 index 0000000000..f473214afa --- /dev/null +++ b/examples/tab_enabled/index.html @@ -0,0 +1,18 @@ + + +React Tabs + + + +
+

react-tabs

+

React tabs component

+
+
+ Fork me on GitHub + + diff --git a/src/components/Tab.js b/src/components/Tab.js index 3b2c627a2c..4c7198c92e 100644 --- a/src/components/Tab.js +++ b/src/components/Tab.js @@ -19,6 +19,7 @@ export default class Tab extends Component { children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]), className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), disabled: PropTypes.bool, + tabIndex: PropTypes.string, disabledClassName: PropTypes.string, focus: PropTypes.bool, // private id: PropTypes.string, // private @@ -53,6 +54,7 @@ export default class Tab extends Component { panelId, selected, selectedClassName, + tabIndex, tabRef, ...attributes } = this.props; @@ -73,7 +75,7 @@ export default class Tab extends Component { aria-selected={selected ? 'true' : 'false'} aria-disabled={disabled ? 'true' : 'false'} aria-controls={panelId} - tabIndex={selected ? '0' : null} + tabIndex={tabIndex || (selected ? '0' : null)} > {children} diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js index 4b07b7a464..69bc67ca6d 100644 --- a/src/components/UncontrolledTabs.js +++ b/src/components/UncontrolledTabs.js @@ -203,15 +203,24 @@ export default class UncontrolledTabs extends Component { if (this.isTabFromContainer(e.target)) { let index = this.props.selectedIndex; let preventDefault = false; + let useSelectedIndex = false; + + if (e.keyCode === 32 || e.keyCode === 13) { + preventDefault = true; + useSelectedIndex = false; + this.handleClick(e); + } if (e.keyCode === 37 || e.keyCode === 38) { // Select next tab to the left index = this.getPrevTab(index); preventDefault = true; + useSelectedIndex = true; } else if (e.keyCode === 39 || e.keyCode === 40) { // Select next tab to the right index = this.getNextTab(index); preventDefault = true; + useSelectedIndex = true; } // This prevents scrollbars from moving around @@ -219,7 +228,10 @@ export default class UncontrolledTabs extends Component { e.preventDefault(); } - this.setSelected(index, e); + // Only use the selected index in the state if we're not using the tabbed index + if (useSelectedIndex) { + this.setSelected(index, e); + } } }; diff --git a/src/components/__tests__/Tab-test.js b/src/components/__tests__/Tab-test.js index 9430a7aff5..911d7f8282 100644 --- a/src/components/__tests__/Tab-test.js +++ b/src/components/__tests__/Tab-test.js @@ -56,4 +56,8 @@ describe('', () => { it('should allow to be wrapped in higher-order-component', () => { expectToMatchSnapshot(); }); + + it('override the tabIndex if it was provided', () => { + expectToMatchSnapshot(Hello); + }); }); diff --git a/src/components/__tests__/__snapshots__/Tab-test.js.snap b/src/components/__tests__/__snapshots__/Tab-test.js.snap index 871e1aa3ea..3e15f72512 100644 --- a/src/components/__tests__/__snapshots__/Tab-test.js.snap +++ b/src/components/__tests__/__snapshots__/Tab-test.js.snap @@ -1,5 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[` override the tabIndex if it was provided 1`] = ` + +`; + exports[` should accept className 1`] = `