feat(deps): update atlaskit/tabs to 8.0.8

There are (at least) two changes that are breaking:
- defaultTab is gone
- The re-rendering logic looks to have been re-written so that
  passing in a new array of tabs causes a re-render, which can
  reset the currently selected tab.

The fixes involved removing defaultTab from each tab configuration,
as it is no longer respected anyway. Also, instead of letting Tabs
be uncontrolled and allowing it to set its own selected, which
would result in the first tab automatically being selected on
Tabs re-render, use Tabs a controlled prop to dicate which
tab is selected; this is accomplished by specifying a selected
prop.
This commit is contained in:
Leonard Kim
2018-09-05 14:46:28 -07:00
committed by yanas
parent 7b71482b03
commit 7c88de20fe
7 changed files with 80 additions and 52 deletions

View File

@@ -53,6 +53,11 @@ export type Props = {
*/
type State = {
/**
* The index of the tab that should be displayed.
*/
selectedTab: number,
/**
* An array of the states of the tabs.
*/
@@ -74,9 +79,11 @@ class DialogWithTabs extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
selectedTab: this.props.defaultTab || 0,
tabStates: this.props.tabs.map(tab => tab.props)
};
this._onSubmit = this._onSubmit.bind(this);
this._onTabSelected = this._onTabSelected.bind(this);
this._onTabStateChange = this._onTabStateChange.bind(this);
}
@@ -125,13 +132,29 @@ class DialogWithTabs extends Component<Props, State> {
return { ...currentTabState };
}
_onTabSelected: (Object, number) => void;
/**
* Callback invoked when the desired tab to display should be changed.
*
* @param {Object} tab - The configuration passed into atlaskit tabs to
* describe how to display the selected tab.
* @param {number} tabIndex - The index of the tab within the array of
* displayed tabs.
* @private
* @returns {void}
*/
_onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
this.setState({ selectedTab: tabIndex });
}
/**
* Renders the tabs from the tab information passed on props.
*
* @returns {void}
*/
_renderTabs() {
const { defaultTab = 0, t, tabs } = this.props;
const { t, tabs } = this.props;
if (tabs.length === 1) {
return this._renderTab({
@@ -143,6 +166,8 @@ class DialogWithTabs extends Component<Props, State> {
if (tabs.length > 1) {
return (
<Tabs
onSelect = { this._onTabSelected }
selected = { this.state.selectedTab }
tabs = {
tabs.map(({ component, label, styles }, idx) => {
return {
@@ -151,7 +176,6 @@ class DialogWithTabs extends Component<Props, State> {
styles,
tabId: idx
}),
defaultSelected: defaultTab === idx,
label: t(label)
};
})