Files
twenty/packages/twenty-front/src/modules/action-menu/actions/display/components/ActionDropdownItem.tsx
Raphaël Bosi 9e0402e691 Action menu refactoring (#11454)
# Description

Closes [#696](https://github.com/twentyhq/core-team-issues/issues/696)

- `useAction` hooks have been removed for all actions
- Every action can now declare a react component
- Some standard action components have been introduced: `Action`,
`ActionLink` and `ActionModal`
- The `ActionDisplay` component uses the new `displayType` prop of the
`ActionMenuContext` to render the right component for the action
according to its container: `ActionButton`, `ActionDropdownItem` or
`ActionListItem`
- The `ActionDisplayer` wraps the action component inside a context
which gives it all the information about the action
-`actionMenuEntriesComponenState` has been removed and now all actions
are computed directly using `useRegisteredAction`
- This computation is done inside `ActionMenuContextProvider` and the
actions are passed inside a context
- `actionMenuType` gives information about the container of the action,
so the action can know wether or not to close this container upon
execution
2025-04-09 13:12:49 +00:00

34 lines
756 B
TypeScript

import { ActionDisplayProps } from '@/action-menu/actions/display/components/ActionDisplay';
import { getActionLabel } from '@/action-menu/utils/getActionLabel';
import { useNavigate } from 'react-router-dom';
import { isDefined } from 'twenty-shared/utils';
import { MenuItem } from 'twenty-ui/navigation';
export const ActionDropdownItem = ({
action,
onClick,
to,
}: {
action: ActionDisplayProps;
onClick?: () => void;
to?: string;
}) => {
const navigate = useNavigate();
const handleClick = () => {
onClick?.();
if (isDefined(to)) {
navigate(to);
}
};
return (
<MenuItem
key={action.key}
LeftIcon={action.Icon}
onClick={handleClick}
text={getActionLabel(action.label)}
/>
);
};