Merge pull request #10 from yWorks/dev

Add extra props to tooltip, context-menu, and popup

Author: anneeberle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yworks/react-yfiles-core",
-  "version": "1.2.0-beta.2",
+  "version": "1.2.0-beta.3",
   "author": {
     "name": "yFiles for HTML team @ yWorks GmbH",
     "email": "[email protected]"

src/context-menu/ContextMenu.tsx

@@ -74,6 +74,10 @@ export interface ContextMenuProps<TDataItem> {
    * An optional component used for rendering a custom context menu.
    */
   renderMenu?: ComponentType<RenderContextMenuProps<TDataItem>>
+  /**
+   * Optional global props that get passed to the context-menu component
+   */
+  extraProps?: Record<string, any>
 }
 
 /**
@@ -82,7 +86,8 @@ export interface ContextMenuProps<TDataItem> {
  */
 export function ContextMenu<TDataItem>({
   menuItems,
-  renderMenu
+  renderMenu,
+  extraProps
 }: ContextMenuProps<TDataItem> & PropsWithChildren) {
   const [menuVisible, setMenuVisible] = useState(false)
   const [menuLocation, setMenuLocation] = useState({ x: 0, y: 0 })
@@ -201,6 +206,7 @@ export function ContextMenu<TDataItem>({
             setMenuVisible(false)
           }}
           renderMenu={renderMenu}
+          extraProps={extraProps}
         ></ContextMenuCore>
       )}
     </>
@@ -215,7 +221,8 @@ function ContextMenuCore<TDataItem>({
   menuItems,
   menuLocation,
   onClose,
-  renderMenu = DefaultRenderMenu
+  renderMenu = DefaultRenderMenu,
+  extraProps
 }: ContextMenuProps<TDataItem> & {
   dataItem: TDataItem | null
   onClose: Function
@@ -224,7 +231,8 @@ function ContextMenuCore<TDataItem>({
   const menu = createElement(renderMenu, {
     menuItems: menuItems ? menuItems(dataItem) : [],
     item: dataItem,
-    onClose: onClose
+    onClose: onClose,
+    ...extraProps
   })
   return (
     menu && (

src/popup/Popup.tsx

@@ -72,6 +72,11 @@ export interface PopupProps<TDataItem> {
    * The default is single-click.
    */
   clickMode?: 'single' | 'double'
+
+  /**
+   * Optional global props that get passed to the popup component
+   */
+  extraProps?: Record<string, any>
 }
 
 /**
@@ -81,7 +86,8 @@ export interface PopupProps<TDataItem> {
 export function Popup<TDataItem>({
   renderPopup,
   position,
-  clickMode
+  clickMode,
+  extraProps
 }: PopupProps<TDataItem> & PropsWithChildren) {
   const graphComponent = useGraphComponent()!
   const [location, setLocation] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
@@ -153,7 +159,8 @@ export function Popup<TDataItem>({
         item: currentItem?.tag,
         onClose: () => {
           setCurrentItem(null)
-        }
+        },
+        ...extraProps
       })
     : null
   return (

src/tooltip-component/Tooltip.tsx

@@ -34,13 +34,14 @@ export interface RenderTooltipProps<TDataItem> {
  */
 export interface TooltipProps<TDataItem> {
   renderTooltip?: ComponentType<RenderTooltipProps<TDataItem>>
+  extraProps?: Record<string, any>
 }
 
 /**
  * The Tooltip component adds an item tooltip to its parent component. It is designed to be used inside a
  * parent component that displays the graph.
  */
-export function Tooltip<TDataItem>({ renderTooltip }: TooltipProps<TDataItem>) {
+export function Tooltip<TDataItem>({ renderTooltip, extraProps }: TooltipProps<TDataItem>) {
   const graphComponent = useGraphComponent()!
 
   const [tooltipRenderInfo, setTooltipRenderInfo] = useState<TooltipRenderInfo<TDataItem> | null>(
@@ -89,10 +90,10 @@ export function Tooltip<TDataItem>({ renderTooltip }: TooltipProps<TDataItem>) {
           createElement(
             TooltipWrapper,
             {},
-            createElement<RenderTooltipProps<TDataItem>>(
-              tooltipRenderInfo.component,
-              tooltipRenderInfo.props
-            )
+            createElement<RenderTooltipProps<TDataItem>>(tooltipRenderInfo.component, {
+              ...tooltipRenderInfo.props,
+              ...extraProps
+            })
           ),
           tooltipRenderInfo.domNode
         )}