import React from 'react'
|
import { useDrag, useDrop } from 'react-dnd'
|
import { EditOutlined, CloseOutlined } from '@ant-design/icons'
|
import ItemTypes from './itemtypes'
|
import MkIcon from '@/components/mk-icon'
|
import './index.scss'
|
|
const Card = ({ id, card, moveCard, findCard, editCard, closeCard }) => {
|
const originalIndex = findCard(id).index
|
const [{ isDragging }, drag] = useDrag({
|
item: { type: ItemTypes.CARD, id, originalIndex },
|
collect: monitor => ({
|
isDragging: monitor.isDragging(),
|
}),
|
})
|
const [, drop] = useDrop({
|
accept: ItemTypes.CARD,
|
canDrop: () => true,
|
drop({ id: draggedId }) {
|
if (draggedId !== id) {
|
const { index: overIndex } = findCard(id)
|
moveCard(draggedId, overIndex)
|
}
|
},
|
})
|
const opacity = isDragging ? 0.5 : 1
|
|
const edit = () => {
|
editCard(id)
|
}
|
|
const close = () => {
|
closeCard(id)
|
}
|
|
if (card.level === 'second') {
|
return (
|
<div className="side-card" style={{ opacity }}>
|
<div ref={node => drag(drop(node))}>
|
{card.PageParam && card.PageParam.Icon && <MkIcon type={card.PageParam.Icon} />}
|
{card.MenuName}
|
</div>
|
<EditOutlined className="edit" onClick={edit} />
|
<CloseOutlined className="close" onClick={close} />
|
</div>
|
)
|
} else {
|
return (
|
<div className="side-card" style={{ opacity }}>
|
<div ref={node => drag(drop(node))}>
|
{card.MenuName}
|
</div>
|
{/* 自定义模板，在新页面编辑 */}
|
{!card.forbidden ? <EditOutlined className="edit" onClick={edit} /> : null}
|
{card.forbidden && card.type === 'CustomPage' ? <EditOutlined className="edit" style={{color: '#959595', cursor: 'not-allowed'}} title="会员等级不够，无开发权限。"/> : null}
|
<CloseOutlined className="close" onClick={close} />
|
</div>
|
)
|
}
|
}
|
export default Card
|
