jiti-meet/react/features/base/dialog/components/native/InputDialog.js

166 lines
3.9 KiB
JavaScript
Raw Normal View History

2018-10-18 08:28:08 +00:00
import React from 'react';
2022-02-04 10:20:47 +00:00
import Dialog from 'react-native-dialog';
2018-10-18 08:28:08 +00:00
import { translate } from '../../../i18n';
2019-03-21 16:38:29 +00:00
import { connect } from '../../../redux';
import { _abstractMapStateToProps } from '../../functions';
2022-02-04 10:20:47 +00:00
import AbstractDialog, {
type Props as AbstractProps,
type State as AbstractState
} from '../AbstractDialog';
2018-10-18 08:28:08 +00:00
2022-02-04 14:58:33 +00:00
import { inputDialog as styles } from './styles';
2018-10-18 08:28:08 +00:00
2022-02-04 10:20:47 +00:00
type Props = AbstractProps & {
2018-10-18 08:28:08 +00:00
/**
2022-02-04 10:20:47 +00:00
* The dialog descriptionKey.
*/
2022-02-04 10:20:47 +00:00
descriptionKey: string,
2018-10-18 08:28:08 +00:00
2019-07-10 08:19:00 +00:00
/**
* An optional initial value to initiate the field with.
*/
initialValue?: ?string,
/**
2021-11-04 21:10:43 +00:00
* A message key to be shown for the user (e.g. An error that is defined after submitting the form).
2019-07-10 08:19:00 +00:00
*/
messageKey?: string,
2022-02-04 10:20:47 +00:00
/**
* The translate function.
*/
2018-10-18 08:28:08 +00:00
t: Function,
2022-02-04 10:20:47 +00:00
/**
* Props for the text input.
*/
textInputProps: ?Object,
2022-02-04 10:20:47 +00:00
/**
* The untranslated i18n key for the dialog title.
*/
titleKey?: string,
/**
* Validating of the input.
*/
validateInput: ?Function
2018-10-18 08:28:08 +00:00
}
2022-02-04 10:20:47 +00:00
type State = AbstractState & {
2018-10-18 08:28:08 +00:00
/**
* The current value of the field.
*/
fieldValue: ?string
};
/**
* Implements a single field input dialog component.
*/
2022-02-04 10:20:47 +00:00
class InputDialog<P: Props, S: State> extends AbstractDialog<P, S> {
2018-10-18 08:28:08 +00:00
/**
* Instantiates a new {@code InputDialog}.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this.state = {
2022-01-07 10:54:42 +00:00
fieldValue: props.initialValue,
submitting: false
2018-10-18 08:28:08 +00:00
};
this._onChangeText = this._onChangeText.bind(this);
this._onSubmitValue = this._onSubmitValue.bind(this);
}
/**
2022-02-04 10:20:47 +00:00
* Implements {@code Component#render}.
2018-10-18 08:28:08 +00:00
*
* @inheritdoc
*/
2022-02-04 10:20:47 +00:00
render() {
const {
descriptionKey,
messageKey,
t,
titleKey
} = this.props;
2018-10-18 08:28:08 +00:00
return (
<Dialog.Container
coverScreen = { false }
visible = { true }>
<Dialog.Title>
{ t(titleKey) }
</Dialog.Title>
{
descriptionKey && (
<Dialog.Description>
{ t(descriptionKey) }
</Dialog.Description>
)
}
<Dialog.Input
autoFocus = { true }
onChangeText = { this._onChangeText }
value = { this.state.fieldValue }
{ ...this.props.textInputProps } />
{
messageKey && (
<Dialog.Description
style = { styles.formMessage }>
{ t(messageKey) }
</Dialog.Description>
)
}
<Dialog.Button
label = { t('dialog.Cancel') }
onPress = { this._onCancel } />
<Dialog.Button
label = { t('dialog.Ok') }
onPress = { this._onSubmitValue } />
</Dialog.Container>
2018-10-18 08:28:08 +00:00
);
}
_onCancel: () => void;
_onChangeText: string => void;
/**
* Callback to be invoked when the text in the field changes.
*
* @param {string} fieldValue - The updated field value.
* @returns {void}
*/
_onChangeText(fieldValue) {
2022-02-04 10:20:47 +00:00
if (this.props.validateInput && !this.props.validateInput(fieldValue)) {
return;
}
2018-10-18 08:28:08 +00:00
this.setState({
fieldValue
});
}
2019-01-10 14:41:54 +00:00
_onSubmit: (?string) => boolean;
2018-10-18 08:28:08 +00:00
_onSubmitValue: () => boolean;
/**
* Callback to be invoked when the value of this dialog is submitted.
*
* @returns {boolean}
*/
_onSubmitValue() {
return this._onSubmit(this.state.fieldValue);
}
}
export default translate(connect(_abstractMapStateToProps)(InputDialog));