Skip to main content

resolver

Description​

Optional. Enables the multi-area mode and defines whether an element needs a menu

Type​

function

Usage​

resolver?: (item: any, event: MouseEvent) => any;

Parameters​

The resolver function receives two arguments:

  • item - the value of the data-context-id attribute (or any custom identifier associated with the clicked element).
  • event - the native MouseEvent that triggered the menu.

The function should return:

  • false or null -> no menu will be shown.
  • true -> the menu will be shown with the item’s raw identifier.
  • any object -> the returned value will be passed as the context in the menu’s onClick event.

Example​

import { useRef } from "react";

function Example({ items, options, tasks }) {
  // the id inside the resolver is the value of the "data-context-id" attribute
  const resolver = (id: any, ev: MouseEvent) => id;
  const menuRef = useRef<any>(null);

  return (
    <>
      {/* a menu will appear for all items with the "data-context-id" attribute */}
      <ActionMenu options={options} resolver={resolver} ref={menuRef} />

      {items.map(item => (
        <div
          key={item.id}
          className="item"
          onClick={e => menuRef.current?.show(e)}
          data-context-id={item.id}
        />
      ))}
    </>
  );
}

Details​

The result of the resolver call will be provided in the resulting onClick event as ev.detail.item.

Check the examples of valid resolvers below:

const allowAll = (id, ev) => true;
const allowElementsWithCorrectAttribute = (id, ev) => id;
const allowAndReturnTaskObject = (id, ev) => tasks[id];

Related article: Using Action Menu for multiple targets

Related sample: