import { IFluidDataStoreFactory } from "@fluidframework/runtime-definitions" ; import React from "react" ; import { IButtonStyles , IconButton , HighContrastSelector , initializeIcons , IContextualMenuProps , IIconProps , IContextualMenuItem , } from "office-ui-fabric-react" ; import { fluidExport as pmfe } from "@fluid-example/prosemirror/dist/prosemirror" ; import { ITabsTypes } from "./dataModel" ; initializeIcons ( ) ; export interface IButtonExampleProps { disabled ? : boolean ; checked ? : boolean ; createTab : ( factory : IFluidDataStoreFactory ) => void ; fluidObjects : ITabsTypes [ ] ; } const customSplitButtonStyles = { splitButtonMenuButton : { backgroundColor : "white" , width : 15 , border : "none" } , splitButtonMenuIcon : { fontSize : "7px" } , splitButtonContainer : { selectors : { [ HighContrastSelector ] : { border : "none" } , } , height : 22 , } , } ; const addIcon = { iconName : "Add" } ; export const NewTabButton = ( props ) => { const { disabled , checked } = props ; const items = [ ] ; props . fluidObjects . forEach ( ( fluidObject ) => { items . push ( { key : fluidObject . factory . type , text : fluidObject . friendlyName , iconProps : { iconName : fluidObject . fabricIconName } , onClick : ( ) => { props . createTab ( fluidObject . factory ) ; } , } ) ; } ) ; const menuProps = { items } ; return ( < IconButton split iconProps = { addIcon } splitButtonAriaLabel = "new tab options" aria - roledescription = "split button" styles = { customSplitButtonStyles } menuProps = { menuProps } ariaLabel = "New item" onClick = { ( ) => props . createTab ( pmfe ) } disabled = { disabled } checked = { checked } text = "hello" / > ) ; } ;