2022-01-21

king

2022-01-21 46f79b491173d284a4900d19e7aecf7509481438

 src/menu/components/share/actioncomponent/dragaction/card.jsx

@@ -1,10 +1,13 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Button, Popover } from 'antd'
import { Button, Popover } from 'antd'
import { CopyOutlined, EditOutlined, FontColorsOutlined, CloseOutlined, ProfileOutlined } from '@ant-design/icons'

import MkIcon from '@/components/mk-icon'
import { resetStyle } from '@/utils/utils-custom.js'
import './index.scss'

const Card = ({ id, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle, profileCard, doubleClickCard }) => {
const Card = ({ id, card, type, moveCard, findCard, editCard, delCard, copyCard, changeStyle, profileCard, doubleClickCard }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'action', id, originalIndex },
@@ -38,32 +41,40 @@

  let btnElement = null
  let _style = resetStyle(card.style)
  let _class = ''
  let show = card.show
  if (type === 'datacard') {
    _style = null
    _class = 'swiper swiper-' + card.color
    show = 'button'
  }

  if (card.show === 'icon') {
  if (show === 'icon') {
    btnElement = (
      <Button
        type="link"
        icon={card.icon}
        style={_style}
        className={_class}
        onDoubleClick={() => doubleClickCard(id)}
      >{card.icon ? '' : card.label}</Button>
      >{card.icon ? <MkIcon type={card.icon}/> : card.label}</Button>
    )
  } else if (card.show === 'link') {
  } else if (show === 'link') {
    btnElement = (
      <Button
        type="link"
        style={_style}
        className={_class}
        onDoubleClick={() => doubleClickCard(id)}
      >{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>
      >{card.label}{card.icon ? <MkIcon type={card.icon}/> : null}</Button>
    )
  } else {
    btnElement = (
      <Button
        icon={card.icon}
        style={_style}
        className={_class}
        onDoubleClick={() => doubleClickCard(id)}
      >
        {card.label}
        <MkIcon type={card.icon}/>{card.label}
      </Button>
    )
  }
@@ -71,11 +82,11 @@
  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="验证" type="profile" onClick={() => profileCard(id)} /> : null}
        <EditOutlined className="edit" onClick={() => editCard(id)} />
        <CopyOutlined className="copy" onClick={() => copyCard(id)} />
        <CloseOutlined className="close" onClick={() => delCard(id)} />
        {type !== 'datacard' ? <FontColorsOutlined className="style" title="调整样式" onClick={() => changeStyle(id)}/> : ''}
        {hasProfile ? <ProfileOutlined className="profile" title="验证" onClick={() => profileCard(id)} /> : null}
      </div>
    } trigger="hover">
      <div className="page-card" style={{ opacity: opacity}}>