DeforaNetworks/jitsi-meet
3
0
Fork 0
Code Releases Activity

ref: define state and property types (2)

Browse Source
This commit is contained in:
Lyubo Marinov
2017-11-17 13:06:47 -06:00
parent 379bad0ce6
commit 75bf7638b3
12 changed files with 262 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
react/features/base/dialog/components/AbstractDialog.js
View File

@@ -1,45 +1,36 @@
// @flow
import * as React from 'react';
import { Component } from 'react';
import { hideDialog } from '../actions';
import { DialogPropTypes } from '../constants';
import type { DialogProps } from '../constants';
/**
* Defines the property types for AbstractDialog.
* The type of the React {@code Component} props of {@link AbstractDialog}.
*/
export type AbstractDialogPropTypes = {
...DialogPropTypes,
/**
* The React {@code Component} children of {@code AbstractDialog}
* which represents the dialog's body.
*/
children: React.Node,
export type Props = {
...DialogProps,
/**
* Used to show/hide the dialog on cancel.
*/
dispatch: Dispatch<*>
}
};
/**
* Defines the state for AbstractDialog.
* The type of the React {@code Component} state of {@link AbstractDialog}.
*/
type AbstractDialogState = {
submitting: boolean
}
export type State = {
submitting: ?boolean
};
/**
* An abstract implementation of a dialog on Web/React and mobile/react-native.
*/
export default class AbstractDialog
extends React.Component<AbstractDialogPropTypes, AbstractDialogState> {
_mounted: boolean;
export default class AbstractDialog<P : Props, S : State>
extends Component<P, S> {
state = {
submitting: false
};
_mounted: boolean;
/**
* Initializes a new {@code AbstractDialog} instance.
@@ -47,7 +38,7 @@ export default class AbstractDialog
* @param {Object} props - The read-only React {@code Component} props with
* which the new instance is to be initialized.
*/
constructor(props: Object) {
constructor(props: P) {
super(props);
// Bind event handlers so they are only bound once per instance.

99
react/features/base/dialog/components/Dialog.native.js
View File

@@ -1,3 +1,6 @@
// @flow
import _ from 'lodash';
import React from 'react';
import { Modal, StyleSheet, TextInput } from 'react-native';
import Prompt from 'react-native-prompt';
@@ -7,7 +10,11 @@ import { translate } from '../../i18n';
import { LoadingIndicator } from '../../react';
import { set } from '../../redux';
import AbstractDialog, { AbstractDialogPropTypes } from './AbstractDialog';
import AbstractDialog from './AbstractDialog';
import type {
Props as AbstractDialogProps,
State as AbstractDialogState
} from './AbstractDialog';
import { dialog as styles } from './styles';
/**
@@ -27,21 +34,24 @@ const _SUBMIT_TEXT_TAG_VALUE = '_SUBMIT_TEXT_TAG_VALUE';
const _TAG_KEY = '_TAG_KEY';
/**
* {@code Dialog}'s React {@code Component} prop types.
* The type of the React {@code Component} props of {@link Dialog}.
*/
type DialogPropTypes = {
...AbstractDialogPropTypes,
type Props = {
...AbstractDialogProps,
/**
* I18n key to put as body title.
*/
bodyKey: String
}
bodyKey: String,
textInputProps: Object
};
/**
* Defines {@code Dialog}'s state.
* The type of the React {@code Component} state of {@link Dialog}.
*/
type DialogState = {
type State = {
...AbstractDialogState,
/**
* The text of the {@link TextInput} rendered by {@link Prompt} in
@@ -50,18 +60,13 @@ type DialogState = {
* functionality of {@code Prompt} because this {@code Dialog} does not
* really render the (whole) {@code Prompt}.
*/
text: String
}
text: string
};
/**
* Implements {@code AbstractDialog} on react-native using {@code Prompt}.
*/
class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
state = {
text: ''
};
class Dialog extends AbstractDialog<Props, State> {
/**
* Initailizes a new {@code Dialog} instance.
*
@@ -71,6 +76,8 @@ class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
constructor(props: Object) {
super(props);
this.state.text = '';
// Bind event handlers so they are only bound once per instance.
this._onChangeText = this._onChangeText.bind(this);
this._onSubmit = this._onSubmit.bind(this);
@@ -89,7 +96,7 @@ class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
cancelTitleKey = 'dialog.Cancel',
okDisabled,
okTitleKey = 'dialog.Ok',
t,
t /* XXX The following silences flow errors: */ = _.identity,
titleKey,
titleString
} = this.props;
@@ -104,13 +111,10 @@ class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
[_TAG_KEY]: _SUBMIT_TEXT_TAG_VALUE
};
// eslint-disable-next-line no-extra-parens
let element = (
let el: ?React$Element<*> = ( // eslint-disable-line no-extra-parens
<Prompt
cancelButtonTextStyle = { cancelButtonTextStyle }
cancelText = { t(cancelTitleKey) }
// $FlowFixMeState
defaultValue = { this.state.text }
onCancel = { this._onCancel }
onChangeText = { this._onChangeText }
@@ -126,16 +130,18 @@ class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
// XXX The following implements workarounds with knowledge of
// react-native-prompt/Prompt's implementation.
// eslint-disable-next-line no-extra-parens, new-cap
element = (new (element.type)(element.props)).render();
if (el) {
// eslint-disable-next-line new-cap, no-extra-parens
el = (new (el.type)(el.props)).render();
}
let { children } = this.props;
children = React.Children.count(children) ? children : undefined;
// eslint-disable-next-line no-shadow
element = this._mapReactElement(element, element => {
const { type } = element;
el = this._mapReactElement(el, (el: React$Element<*>) => {
const { type } = el;
if (type === Modal) {
// * Modal handles hardware button presses for back navigation.
@@ -144,7 +150,7 @@ class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
// Secondly, we cannot get Prompt's default behavior anyway
// because we've removed Prompt and we're preserving whatever
// it's rendered only.
return this._cloneElement(element, /* props */ {
return this._cloneElement(el, /* props */ {
onRequestClose: this._onCancel
});
}
@@ -153,12 +159,13 @@ class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
// * If this Dialog has children, they are to be rendered
// instead of Prompt's TextInput.
if (children) {
element = children; // eslint-disable-line no-param-reassign
// $FlowFixMe
el = children; // eslint-disable-line no-param-reassign
children = undefined;
}
} else {
let { style } = element.props;
let { style } = el.props;
if (style
&& (style = StyleSheet.flatten(style))
@@ -177,33 +184,33 @@ class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
break;
}
return this._cloneElement(element, /* props */ {
return this._cloneElement(el, /* props */ {
style: set(style, _TAG_KEY, undefined)
});
}
}
return element;
return el;
});
return element;
return el;
}
/**
* Clones a specific {@code ReactElement} and adds/merges specific props
* into the clone.
*
* @param {ReactElement} element - The {@code ReactElement} to clone.
* @param {ReactElement} el - The {@code ReactElement} to clone.
* @param {Object} props - The props to add/merge into the clone.
* @returns {ReactElement} The close of the specified {@code element} with
* @returns {ReactElement} The close of the specified {@code el} with
* the specified {@code props} added/merged.
*/
_cloneElement(element, props) {
_cloneElement(el: React$Element<*>, props) {
return (
React.cloneElement(
element,
el,
props,
...React.Children.toArray(element.props.children)));
...React.Children.toArray(el.props.children)));
}
/**
@@ -211,33 +218,35 @@ class Dialog extends AbstractDialog<DialogPropTypes, DialogState> {
* of calling a specific function on every node of a specific
* {@code ReactElement} tree.
*
* @param {ReactElement} element - The {@code ReactElement} to clone and
* @param {ReactElement} el - The {@code ReactElement} to clone and
* call the specified {@code f} on.
* @param {Function} f - The function to call on every node of the
* {@code ReactElement} tree represented by the specified {@code element}.
* {@code ReactElement} tree represented by the specified {@code el}.
* @private
* @returns {ReactElement}
*/
_mapReactElement(element, f) {
if (!element || !element.props || !element.type) {
return element;
_mapReactElement(
el: ?React$Element<*>,
f: (React$Element<*>) => ?React$Element<*>): ?React$Element<*> {
if (!el || !el.props || !el.type) {
return el;
}
let mapped = f(element);
let mapped = f(el);
if (mapped) {
const { children } = mapped.props;
if (mapped === element || React.Children.count(children)) {
if (mapped === el || React.Children.count(children)) {
mapped
= React.cloneElement(
mapped,
/* props */ {},
...React.Children.toArray(React.Children.map(
children,
function(element) { // eslint-disable-line no-shadow
function(el) { // eslint-disable-line no-shadow
// eslint-disable-next-line no-invalid-this
return this._mapReactElement(element, f);
return this._mapReactElement(el, f);
},
this)));
}

22
react/features/base/dialog/components/Dialog.web.js
View File

@@ -1,14 +1,17 @@
// @flow
import React from 'react';
import { connect } from 'react-redux';
import AbstractDialog, { AbstractDialogPropTypes } from './AbstractDialog';
import AbstractDialog from './AbstractDialog';
import type { Props as AbstractDialogProps, State } from './AbstractDialog';
import StatelessDialog from './StatelessDialog';
/**
* Web dialog component's property types.
* The type of the React {@code Component} props of {@link Dialog}.
*/
type DialogPropTypes = {
...AbstractDialogPropTypes,
type Props = {
...AbstractDialogProps,
/**
* Whether the dialog is modal. This means clicking on the blanket will
@@ -28,13 +31,13 @@ type DialogPropTypes = {
* - integer value for pixel width
* - string value for percentage
*/
width: String
}
width: string
};
/**
* Web dialog that uses atlaskit modal-dialog to display dialogs.
*/
class Dialog extends AbstractDialog<DialogPropTypes> {
class Dialog extends AbstractDialog<Props, State> {
/**
* Initializes a new Dialog instance.
*
@@ -44,6 +47,7 @@ class Dialog extends AbstractDialog<DialogPropTypes> {
constructor(props) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onCancel = this._onCancel.bind(this);
this._onSubmit = this._onSubmit.bind(this);
}
@@ -66,6 +70,8 @@ class Dialog extends AbstractDialog<DialogPropTypes> {
return <StatelessDialog { ...props } />;
}
_onCancel: () => void;
/**
* Dispatches action to hide the dialog.
*
@@ -74,6 +80,8 @@ class Dialog extends AbstractDialog<DialogPropTypes> {
_onCancel() {
this.props.isModal || super._onCancel();
}
_onSubmit: (?string) => void;
}
export default connect()(Dialog);

140
react/features/base/dialog/components/StatelessDialog.web.js
View File

@@ -1,12 +1,14 @@
// @flow
import Button, { ButtonGroup } from '@atlaskit/button';
import ModalDialog from '@atlaskit/modal-dialog';
import { AtlasKitThemeProvider } from '@atlaskit/theme';
import PropTypes from 'prop-types';
import _ from 'lodash';
import React, { Component } from 'react';
import { translate } from '../../i18n';
import { DIALOG_PROP_TYPES } from '../constants';
import type { DialogProps } from '../constants';
/**
* The ID to be used for the cancel button if enabled.
@@ -20,49 +22,46 @@ const CANCEL_BUTTON_ID = 'modal-dialog-cancel-button';
*/
const OK_BUTTON_ID = 'modal-dialog-ok-button';
/**
* The type of the React {@code Component} props of {@link StatelessDialog}.
*
* @static
*/
type Props = {
...DialogProps,
/**
* Disables dismissing the dialog when the blanket is clicked. Enabled
* by default.
*/
disableBlanketClickDismiss: boolean,
/**
* Whether the dialog is modal. This means clicking on the blanket will
* leave the dialog open. No cancel button.
*/
isModal: boolean,
/**
* Disables rendering of the submit button.
*/
submitDisabled: boolean,
/**
* 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: string
};
/**
* Web dialog that uses atlaskit modal-dialog to display dialogs.
*/
class StatelessDialog extends Component {
/**
* {@code StatelessDialog} component's property types.
*
* @static
*/
static propTypes = {
...DIALOG_PROP_TYPES,
/**
* This is the body of the dialog, the component children.
*/
children: PropTypes.node,
/**
* Disables dismissing the dialog when the blanket is clicked. Enabled
* by default.
*/
disableBlanketClickDismiss: PropTypes.bool,
/**
* Whether the dialog is modal. This means clicking on the blanket will
* leave the dialog open. No cancel button.
*/
isModal: PropTypes.bool,
/**
* Disables rendering of the submit button.
*/
submitDisabled: 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: PropTypes.string
};
class StatelessDialog extends Component<Props> {
_dialogElement: ?HTMLElement;
/**
* Initializes a new {@code StatelessDialog} instance.
@@ -100,8 +99,8 @@ class StatelessDialog extends Component {
// if there is an update in any of the buttons enable/disable props
// update the focus if needed
if (prevProps.okDisabled !== this.props.okDisabled
|| prevProps.cancelDisabled !== this.props.cancelDisabled
|| prevProps.submitDisabled !== this.props.submitDisabled) {
|| prevProps.cancelDisabled !== this.props.cancelDisabled
|| prevProps.submitDisabled !== this.props.submitDisabled) {
this._updateButtonFocus();
}
}
@@ -143,6 +142,8 @@ class StatelessDialog extends Component {
);
}
_onCancel: () => void;
/**
* Dispatches action to hide the dialog.
*
@@ -150,10 +151,14 @@ class StatelessDialog extends Component {
*/
_onCancel() {
if (!this.props.isModal) {
this.props.onCancel();
const { onCancel } = this.props;
onCancel && onCancel();
}
}
_onDialogDismissed: () => void;
/**
* Handles click on the blanket area.
*
@@ -165,6 +170,8 @@ class StatelessDialog extends Component {
}
}
_onSubmit: (?string) => void;
/**
* Dispatches the action when submitting the dialog.
*
@@ -173,7 +180,9 @@ class StatelessDialog extends Component {
* @returns {void}
*/
_onSubmit(value) {
this.props.onSubmit(value);
const { onSubmit } = this.props;
onSubmit && onSubmit(value);
}
/**
@@ -187,6 +196,10 @@ class StatelessDialog extends Component {
return null;
}
const {
t /* The following fixes a flow error: */ = _.identity
} = this.props;
return (
<Button
appearance = 'subtle'
@@ -194,7 +207,7 @@ class StatelessDialog extends Component {
key = 'cancel'
onClick = { this._onCancel }
type = 'button'>
{ this.props.t(this.props.cancelTitleKey || 'dialog.Cancel') }
{ t(this.props.cancelTitleKey || 'dialog.Cancel') }
</Button>
);
}
@@ -229,7 +242,9 @@ class StatelessDialog extends Component {
* @returns {ReactElement}
*/
_renderHeader() {
const { t } = this.props;
const {
t /* The following fixes a flow error: */ = _.identity
} = this.props;
return (
<header>
@@ -251,6 +266,10 @@ class StatelessDialog extends Component {
return null;
}
const {
t /* The following fixes a flow error: */ = _.identity
} = this.props;
return (
<Button
appearance = 'primary'
@@ -260,23 +279,28 @@ class StatelessDialog extends Component {
key = 'submit'
onClick = { this._onSubmit }
type = 'button'>
{ this.props.t(this.props.okTitleKey || 'dialog.Ok') }
{ t(this.props.okTitleKey || 'dialog.Ok') }
</Button>
);
}
_setDialogElement: (?HTMLElement) => void;
/**
* Sets the instance variable for the div containing the component's dialog
* element so it can be accessed directly.
*
* @param {Object} element - The DOM element for the component's dialog.
* @param {HTMLElement} element - The DOM element for the component's
* dialog.
* @private
* @returns {void}
*/
_setDialogElement(element) {
_setDialogElement(element: ?HTMLElement) {
this._dialogElement = element;
}
_onKeyDown: (Object) => void;
/**
* Handles 'Enter' key in the dialog to submit/hide dialog depending on
* the available buttons and their disabled state.
@@ -312,22 +336,24 @@ class StatelessDialog extends Component {
* @returns {void}
*/
_updateButtonFocus() {
if (this._dialogElement) {
const dialogElement = this._dialogElement;
if (dialogElement) {
// if we have a focused element inside the dialog, skip changing
// the focus
if (this._dialogElement.contains(document.activeElement)) {
if (dialogElement.contains(document.activeElement)) {
return;
}
let buttonToFocus;
if (this.props.submitDisabled) {
buttonToFocus = this._dialogElement
.querySelector(`[id=${CANCEL_BUTTON_ID}]`);
buttonToFocus
= dialogElement.querySelector(`[id=${CANCEL_BUTTON_ID}]`);
} else if (!this.props.okDisabled) {
buttonToFocus = this._dialogElement
.querySelector(`[id=${OK_BUTTON_ID}]`);
buttonToFocus
= dialogElement.querySelector(`[id=${OK_BUTTON_ID}]`);
}
if (buttonToFocus) {

16
react/features/base/dialog/constants.js
View File

@@ -1,5 +1,6 @@
// @flow
export type DialogPropTypes = {
export type DialogProps = {
/**
* Whether cancel button is disabled. Enabled by default.
@@ -9,7 +10,12 @@ export type DialogPropTypes = {
/**
* Optional i18n key to change the cancel button title.
*/
cancelTitleKey: String,
cancelTitleKey: string,
/**
* The React {@code Component} children which represents the dialog's body.
*/
children: React$Node,
/**
* Is ok button enabled/disabled. Enabled by default.
@@ -19,7 +25,7 @@ export type DialogPropTypes = {
/**
* Optional i18n key to change the ok button title.
*/
okTitleKey: String,
okTitleKey: string,
/**
* The handler for onCancel event.
@@ -39,12 +45,12 @@ export type DialogPropTypes = {
/**
* Key to use for showing a title.
*/
titleKey: String,
titleKey: string,
/**
* The string to use as a title instead of {@code titleKey}. If a truthy
* value is specified, it takes precedence over {@code titleKey} i.e.
* the latter is unused.
*/
titleString: String
titleString: string
};