Skip to content

Commit

Permalink
feat(Tabs): add control for autoscroll on component rerender (#7410)
Browse files Browse the repository at this point in the history
* feat(Tabs): add control for autoscroll on component rerender

* chore: update snapshots

Co-authored-by: TJ Egan <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
3 people authored Dec 8, 2020
1 parent 2a7e3e1 commit 5fcbf46
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 1 deletion.
4 changes: 4 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -5080,6 +5080,7 @@ Map {
},
"Tabs" => Object {
"defaultProps": Object {
"scrollIntoView": true,
"selected": 0,
"selectionMode": "automatic",
"type": "default",
Expand All @@ -5106,6 +5107,9 @@ Map {
"onSelectionChange": Object {
"type": "func",
},
"scrollIntoView": Object {
"type": "bool",
},
"selected": Object {
"type": "number",
},
Expand Down
4 changes: 4 additions & 0 deletions packages/react/src/components/Tabs/Tabs-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ const props = {
'The className for the child `<TabContent>` components',
'tab-content'
),
scrollIntoView: boolean(
'Scroll to selected tab on component rerender (scrollIntoView)',
true
),
selectionMode: select(
'Selection mode (selectionMode)',
selectionModes,
Expand Down
10 changes: 9 additions & 1 deletion packages/react/src/components/Tabs/Tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@ export default class Tabs extends React.Component {
*/
onSelectionChange: PropTypes.func,

/**
* Choose whether or not to automatically scroll to newly selected tabs
* on component rerender
*/
scrollIntoView: PropTypes.bool,

/**
* Optionally provide an index for the currently selected <Tab>
*/
Expand All @@ -82,6 +88,7 @@ export default class Tabs extends React.Component {

static defaultProps = {
type: 'default',
scrollIntoView: true,
selected: 0,
selectionMode: 'automatic',
};
Expand Down Expand Up @@ -205,7 +212,7 @@ export default class Tabs extends React.Component {
});
}

if (prevState.selected !== selected) {
if (this.props.scrollIntoView && prevState.selected !== selected) {
this.getTabAt(selected)?.tabAnchor?.scrollIntoView({
block: 'nearest',
inline: 'nearest',
Expand Down Expand Up @@ -379,6 +386,7 @@ export default class Tabs extends React.Component {
type,
light,
onSelectionChange,
scrollIntoView, // eslint-disable-line no-unused-vars
selectionMode, // eslint-disable-line no-unused-vars
tabContentClassName,
...other
Expand Down

0 comments on commit 5fcbf46

Please sign in to comment.