import React , { Fragment , useContext , useEffect , useRef } from 'react' ; import { IProps } from '../../Editor' ; import { EditorContext , PreviewType , ContextStore } from '../../Context' ; import { ICommand } from '../../commands' ; import Child from './Child' ; import './index.less' ; export interface IToolbarProps extends IProps { height ? : React . CSSProperties [ 'height' ] ; onCommand ? : ( command : ICommand < string > , groupName ? : string ) => void ; commands ? : ICommand < string > [ ] ; isChild ? : boolean ; } export function ToolbarItems ( props ) { const { prefixCls } = props ; const { fullscreen , preview , barPopup = { } , commandOrchestrator , dispatch } = useContext ( EditorContext ) ; const originalOverflow = useRef ( '' ) ; function handleClick ( command , name ? ) { if ( ! dispatch ) return ; const state = { barPopup : { ... barPopup } } ; if ( command . keyCommand === 'preview' ) { state . preview = command . value as PreviewType ; } if ( command . keyCommand === 'fullscreen' ) { state . fullscreen = ! fullscreen ; } if ( props . commands && command . keyCommand === 'group' ) { props . commands . forEach ( ( item ) => { if ( name === item . groupName ) { state . barPopup ! [ name ! ] = true ; } else if ( item . keyCommand ) { state . barPopup ! [ item . groupName ! ] = false ; } } ) ; } else if ( name || command . parent ) { Object . keys ( state . barPopup || { } ) . forEach ( ( keyName ) => { state . barPopup ! [ keyName ] = false ; } ) ; } if ( Object . keys ( state ) . length ) { dispatch ( { ... state } ) ; } commandOrchestrator && commandOrchestrator . executeCommand ( command ) ; } useEffect ( ( ) => { if ( document ) { if ( fullscreen ) { document . body . style . overflow = 'hidden' ; } else { if ( ! originalOverflow . current ) { originalOverflow . current = window . getComputedStyle ( document . body , null ) . overflow ; } document . body . style . overflow = originalOverflow . current ; } } } , [ fullscreen , originalOverflow ] ) ; return ( < ul > { ( props . commands || [ ] ) . map ( ( item , idx ) => { if ( item . keyCommand === 'divider' ) { return < li key = { idx } { ... item . liProps } className = { `${ prefixCls }-toolbar-divider` } />; } if ( ! item . keyCommand ) return < Fragment />; const activeBtn = ( fullscreen && item . keyCommand === 'fullscreen' ) || ( item . keyCommand === 'preview' && preview === item . value ) ; const childNode = item . children && typeof item . children === 'function' ? item . children ( { getState : ( ) => commandOrchestrator ! . getState ( ) , textApi : commandOrchestrator ? commandOrchestrator ! . textApi : undefined , close : ( ) => handleClick ( { } , item . groupName ) , execute : ( ) => handleClick ( { execute : item . execute } ) , } ) : undefined ; const disabled = barPopup && preview && preview === 'preview' && ! /(preview|fullscreen)/ . test ( item . keyCommand ) ; return ( < li key = { idx } { ... item . liProps } className = { activeBtn ? `active` : '' } > { ! item . buttonProps && item . icon } { item . buttonProps && React . createElement ( 'button' , { type : 'button' , disabled , 'data-name' : item . name , ... item . buttonProps , onClick : ( evn ) => { evn . stopPropagation ( ) ; handleClick ( item , item . groupName ) ; } , } , item . icon ) } { item . children && ( < Child groupName = { item . groupName } prefixCls = { prefixCls } children = { childNode } commands = { Array . isArray ( item . children ) ? item . children : undefined } / > ) } < /li>); } ) } < /ul>); } export default function Toolbar ( props = { } ) { const { prefixCls , height = 29 , isChild } = props ; const { commands , extraCommands } = useContext ( EditorContext ) ; return ( < div className = { `${ prefixCls }-toolbar` } style = { { height } } > < ToolbarItems { ... props } commands = { props . commands || commands || [ ] } / > { ! isChild && < ToolbarItems { ... props } commands = { extraCommands || [ ] } />} < /div>); }