From 0bfd2143e61c3f49edc048a242e3b361ef52037f Mon Sep 17 00:00:00 2001 From: Horatiu Muresan Date: Fri, 17 Feb 2023 14:23:48 +0200 Subject: [PATCH] fix(lobby) Fix lobby inputs --- .../premeeting/components/web/InputField.js | 210 ------------------ .../base/premeeting/components/web/index.js | 1 - .../features/base/ui/components/web/Input.tsx | 3 + .../lobby/components/web/LobbyScreen.js | 14 +- 4 files changed, 11 insertions(+), 217 deletions(-) delete mode 100644 react/features/base/premeeting/components/web/InputField.js diff --git a/react/features/base/premeeting/components/web/InputField.js b/react/features/base/premeeting/components/web/InputField.js deleted file mode 100644 index 46fcf6d1f..000000000 --- a/react/features/base/premeeting/components/web/InputField.js +++ /dev/null @@ -1,210 +0,0 @@ -// @flow - -import React, { PureComponent } from 'react'; - -import { getFieldValue } from '../../../react'; - -type Props = { - - /** - * If the input should be focused on display. - */ - autoFocus?: boolean, - - /** - * Class name to be appended to the default class list. - */ - className?: string, - - /** - * TestId of the button. Can be used to locate element when testing UI. - */ - testId?: string, - - /** - * Callback for the onChange event of the field. - */ - onChange: Function, - - /** - * Callback to be used when the user hits Enter in the field. - */ - onSubmit?: Function, - - /** - * Placeholder text for the field. - */ - placeHolder: string, - - /** - * Whether the input is read only or not. - */ - readOnly?: boolean, - - /** - * The field type (e.g. Text, password...etc). - */ - type: string, - - /** - * Externally provided value. - */ - value?: string, - id?: string, - autoComplete?: string -}; - -type State = { - - /** - * True if the field is focused, false otherwise. - */ - focused: boolean, - - /** - * The current value of the field. - */ - value: string -} - -/** - * Implements a pre-styled input field to be used on pre-meeting screens. - */ -export default class InputField extends PureComponent { - static defaultProps: { - className: '', - type: 'text' - }; - - /** - * Instantiates a new component. - * - * @inheritdoc - */ - constructor(props: Props) { - super(props); - - this.state = { - focused: false, - value: props.value || '' - }; - - this._onBlur = this._onBlur.bind(this); - this._onChange = this._onChange.bind(this); - this._onFocus = this._onFocus.bind(this); - this._onKeyDown = this._onKeyDown.bind(this); - } - - /** - * Implements {@code PureComponent.getDerivedStateFromProps}. - * - * @inheritdoc - */ - static getDerivedStateFromProps(props: Props, state: State) { - const { value } = props; - - if (state.value !== value) { - return { - ...state, - value - }; - } - - return null; - } - - /** - * Implements {@code PureComponent#render}. - * - * @inheritdoc - */ - render() { - return ( - - ); - } - - _onBlur: () => void; - - /** - * Callback for the onBlur event of the field. - * - * @returns {void} - */ - _onBlur() { - this.setState({ - focused: false - }); - } - - _onChange: Object => void; - - /** - * Callback for the onChange event of the field. - * - * @param {Object} evt - The static event. - * @returns {void} - */ - _onChange(evt) { - const value = getFieldValue(evt); - - this.setState({ - value - }); - - const { onChange } = this.props; - - onChange && onChange(value); - } - - _onFocus: () => void; - - /** - * Callback for the onFocus event of the field. - * - * @returns {void} - */ - _onFocus() { - this.setState({ - focused: true - }); - } - - _onKeyDown: Object => void; - - /** - * Joins the conference on 'Enter'. - * - * @param {Event} event - Key down event object. - * @returns {void} - */ - _onKeyDown(event) { - const { onSubmit } = this.props; - - onSubmit && event.key === 'Enter' && onSubmit(); - } - - /** - * Stop event propagation on key press. - * - * @param {Event} event - Key press event object. - * @returns {void} - */ - _onKeyPress(event) { - event.stopPropagation(); - } -} diff --git a/react/features/base/premeeting/components/web/index.js b/react/features/base/premeeting/components/web/index.js index 669a795da..c9206da84 100644 --- a/react/features/base/premeeting/components/web/index.js +++ b/react/features/base/premeeting/components/web/index.js @@ -1,5 +1,4 @@ // @flow export { default as ActionButton } from './ActionButton'; -export { default as InputField } from './InputField'; export { default as PreMeetingScreen } from './PreMeetingScreen'; diff --git a/react/features/base/ui/components/web/Input.tsx b/react/features/base/ui/components/web/Input.tsx index cca8abf37..cdb48a6a5 100644 --- a/react/features/base/ui/components/web/Input.tsx +++ b/react/features/base/ui/components/web/Input.tsx @@ -23,6 +23,7 @@ interface IProps extends IInputProps { onKeyPress?: (e: React.KeyboardEvent) => void; readOnly?: boolean; required?: boolean; + testId?: string; textarea?: boolean; type?: 'text' | 'email' | 'number' | 'password'; } @@ -152,6 +153,7 @@ const Input = React.forwardRef(({ placeholder, readOnly = false, required, + testId, textarea = false, type = 'text', value @@ -201,6 +203,7 @@ const Input = React.forwardRef(({ autoFocus = { autoFocus } className = { cx(styles.input, isMobile && 'is-mobile', error && 'error', clearable && styles.clearableInput, icon && 'icon-input') } + data-testid = { testId } disabled = { disabled } { ...(id ? { id } : {}) } maxLength = { maxLength } diff --git a/react/features/lobby/components/web/LobbyScreen.js b/react/features/lobby/components/web/LobbyScreen.js index 22e39c327..aac10d270 100644 --- a/react/features/lobby/components/web/LobbyScreen.js +++ b/react/features/lobby/components/web/LobbyScreen.js @@ -4,10 +4,11 @@ import React from 'react'; import { translate } from '../../../base/i18n'; import { Icon, IconCloseLarge } from '../../../base/icons'; -import { InputField, PreMeetingScreen } from '../../../base/premeeting'; +import { PreMeetingScreen } from '../../../base/premeeting'; import { LoadingIndicator } from '../../../base/react'; import { connect } from '../../../base/redux'; import Button from '../../../base/ui/components/web/Button'; +import Input from '../../../base/ui/components/web/Input'; import ChatInput from '../../../chat/components/web/ChatInput'; import MessageContainer from '../../../chat/components/web/MessageContainer'; import AbstractLobbyScreen, { @@ -184,9 +185,10 @@ class LobbyScreen extends AbstractLobbyScreen { const { t } = this.props; return ( - ); @@ -202,10 +204,10 @@ class LobbyScreen extends AbstractLobbyScreen { return ( <> -