"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7313/react/features/display-name/components/web/DisplayNamePrompt.tsx" (2 Jun 2023, 2744 Bytes) of package /linux/misc/jitsi-meet-7313.tar.gz:

As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "DisplayNamePrompt.tsx": jitsi-meet_8319_vs_jitsi-meet_8615.

    1 import React from 'react';
    2 import { connect } from 'react-redux';
    3 
    4 import { translate } from '../../../base/i18n/functions';
    5 import Dialog from '../../../base/ui/components/web/Dialog';
    6 import Input from '../../../base/ui/components/web/Input';
    7 import AbstractDisplayNamePrompt, { IProps } from '../AbstractDisplayNamePrompt';
    8 
    9 /**
   10  * The type of the React {@code Component} props of {@link DisplayNamePrompt}.
   11  */
   12 interface IState {
   13 
   14     /**
   15      * The name to show in the display name text field.
   16      */
   17     displayName: string;
   18 }
   19 
   20 /**
   21  * Implements a React {@code Component} for displaying a dialog with an field
   22  * for setting the local participant's display name.
   23  *
   24  * @augments Component
   25  */
   26 class DisplayNamePrompt extends AbstractDisplayNamePrompt<IState> {
   27     /**
   28      * Initializes a new {@code DisplayNamePrompt} instance.
   29      *
   30      * @param {Object} props - The read-only properties with which the new
   31      * instance is to be initialized.
   32      */
   33     constructor(props: IProps) {
   34         super(props);
   35 
   36         this.state = {
   37             displayName: ''
   38         };
   39 
   40         // Bind event handlers so they are only bound once for every instance.
   41         this._onDisplayNameChange = this._onDisplayNameChange.bind(this);
   42         this._onSubmit = this._onSubmit.bind(this);
   43     }
   44 
   45     /**
   46      * Implements React's {@link Component#render()}.
   47      *
   48      * @inheritdoc
   49      * @returns {ReactElement}
   50      */
   51     render() {
   52         return (
   53             <Dialog
   54                 cancel = {{ translationKey: 'dialog.Cancel' }}
   55                 ok = {{ translationKey: 'dialog.Ok' }}
   56                 onSubmit = { this._onSubmit }
   57                 titleKey = 'dialog.displayNameRequired'>
   58                 <Input
   59                     autoFocus = { true }
   60                     className = 'dialog-bottom-margin'
   61                     label = { this.props.t('dialog.enterDisplayName') }
   62                     name = 'displayName'
   63                     onChange = { this._onDisplayNameChange }
   64                     type = 'text'
   65                     value = { this.state.displayName } />
   66             </Dialog>
   67         );
   68     }
   69 
   70     /**
   71      * Updates the entered display name.
   72      *
   73      * @param {string} value - The new value of the input.
   74      * @private
   75      * @returns {void}
   76      */
   77     _onDisplayNameChange(value: string) {
   78         this.setState({
   79             displayName: value
   80         });
   81     }
   82 
   83     /**
   84      * Dispatches an action to update the local participant's display name. A
   85      * name must be entered for the action to dispatch.
   86      *
   87      * @private
   88      * @returns {boolean}
   89      */
   90     _onSubmit() {
   91         return this._onSetDisplayName(this.state.displayName);
   92     }
   93 }
   94 
   95 export default translate(connect()(DisplayNamePrompt));