ref(desktop-picker) Replace atlaskit tabs with our component (#12910)

Fixes wrong focus on desktop picker dialog

css/modals/desktop-picker/_desktop-picker.scss

@@ -63,3 +63,8 @@
 .desktop-source-preview-image-container {
     padding: 10px;
 }
+
+.desktop-picker-tabs-container {
+    width: 65%;
+    margin-top: 3px;
+}

react/features/base/ui/components/web/Tabs.tsx

@@ -6,6 +6,7 @@ import { withPixelLineHeight } from '../../../styles/functions.web';
 
 interface ITabProps {
     accessibilityLabel: string;
+    className?: string;
     onChange: (id: string) => void;
     selected: string;
     tabs: Array<{
@@ -78,10 +79,11 @@ const useStyles = makeStyles()(theme => {
 
 
 const Tabs = ({
-    tabs,
+    accessibilityLabel,
+    className,
     onChange,
     selected,
-    accessibilityLabel
+    tabs
 }: ITabProps) => {
     const { classes, cx } = useStyles();
     const isMobile = isMobileBrowser();
@@ -93,7 +95,7 @@ const Tabs = ({
     return (
         <div
             aria-label = { accessibilityLabel }
-            className = { classes.container }
+            className = { cx(classes.container, className) }
             role = 'tablist'>
             {tabs.map(tab => (
                 <button

react/features/desktop-picker/components/DesktopPicker.tsx

@@ -1,4 +1,3 @@
-import Tabs from '@atlaskit/tabs';
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
 
@@ -7,6 +6,7 @@ import { hideDialog } from '../../base/dialog/actions';
 import { translate } from '../../base/i18n/functions';
 import { connect } from '../../base/redux/functions';
 import Dialog from '../../base/ui/components/web/Dialog';
+import Tabs from '../../base/ui/components/web/Tabs';
 // eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { obtainDesktopSources } from '../functions';
@@ -85,7 +85,7 @@ interface IState {
     /**
      * The desktop source type currently being displayed.
      */
-    selectedTab: number;
+    selectedTab: string;
 
     /**
      * An object containing all the DesktopCapturerSources.
@@ -133,7 +133,7 @@ class DesktopPicker extends PureComponent<IProps, IState> {
     state: IState = {
         screenShareAudio: false,
         selectedSource: {},
-        selectedTab: 0,
+        selectedTab: DEFAULT_TAB_TYPE,
         sources: {},
         types: []
     };
@@ -191,6 +191,8 @@ class DesktopPicker extends PureComponent<IProps, IState> {
      * @inheritdoc
      */
     render() {
+        const { selectedTab, selectedSource, sources } = this.state;
+
         return (
             <Dialog
                 ok = {{
@@ -202,6 +204,14 @@ class DesktopPicker extends PureComponent<IProps, IState> {
                 size = 'large'
                 titleKey = 'dialog.shareYourScreen'>
                 { this._renderTabs() }
+                <DesktopPickerPane
+                    key = { selectedTab }
+                    onClick = { this._onPreviewClick }
+                    onDoubleClick = { this._onSubmit }
+                    onShareAudioChecked = { this._onShareAudioChecked }
+                    selectedSourceId = { selectedSource.id }
+                    sources = { sources[selectedTab as keyof typeof sources] }
+                    type = { selectedTab } />
             </Dialog>
         );
     }
@@ -296,23 +306,20 @@ class DesktopPicker extends PureComponent<IProps, IState> {
      * Stores the selected tab and updates the selected source via
      * {@code _getSelectedSource}.
      *
-     * @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.
+     * @param {string} id - The id of the newly selected tab.
      * @returns {void}
      */
-    _onTabSelected(_tab: Object, tabIndex: number) {
-        const { types, sources } = this.state;
+    _onTabSelected(id: string) {
+        const { sources } = this.state;
 
-        this._selectedTabType = types[tabIndex];
+        this._selectedTabType = id;
 
         // When we change tabs also reset the screenShareAudio state so we don't
         // use the option from one tab when sharing from another.
         this.setState({
             screenShareAudio: false,
             selectedSource: this._getSelectedSource(sources),
-            selectedTab: tabIndex
+            selectedTab: id
         });
     }
 
@@ -334,27 +341,23 @@ class DesktopPicker extends PureComponent<IProps, IState> {
      * @returns {ReactElement}
      */
     _renderTabs() {
-        const { selectedSource, sources, types } = this.state;
+        const { types } = this.state;
         const { t } = this.props;
         const tabs
             = types.map(
                 type => {
                     return {
-                        content: <DesktopPickerPane
-                            key = { type }
-                            onClick = { this._onPreviewClick }
-                            onDoubleClick = { this._onSubmit }
-                            onShareAudioChecked = { this._onShareAudioChecked }
-                            selectedSourceId = { selectedSource.id }
-                            sources = { sources[type as keyof typeof sources] }
-                            type = { type } />,
+                        accessibilityLabel: t(TAB_LABELS[type as keyof typeof TAB_LABELS]),
+                        id: type,
                         label: t(TAB_LABELS[type as keyof typeof TAB_LABELS])
                     };
                 });
 
         return (
             <Tabs
-                onSelect = { this._onTabSelected }
+                accessibilityLabel = ''
+                className = 'desktop-picker-tabs-container'
+                onChange = { this._onTabSelected }
                 selected = { this.state.selectedTab }
                 tabs = { tabs } />);
     }