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.
2018-09-05 14:46:28 -07:00 · 2018-09-05 14:46:28 -07:00 · 7c88de20fe
parent 7b71482b03
commit 7c88de20fe
7 changed files with 80 additions and 52 deletions
--- a/css/_atlaskit_overrides.scss
+++ b/css/_atlaskit_overrides.scss
@ -18,23 +18,23 @@
    /**
     * The text color of the selected tab and hovered tabs.
     */
-    li.bcVmZW,
-    li.bcVmZW:hover,
-    li.kheoEp:hover {
+    .bVobOt,
+    .bVobOt:hover,
+    .ebveIl:hover {
        color: #172B4D;
    }

    /**
     * The color of the inactive tab text.
     */
-    li.kheoEp {
+    .ebveIl {
        color: #FFFFFF;
    }

    /**
     * The color of the underline of a selected tab.
     */
-    li>span.kByArU {
+    .kByArU {
        background-color: #172B4D;
    }
 }
@ -54,4 +54,4 @@
    .gBLqhw[data-role=droplistContent] {
        border: 1px solid #455166;
    }
-}
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -420,37 +420,16 @@
      }
    },
    "@atlaskit/tabs": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@atlaskit/tabs/-/tabs-4.0.1.tgz",
-      "integrity": "sha1-vM2WQ8nSO9kR+0GCK4U1oYJHHM8=",
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@atlaskit/tabs/-/tabs-8.0.8.tgz",
+      "integrity": "sha512-zNzF/vwazWWrSHLLleIVzuRszALy9xRN7jAaS/u1aaJwrGF5exYbtQ4RZQ9Bx46d7p4HLx3mb+/74GmR6yJ6Gw==",
      "requires": {
-        "@atlaskit/theme": "^2.0.0",
-        "@atlaskit/util-shared-styles": "^1.0.0",
+        "@atlaskit/analytics-next": "^3.0.6",
+        "@atlaskit/theme": "^6.0.2",
        "classnames": "^2.2.5",
        "css-element-queries": "^0.3.2",
        "debounce": "^1.0.0",
-        "keycode": "^2.1.4",
-        "prop-types": "^15.5.10",
-        "styled-components": "^1.3.0"
-      },
-      "dependencies": {
-        "@atlaskit/theme": {
-          "version": "2.4.1",
-          "resolved": "http://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
-          "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
-          "requires": {
-            "prop-types": "^15.5.10",
-            "styled-components": "1.4.6 - 3"
-          }
-        },
-        "@atlaskit/util-shared-styles": {
-          "version": "1.7.1",
-          "resolved": "https://registry.npmjs.org/@atlaskit/util-shared-styles/-/util-shared-styles-1.7.1.tgz",
-          "integrity": "sha1-CDLLbMF5dDHEzPZ9F4qkES3zBeI=",
-          "requires": {
-            "babel-runtime": "^6.11.6"
-          }
-        }
+        "keycode": "^2.1.7"
      }
    },
    "@atlaskit/tag": {
@ -5229,9 +5208,9 @@
      "dev": true
    },
    "debounce": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.1.0.tgz",
-      "integrity": "sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
    },
    "debug": {
      "version": "2.6.9",
--- a/package.json
+++ b/package.json
@ -30,7 +30,7 @@
    "@atlaskit/modal-dialog": "6.0.12",
    "@atlaskit/multi-select": "11.0.6",
    "@atlaskit/spinner": "9.0.8",
-    "@atlaskit/tabs": "4.0.1",
+    "@atlaskit/tabs": "8.0.8",
    "@atlaskit/theme": "6.0.2",
    "@atlaskit/tooltip": "12.0.14",
    "@microsoft/microsoft-graph-client": "1.1.0",
--- a/react/features/base/dialog/components/DialogWithTabs.web.js
+++ b/react/features/base/dialog/components/DialogWithTabs.web.js
@ -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)
                            };
                        })
--- a/react/features/desktop-picker/components/DesktopPicker.js
+++ b/react/features/desktop-picker/components/DesktopPicker.js
@ -81,6 +81,7 @@ class DesktopPicker extends Component<*, *> {

    state = {
        selectedSource: {},
+        selectedTab: 0,
        sources: {},
        types: []
    };
@ -283,15 +284,19 @@ class DesktopPicker extends Component<*, *> {
     * Stores the selected tab and updates the selected source via
     * {@code _getSelectedSource}.
     *
-     * @param {int} idx - The index of the selected tab.
+     * @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.
     * @returns {void}
     */
-    _onTabSelected(idx) {
+    _onTabSelected(tab, tabIndex) { // eslint-disable-line no-unused-vars
        const { types, sources } = this.state;

-        this._selectedTabType = types[idx];
+        this._selectedTabType = types[tabIndex];
        this.setState({
-            selectedSource: this._getSelectedSource(sources)
+            selectedSource: this._getSelectedSource(sources),
+            selectedTab: tabIndex
        });
    }

@ -315,7 +320,6 @@ class DesktopPicker extends Component<*, *> {
                            selectedSourceId = { selectedSource.id }
                            sources = { sources[type] }
                            type = { type } />,
-                        defaultSelected: type === DEFAULT_TAB_TYPE,
                        label: t(TAB_LABELS[type])
                    };
                });
@ -323,6 +327,7 @@ class DesktopPicker extends Component<*, *> {
        return (
            <Tabs
                onSelect = { this._onTabSelected }
+                selected = { this.state.selectedTab }
                tabs = { tabs } />);
    }

--- a/react/features/device-selection/components/AudioInputPreview.js
+++ b/react/features/device-selection/components/AudioInputPreview.js
@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';

 import { JitsiTrackEvents } from '../../base/lib-jitsi-meet';

 /**
 * React component for displaying a audio level meter for a JitsiLocalTrack.
 */
-class AudioInputPreview extends PureComponent {
+class AudioInputPreview extends Component {
    /**
     * AudioInputPreview component's property types.
     *
@ -53,8 +53,10 @@ class AudioInputPreview extends PureComponent {
     * @returns {void}
     */
    componentWillReceiveProps(nextProps) {
-        this._listenForAudioUpdates(nextProps.track);
-        this._updateAudioLevel(0);
+        if (nextProps.track !== this.props.track) {
+            this._listenForAudioUpdates(nextProps.track);
+            this._updateAudioLevel(0);
+        }
    }

    /**
--- a/react/features/welcome/components/WelcomePage.web.js
+++ b/react/features/welcome/components/WelcomePage.web.js
@ -43,7 +43,8 @@ class WelcomePage extends AbstractWelcomePage {
            ...this.state,

            generateRoomnames:
-                interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE
+                interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE,
+            selectedTab: 0
        };

        /**
@ -70,6 +71,7 @@ class WelcomePage extends AbstractWelcomePage {
        this._onRoomChange = this._onRoomChange.bind(this);
        this._setAdditionalContentRef
            = this._setAdditionalContentRef.bind(this);
+        this._onTabSelected = this._onTabSelected.bind(this);
    }

    /**
@ -198,6 +200,20 @@ class WelcomePage extends AbstractWelcomePage {
        super._onRoomChange(event.target.value);
    }

+    /**
+     * 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 tabs to show previous meetings and upcoming calendar events. The
     * tabs are purposefully hidden on mobile browsers.
@ -219,8 +235,7 @@ class WelcomePage extends AbstractWelcomePage {
        if (CalendarList) {
            tabs.push({
                label: t('welcomepage.calendar'),
-                content: <CalendarList />,
-                defaultSelected: true
+                content: <CalendarList />
            });
        }

@ -235,7 +250,10 @@ class WelcomePage extends AbstractWelcomePage {
                <div className = 'welcome-page-settings'>
                    <SettingsButton defaultTab = { SETTINGS_TABS.CALENDAR } />
                </div>
-                <Tabs tabs = { tabs } />
+                <Tabs
+                    onSelect = { this._onTabSelected }
+                    selected = { this.state.selectedTab }
+                    tabs = { tabs } />
            </div>);
    }