gistfile1.txt

import React, { Component } from 'react'
import '../styles/FileItem.scss'
import { connect } from 'react-redux';
import * as actions from '../actions/index';


class FileItem extends Component {
    _isMounted = false;
    constructor(props) {
        super(props);
        this.state = {
            isHovering: false,
            mouseEnterEvent: null,
            showRightClickEventInfo: false
        };
    }

    componentWillReceiveProps(props) {
        if (props.mouseHandling.isRightClicked === false) {
            // this.props.isOnRightClick(true)
            this.setState({ showRightClickEventInfo: false, isHovering: false });
        }
    }
    handleMouseEnter = (e) => {
        if (this.state.showRightClickEventInfo === false && this.props.mouseHandling.isRightClicked === false) {
            let mouseEnterVar = setTimeout(() => {
                this.setState({ isHovering: true })
            }, 1500)
            this.setState({ mouseEnterEvent: mouseEnterVar });
        }
    }
    handleMouseLeave = () => {
        console.log(this.state.mouseEnterEvent)
        clearTimeout(this.state.mouseEnterEvent);
        this.setState({ mouseEnterEvent: null })
        this.setState({ isHovering: false })
    }
    handleOnRightClick = (e) => {
        if (e.type === 'contextmenu' && this.props.mouseHandling.isRightClicked === false) {
            this.props.isOnRightClick(true)
            this.setState({ showRightClickEventInfo: true, isHovering: false })
        }
    }
    render() {
        let widthStyle = {
            width: `${90 / this.props.numberOfItemInOneRow}%`
        }
        const { element } = this.props;
        return (
            <div style={widthStyle} className="fileItemContainer" onDoubleClick={this.props.onDoubleClick} onContextMenu={(e) => this.handleOnRightClick(e)}
                onMouseEnter={(e) => { this.handleMouseEnter(e) }} onMouseLeave={() => { this.handleMouseLeave() }}
            >
                <div className="fileItemContainer__imageContainer">
                    <img
                        className="fileItemContainer__imageContainer-image"
                        alt={element.fileName}
                        src={element.fileUrl}
                    />
                </div>

                {this.state.isHovering ? <div className="fileItemContainer__fileInfo">
                    <div>Name:{element.fileName}</div>
                    <div>Size:{element.size} bytes</div>
                </div> : null}
                {this.props.showTitle ? <div className="fileItemContainer__fileTitle">{element.fileName}</div> : null}
                {this.state.showRightClickEventInfo ? <div>
                    <div>Name:{element.fileName}</div>
                    <div>Size:{element.size} bytes</div>
                </div> : null}
            </div>

        );
    }
}

const mapStateToProps = (state) => {
    return {
        mouseHandling: state.mouseHandling
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        isOnRightClick: (state) => dispatch(actions.isOnRightClick(state))
    };
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(FileItem)