in packages/sdk/ui-react/src/widget/splitButton/splitButton.tsx [73:131]
public render(): JSX.Element {
const {
buttonClass = '',
defaultLabel = '',
disabled = false,
id = '',
options = [],
submenuLabel = '',
} = this.props;
const { expanded, selected } = this.state;
const {
caretRef,
hidePanel,
onClickOption,
onClickDefault,
onClickCaret,
onKeyDown,
setButtonRef,
setCaretRef,
} = this;
const expandedClass = expanded ? ` ${styles.expanded}` : '';
return (
<>
<div className={styles.container}>
<button
className={`${styles.defaultButton} ${buttonClass}`}
disabled={disabled}
id={id}
onClick={onClickDefault}
ref={setButtonRef}
role={'menuitem'}
>
<span>{options[this.state.selected]}</span>
</button>
<div className={styles.separator} aria-hidden={'true'} />
<button
aria-label={submenuLabel || defaultLabel}
className={styles.caretButton + expandedClass}
ref={setCaretRef}
onClick={onClickCaret}
aria-expanded={expanded}
aria-haspopup={true}
disabled={disabled}
role={'menuitem'}
/>
</div>
<SplitButtonPanel
expanded={expanded}
caretRef={caretRef}
selected={selected}
hidePanel={hidePanel}
onClick={onClickOption}
onKeyDown={onKeyDown}
options={options}
/>
</>
);
}