jiti-meet/react/features/base/dialog/components/AbstractDialog.js

170 lines
4.5 KiB
JavaScript
Raw Normal View History

2017-10-04 22:36:09 +00:00
// @flow
import { Component } from 'react';
2019-03-19 15:42:25 +00:00
import type { Dispatch } from 'redux';
2017-03-07 03:34:51 +00:00
import { hideDialog } from '../actions';
import type { DialogProps } from '../constants';
2017-03-07 03:34:51 +00:00
/**
* The type of the React {@code Component} props of {@link AbstractDialog}.
2017-03-07 03:34:51 +00:00
*/
2019-03-19 15:42:25 +00:00
export type Props = DialogProps & {
2017-03-07 03:34:51 +00:00
2017-11-13 15:54:04 +00:00
/**
* Used to show/hide the dialog on cancel.
*/
2019-03-19 15:42:25 +00:00
dispatch: Dispatch<any>
};
2017-09-18 07:01:14 +00:00
2017-11-13 15:54:04 +00:00
/**
* The type of the React {@code Component} state of {@link AbstractDialog}.
2017-11-13 15:54:04 +00:00
*/
export type State = {
submitting: ?boolean
};
2017-03-07 03:34:51 +00:00
2017-11-13 15:54:04 +00:00
/**
* An abstract implementation of a dialog on Web/React and mobile/react-native.
*/
export default class AbstractDialog<P : Props, S : State>
extends Component<P, S> {
2017-10-04 22:36:09 +00:00
_mounted: boolean;
2017-10-04 22:36:09 +00:00
2017-03-07 03:34:51 +00:00
/**
* Initializes a new {@code AbstractDialog} instance.
2017-03-07 03:34:51 +00:00
*
* @param {Object} props - The read-only React {@code Component} props with
2017-09-18 07:01:14 +00:00
* which the new instance is to be initialized.
2017-03-07 03:34:51 +00:00
*/
constructor(props: P) {
2017-03-07 03:34:51 +00:00
super(props);
2017-10-04 22:36:09 +00:00
// Bind event handlers so they are only bound once per instance.
2017-03-07 03:34:51 +00:00
this._onCancel = this._onCancel.bind(this);
this._onSubmit = this._onSubmit.bind(this);
this._onSubmitFulfilled = this._onSubmitFulfilled.bind(this);
this._onSubmitRejected = this._onSubmitRejected.bind(this);
}
/**
* Implements React's {@link Component#componentDidMount()}. Invoked
* immediately before mounting occurs.
*
* @inheritdoc
*/
componentDidMount() {
this._mounted = true;
}
/**
* Implements React's {@link Component#componentWillUnmount()}. Invoked
* immediately before this component is unmounted and destroyed.
*
* @inheritdoc
*/
componentWillUnmount() {
this._mounted = false;
2017-03-07 03:34:51 +00:00
}
2017-10-06 20:15:51 +00:00
/**
* Dispatches a redux action to hide this dialog.
*
* @returns {*} The return value of {@link hideDialog}.
*/
_hide() {
return this.props.dispatch(hideDialog());
}
2017-10-04 22:36:09 +00:00
_onCancel: () => void;
2017-03-07 03:34:51 +00:00
/**
2017-09-18 07:01:14 +00:00
* Dispatches a redux action to hide this dialog when it's canceled.
2017-03-07 03:34:51 +00:00
*
2017-09-18 07:01:14 +00:00
* @protected
2017-03-07 03:34:51 +00:00
* @returns {void}
*/
_onCancel() {
const { cancelDisabled = false, onCancel } = this.props;
2017-03-07 03:34:51 +00:00
if (!cancelDisabled && (!onCancel || onCancel())) {
2017-10-06 20:15:51 +00:00
this._hide();
2017-03-07 03:34:51 +00:00
}
}
2017-10-04 22:36:09 +00:00
_onSubmit: (?string) => void;
2017-03-07 03:34:51 +00:00
/**
2017-10-04 22:36:09 +00:00
* Submits this {@code Dialog}. If the React {@code Component} prop
* {@code onSubmit} is defined, the function that is the value of the prop
* is invoked. If the function returns a {@code thenable}, then the
* resolution of the {@code thenable} is awaited. If the submission
* completes successfully, a redux action will be dispatched to hide this
* dialog.
2017-03-07 03:34:51 +00:00
*
2017-10-04 22:36:09 +00:00
* @protected
* @param {string} [value] - The submitted value if any.
2017-03-07 03:34:51 +00:00
* @returns {void}
*/
2017-10-04 22:36:09 +00:00
_onSubmit(value: ?string) {
const { okDisabled = false, onSubmit } = this.props;
2017-03-07 03:34:51 +00:00
if (!okDisabled) {
this.setState({ submitting: true });
// Invoke the React Component prop onSubmit if any.
const r = !onSubmit || onSubmit(value);
// If the invocation returns a thenable, await its resolution;
// otherwise, treat the return value as a boolean indicating whether
// the submission has completed successfully.
let then;
if (r) {
switch (typeof r) {
case 'function':
case 'object':
then = r.then;
break;
}
}
if (typeof then === 'function' && then.length === 2) {
then.call(r, this._onSubmitFulfilled, this._onSubmitRejected);
} else if (r) {
this._onSubmitFulfilled();
} else {
this._onSubmitRejected();
}
2017-03-07 03:34:51 +00:00
}
}
2017-10-04 22:36:09 +00:00
_onSubmitFulfilled: () => void;
/**
* Notifies this {@code AbstractDialog} that it has been submitted
* successfully. Dispatches a redux action to hide this dialog after it has
* been submitted.
*
* @private
* @returns {void}
*/
_onSubmitFulfilled() {
this._mounted && this.setState({ submitting: false });
2017-10-06 20:15:51 +00:00
this._hide();
}
2017-10-04 22:36:09 +00:00
_onSubmitRejected: () => void;
/**
* Notifies this {@code AbstractDialog} that its submission has failed.
*
* @private
* @returns {void}
*/
_onSubmitRejected() {
this._mounted && this.setState({ submitting: false });
}
2017-03-07 03:34:51 +00:00
}