| | |
| | | import React from 'react' |
| | | import { useDrag, useDrop } from 'react-dnd' |
| | | import { Icon, Popover, Button } from 'antd' |
| | | |
| | | import { resetStyle } from '@/utils/utils-custom.js' |
| | | import './index.scss' |
| | | |
| | | const Card = ({ id, card, moveCard, findCard, editCard, delCard, profileCard, changeStyle, doubleClickCard }) => { |
| | | const Card = ({ id, card, moveCard, findCard, editCard, copyCard, delCard, profileCard, changeStyle, doubleClickCard }) => { |
| | | const originalIndex = findCard(id).index |
| | | const [{ isDragging }, drag] = useDrag({ |
| | | item: { type: 'action', id, originalIndex }, |
| | |
| | | }, |
| | | }) |
| | | |
| | | let _style = {opacity: isDragging ? 0 : 1} |
| | | |
| | | if (card.style) { |
| | | _style = {...card.style, opacity: isDragging ? 0 : 1} |
| | | } |
| | | |
| | | let hasProfile = false |
| | | if (['pop', 'prompt', 'exec'].includes(card.OpenType)) { |
| | | hasProfile = true |
| | |
| | | } |
| | | |
| | | let btnElement = null |
| | | let _style = resetStyle(card.style) |
| | | if (card.show === 'icon') { |
| | | btnElement = (<Button style={card.btnstyle} type="link"><Icon type={card.icon}/></Button>) |
| | | btnElement = (<Button style={_style} type="link"><Icon type={card.icon}/></Button>) |
| | | } else if (card.show === 'link') { |
| | | btnElement = (<Button style={card.btnstyle} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>) |
| | | btnElement = (<Button style={_style} type="link">{card.icon ? <Icon type={card.icon}/> : null}{card.label}</Button>) |
| | | } else { |
| | | btnElement = (<Button icon={card.icon} style={card.btnstyle}> {card.label} </Button>) |
| | | btnElement = (<Button style={_style}> {card.label}{card.icon ? <Icon type={card.icon}/> : null} </Button>) |
| | | } |
| | | |
| | | return ( |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <Icon className="edit" title="编辑" type="edit" onClick={() => editCard(id)} /> |
| | | <Icon className="copy" title="复制" type="copy" onClick={() => copyCard(id)} /> |
| | | <Icon className="close" title="删除" type="close" onClick={() => delCard(id)} /> |
| | | <Icon className="style" title="调整样式" onClick={() => changeStyle(id)} type="font-colors" /> |
| | | {hasProfile ? <Icon className="profile" title="setting" type="profile" onClick={() => profileCard(id)} /> : null} |
| | | </div> |
| | | } trigger="hover"> |
| | | <div ref={node => drag(drop(node))} className={'ant-col card-button-cell ant-col-' + card.width} onDoubleClick={() => doubleClickCard(id)}> |
| | | <div style={_style}> |
| | | <div ref={node => drag(drop(node))} className={'ant-col card-button-cell ant-col-' + card.width} onDoubleClick={(e) => {e.stopPropagation(); doubleClickCard(id)}}> |
| | | <div style={{opacity: isDragging ? 0 : 1}}> |
| | | {btnElement} |
| | | </div> |
| | | </div> |