diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js index 61f3a9fe242dd80b5566ec3e987ef72e34d7ad96..17de9c9787784c8a9f317c3653256a907e4659a4 100644 --- a/src/components/WindowSideBarAnnotationsPanel.js +++ b/src/components/WindowSideBarAnnotationsPanel.js @@ -12,16 +12,36 @@ import ns from '../config/css-ns'; * WindowSideBarAnnotationsPanel ~ */ export class WindowSideBarAnnotationsPanel extends Component { + /** + * constructor - + */ + constructor(props) { + super(props); + + this.handleClick = this.handleClick.bind(this); + } + + /** + * Handle click event of an annotation. + */ + handleClick(event, annotation) { + const { + deselectAnnotation, selectAnnotation, selectedAnnotationIds, windowId, + } = this.props; + + if (selectedAnnotationIds.includes(annotation.id)) { + deselectAnnotation(windowId, annotation.targetId, annotation.id); + } else { + selectAnnotation(windowId, annotation.targetId, annotation.id); + } + } + /** * Rreturn an array of sanitized annotation data */ sanitizedAnnotations() { const { annotations, - classes, - deselectAnnotation, - windowId, - selectAnnotation, selectedAnnotationIds, } = this.props; @@ -31,18 +51,8 @@ export class WindowSideBarAnnotationsPanel extends Component { annotations.map(annotation => ( <ListItem key={annotation.id} - className={ - selectedAnnotationIds.includes(annotation.id) - ? classes.selectedAnnotation - : null - } - onClick={() => { - if (selectedAnnotationIds.includes(annotation.id)) { - deselectAnnotation(windowId, annotation.targetId, annotation.id); - } else { - selectAnnotation(windowId, annotation.targetId, annotation.id); - } - }} + selected={selectedAnnotationIds.includes(annotation.id)} + onClick={e => this.handleClick(e, annotation)} > <Typography variant="body2"> <SanitizedHtml ruleSet="iiif" htmlString={annotation.content} />