import React from 'react' ; import { DefaultButton , IButtonProps , IRenderFunction , concatStyleSets , IButtonStyles } from '@fluentui/react' ; import { controlButtonStyles } from './styles/ControlBar.styles' ; import { ControlButtonTooltip } from './ControlButtonTooltip' ; /**
 * Strings of  ControlBarButton that can be overridden.
 *
 *  public export interface ControlBarButtonStrings { /**
     * Label of the button. This supersedes onLabel or offLabel if used.
     */ label ? : string ; /**
     * Label of the button shown when the button is checked.
     */ onLabel ? : string ; /**
     * Label of the button shown when the button is not checked.
     */ offLabel ? : string ; /**
     * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.
     */ tooltipContent ? : string ; /**
     * Tooltip content when the button is disabled.
     */ tooltipDisabledContent ? : string ; /**
     * Tooltip content when the button is in the checked state.
     */ tooltipOnContent ? : string ; /**
     * Tooltip content when the button is in the unchecked state.
     */ tooltipOffContent ? : string ; } /**
 * Styles for all  ControlBarButton implementations.
 *
 *  public export type ControlBarButtonStyles = IButtonStyles ; /**
 * Props for  ControlBarButton .
 *
 *  public export interface ControlBarButtonProps extends IButtonProps { defaultValue showLabel ? : boolean ; /**
     * Key to use for the Label component
     */ labelKey ? : string ; defaultValue tooltipId ? : string ; /**
     * Optional strings to override in component.
     */ strings ? : ControlBarButtonStrings ; /**
     * Icon to render when the button is checked.
     */ onRenderOnIcon ? : IRenderFunction < IButtonProps > ; /**
     * Icon to render when the button is not checked.
     */ onRenderOffIcon ? : IRenderFunction < IButtonProps > ; /**
     * Fluent styles, including extensions common to all  ControlBarButton s.
      styles ? : ControlBarButtonStyles ; } const DefaultRenderIcon = ( props ? ) : JSX . Element | null => { return props ?. checked ? props ?. onRenderOnIcon ? props ?. onRenderOnIcon ( ) : null : props ?. onRenderOffIcon ? props ?. onRenderOffIcon ( ) : null ; } ; /**
 * Default button styled for the  ControlBar .
 *
 * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.
 *
 *  public export const ControlBarButton = ( props ) : JSX . Element => { const componentStyles = concatStyleSets ( controlButtonStyles , props . styles ?? { } ) ; const labelText = props ?. text ?? props ?. strings ?. label ?? ( props ?. checked ? props ?. strings ?. onLabel : props ?. strings ?. offLabel ) ; const tooltipContent = props ?. strings ?. tooltipContent ?? ( props ?. disabled ? props ?. strings ?. tooltipDisabledContent : props ?. checked ? props ?. strings ?. tooltipOnContent : props ?. strings ?. tooltipOffContent ) ; const tooltipId = props . tooltipId ?? props . labelKey ? props . labelKey + '-tooltip' : undefined ; return ( < ControlButtonTooltip content = { tooltipContent } id = { tooltipId } > < DefaultButton { ... props } styles = { componentStyles } onRenderText = { props . showLabel && props . onRenderText ? props . onRenderText : undefined } onRenderIcon = { props . onRenderIcon ?? DefaultRenderIcon } ariaLabel = { tooltipContent } allowDisabledFocus = { props . allowDisabledFocus ?? true } > { props . showLabel ? labelText : < > < />} < /DefaultButton> < /ControlButtonTooltip>); } ;