<commit_before>import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { translate } from '../../base/i18n';
import { participantDisplayNameChanged } from '../../base/participants';

/**
 * React {@code Component} for displaying and editing a participant's name.
 *
 * @extends Component
 */
class DisplayName extends Component {
    /**
     * {@code DisplayName}'s property types.
     *
     * @static
     */
    static propTypes = {
        /**
         * Whether or not the display name should be editable on click.
         */
        allowEditing: PropTypes.bool,

        /**
         * Invoked to update the participant's display name.
         */
        dispatch: PropTypes.func,

        /**
         * The participant's current display name.
         */
        displayName: PropTypes.string,

        /**
         * A string to append to the displayName, if provided.
         */
        displayNameSuffix: PropTypes.string,

        /**
         * The ID attribute to add to the component. Useful for global querying
         * for the component by legacy components and torture tests.
         */
        elementID: PropTypes.string,

        /**
         * The ID of the participant whose name is being displayed.
         */
        participantID: PropTypes.string,

        /**
         * Invoked to obtain translated strings.
         */
        t: PropTypes.func
    };

    /**
     * Initializes a new {@code DisplayName} instance.
     *
     * @param {Object} props - The read-only properties with which the new
     * instance is to be initialized.
     */
    constructor(props) {
        super(props);

        this.state = {
            /**
             * The current value of the display name in the edit field.
             *
             * @type {string}
             */
            editDisplayNameValue: '',

            /**
             * Whether or not the component should be displaying an editable
             * input.
             *
             * @type {boolean}
             */
            isEditing: false
        };

        /**
         * The internal reference to the HTML element backing the React
         * {@code Component} input with id {@code editDisplayName}. It is
         * necessary for automatically selecting the display name input field
         * when starting to edit the display name.
         *
         * @private
         * @type {HTMLInputElement}
         */
        this._nameInput = null;

        // Bind event handlers so they are only bound once for every instance.
        this._onChange = this._onChange.bind(this);
        this._onKeyDown = this._onKeyDown.bind(this);
        this._onStartEditing = this._onStartEditing.bind(this);
        this._onSubmit = this._onSubmit.bind(this);
        this._setNameInputRef = this._setNameInputRef.bind(this);
    }

    /**
     * Automatically selects the input field's value after starting to edit the
     * display name.
     *
     * @inheritdoc
     * @returns {void}
     */
    componentDidUpdate(previousProps, previousState) {
        if (!previousState.isEditing && this.state.isEditing) {
            this._nameInput.select();
        }
    }

    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        const {
            allowEditing,
            displayName,
            displayNameSuffix,
            elementID,
            t
        } = this.props;

        if (allowEditing && this.state.isEditing) {
            return (
                <input
                    autoFocus = { true }
                    className = 'editdisplayname'
                    id = 'editDisplayName'
                    onBlur = { this._onSubmit }
                    onChange = { this._onChange }
                    onKeyDown = { this._onKeyDown }
                    placeholder = { t('defaultNickname') }
                    ref = { this._setNameInputRef }
                    type = 'text'
                    value = { this.state.editDisplayNameValue } />
            );
        }<commit_msg>fix(display-name): disable spell check on editing local name<commit_after>import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { translate } from '../../base/i18n';
import { participantDisplayNameChanged } from '../../base/participants';

/**
 * React {@code Component} for displaying and editing a participant's name.
 *
 * @extends Component
 */
class DisplayName extends Component {
    /**
     * {@code DisplayName}'s property types.
     *
     * @static
     */
    static propTypes = {
        /**
         * Whether or not the display name should be editable on click.
         */
        allowEditing: PropTypes.bool,

        /**
         * Invoked to update the participant's display name.
         */
        dispatch: PropTypes.func,

        /**
         * The participant's current display name.
         */
        displayName: PropTypes.string,

        /**
         * A string to append to the displayName, if provided.
         */
        displayNameSuffix: PropTypes.string,

        /**
         * The ID attribute to add to the component. Useful for global querying
         * for the component by legacy components and torture tests.
         */
        elementID: PropTypes.string,

        /**
         * The ID of the participant whose name is being displayed.
         */
        participantID: PropTypes.string,

        /**
         * Invoked to obtain translated strings.
         */
        t: PropTypes.func
    };

    /**
     * Initializes a new {@code DisplayName} instance.
     *
     * @param {Object} props - The read-only properties with which the new
     * instance is to be initialized.
     */
    constructor(props) {
        super(props);

        this.state = {
            /**
             * The current value of the display name in the edit field.
             *
             * @type {string}
             */
            editDisplayNameValue: '',

            /**
             * Whether or not the component should be displaying an editable
             * input.
             *
             * @type {boolean}
             */
            isEditing: false
        };

        /**
         * The internal reference to the HTML element backing the React
         * {@code Component} input with id {@code editDisplayName}. It is
         * necessary for automatically selecting the display name input field
         * when starting to edit the display name.
         *
         * @private
         * @type {HTMLInputElement}
         */
        this._nameInput = null;

        // Bind event handlers so they are only bound once for every instance.
        this._onChange = this._onChange.bind(this);
        this._onKeyDown = this._onKeyDown.bind(this);
        this._onStartEditing = this._onStartEditing.bind(this);
        this._onSubmit = this._onSubmit.bind(this);
        this._setNameInputRef = this._setNameInputRef.bind(this);
    }

    /**
     * Automatically selects the input field's value after starting to edit the
     * display name.
     *
     * @inheritdoc
     * @returns {void}
     */
    componentDidUpdate(previousProps, previousState) {
        if (!previousState.isEditing && this.state.isEditing) {
            this._nameInput.select();
        }
    }

    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        const {
            allowEditing,
            displayName,
            displayNameSuffix,
            elementID,
            t
        } = this.props;

        if (allowEditing && this.state.isEditing) {
            return (
                <input
                    autoFocus = { true }
                    className = 'editdisplayname'
                    id = 'editDisplayName'
                    onBlur = { this._onSubmit }
                    onChange = { this._onChange }
                    onKeyDown = { this._onKeyDown }
                    placeholder = { t('defaultNickname') }
                    ref = { this._setNameInputRef }
                    spellCheck = { 'false' }
                    type = 'text'
                    value = { this.state.editDisplayNameValue } />
            );
        }
{'fraction_non_alphanumeric': 0.09563877696136525, 'fraction_numerical': 0.00047404598246029864, 'mean_word_length': 1.5433996383363473, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5560503', 'n_tokens_mistral': 2138, 'n_tokens_neox': 2088, 'n_words': 615}