From 7c88de20fed2dc08b19b7d00fcf08cfbd00ba781 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Wed, 5 Sep 2018 14:46:28 -0700 Subject: [PATCH] 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. --- css/_atlaskit_overrides.scss | 12 +++--- package-lock.json | 39 +++++-------------- package.json | 2 +- .../dialog/components/DialogWithTabs.web.js | 28 ++++++++++++- .../components/DesktopPicker.js | 15 ++++--- .../components/AudioInputPreview.js | 10 +++-- .../welcome/components/WelcomePage.web.js | 26 +++++++++++-- 7 files changed, 80 insertions(+), 52 deletions(-) diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss index 47de9b1217..b722e65169 100644 --- 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; } -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index c4f0aef869..2d342ecdc5 100644 --- 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", diff --git a/package.json b/package.json index 14fad85e15..3ad88dcf50 100644 --- 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", diff --git a/react/features/base/dialog/components/DialogWithTabs.web.js b/react/features/base/dialog/components/DialogWithTabs.web.js index 49d0101695..a9e62cb6a1 100644 --- 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 { 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 { 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 { if (tabs.length > 1) { return ( { return { @@ -151,7 +176,6 @@ class DialogWithTabs extends Component { styles, tabId: idx }), - defaultSelected: defaultTab === idx, label: t(label) }; }) diff --git a/react/features/desktop-picker/components/DesktopPicker.js b/react/features/desktop-picker/components/DesktopPicker.js index c896d96033..994ea59f0e 100644 --- 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 ( ); } diff --git a/react/features/device-selection/components/AudioInputPreview.js b/react/features/device-selection/components/AudioInputPreview.js index 98306b23cf..132225c0e7 100644 --- 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); + } } /** diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js index 258ea7d499..d321b2b81d 100644 --- 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: , - defaultSelected: true + content: }); } @@ -235,7 +250,10 @@ class WelcomePage extends AbstractWelcomePage {
- + ); }