import { AllFdEvents } from '../utils/FdEvents' ; import React , { useCallback } from 'react' ; import { ButtonGhost } from '@fdmg/design-system/components/button/ButtonGhost' ; import FdEvent from './FdEvent' ; import { DragDropContext , DropResult , Droppable , Draggable , } from 'react-beautiful-dnd' ; import EventsStore = require ( '../stores/EventsStore' ) ; import styles from './EventsList.module.scss' ; declare let chrome ; declare let browser ; let storage ; if ( typeof browser !== 'undefined' ) { storage = browser ?. storage ?? undefined ; } else if ( typeof chrome !== 'undefined' ) { storage = chrome ?. storage ?? undefined ; } export interface Props { events : AllFdEvents [ ] ; onRemoveEvent : ( e : React . MouseEvent < HTMLButtonElement > ) => void ; } param props export default function EventsList ( props ) { const handleDragEnd = useCallback ( ( result ) => { if ( ! result . destination ) { return ; } let events = [ ... props . events ] ; const reorder = ( list , startIndex , endIndex ) => { const arrayList = Array . from ( list ) ; const [ removed ] = arrayList . splice ( startIndex , 1 ) ; arrayList . splice ( endIndex , 0 , removed ) ; return arrayList ; } ; events = reorder ( events , result . source . index , result . destination . index ) ; EventsStore . addFuture ( [ ... EventsStore . getEvents ( ) ] ) ; EventsStore . setEvents ( events , 'storeEvents' ) ; } , [ props . events ] ) ; return ( < > { props . events . length ? ( < DragDropContext onDragEnd = { handleDragEnd } > < Droppable droppableId = "events" > { ( provided ) => ( < ul { ... provided . droppableProps } ref = { provided . innerRef } className = { styles . ul } > { props . events . map ( ( event , idx ) => ( < Draggable key = { `${ ( event as any ) . id }` } draggableId = { `${ ( event as any ) . id }` } index = { idx } > { ( dragProvided ) => ( < li ref = { dragProvided . innerRef } { ... dragProvided . draggableProps } { ... dragProvided . dragHandleProps } > < FdEvent event = { event } /> < ButtonGhost className = "toggle-view" data - index = { idx } onClick = { props . onRemoveEvent } title = "Delete event" > x < /ButtonGhost> < /li>)} < /Draggable>))} { provided . placeholder } < /ul>)} < /Droppable> < /DragDropContext>) : (<div className={styles.noEvents}> Start record and interact with a website to record some events < /div>)} < />); }