import * as React from 'react' ; import Dropdown from '@synerise/ds-dropdown' ; import Icon , { EditM , OptionHorizontalM , Settings2M , StarFillM , StarM , TrashM } from '@synerise/ds-icon' ; import Menu from '@synerise/ds-menu' ; import { NOOP } from '@synerise/ds-utils' ; import { MenuProps } from 'antd/lib/menu' ; import { TagVisibility , TagsListItem } from '../../TagsList.types' ; import Visibility , { CheckIcon } from './Visibility' ; import { ActionProps } from './Actions.types' ; import * as S from './Actions.styles' ; const triggerClick = ( event ) : void => event . stopPropagation ( ) ; const dropdownMenuClick = ( event ) : void => event . domEvent . stopPropagation ( ) ; const Actions = ( { onVisibilityChange = NOOP , onFavouriteChange , onSettingsEnter , onEdit , onDelete , onDropdownToggle = NOOP , item , texts , visible , } ) => { const { favourite } = item ; const handleVisibilityChange = ( visibility , thisItem ) : void => { onVisibilityChange ( visibility , thisItem ) ; onDropdownToggle ( false ) ; } ; return ( < Dropdown placement = "bottomRight" trigger = { [ 'click' ] } onVisibleChange = { onDropdownToggle } visible = { visible } align = { { offset : [ 12 , 16 ] } } overlay = { < S . DropdownMenu asDropdownMenu onClick = { dropdownMenuClick } > < Visibility texts = { texts } item = { item } onVisibilityChange = { handleVisibilityChange } / > < Menu . Divider /> { ! ! onFavouriteChange && ( < S . DropdownMenuItem className = "favourite" prefixel = { < S . FavouriteIconWrapper favourite = { ! ! favourite } > < Icon component = { favourite ? < StarFillM /> : <StarM / > } /> < /S.FavouriteIconWrapper>} suffixel={favourite ? <CheckIcon / > : null } onClick = { ( e ) : void => { e . domEvent . stopPropagation ( ) ; onFavouriteChange ( ) ; onDropdownToggle ( false ) ; } } > { favourite ? texts ?. deleteFromFavourites : texts ?. addToFavourite } < /S.DropdownMenuItem>)} { ! ! onEdit && ( < S . DropdownMenuItem prefixel = { < Icon component = { < EditM />}/ > } onClick = { ( e ) : void => { e . domEvent . stopPropagation ( ) ; onEdit ( ) ; onDropdownToggle ( false ) ; } } > { texts ?. edit } < /S.DropdownMenuItem>)} { ! ! onSettingsEnter && ( < S . DropdownMenuItem prefixel = { < Icon component = { < Settings2M />}/ > } onClick = { ( e ) : void => { e . domEvent . stopPropagation ( ) ; onSettingsEnter ( e . domEvent ) ; onDropdownToggle ( false ) ; } } > { texts ?. enterSettings } < /S.DropdownMenuItem>)} < Menu . Divider / > { ! ! onDelete && ( < S . DropdownMenuItem prefixel = { < Icon component = { < TrashM />}/ > } type = "danger" onClick = { ( e ) : void => { e . domEvent . stopPropagation ( ) ; onDelete ( item ) ; onDropdownToggle ( false ) ; } } > { texts ?. delete } < /S.DropdownMenuItem>)} < /S.DropdownMenu>}> < S . DropdownTrigger component = { < OptionHorizontalM / > } onClick = { triggerClick } / > < /Dropdown>); } ; export default Actions ;