33 lines
1.0 KiB
JavaScript
33 lines
1.0 KiB
JavaScript
import React from 'react'
|
|
import { Icon } from 'antd'
|
|
import closeIcon from './close.png'
|
|
export default class CanDeleteItem extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
showDelete: false
|
|
}
|
|
}
|
|
|
|
handleMouseOver() {
|
|
this.setState({showDelete: true})
|
|
}
|
|
|
|
handelMouseout() {
|
|
setTimeout(() => {
|
|
this.setState({showDelete: false})
|
|
}, 400)
|
|
}
|
|
|
|
render() {
|
|
const { title } = this.props;
|
|
return (
|
|
<div style={{display: "inline-block", paddingLeft: "10px", paddingRight: '10px'}} onMouseEnter={() => this.handleMouseOver()} onMouseLeave={() => this.handelMouseout()}>
|
|
<span className="selectedItem" onBlur>{title}</span>
|
|
{
|
|
this.state.showDelete && <Icon type="cross" style={{cursor: "pointer", marginLeft: "5px", fontWeight: '600'}} onClick={() => this.props.onDelete(this.props.item)}/>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
} |