import { ReactNode , useCallback , createElement , KeyboardEvent } from "react" ; import { executeAction } from "@mendix/piw-utils-internal" ; import { BadgeContainerProps } from "../typings/BadgeProps" ; import { Badge as DisplayBadge } from "./components/Badge" ; export default function Badge ( props ) { const onClick = useCallback ( ( ) => executeAction ( props . onClick ) , [ props . onClick ] ) ; const onKeyDown = useCallback ( ( event ) => { if ( event . key === "Enter" || event . key === " " ) { onClick ( ) ; } } , [ onClick ] ) ; const clickable = props . onClick && props . onClick . canExecute ; return ( < DisplayBadge type = { props . type } value = { props . value ?. value ?? "" } onClick = { clickable ? onClick : undefined } onKeyDown = { clickable ? onKeyDown : undefined } className = { props . class } style = { props . style } tabIndex = { clickable ? props . tabIndex ?? 0 : undefined } / > ) ; }