import React from 'react' ; import { Button , Position , Popover , Menu , MenuItem , IconName , } from '@blueprintjs/core' ; import { useTranslationFunction } from '../../contexts' ; import { runtime } from '../../runtime' ; import { MEDIA_EXTENSIONS } from '../../../shared/constants' ; const MenuAttachmentItems = ( { itemsArray , } ) => { const tx = useTranslationFunction ( ) ; return ( < > { itemsArray . map ( ( item ) => ( < MenuItem key = { item . id } icon = { item . icon } text = { item . text } onClick = { item . onClick } aria - label = { tx ( item . attachment ) } / > ) ) } < />); } ; const MenuAttachment = ( { addFileToDraft , } ) => { const addFilenameFile = async ( ) => { const file = await runtime . showOpenFileDialog ( { filters : [ { name : 'All Files' , extensions : [ '*' ] , } , ] , properties : [ 'openFile' ] , defaultPath : runtime . getAppPath ( 'home' ) , } ) ; if ( file ) { addFileToDraft ( file ) ; } } ; const addFilenameMedia = async ( ) => { const file = await runtime . showOpenFileDialog ( { filters : [ { name : 'Media' , extensions : MEDIA_EXTENSIONS , } , ] , properties : [ 'openFile' ] , defaultPath : runtime . getAppPath ( 'home' ) , } ) ; if ( file ) { addFileToDraft ( file ) ; } } ; const items = [ { id : 0 , icon : 'document' as IconName , text : 'Document' , onClick : addFilenameFile . bind ( null ) , attachment : 'attachment-files' , } , { id : 1 , icon : 'media' as IconName , text : 'Media' , onClick : addFilenameMedia . bind ( null ) , attachment : 'attachment-images' , } , ] ; return ( < div className = 'attachment-button' > < Popover content = { < Menu > < MenuAttachmentItems itemsArray = { items } /> < /Menu>} position={Position.RIGHT_TOP}> < Button minimal icon = 'paperclip' / > < /Popover> < /div>); } ; export type MenuAttachmentItemObject = { id : number ; icon : IconName ; text : string ; onClick : todo ; attachment : string ; } ; export default MenuAttachment ;