43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import cn from 'classnames';
|
|
import { Icon, Tooltip } from 'UI';
|
|
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
|
import cls from './popMenu.module.css';
|
|
|
|
export default React.memo(function PopMenu({ items }) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<OutsideClickDetectingDiv className={cls.wrapper} onClickOutside={() => setOpen(false)}>
|
|
{open && (
|
|
<div className={cls.menuItems}>
|
|
{items.map((item) => (
|
|
<button
|
|
key={item.label}
|
|
onClick={(e) => {
|
|
item.onClick(e);
|
|
setOpen(false);
|
|
}}
|
|
className={cn(
|
|
'flex items-center justify-end color-green bg-white uppercase overflow-hidden',
|
|
cls.menuItemButton
|
|
)}
|
|
>
|
|
<div className={cls.buttonLabel}>{item.label}</div>
|
|
<Icon name={item.icon} size="18" className={cls.icon} color="teal" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
<Tooltip title="Add Step">
|
|
<button
|
|
onClick={() => setOpen((o) => !o)}
|
|
className={cn('bg-teal flex items-center justify-center', cls.addStepButton, {
|
|
[cls.openMenuBtn]: open,
|
|
})}
|
|
>
|
|
<Icon name="plus" size="18" className={cls.plusIcon} color="white" />
|
|
</button>
|
|
</Tooltip>
|
|
</OutsideClickDetectingDiv>
|
|
);
|
|
});
|