haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(ui-components) Use new input component (#11965)

This commit is contained in:
Robert Pintilii 2022-08-05 15:07:28 +03:00 committed by GitHub
parent 52ce9a86ed
commit 5b34068435
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
react/features/display-name/components/AbstractDisplayNamePrompt.js → react/features/display-name/components/AbstractDisplayNamePrompt.tsx
View File

@ -1,15 +1,15 @@
// @flow
import { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import type { Dispatch } from 'redux';
// @ts-ignore
import { updateSettings } from '../../base/settings';
/**
* The type of the React {@code Component} props of
* {@link AbstractDisplayNamePrompt}.
*/
export type Props = {
export interface Props extends WithTranslation {
/**
* Invoked to update the local participant's display name.
@ -19,18 +19,13 @@ export type Props = {
/**
* Function to be invoked after a successful display name change.
*/
onPostSubmit: ?Function,
/**
* Invoked to obtain translated strings.
*/
t: Function
};
onPostSubmit?: Function
}
/**
* Implements an abstract class for {@code DisplayNamePrompt}.
*/
export default class AbstractDisplayNamePrompt<S: *>
export default class AbstractDisplayNamePrompt<S>
extends Component<Props, S> {
/**
* Instantiates a new component.
@ -43,8 +38,6 @@ export default class AbstractDisplayNamePrompt<S: *>
this._onSetDisplayName = this._onSetDisplayName.bind(this);
}
_onSetDisplayName: string => boolean;
/**
* Dispatches an action to update the local participant's display name. A
* name must be entered for the action to dispatch.
@ -56,7 +49,7 @@ export default class AbstractDisplayNamePrompt<S: *>
* @param {string} displayName - The display name to save.
* @returns {boolean}
*/
_onSetDisplayName(displayName) {
_onSetDisplayName(displayName: string) {
if (!displayName || !displayName.trim()) {
return false;
}

30
react/features/display-name/components/web/DisplayNamePrompt.js → react/features/display-name/components/web/DisplayNamePrompt.tsx
View File

@ -1,14 +1,11 @@
/* @flow */
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
import React from 'react';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import AbstractDisplayNamePrompt, {
type Props
} from '../AbstractDisplayNamePrompt';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Input from '../../../base/ui/components/web/Input';
import AbstractDisplayNamePrompt, { Props } from '../AbstractDisplayNamePrompt';
/**
* The type of the React {@code Component} props of {@link DisplayNamePrompt}.
@ -59,38 +56,29 @@ class DisplayNamePrompt extends AbstractDisplayNamePrompt<State> {
onSubmit = { this._onSubmit }
titleKey = 'dialog.displayNameRequired'
width = 'small'>
<TextField
<Input
autoFocus = { true }
compact = { true }
label = { this.props.t('dialog.enterDisplayName') }
name = 'displayName'
onChange = { this._onDisplayNameChange }
shouldFitContainer = { true }
type = 'text'
value = { this.state.displayName } />
</Dialog>);
}
_onDisplayNameChange: (Object) => void;
/**
* Updates the entered display name.
*
* @param {Object} event - The DOM event triggered from the entered display
* name value having changed.
* @param {string} value - The new value of the input.
* @private
* @returns {void}
*/
_onDisplayNameChange(event) {
_onDisplayNameChange(value: string) {
this.setState({
displayName: event.target.value
displayName: value
});
}
_onSetDisplayName: string => boolean;
_onSubmit: () => boolean;
/**
* Dispatches an action to update the local participant's display name. A
* name must be entered for the action to dispatch.

11
react/features/room-lock/components/PasswordRequiredPrompt.web.js
View File

@ -1,6 +1,4 @@
// @flow
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
import React, { Component } from 'react';
import type { Dispatch } from 'redux';
@ -8,6 +6,7 @@ import { setPassword } from '../../base/conference';
import { Dialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { connect } from '../../base/redux';
import Input from '../../base/ui/components/web/Input';
import { _cancelPasswordRequiredPrompt } from '../actions';
/**
@ -97,13 +96,11 @@ class PasswordRequiredPrompt extends Component<Props, State> {
_renderBody() {
return (
<div>
<TextField
<Input
autoFocus = { true }
compact = { true }
label = { this.props.t('dialog.passwordLabel') }
name = 'lockKey'
onChange = { this._onPasswordChanged }
shouldFitContainer = { true }
type = 'password'
value = { this.state.password } />
</div>
@ -115,11 +112,11 @@ class PasswordRequiredPrompt extends Component<Props, State> {
/**
* Notifies this dialog that password has changed.
*
* @param {Object} event - The details of the notification/event.
* @param {string} value - The details of the notification/event.
* @private
* @returns {void}
*/
_onPasswordChanged({ target: { value } }) {
_onPasswordChanged(value: string) {
this.setState({
password: value
});

19
react/features/shared-video/components/AbstractSharedVideoDialog.js → react/features/shared-video/components/AbstractSharedVideoDialog.tsx
View File

@ -1,15 +1,15 @@
// @flow
import { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import type { Dispatch } from 'redux';
// @ts-ignore
import { extractYoutubeIdOrURL } from '../functions';
/**
* The type of the React {@code Component} props of
* {@link AbstractSharedVideoDialog}.
*/
export type Props = {
export interface Props extends WithTranslation {
/**
* Invoked to update the shared video link.
@ -19,18 +19,13 @@ export type Props = {
/**
* Function to be invoked after typing a valid video.
*/
onPostSubmit: Function,
/**
* Invoked to obtain translated strings.
*/
t: Function
};
onPostSubmit: Function
}
/**
* Implements an abstract class for {@code SharedVideoDialog}.
*/
export default class AbstractSharedVideoDialog<S: *> extends Component < Props, S > {
export default class AbstractSharedVideoDialog<S> extends Component < Props, S > {
/**
* Instantiates a new component.
@ -43,8 +38,6 @@ export default class AbstractSharedVideoDialog<S: *> extends Component < Props,
this._onSetVideoLink = this._onSetVideoLink.bind(this);
}
_onSetVideoLink: string => boolean;
/**
* Validates the entered video link by extracting the id and dispatches it.
*

37
react/features/shared-video/components/web/SharedVideoDialog.js → react/features/shared-video/components/web/SharedVideoDialog.tsx
View File

@ -1,12 +1,10 @@
// @flow
import { FieldTextStateless } from '@atlaskit/field-text';
import React from 'react';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { getFieldValue } from '../../../base/react';
import { connect } from '../../../base/redux';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Input from '../../../base/ui/components/web/Input';
import AbstractSharedVideoDialog from '../AbstractSharedVideoDialog';
/**
@ -14,14 +12,14 @@ import AbstractSharedVideoDialog from '../AbstractSharedVideoDialog';
*
* @returns {React$Element<any>}
*/
class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
class SharedVideoDialog extends AbstractSharedVideoDialog<any> {
/**
* Instantiates a new component.
*
* @inheritdoc
*/
constructor(props) {
constructor(props: any) {
super(props);
this.state = {
@ -34,25 +32,19 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
this._onSubmitValue = this._onSubmitValue.bind(this);
}
_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) {
const linkValue = getFieldValue(evt);
_onChange(value: string) {
this.setState({
value: linkValue,
okDisabled: !linkValue
value,
okDisabled: !value
});
}
_onSubmitValue: () => boolean;
/**
* Callback to be invoked when the value of the link input is submitted.
*
@ -87,24 +79,19 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<*> {
onSubmit = { this._onSubmitValue }
titleKey = { t('dialog.shareVideoTitle') }
width = { 'small' }>
<FieldTextStateless
<Input
autoFocus = { true }
className = 'input-control'
compact = { false }
isInvalid = { error }
error = { error }
label = { t('dialog.videoLink') }
name = 'sharedVideoUrl'
onChange = { this._onChange }
placeholder = { t('dialog.sharedVideoLinkPlaceholder') }
shouldFitContainer = { true }
type = 'text'
value = { this.state.value } />
{ error && <span className = 'shared-video-dialog-error'>{ t('dialog.sharedVideoDialogError') }</span> }
</Dialog>
);
}
_onChange: Object => void;
}
export default translate(connect()(SharedVideoDialog));