[RN] Remove react-native-prompt
This commit is contained in:
Bettenbuk Zoltan
Saúl Ibarra Corretgé
parent
3212bde6e6
commit
80e8afa9c1
|
|
@ -11559,11 +11559,6 @@
|
||||||
"prop-types": "^15.5.10"
|
"prop-types": "^15.5.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"react-native-prompt": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-native-prompt/-/react-native-prompt-1.0.0.tgz",
|
|
||||||
"integrity": "sha1-QeDsKqfdjxLzo+6Dr51jxLZw+KE="
|
|
||||||
},
|
|
||||||
"react-native-sound": {
|
"react-native-sound": {
|
||||||
"version": "0.10.9",
|
"version": "0.10.9",
|
||||||
"resolved": "https://registry.npmjs.org/react-native-sound/-/react-native-sound-0.10.9.tgz",
|
"resolved": "https://registry.npmjs.org/react-native-sound/-/react-native-sound-0.10.9.tgz",
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,6 @@
|
||||||
"react-native-immersive": "1.1.0",
|
"react-native-immersive": "1.1.0",
|
||||||
"react-native-keep-awake": "2.0.6",
|
"react-native-keep-awake": "2.0.6",
|
||||||
"react-native-linear-gradient": "2.4.0",
|
"react-native-linear-gradient": "2.4.0",
|
||||||
"react-native-prompt": "1.0.0",
|
|
||||||
"react-native-sound": "0.10.9",
|
"react-native-sound": "0.10.9",
|
||||||
"react-native-swipeout": "2.3.6",
|
"react-native-swipeout": "2.3.6",
|
||||||
"react-native-vector-icons": "6.0.2",
|
"react-native-vector-icons": "6.0.2",
|
||||||
|
|
|
||||||
|
|
@ -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));
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
export { default as BottomSheet } from './BottomSheet';
|
export { default as BottomSheet } from './BottomSheet';
|
||||||
export { default as ConfirmDialog } from './ConfirmDialog';
|
export { default as ConfirmDialog } from './ConfirmDialog';
|
||||||
export { default as CustomDialog } from './CustomDialog';
|
export { default as CustomDialog } from './CustomDialog';
|
||||||
export { default as Dialog } from './Dialog';
|
|
||||||
export { default as InputDialog } from './InputDialog';
|
export { default as InputDialog } from './InputDialog';
|
||||||
export { default as CustomSubmitDialog } from './CustomSubmitDialog';
|
export { default as CustomSubmitDialog } from './CustomSubmitDialog';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,6 @@
|
||||||
// collect the polyfills' files.
|
// collect the polyfills' files.
|
||||||
import './features/base/lib-jitsi-meet/native/polyfills-bundler';
|
import './features/base/lib-jitsi-meet/native/polyfills-bundler';
|
||||||
|
|
||||||
// FIXME: Remove once react-native-webrtc and react-native-prompt import
|
|
||||||
// PropTypes from 'prop-types' instead of 'react'.
|
|
||||||
import './features/base/react/prop-types-polyfill';
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { AppRegistry, Linking, NativeModules } from 'react-native';
|
import { AppRegistry, Linking, NativeModules } from 'react-native';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue