render()

in src/web/View.tsx [322:420]
87 lines of code
17 McCabe index (conditional complexity)

    render() {
        const combinedStyles = Styles.combine([_styles.defaultStyle, this.props.style]);
        let ariaRole = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits);
        const tabIndex = this.props.tabIndex;
        const ariaSelected = AccessibilityUtil.accessibilityTraitToAriaSelected(this.props.accessibilityTraits);
        const isAriaHidden = AccessibilityUtil.isHidden(this.props.importantForAccessibility);
        const accessibilityLabel = this.props.accessibilityLabel;
        const ariaLabelledBy = this.props.ariaLabelledBy;
        const ariaRoleDescription = this.props.ariaRoleDescription;
        const ariaLive = this.props.accessibilityLiveRegion ?
            AccessibilityUtil.accessibilityLiveRegionToString(this.props.accessibilityLiveRegion) :
            undefined;
        const ariaValueNow = this.props.ariaValueNow;

        if (!ariaRole && !accessibilityLabel && !ariaLabelledBy && !ariaRoleDescription && !ariaLive &&
                (ariaSelected === undefined) && (ariaValueNow === undefined) && (tabIndex === undefined)) {
            // When the accessibility properties are not specified, set role to none.
            // It tells the screen readers to skip the node, but unlike setting
            // aria-hidden to true, allows the sub DOM to be processed further.
            // This signigicantly improves the screen readers performance.
            ariaRole = 'none';
        }

        const props: React.HTMLAttributes<any> = {
            role: ariaRole,
            tabIndex: tabIndex,
            style: combinedStyles,
            title: this.props.title,
            'aria-label': accessibilityLabel,
            'aria-hidden': isAriaHidden,
            'aria-selected': ariaSelected,
            'aria-labelledby': ariaLabelledBy,
            'aria-roledescription': ariaRoleDescription,
            'aria-live': ariaLive,
            'aria-valuenow': ariaValueNow,
            onContextMenu: this.props.onContextMenu,
            onMouseEnter: this.props.onMouseEnter,
            onMouseLeave: this.props.onMouseLeave,
            onMouseOver: this.props.onMouseOver,
            onMouseMove: this.props.onMouseMove,
            // Weird things happen: ReactXP.Types.Touch is not assignable to React.Touch
            onTouchStart: this.props.onResponderStart as React.HTMLAttributes<any>['onTouchStart'],
            onTouchStartCapture: this.props.onTouchStartCapture as React.HTMLAttributes<any>['onTouchStartCapture'],
            onTouchMove: this.props.onResponderMove as React.HTMLAttributes<any>['onTouchMove'],
            onTouchMoveCapture: this.props.onTouchMoveCapture as React.HTMLAttributes<any>['onTouchMoveCapture'],
            onTouchEnd: this.props.onResponderRelease,
            onTouchCancel: this.props.onResponderTerminate,
            draggable: this.props.onDragStart ? true : undefined,
            onDragStart: this.props.onDragStart,
            onDrag: this.props.onDrag,
            onDragEnd: this.props.onDragEnd,
            onDragEnter: this.props.onDragEnter,
            onDragOver: this.props.onDragOver,
            onDragLeave: this.props.onDragLeave,
            onDrop: this.props.onDrop,
            onClick: this.props.onPress,
            onFocus: this.props.onFocus,
            onBlur: this.props.onBlur,
            onKeyDown: this.props.onKeyPress,
            id: this.props.id,
        };

        if (this.props.blockPointerEvents) {
            // Make this element and all children transparent to pointer events
            props.className = 'reactxp-block-pointer-events';
            combinedStyles.pointerEvents = 'none';
        } else if (this.props.ignorePointerEvents) {
            // Make this element transparent to pointer events, but allow children to still receive events
            props.className = 'reactxp-ignore-pointer-events';
            combinedStyles.pointerEvents = 'none';
        }

        let reactElement: React.ReactElement<any>;
        const childAnimationsEnabled = this.props.animateChildEnter || this.props.animateChildMove || this.props.animateChildLeave;
        if (childAnimationsEnabled) {
            reactElement = (
                <AnimateListEdits
                    { ...props }
                    data-test-id={ this.props.testId }
                    animateChildEnter={ this.props.animateChildEnter }
                    animateChildMove={ this.props.animateChildMove }
                    animateChildLeave={ this.props.animateChildLeave }
                >
                    { this.props.children }
                </AnimateListEdits>
            );
        } else {
            reactElement = (
                <div { ...props } data-test-id={ this.props.testId }>
                    { this._renderResizeDetectorIfNeeded(combinedStyles) }
                    { this.props.children }
                </div>
            );
        }

        return this.context.isRxParentAText ?
            restyleForInlineText(reactElement) :
            reactElement;
    }