diff --git a/example/components/App.tsx b/example/components/App.tsx index 50d399c..b28361f 100644 --- a/example/components/App.tsx +++ b/example/components/App.tsx @@ -252,14 +252,18 @@ export function App() { data-test={DATA_TEST.MENU_FIRST_ITEM} hidden={state.hideItems} > - Item 1⌘C + {(params: ItemParams) => { + return JSON.stringify(params.props); + }} + { setState({ diff --git a/package.json b/package.json index 0f287d2..a880dc2 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "6.0.0", + "version": "6.1.0", "license": "MIT", "main": "dist/index.js", "module": "dist/index.mjs", @@ -46,11 +46,11 @@ "singleQuote": true, "trailingComma": "es5" }, - "name": "react-contexify", + "name": "react-contexify-props", "author": "Fadi Khadra (https://github.com/fkhadra)", "repository": { "type": "git", - "url": "git+https://github.com/fkhadra/react-contexify.git" + "url": "git+https://github.com/flynow10/react-contexify-props.git" }, "bugs": { "url": "https://github.com/fkhadra/react-contexify/issues" diff --git a/src/components/Item.tsx b/src/components/Item.tsx index 7c3c0c6..af10496 100644 --- a/src/components/Item.tsx +++ b/src/components/Item.tsx @@ -7,6 +7,7 @@ import { BooleanPredicate, HandlerParamsEvent, BuiltInOrString, + HandlerParams, } from '../types'; import { useItemTrackerContext } from './ItemTrackerProvider'; import { NOOP, CssClass } from '../constants'; @@ -15,11 +16,20 @@ import { contextMenu } from '../core'; export interface ItemProps extends InternalProps, - Omit, 'hidden' | 'disabled' | 'onClick'> { + Omit< + React.HTMLAttributes, + 'hidden' | 'disabled' | 'onClick' | 'children' + > { /** * Any valid node that can be rendered + * If a function is used, a ReactNode must be returned + * + * @param id The item id, when defined + * @param props The props passed when you called `show(e, {props: yourProps})` + * @param data The data defined on the `Item` + * @param triggerEvent The event that triggered the context menu */ - children: ReactNode; + children: ((args: HandlerParams) => ReactNode) | ReactNode; /** * Passed to the `Item` onClick callback. Accessible via `data` @@ -200,6 +210,9 @@ export const Item: React.FC = ({ if (isHidden) return null; + const childrenPassedProps = + typeof children === 'function' ? children(handlerParams) : children; + return (
= ({ role="menuitem" aria-disabled={isDisabled} > -
{children}
+
{childrenPassedProps}
); }; diff --git a/src/types/index.ts b/src/types/index.ts index 8828efe..b7a0a43 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -26,7 +26,7 @@ export type MenuId = string | number; /** * Used both by `PredicatParams` and `ItemParams` */ -interface HandlerParams { +export interface HandlerParams { /** * The id of the item when provided */