ref(ui-components) Replace inputs with new component (#11964)
This commit is contained in:
Robert Pintilii
GitHub
parent
f5649efa49
commit
fb20786b65
|
|
@ -1,24 +1,29 @@
|
|||
// @flow
|
||||
|
||||
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
|
||||
/* eslint-disable lines-around-comment */
|
||||
import React, { Component } from 'react';
|
||||
import { WithTranslation } from 'react-i18next';
|
||||
import type { Dispatch } from 'redux';
|
||||
|
||||
// @ts-ignore
|
||||
import { connect } from '../../../../../connection';
|
||||
// @ts-ignore
|
||||
import { toJid } from '../../../base/connection/functions';
|
||||
// @ts-ignore
|
||||
import { Dialog } from '../../../base/dialog';
|
||||
import { translate, translateToHTML } from '../../../base/i18n';
|
||||
import { translate, translateToHTML } from '../../../base/i18n/functions';
|
||||
// @ts-ignore
|
||||
import { JitsiConnectionErrors } from '../../../base/lib-jitsi-meet';
|
||||
import { connect as reduxConnect } from '../../../base/redux';
|
||||
import { connect as reduxConnect } from '../../../base/redux/functions';
|
||||
import Input from '../../../base/ui/components/web/Input';
|
||||
import {
|
||||
authenticateAndUpgradeRole,
|
||||
cancelLogin
|
||||
// @ts-ignore
|
||||
} from '../../actions.web';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of {@link LoginDialog}.
|
||||
*/
|
||||
type Props = {
|
||||
interface Props extends WithTranslation {
|
||||
|
||||
/**
|
||||
* {@link JitsiConference} That needs authentication - will hold a valid
|
||||
|
|
@ -39,7 +44,7 @@ type Props = {
|
|||
/**
|
||||
* The error which occurred during login/authentication.
|
||||
*/
|
||||
_error: Object,
|
||||
_error: any,
|
||||
|
||||
/**
|
||||
* The progress in the floating range between 0 and 1 of the authenticating
|
||||
|
|
@ -60,12 +65,7 @@ type Props = {
|
|||
/**
|
||||
* Conference room name.
|
||||
*/
|
||||
roomName: string,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
*/
|
||||
t: Function
|
||||
roomName: string
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -73,6 +73,11 @@ type Props = {
|
|||
*/
|
||||
type State = {
|
||||
|
||||
/**
|
||||
* Authentication process starts before joining the conference room.
|
||||
*/
|
||||
loginStarted: boolean,
|
||||
|
||||
/**
|
||||
* The user entered password for the conference.
|
||||
*/
|
||||
|
|
@ -81,12 +86,7 @@ type State = {
|
|||
/**
|
||||
* The user entered local participant name.
|
||||
*/
|
||||
username: string,
|
||||
|
||||
/**
|
||||
* Authentication process starts before joining the conference room.
|
||||
*/
|
||||
loginStarted: boolean
|
||||
username: string
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -111,11 +111,10 @@ class LoginDialog extends Component<Props, State> {
|
|||
|
||||
this._onCancelLogin = this._onCancelLogin.bind(this);
|
||||
this._onLogin = this._onLogin.bind(this);
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this._onUsernameChange = this._onUsernameChange.bind(this);
|
||||
this._onPasswordChange = this._onPasswordChange.bind(this);
|
||||
}
|
||||
|
||||
_onCancelLogin: () => void;
|
||||
|
||||
/**
|
||||
* Called when the cancel button is clicked.
|
||||
*
|
||||
|
|
@ -128,8 +127,6 @@ class LoginDialog extends Component<Props, State> {
|
|||
dispatch(cancelLogin());
|
||||
}
|
||||
|
||||
_onLogin: () => void;
|
||||
|
||||
/**
|
||||
* Notifies this LoginDialog that the login button (OK) has been pressed by
|
||||
* the user.
|
||||
|
|
@ -156,7 +153,7 @@ class LoginDialog extends Component<Props, State> {
|
|||
});
|
||||
|
||||
connect(jid, password, roomName)
|
||||
.then(connection => {
|
||||
.then((connection: any) => {
|
||||
onSuccess && onSuccess(connection);
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
@ -167,17 +164,27 @@ class LoginDialog extends Component<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
_onChange: Object => void;
|
||||
|
||||
/**
|
||||
* Callback for the onChange event of the field.
|
||||
*
|
||||
* @param {Object} evt - The static event.
|
||||
* @param {string} value - The static event.
|
||||
* @returns {void}
|
||||
*/
|
||||
_onChange(evt: Object) {
|
||||
_onPasswordChange(value: string) {
|
||||
this.setState({
|
||||
[evt.target.name]: evt.target.value
|
||||
password: value
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for the onChange event of the username input.
|
||||
*
|
||||
* @param {string} value - The new value.
|
||||
* @returns {void}
|
||||
*/
|
||||
_onUsernameChange(value: string) {
|
||||
this.setState({
|
||||
username: value
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -196,7 +203,7 @@ class LoginDialog extends Component<Props, State> {
|
|||
t
|
||||
} = this.props;
|
||||
const { username, password } = this.state;
|
||||
const messageOptions = {};
|
||||
const messageOptions: any = {};
|
||||
let messageKey;
|
||||
|
||||
if (progress && progress < 1) {
|
||||
|
|
@ -258,25 +265,20 @@ class LoginDialog extends Component<Props, State> {
|
|||
onSubmit = { this._onLogin }
|
||||
titleKey = { t('dialog.authenticationRequired') }
|
||||
width = { 'small' }>
|
||||
<TextField
|
||||
<Input
|
||||
autoFocus = { true }
|
||||
className = 'input-control'
|
||||
compact = { false }
|
||||
label = { t('dialog.user') }
|
||||
name = 'username'
|
||||
onChange = { this._onChange }
|
||||
onChange = { this._onUsernameChange }
|
||||
placeholder = { t('dialog.userIdentifier') }
|
||||
shouldFitContainer = { true }
|
||||
type = 'text'
|
||||
value = { username } />
|
||||
<TextField
|
||||
className = 'input-control'
|
||||
compact = { false }
|
||||
<br />
|
||||
<Input
|
||||
label = { t('dialog.userPassword') }
|
||||
name = 'password'
|
||||
onChange = { this._onChange }
|
||||
onChange = { this._onPasswordChange }
|
||||
placeholder = { t('dialog.password') }
|
||||
shouldFitContainer = { true }
|
||||
type = 'password'
|
||||
value = { password } />
|
||||
{ this.renderMessage() }
|
||||
|
|
@ -293,7 +295,7 @@ class LoginDialog extends Component<Props, State> {
|
|||
* @private
|
||||
* @returns {Props}
|
||||
*/
|
||||
function mapStateToProps(state) {
|
||||
function mapStateToProps(state: any) {
|
||||
const {
|
||||
error: authenticateAndUpgradeRoleError,
|
||||
progress,
|
||||
|
|
@ -1,19 +1,22 @@
|
|||
// @flow
|
||||
|
||||
import { FieldTextStateless } from '@atlaskit/field-text';
|
||||
import React, { Component } from 'react';
|
||||
import { WithTranslation } from 'react-i18next';
|
||||
import type { Dispatch } from 'redux';
|
||||
|
||||
import { translate } from '../../../base/i18n';
|
||||
import { connect } from '../../../base/redux';
|
||||
import { translate } from '../../../base/i18n/functions';
|
||||
import { connect } from '../../../base/redux/functions';
|
||||
// eslint-disable-next-line lines-around-comment
|
||||
// @ts-ignore
|
||||
import { updateSettings } from '../../../base/settings';
|
||||
import { Button } from '../../../base/ui/components/web';
|
||||
import Input from '../../../base/ui/components/web/Input';
|
||||
|
||||
// @ts-ignore
|
||||
import KeyboardAvoider from './KeyboardAvoider';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of {@DisplayNameForm}.
|
||||
*/
|
||||
type Props = {
|
||||
interface Props extends WithTranslation {
|
||||
|
||||
/**
|
||||
* Invoked to set the local participant display name.
|
||||
|
|
@ -23,13 +26,8 @@ type Props = {
|
|||
/**
|
||||
* Whether the polls feature is enabled or not.
|
||||
*/
|
||||
isPollsEnabled: boolean,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
*/
|
||||
t: Function
|
||||
};
|
||||
isPollsEnabled: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} state of {@DisplayNameForm}.
|
||||
|
|
@ -79,47 +77,40 @@ class DisplayNameForm extends Component<Props, State> {
|
|||
return (
|
||||
<div id = 'nickname'>
|
||||
<form onSubmit = { this._onSubmit }>
|
||||
<FieldTextStateless
|
||||
aria-describedby = 'nickname-title'
|
||||
autoComplete = 'name'
|
||||
<Input
|
||||
accessibilityLabel = { t('chat.nickname.title') }
|
||||
autoFocus = { true }
|
||||
compact = { true }
|
||||
id = 'nickinput'
|
||||
label = { t(isPollsEnabled ? 'chat.nickname.titleWithPolls' : 'chat.nickname.title') }
|
||||
name = 'name'
|
||||
onChange = { this._onDisplayNameChange }
|
||||
placeholder = { t('chat.nickname.popover') }
|
||||
shouldFitContainer = { true }
|
||||
type = 'text'
|
||||
value = { this.state.displayName } />
|
||||
</form>
|
||||
<div
|
||||
className = { `enter-chat${this.state.displayName.trim() ? '' : ' disabled'}` }
|
||||
onClick = { this._onSubmit }
|
||||
onKeyPress = { this._onKeyPress }
|
||||
role = 'button'
|
||||
tabIndex = { 0 }>
|
||||
{ t('chat.enter') }
|
||||
</div>
|
||||
<br />
|
||||
<Button
|
||||
accessibilityLabel = { t('chat.enter') }
|
||||
disabled = { !this.state.displayName.trim() }
|
||||
fullWidth = { true }
|
||||
label = { t('chat.enter') }
|
||||
onClick = { this._onSubmit } />
|
||||
<KeyboardAvoider />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
_onDisplayNameChange: (Object) => void;
|
||||
|
||||
/**
|
||||
* Dispatches an action update the entered display name.
|
||||
*
|
||||
* @param {event} event - Keyboard event.
|
||||
* @param {string} value - Keyboard event.
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onDisplayNameChange(event: Object) {
|
||||
this.setState({ displayName: event.target.value });
|
||||
_onDisplayNameChange(value: string) {
|
||||
this.setState({ displayName: value });
|
||||
}
|
||||
|
||||
_onSubmit: (Object) => void;
|
||||
|
||||
/**
|
||||
* Dispatches an action to hit enter to change your display name.
|
||||
*
|
||||
|
|
@ -128,8 +119,8 @@ class DisplayNameForm extends Component<Props, State> {
|
|||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onSubmit(event: Object) {
|
||||
event.preventDefault();
|
||||
_onSubmit(event: any) {
|
||||
event?.preventDefault && event.preventDefault();
|
||||
|
||||
// Store display name in settings
|
||||
this.props.dispatch(updateSettings({
|
||||
|
|
@ -137,8 +128,6 @@ class DisplayNameForm extends Component<Props, State> {
|
|||
}));
|
||||
}
|
||||
|
||||
_onKeyPress: (Object) => void;
|
||||
|
||||
/**
|
||||
* KeyPress handler for accessibility.
|
||||
*
|
||||
|
|
@ -146,7 +135,7 @@ class DisplayNameForm extends Component<Props, State> {
|
|||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onKeyPress(e) {
|
||||
_onKeyPress(e: React.KeyboardEvent) {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
this._onSubmit(e);
|
||||
}
|
||||
Loading…
Reference in New Issue