diff --git a/src/CanvasListItem.js b/src/CanvasListItem.js index bc240526d18311d329c8bc0e2a7fb9591d06750e..34f857d041d6e09b64a3f0c4b335d8526ce0a1ee 100644 --- a/src/CanvasListItem.js +++ b/src/CanvasListItem.js @@ -1,4 +1,4 @@ -import React, { Component, createRef } from 'react'; +import React, { Component, createRef, forwardRef } from 'react'; import PropTypes from 'prop-types'; import DeleteIcon from '@mui/icons-material/DeleteForever'; import EditIcon from '@mui/icons-material/Edit'; @@ -20,6 +20,8 @@ class CanvasListItem extends Component { this.handleMouseHover = this.handleMouseHover.bind(this); this.handleDelete = this.handleDelete.bind(this); this.handleEdit = this.handleEdit.bind(this); + + console.log(props.ref); } /** */ @@ -89,10 +91,12 @@ class CanvasListItem extends Component { console.log('this.props : ', ...this.props); const { isHovering } = this.state; const { windowViewType, toggleSingleCanvasDialogOpen } = this.context; + return ( <div onMouseEnter={this.handleMouseHover} onMouseLeave={this.handleMouseHover} + className="mirador-annotation-list-item" > {isHovering && this.editable() && ( <div @@ -126,7 +130,7 @@ class CanvasListItem extends Component { <li {...this.props} // eslint-disable-line react/jsx-props-no-spreading > - {children} + {/* {children} */} </li> </div> ); @@ -143,4 +147,4 @@ CanvasListItem.propTypes = { CanvasListItem.contextType = AnnotationActionsContext; -export default CanvasListItem; +export default forwardRef((props, ref) => <CanvasListItem {...props} containerRef={ref} />);