Merge pull request #3619 from mmoanis/dialog-with-tabs

Abstract the DialogWithTabs title so it can be reused with other comp…

react/features/base/dialog/components/DialogWithTabs.web.js

@@ -18,6 +18,11 @@ export type Props = {
      */
     closeDialog: Function,
 
+    /**
+     * Css class name that will be added to the dialog.
+     */
+    cssClassName: string,
+
     /**
      * Which settings tab should be initially displayed. If not defined then
      * the first tab will be displayed.
@@ -44,7 +49,12 @@ export type Props = {
     /**
      * Information about the tabs that will be rendered.
      */
-    tabs: Array<Object>
+    tabs: Array<Object>,
+
+    /**
+     * Key to use for showing a title.
+     */
+    titleKey: string
 
 };
 
@@ -102,8 +112,8 @@ class DialogWithTabs extends Component<Props, State> {
                     = { this.props.disableBlanketClickDismiss }
                 onCancel = { onCancel }
                 onSubmit = { this._onSubmit }
-                titleKey = 'settings.title'>
-                <div className = 'settings-dialog'>
+                titleKey = { this.props.titleKey } >
+                <div className = { this.props.cssClassName } >
                     { this._renderTabs() }
                 </div>
             </StatelessDialog>

react/features/settings/DeviceSelectionPopup.js

@@ -262,13 +262,15 @@ export default class DeviceSelectionPopup {
                 <AtlasKitThemeProvider mode = 'dark'>
                     <DialogWithTabs
                         closeDialog = { this.close }
+                        cssClassName = 'settings-dialog'
                         onSubmit = { onSubmit }
                         tabs = { [ {
                             component: DeviceSelection,
                             label: 'settings.devices',
                             props: this._dialogProps,
                             submit: this._onSubmit
-                        } ] } />
+                        } ] }
+                        titleKey = 'settings.title' />
                 </AtlasKitThemeProvider>
             </I18nextProvider>,
             document.getElementById('react'));

react/features/settings/components/web/SettingsDialog.js

@@ -91,11 +91,13 @@ class SettingsDialog extends Component<Props> {
         return (
             <DialogWithTabs
                 closeDialog = { this._closeDialog }
+                cssClassName = 'settings-dialog'
                 defaultTab = {
                     defaultTabIdx === -1 ? undefined : defaultTabIdx
                 }
                 onSubmit = { onSubmit }
-                tabs = { tabs } />
+                tabs = { tabs }
+                titleKey = 'settings.title' />
         );
     }