65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import classNames from 'classnames';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import type { MenuItem } from 'mastodon/models/dropdown_menu';
|
|
import {
|
|
isActionItem,
|
|
isExternalLinkItem,
|
|
} from 'mastodon/models/dropdown_menu';
|
|
|
|
export const ActionsModal: React.FC<{
|
|
actions: MenuItem[];
|
|
onClick: React.MouseEventHandler;
|
|
}> = ({ actions, onClick }) => (
|
|
<div className='modal-root__modal actions-modal'>
|
|
<ul>
|
|
{actions.map((option, i: number) => {
|
|
if (option === null) {
|
|
return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
|
|
}
|
|
|
|
const { text, dangerous } = option;
|
|
|
|
let element: React.ReactElement;
|
|
|
|
if (isActionItem(option)) {
|
|
element = (
|
|
<button onClick={onClick} data-index={i}>
|
|
{text}
|
|
</button>
|
|
);
|
|
} else if (isExternalLinkItem(option)) {
|
|
element = (
|
|
<a
|
|
href={option.href}
|
|
target={option.target ?? '_target'}
|
|
data-method={option.method}
|
|
rel='noopener'
|
|
onClick={onClick}
|
|
data-index={i}
|
|
>
|
|
{text}
|
|
</a>
|
|
);
|
|
} else {
|
|
element = (
|
|
<Link to={option.to} onClick={onClick} data-index={i}>
|
|
{text}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<li
|
|
className={classNames({
|
|
'dropdown-menu__item--dangerous': dangerous,
|
|
})}
|
|
key={`${text}-${i}`}
|
|
>
|
|
{element}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|