mirror of https://github.com/jitsi/jitsi-meet
Bettenbuk Zoltan
6 years ago
committed by
Saúl Ibarra Corretgé
parent
3212bde6e6
commit
80e8afa9c1
@ -1,299 +0,0 @@ |
||||
// @flow
|
||||
|
||||
import _ from 'lodash'; |
||||
import React from 'react'; |
||||
import { Modal, StyleSheet, TextInput } from 'react-native'; |
||||
import Prompt from 'react-native-prompt'; |
||||
import { connect } from 'react-redux'; |
||||
|
||||
import { translate } from '../../../i18n'; |
||||
import { LoadingIndicator } from '../../../react'; |
||||
import { set } from '../../../redux'; |
||||
|
||||
import AbstractDialog from '../AbstractDialog'; |
||||
import type { |
||||
Props as AbstractDialogProps, |
||||
State as AbstractDialogState |
||||
} from '../AbstractDialog'; |
||||
import { dialog as styles } from './styles'; |
||||
|
||||
/** |
||||
* The value of the style property {@link _TAG_KEY} which identifies the |
||||
* OK/submit button of {@code Prompt}. |
||||
*/ |
||||
const _SUBMIT_TEXT_TAG_VALUE = '_SUBMIT_TEXT_TAG_VALUE'; |
||||
|
||||
/** |
||||
* The name of the style property which identifies ancestors of {@code Prompt} |
||||
* such as its OK/submit button for the purposes of workarounds implemented by |
||||
* {@code Dialog}. |
||||
* |
||||
* XXX The value may trigger a react-native warning in the Debug configuration |
||||
* but, unfortunately, I couldn't find a value that wouldn't. |
||||
*/ |
||||
const _TAG_KEY = '_TAG_KEY'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of {@link Dialog}. |
||||
*/ |
||||
type Props = { |
||||
...AbstractDialogProps, |
||||
|
||||
/** |
||||
* I18n key to put as body title. |
||||
*/ |
||||
bodyKey: string, |
||||
|
||||
/** |
||||
* Function to be used to retreive translated i18n labels. |
||||
*/ |
||||
t: Function, |
||||
|
||||
textInputProps: Object |
||||
}; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} state of {@link Dialog}. |
||||
*/ |
||||
type State = { |
||||
...AbstractDialogState, |
||||
|
||||
/** |
||||
* The text of the {@link TextInput} rendered by {@link Prompt} in |
||||
* general and by this {@code Dialog} in particular if no |
||||
* {@code children} are specified to it. It mimics/reimplements the |
||||
* functionality of {@code Prompt} because this {@code Dialog} does not |
||||
* really render the (whole) {@code Prompt}. |
||||
*/ |
||||
text: string |
||||
}; |
||||
|
||||
/** |
||||
* Implements {@code AbstractDialog} on react-native using {@code Prompt}. |
||||
*/ |
||||
class Dialog extends AbstractDialog<Props, State> { |
||||
state = { |
||||
text: '' |
||||
}; |
||||
|
||||
/** |
||||
* Initailizes a new {@code Dialog} instance. |
||||
* |
||||
* @param {Object} props - The read-only React {@code Component} props with |
||||
* which the new instance is to be initialized. |
||||
*/ |
||||
constructor(props: Object) { |
||||
super(props); |
||||
|
||||
// Bind event handlers so they are only bound once per instance.
|
||||
this._onChangeText = this._onChangeText.bind(this); |
||||
this._onSubmit = this._onSubmit.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { |
||||
bodyKey, |
||||
cancelDisabled, |
||||
cancelTitleKey = 'dialog.Cancel', |
||||
okDisabled, |
||||
okTitleKey = 'dialog.Ok', |
||||
t /* XXX The following silences flow errors: */ = _.identity, |
||||
titleKey, |
||||
titleString |
||||
} = this.props; |
||||
|
||||
const cancelButtonTextStyle |
||||
= cancelDisabled ? styles.disabledButtonText : styles.buttonText; |
||||
let submitButtonTextStyle |
||||
= okDisabled ? styles.disabledButtonText : styles.buttonText; |
||||
|
||||
submitButtonTextStyle = { |
||||
...submitButtonTextStyle, |
||||
[_TAG_KEY]: _SUBMIT_TEXT_TAG_VALUE |
||||
}; |
||||
|
||||
let el: ?React$Element<*> = ( |
||||
<Prompt |
||||
cancelButtonTextStyle = { cancelButtonTextStyle } |
||||
cancelText = { t(cancelTitleKey) } |
||||
defaultValue = { this.state.text } |
||||
onCancel = { this._onCancel } |
||||
onChangeText = { this._onChangeText } |
||||
onSubmit = { this._onSubmit } |
||||
placeholder = { t(bodyKey) } |
||||
submitButtonTextStyle = { submitButtonTextStyle } |
||||
submitText = { t(okTitleKey) } |
||||
textInputProps = { this.props.textInputProps } |
||||
title = { titleString || t(titleKey) } |
||||
visible = { true } /> |
||||
); |
||||
|
||||
// XXX The following implements workarounds with knowledge of
|
||||
// react-native-prompt/Prompt's implementation.
|
||||
|
||||
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
|
||||
el = this._mapReactElement(el, (el: React$Element<*>) => { |
||||
const { type } = el; |
||||
|
||||
if (type === Modal) { |
||||
// * Modal handles hardware button presses for back navigation.
|
||||
// Firstly, we don't want Prompt's default behavior to merely
|
||||
// hide the Modal - we want this Dialog to be canceled.
|
||||
// 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(el, /* props */ { |
||||
onRequestClose: this._onCancel, |
||||
supportedOrientations: [ 'landscape', 'portrait' ] |
||||
}); |
||||
} |
||||
|
||||
if (type === TextInput) { |
||||
// * If this Dialog has children, they are to be rendered
|
||||
// instead of Prompt's TextInput.
|
||||
if (children) { |
||||
// $FlowExpectedError
|
||||
el = children; // eslint-disable-line no-param-reassign
|
||||
children = undefined; |
||||
} |
||||
|
||||
} else { |
||||
let { style } = el.props; |
||||
|
||||
if (style |
||||
&& (style = StyleSheet.flatten(style)) |
||||
&& _TAG_KEY in style) { |
||||
// $FlowExpectedError
|
||||
switch (style[_TAG_KEY]) { |
||||
case _SUBMIT_TEXT_TAG_VALUE: |
||||
if (this.state.submitting) { |
||||
// * If this Dialog is submitting, render a
|
||||
// LoadingIndicator.
|
||||
return ( |
||||
<LoadingIndicator |
||||
color = { submitButtonTextStyle.color } |
||||
size = { 'small' } /> |
||||
); |
||||
} |
||||
break; |
||||
} |
||||
|
||||
return this._cloneElement(el, /* props */ { |
||||
style: set(style, _TAG_KEY, undefined) |
||||
}); |
||||
} |
||||
} |
||||
|
||||
return el; |
||||
}); |
||||
|
||||
return el; |
||||
} |
||||
|
||||
/** |
||||
* Clones a specific {@code ReactElement} and adds/merges specific props |
||||
* into the 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 el} with |
||||
* the specified {@code props} added/merged. |
||||
*/ |
||||
_cloneElement(el: React$Element<*>, props) { |
||||
return ( |
||||
React.cloneElement( |
||||
el, |
||||
props, |
||||
...React.Children.toArray(el.props.children))); |
||||
} |
||||
|
||||
/** |
||||
* Creates a deep clone of a specific {@code ReactElement} with the results |
||||
* of calling a specific function on every node of a specific |
||||
* {@code ReactElement} tree. |
||||
* |
||||
* @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 el}. |
||||
* @private |
||||
* @returns {ReactElement} |
||||
*/ |
||||
_mapReactElement( |
||||
el: ?React$Element<*>, |
||||
f: (React$Element<*>) => ?React$Element<*>): ?React$Element<*> { |
||||
if (!el || !el.props || !el.type) { |
||||
return el; |
||||
} |
||||
|
||||
let mapped = f(el); |
||||
|
||||
if (mapped) { |
||||
const { children } = mapped.props; |
||||
|
||||
if (mapped === el || React.Children.count(children)) { |
||||
mapped |
||||
= React.cloneElement( |
||||
mapped, |
||||
/* props */ {}, |
||||
...React.Children.toArray(React.Children.map( |
||||
children, |
||||
function(el) { // eslint-disable-line no-shadow
|
||||
// eslint-disable-next-line no-invalid-this
|
||||
return this._mapReactElement(el, f); |
||||
}, |
||||
this))); |
||||
} |
||||
} |
||||
|
||||
return mapped; |
||||
} |
||||
|
||||
_onCancel: () => void; |
||||
|
||||
_onChangeText: (string) => void; |
||||
|
||||
/** |
||||
* Notifies this {@code Dialog} that the text/value of the {@code TextInput} |
||||
* rendered by {@code Prompt} has changed. |
||||
* |
||||
* @param {string} text - The new text/value of the {@code TextInput} |
||||
* rendered by {@code Prompt}. |
||||
* @returns {void} |
||||
*/ |
||||
_onChangeText(text: string) { |
||||
this.setState({ text }); |
||||
} |
||||
|
||||
_onSubmit: (?string) => void; |
||||
|
||||
/** |
||||
* Submits this {@code Dialog} with the value of the {@link TextInput} |
||||
* rendered by {@link Prompt} unless a value is explicitly specified. |
||||
* |
||||
* @override |
||||
* @param {string} [value] - The submitted value if any. |
||||
* @returns {void} |
||||
*/ |
||||
_onSubmit(value: ?string) { |
||||
// $FlowFixMeState
|
||||
super._onSubmit(value || this.state.text); |
||||
} |
||||
} |
||||
|
||||
export default translate(connect()(Dialog)); |
||||
Loading…
Reference in new issue