private renderRibbonButton()

in packages/roosterjs-react-ribbon/lib/components/Ribbon.tsx [161:200]


    private renderRibbonButton(name: string): JSX.Element {
        let ribbonButton = this.getButton(name);

        if (!ribbonButton) {
            throw new Error('Cannot find button by name: ' + name);
        }

        let buttonState = ribbonButton.buttonState
            ? ribbonButton.buttonState(this.state.formatState)
            : RibbonButtonState.Normal;
        let isDisabled = buttonState == RibbonButtonState.Disabled;
        let buttonClassName = classNames(
            Styles.ribbonIcon,
            (this.state.dropDown == name || buttonState == RibbonButtonState.Checked) &&
            Styles.ribbonButtonChecked,
            isDisabled && Styles.ribbonButtonDisabled
        );
        let title = getString(ribbonButton.name, this.props.strings);
        return (
            <div
                className={Styles.ribbonButton}
                ref={ref => (this.buttonElements[name] = ref)}
                key={name}>
                <IconButton
                    className={buttonClassName}
                    styles={this.props.buttonStyle}
                    data-is-focusable={!isDisabled}
                    disabled={isDisabled}
                    title={title}
                    onClick={!isDisabled && (() => this.onRibbonButton(name))}
                    onDragStart={this.cancelEvent}>
                    {this.props.buttonRenderer ? (
                        this.props.buttonRenderer(name, this.props.isRtl)
                    ) : (
                        <span>{name}</span>
                    )}
                </IconButton>
            </div>
        );
    }