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>
);
}