STCloudFrontEnd/src/components/Page/File.js

import React, {Component} from "react";
import {FileTextTwoTone, FileTwoTone} from "@ant-design/icons";
import './File.less'
import {Dropdown, Menu} from "antd";

class File extends Component {
    state = {
        isOver: false
    }
    onMouseOver = () => {
        this.setState({
            isOver: true
        })
    }
    onMouseOut = () => {
        this.setState({
            isOver: false
        })
    }

    render() {
        let {isOver} = this.state
        const ele = this.props.ele
        const menu = (
            <Menu>
                <Menu.Item key="open">
                    <a href="https://www.antgroup.com">Open Folder</a>
                </Menu.Item>
            </Menu>
        );
        return (
            <div className={'file' + (isOver ? '-over' : '')} onMouseEnter={this.onMouseOver}
                 onMouseLeave={this.onMouseOut}>
                {
                    isOver ? <div className={'file-options'}>
                        <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft" arrow>
                            <a className="dropdown-link" onClick={e => e.preventDefault()}>
                                &nbsp;·&nbsp;·&nbsp;·&nbsp;
                            </a>
                        </Dropdown>
                    </div> : <div>

                    </div>
                }
                {
                    isOver ? <FileTextTwoTone className={'file-logo'}/> :
                        <FileTwoTone className={'file-logo'}/>
                }
                <div className={'file-name'}>
                    {ele.name}
                </div>
                <div className={'file-date'}>
                    2019/8/8
                </div>
            </div>
        )
    }
}

export default File;