Adds base dialog implementation.

package.json

@@ -17,6 +17,9 @@
   "//": "Callstats.io does not work with recent versions of jsSHA (2.0.1 in particular)",
   "dependencies": {
     "@atlassian/aui": "6.0.6",
+    "@atlaskit/button": "1.0.3",
+    "@atlaskit/button-group": "1.0.0",
+    "@atlaskit/modal-dialog": "1.2.4",
     "async": "0.9.0",
     "autosize": "1.18.13",
     "bootstrap": "3.1.1",

react/features/base/dialog/actionTypes.js

@@ -0,0 +1,22 @@
+import { Symbol } from '../react';
+
+/**
+ * The type of Redux action which closes a dialog
+ *
+ * {
+ *     type: HIDE_DIALOG
+ * }
+ */
+export const HIDE_DIALOG = Symbol('HIDE_DIALOG');
+
+/**
+ * The type of Redux action which begins a request to open a dialog.
+ *
+ * {
+ *     type: OPEN_DIALOG,
+ *     component: React.Component,
+ *     props: React.PropTypes.object
+ * }
+ *
+ */
+export const OPEN_DIALOG = Symbol('OPEN_DIALOG');

react/features/base/dialog/actions.js

@@ -0,0 +1,32 @@
+import {
+    HIDE_DIALOG,
+    OPEN_DIALOG
+} from './actionTypes';
+
+/**
+ * Signals Dialog to close its dialog.
+ *
+ * @returns {{
+ *     type: HIDE_DIALOG
+ * }}
+ */
+export function hideDialog() {
+    return {
+        type: HIDE_DIALOG
+    };
+}
+
+/**
+ * Signals Dialog to open dialog.
+ *
+ * @param {Object} component - The component to display as dialog.
+ * @param {Object} componentProps - The properties needed for that component.
+ * @returns {Object}
+ */
+export function openDialog(component, componentProps) {
+    return {
+        type: OPEN_DIALOG,
+        component,
+        componentProps
+    };
+}

react/features/base/dialog/components/AbstractDialog.js

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+
+import { hideDialog } from '../actions';
+
+/**
+ * Abstract dialog to display dialogs.
+ */
+export default class AbstractDialog extends Component {
+
+    /**
+     * Abstract Dialog component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * Whether cancel button is disabled. Enabled by default.
+         */
+        cancelDisabled: React.PropTypes.bool,
+
+        /**
+         * Optional i18n key to change the cancel button title.
+         */
+        cancelTitleKey: React.PropTypes.string,
+
+        /**
+         * Used to show hide the dialog on cancel.
+         */
+        dispatch: React.PropTypes.func,
+
+        /**
+         * Is ok button enabled/disabled. Enabled by default.
+         */
+        okDisabled: React.PropTypes.bool,
+
+        /**
+         * Optional i18n key to change the ok button title.
+         */
+        okTitleKey: React.PropTypes.string,
+
+        /**
+         * The handler for onCancel event.
+         */
+        onCancel: React.PropTypes.func,
+
+        /**
+         * The handler for the event when submitting the dialog.
+         */
+        onSubmit: React.PropTypes.func,
+
+        /**
+         * Used to obtain translations in children classes.
+         */
+        t: React.PropTypes.func,
+
+        /**
+         * Key to use for showing a title.
+         */
+        titleKey: React.PropTypes.string
+    }
+
+    /**
+     * Initializes a new Dialog instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        this._onCancel = this._onCancel.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    /**
+     * Dispatches action to hide the dialog.
+     *
+     * @returns {void}
+     */
+    _onCancel() {
+        let hide = true;
+
+        if (this.props.onCancel) {
+            hide = this.props.onCancel();
+        }
+
+        if (hide) {
+            this.props.dispatch(hideDialog());
+        }
+    }
+
+    /**
+     * Dispatches the action when submitting the dialog.
+     *
+     * @private
+     * @param {string} value - The submitted value if any.
+     * @returns {void}
+     */
+    _onSubmit(value) {
+        let hide = true;
+
+        if (this.props.onSubmit) {
+            hide = this.props.onSubmit(value);
+        }
+
+        if (hide) {
+            this.props.dispatch(hideDialog());
+        }
+    }
+}

react/features/base/dialog/components/Dialog.native.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Prompt from 'react-native-prompt';
+
+import { translate } from '../../i18n';
+
+import AbstractDialog from './AbstractDialog';
+
+/**
+ * Native dialog using Prompt.
+ */
+class Dialog extends AbstractDialog {
+
+    /**
+     * Native sialog component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * I18n key to put as body title.
+         */
+        bodyKey: React.PropTypes.string
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            cancelDisabled,
+            cancelTitleKey,
+            bodyKey,
+            okDisabled,
+            okTitleKey,
+            t,
+            titleKey
+        } = this.props;
+
+        return (
+            <Prompt
+                cancelText = { cancelDisabled
+                    ? undefined : t(cancelTitleKey || 'dialog.Cancel') }
+                onCancel = { this._onCancel }
+                onSubmit = { this._onSubmit }
+                placeholder = { t(bodyKey) }
+                submitText = { okDisabled
+                    ? undefined : t(okTitleKey || 'dialog.Ok') }
+                title = { t(titleKey) }
+                visible = { true } />
+        );
+    }
+}
+
+export default translate(connect()(Dialog));

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

@@ -0,0 +1,159 @@
+import AKButton from '@atlaskit/button';
+import AKButtonGroup from '@atlaskit/button-group';
+import ModalDialog from '@atlaskit/modal-dialog';
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../i18n';
+
+import AbstractDialog from './AbstractDialog';
+
+/**
+ * Web dialog that uses atlaskit modal-dialog to display dialogs.
+ */
+class Dialog extends AbstractDialog {
+
+    /**
+     * Web dialog component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * This is the body of the dialog, the component children.
+         */
+        children: React.PropTypes.node,
+
+        /**
+         * Whether the dialog is modal. This means clicking on the blanket will
+         * leave the dialog open. No cancel button.
+         */
+        isModal: React.PropTypes.bool,
+
+        /**
+         * Width of the dialog, can be:
+         * - 'small' (400px), 'medium' (600px), 'large' (800px),
+         * 'x-large' (968px)
+         * - integer value for pixel width
+         * - string value for percentage
+         */
+        width: React.PropTypes.string
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <ModalDialog
+                footer = { this._renderFooter() }
+                header = { this._renderHeader() }
+                isOpen = { true }
+                onDialogDismissed = { this._onCancel }
+                width = { this.props.width || 'medium' }>
+                <div>
+                    <form
+                        id = 'modal-dialog-form'
+                        onSubmit = { this._onSubmit }>
+                        { this.props.children }
+                    </form>
+                </div>
+            </ModalDialog>);
+    }
+
+    /**
+     * Render cancel button.
+     *
+     * @returns {*} The cancel button if enabled and dialog is not modal.
+     * @private
+     */
+    _renderCancelButton() {
+        if (this.props.cancelDisabled || this.props.isModal) {
+            return null;
+        }
+
+        return (
+            <AKButton
+                appearance = 'subtle'
+                id = 'modal-dialog-cancel-button'
+                onClick = { this._onCancel }>
+                { this.props.t(this.props.cancelTitleKey || 'dialog.Cancel') }
+            </AKButton>
+        );
+    }
+
+    /**
+     * Render component in dialog footer.
+     *
+     * @returns {ReactElement}
+     * @private
+     */
+    _renderFooter() {
+        return (
+            <footer>
+                <AKButtonGroup>
+                    { this._renderCancelButton() }
+                    { this._renderOKButton() }
+                </AKButtonGroup>
+            </footer>
+        );
+    }
+
+    /**
+     * Render component in dialog header.
+     *
+     * @returns {ReactElement}
+     * @private
+     */
+    _renderHeader() {
+        const { t } = this.props;
+
+        return (
+            <header>
+                <h2>
+                    { t(this.props.titleKey) }
+                </h2>
+            </header>
+        );
+    }
+
+    /**
+     * Render ok button.
+     *
+     * @returns {*} The ok button if enabled.
+     * @private
+     */
+    _renderOKButton() {
+        if (this.props.submitDisabled) {
+            return null;
+        }
+
+        return (
+            <AKButton
+                appearance = 'primary'
+                form = 'modal-dialog-form'
+                id = 'modal-dialog-ok-button'
+                onClick = { this._onSubmit }>
+                { this.props.t(this.props.okTitleKey || 'dialog.Ok') }
+            </AKButton>
+        );
+    }
+
+    /**
+     * Dispatches action to hide the dialog.
+     *
+     * @returns {void}
+     */
+    _onCancel() {
+        if (this.props.isModal) {
+            return;
+        }
+
+        super._onCancel();
+    }
+}
+
+export default translate(connect()(Dialog));

react/features/base/dialog/components/DialogContainer.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+/**
+ * Implements a DialogContainer that will be responsible for
+ * showing all dialogs. We will need a separate container so we can handle
+ * multiple dialogs, showing them simultaneously or queueing them.
+ */
+export class DialogContainer extends Component {
+
+    /**
+     * DialogContainer component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * The component to render.
+         */
+        _component: React.PropTypes.func,
+
+        /**
+         * The props to pass to the component that will be rendered.
+         */
+        _componentProps: React.PropTypes.object
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        if (!this.props._component) {
+            return null;
+        }
+
+        return React.createElement(
+            this.props._component, this.props._componentProps);
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated Dialog's props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _component: React.Component,
+ *     _props: React.PropTypes.object
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        _component: state['features/base/dialog'].component,
+        _componentProps: state['features/base/dialog'].componentProps
+    };
+}
+
+export default connect(_mapStateToProps)(DialogContainer);

react/features/base/dialog/components/index.js

@@ -0,0 +1,2 @@
+export { default as DialogContainer } from './DialogContainer';
+export { default as Dialog } from './Dialog';

react/features/base/dialog/index.js

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './components';
+
+import './reducer';

react/features/base/dialog/reducer.js

@@ -0,0 +1,31 @@
+import { ReducerRegistry, setStateProperties } from '../redux';
+
+import {
+    HIDE_DIALOG,
+    OPEN_DIALOG
+} from './actionTypes';
+
+/**
+ * Listen for actions which show or hide dialogs.
+ *
+ * @param {Object[]} state - Current state.
+ * @param {Object} action - Action object.
+ * @param {string} action.type - Type of action.
+ * @returns {{}}
+ */
+ReducerRegistry.register('features/base/dialog', (state = {}, action) => {
+    switch (action.type) {
+    case HIDE_DIALOG:
+        return setStateProperties(state, {
+            component: undefined,
+            componentProps: undefined
+        });
+    case OPEN_DIALOG:
+        return setStateProperties(state, {
+            component: action.component,
+            componentProps: action.componentProps
+        });
+    }
+
+    return state;
+});

react/features/conference/components/Conference.native.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect as reactReduxConnect } from 'react-redux';
 
 import { connect, disconnect } from '../../base/connection';
+import { DialogContainer } from '../../base/dialog';
 import { Container } from '../../base/react';
 import { FilmStrip } from '../../film-strip';
 import { LargeVideo } from '../../large-video';
@@ -125,6 +126,8 @@ class Conference extends Component {
                 <Toolbar visible = { toolbarVisible } />
                 <FilmStrip visible = { !toolbarVisible } />
 
+                <DialogContainer />
+
                 {
                     this._renderPrompt()
                 }

react/features/conference/components/Conference.web.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { connect as reactReduxConnect } from 'react-redux';
 
 import { connect, disconnect } from '../../base/connection';
+import { DialogContainer } from '../../base/dialog';
 import { Watermarks } from '../../base/react';
 import { FeedbackButton } from '../../feedback';
 import { OverlayContainer } from '../../overlay';
@@ -170,7 +171,7 @@ class Conference extends Component {
                         </div>
                     </div>
                 </div>
-
+                <DialogContainer />
                 <OverlayContainer />
                 <HideNotificationBarStyle />
             </div>