import * as React from 'react' ; import RibbonButtonType , { DropDownRenderer } from './RibbonButtonType' ; import RibbonPlugin from './RibbonPlugin' ; import { Browser } from 'roosterjs-editor-dom' ; import { FormatState } from 'roosterjs-editor-types' ; import './RibbonButton.scss' ; export interface RibbonButtonProps { plugin : RibbonPlugin ; button : RibbonButtonType ; format : FormatState ; onClicked : ( ) => void ; } export interface RibbonButtonState { isDropDownShown : boolean ; } export default class RibbonButton extends React . Component < RibbonButtonProps , RibbonButtonState > { private range : Range ; constructor ( props ) { super ( props ) ; this . state = { isDropDownShown : false } ; } render ( ) { let button = this . props . button ; let editor = this . props . plugin . getEditor ( ) ; let className = 'bm-ribbon-btn' ; if ( editor && this . props . format && button . checked && button . checked ( this . props . format , editor ) ) { className += ' ' + 'checked' ; } return ( < span className = "dropDownButton" > < button onClick = { button . dropDownItems ? this . onShowDropDown : ( ) => this . onExecute ( ) } className = { className } > < img src = { button . image } width = { 32 } height = { 32 } title = { button . title } / > < /button> { button . dropDownItems && this . state . isDropDownShown && this . renderDropDownItems ( button . dropDownItems , button . dropDownRenderer ) } < /span>); } private onExecute = ( value ? ) => { const { button , plugin } = this . props ; const editor = plugin . getEditor ( ) ; this . onHideDropDown ( ) ; if ( button . onClick ) { button . onClick ( editor , value ) ; } this . props . onClicked ( ) ; } ; private onShowDropDown = ( ) => { if ( Browser . isSafari ) { this . range = this . props . plugin . getEditor ( ) . getSelectionRange ( ) ; } if ( ! this . props . button . preserveOnClickAway ) { this . getDocument ( ) . addEventListener ( 'click' , this . onHideDropDown ) ; } this . setState ( { isDropDownShown : true } ) ; } ; private onHideDropDown = ( ) => { if ( Browser . isSafari ) { this . props . plugin . getEditor ( ) . select ( this . range ) ; } this . getDocument ( ) . removeEventListener ( 'click' , this . onHideDropDown ) ; this . setState ( { isDropDownShown : false } ) ; } ; private renderDropDownItems ( items , renderer ) { return ( < div className = 'dropDown' > { Object . keys ( items ) . map ( key => renderer ? ( < div key = { key } > { renderer ( this . props . plugin . getEditor ( ) , this . onHideDropDown , key , items [ key ] ) } < /div>) : (<div key={key} onClick={() => this.onExecute(key)} className='dropDownItem'> { items [ key ] } < /div>))} < /div>); } private getDocument ( ) { return this . props . plugin . getEditor ( ) . getDocument ( ) ; } }