import React from 'react' ; import SidebarRightNote from './SidebarRightNote' ; import SidebarHeader from './SidebarHeader' ; import SidebarPlaceholder from './SidebarPlaceholder' ; import { getLayerNotes } from '../utils' ; interface SidebarRightNotesProps { selection : next . AppLayer | null ; notes : next . Note [ ] ; composing : boolean ; setNotes ( notes ) : void ; } const SidebarRightNotes = ( props ) => { const { selection , notes , setNotes , composing } = props ; const selectionNotes = selection ? getLayerNotes ( selection . id , notes ) : null ; const removeNote = ( noteIndex ) => { if ( selection ) { if ( ( selectionNotes as next . Note ) . notes . length > 1 ) { let newNotes = notes . map ( ( layerNotes ) => { if ( layerNotes . id === selection . id ) { layerNotes . notes . splice ( noteIndex , 1 ) ; } return layerNotes ; } ) ; setNotes ( newNotes ) ; } else { let notesCopy = [ ... notes ] ; let selectionIndex = notes . findIndex ( ( layer ) => { return layer . id === selection . id ; } ) ; notesCopy . splice ( selectionIndex , 1 ) ; setNotes ( notesCopy ) ; } } } ; return ( < div className = 'c-sidebar__section' > < SidebarHeader text = 'Notes' / > { selection ? < div > { selectionNotes ? < ul className = 'c-sidebar-right__notes' > { selectionNotes . notes . map ( ( note , index ) => ( < SidebarRightNote key = { index } note = { note } index = { index } composing = { composing } onClick = { ( ) => removeNote ( index ) } />))} < /ul> : < SidebarPlaceholder text = 'This layer has no notes' / > } < /div> : < SidebarPlaceholder text = 'Click layer to see notes' / > } < /div>); } ; export default SidebarRightNotes ;