ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2026-05-14 15:27:49 +00:00
Code Issues Packages Projects Releases Wiki 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

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)));
}