apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/11983/head
Robert Pintilii 3 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 21
      react/features/display-name/components/AbstractDisplayNamePrompt.tsx
  2. 30
      react/features/display-name/components/web/DisplayNamePrompt.tsx
  3. 11
      react/features/room-lock/components/PasswordRequiredPrompt.web.js
  4. 19
      react/features/shared-video/components/AbstractSharedVideoDialog.tsx
  5. 37
      react/features/shared-video/components/web/SharedVideoDialog.tsx

21
react/features/display-name/components/AbstractDisplayNamePrompt.js → react/features/display-name/components/AbstractDisplayNamePrompt.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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));
Write Preview
Loading…
Cancel
Save