render()

in src/web/TextInput.tsx [204:303]
81 lines of code
11 McCabe index (conditional complexity)

    render() {
        const combinedStyles = Styles.combine([_styles.defaultStyle, this.props.style]);

        // Always hide the outline.
        combinedStyles.outline = 'none';
        combinedStyles.resize = 'none';

        // Set the border to zero width if not otherwise specified.
        if (combinedStyles.borderWidth === undefined) {
            combinedStyles.borderWidth = 0;
        }

        // By default, the control is editable.
        const editable = (this.props.editable !== undefined ? this.props.editable : true);
        const spellCheck = (this.props.spellCheck !== undefined ? this.props.spellCheck : this.props.autoCorrect);

        const className = this.props.placeholderTextColor !== undefined ?
            TextInputPlaceholderSupport.getClassName(this.props.placeholderTextColor) : undefined;

        // Use a textarea for multi-line and a regular input for single-line.
        if (this.props.multiline) {
            return (
                <textarea
                    ref={ this._onMount }
                    style={ combinedStyles }
                    value={ this.state.inputValue }
                    title={ this.props.title }
                    tabIndex={ this.props.tabIndex }

                    autoCorrect={ this.props.autoCorrect === false ? 'off' : undefined }
                    spellCheck={ spellCheck }
                    disabled={ !editable }
                    maxLength={ this.props.maxLength }
                    placeholder={ this.props.placeholder }

                    className={ className }

                    onChange={ this._onInputChanged }
                    onKeyDown={ this._onKeyDown }
                    onKeyUp={ this._checkSelectionChanged }
                    onInput={ this._onMultilineInput }
                    onFocus={ this._onFocus }
                    onBlur={ this._onBlur }
                    onMouseDown={ this._checkSelectionChanged }
                    onMouseUp={ this._checkSelectionChanged }
                    onPaste={ this._onPaste }
                    onScroll={ this._onScroll }
                    aria-label={ this.props.accessibilityLabel || this.props.title }
                    data-test-id={ this.props.testId }
                />
            );
        } else {
            const { keyboardTypeValue, wrapInForm, pattern } = this._getKeyboardType();

            let input = (
                <input
                    ref={ this._onMount }
                    style={ combinedStyles }
                    value={ this.state.inputValue }
                    title={ this.props.title }
                    tabIndex={ this.props.tabIndex }

                    className={ className }

                    autoCapitalize={ this.props.autoCapitalize }
                    autoCorrect={ this.props.autoCorrect === false ? 'off' : undefined }
                    spellCheck={ spellCheck }
                    disabled={ !editable }
                    maxLength={ this.props.maxLength }
                    placeholder={ this.props.placeholder }
                    size={ 1 }

                    onChange={ this._onInputChanged }
                    onKeyDown={ this._onKeyDown }
                    onKeyUp={ this._checkSelectionChanged }
                    onInput={ this._onInput }
                    onFocus={ this._onFocus }
                    onBlur={ this._onBlur }
                    onMouseDown={ this._checkSelectionChanged }
                    onMouseUp={ this._checkSelectionChanged }
                    onPaste={ this._onPaste }
                    aria-label={ this.props.accessibilityLabel || this.props.title }
                    type={ keyboardTypeValue }
                    pattern={ pattern }
                    data-test-id={ this.props.testId }
                />
            );

            if (wrapInForm) {
                // Wrap the input in a form tag if required
                input = (
                    <form action='' onSubmit={ ev => { /* prevent form submission/page reload */ ev.preventDefault(); this.blur(); } }
                        style={ _styles.formStyle }>
                        { input }
                    </form>
                );
            }

            return input;
        }