render()

in react/features/feedback/components/FeedbackDialog.web.js [213:286]


    render() {
        const { message, mousedOverScore, score } = this.state;
        const scoreToDisplayAsSelected
            = mousedOverScore > -1 ? mousedOverScore : score;

        const { t } = this.props;

        const scoreIcons = this._scoreClickConfigurations.map(
            (config, index) => {
                const isFilled = index <= scoreToDisplayAsSelected;
                const activeClass = isFilled ? 'active' : '';
                const className
                    = `star-btn ${scoreAnimationClass} ${activeClass}`;

                return (
                    <span
                        aria-label = { t(SCORES[index]) }
                        className = { className }
                        key = { index }
                        onClick = { config._onClick }
                        onKeyPress = { config._onKeyPres }
                        role = 'button'
                        tabIndex = { 0 }
                        { ...(isMobileBrowser() ? {} : {
                            onMouseOver: config._onMouseOver
                        }) }>
                        { isFilled
                            ? <StarFilledIcon
                                label = 'star-filled'
                                size = 'xlarge' />
                            : <StarIcon
                                label = 'star'
                                size = 'xlarge' /> }
                    </span>
                );
            });


        return (
            <Dialog
                okKey = 'dialog.Submit'
                onCancel = { this._onCancel }
                onDialogRef = { this._onScrollTop }
                onSubmit = { this._onSubmit }
                titleKey = 'feedback.rateExperience'>
                <div className = 'feedback-dialog'>
                    <div className = 'rating'>
                        <div
                            aria-label = { this.props.t('feedback.star') }
                            className = 'star-label' >
                            <p id = 'starLabel'>
                                { t(SCORES[scoreToDisplayAsSelected]) }
                            </p>
                        </div>
                        <div
                            className = 'stars'
                            onMouseLeave = { this._onScoreContainerMouseLeave }>
                            { scoreIcons }
                        </div>
                    </div>
                    <div className = 'details'>
                        <FieldTextAreaStateless
                            autoFocus = { true }
                            className = 'input-control'
                            id = 'feedbackTextArea'
                            label = { t('feedback.detailsLabel') }
                            onChange = { this._onMessageChange }
                            shouldFitContainer = { true }
                            value = { message } />
                    </div>
                </div>
            </Dialog>
        );
    }