123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- 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()}>
- · · ·
- </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;
|