public render()

in packages/roosterjs-react-command-bar/lib/components/RoosterCommandBar.tsx [46:78]


    public render(): JSX.Element {
        const { className, calloutClassName, calloutOnDismiss, overflowMenuProps, commandBarClassName, ellipsisAriaLabel } = this.props;

        // with the newest changes on the editor, refresh the buttons (e.g. bold button being selected if text selected is bold and header being checked if used)
        this._buttons.forEach(this._refreshButtonStates);
        return (
            <div className={css("rooster-command-bar", className)}>
                <CommandBar
                    className={css("rooster-command-bar-base", commandBarClassName)}
                    items={this._buttons}
                    overflowButtonProps={{
                        ariaLabel: ellipsisAriaLabel,
                        menuProps: {
                            ...overflowMenuProps,
                            // we set items as empty to satisfy the type checker & because otherwise the component
                            // throws an error about an unexpected `undefined` value on first render.
                            //
                            // We expect it to be overridden by the commandBar when rendering the button
                            // after measuring.
                            items: [],
                            calloutProps: {
                                className: calloutClassName
                            },
                            onDismiss: calloutOnDismiss,
                            className: css("rooster-command-bar-overflow", overflowMenuProps && overflowMenuProps.className),
                            focusZoneProps: { direction: FocusZoneDirection.horizontal }
                        }
                    }}
                />
                <input type="file" ref={this._fileInputOnRef} accept="image/*" style={DisplayNoneStyle} onChange={this._fileInputOnChange} />
            </div>
        );
    }