2020-10-23

king

2020-10-23 407c0f1765c7d085218a91ad8842784977383d05

 src/menu/menushell/card.jsx

@@ -1,14 +1,15 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon } from 'antd'

import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const AntvBar = asyncComponent(() => import('@/menu/components/chart/antv-bar'))
const AntvPie = asyncComponent(() => import('@/menu/components/chart/antv-pie'))
const AntvTabs = asyncComponent(() => import('@/menu/components/tabs/antv-tabs'))
const DataCard = asyncComponent(() => import('@/menu/components/card/data-card'))

const Card = ({ id, menu, card, moveCard, findCard, delCard, hasDrop, doubleClickCard, updateConfig }) => {
const Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'menu', id, originalIndex, floor: card.floor },
@@ -19,9 +20,10 @@
  const [, drop] = useDrop({
    accept: 'menu',
    canDrop: () => true,
    drop: ({ id: draggedId, originalIndex, floor }) => {
    drop: (item) => {
      const { id: draggedId, originalIndex, floor } = item
      if (originalIndex === undefined) {
        hasDrop(card)
        item.dropTargetId = id
      } else if (draggedId && floor === card.floor) {
        if (draggedId !== id) {
          const { index: overIndex } = findCard(id)
@@ -38,16 +40,19 @@

  const getCardComponent = () => {
    if (card.type === 'bar' || card.type === 'line') {
      return (<AntvBar menu={menu} card={card} updateConfig={updateConfig} />)
      return (<AntvBar card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'pie') {
      return (<AntvPie card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'tabs') {
      return (<AntvTabs menu={menu} tabs={card} updateConfig={updateConfig} />)
      return (<AntvTabs tabs={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'card' && card.subtype === 'datacard') {
      return (<DataCard card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    }
  }

  return (
    <div className={'ant-col mk-component-card ant-col-' + (card.setting ? card.setting.span : 12)} ref={node => drag(drop(node))} style={style}>
    <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} ref={node => drag(drop(node))} style={style}>
      {getCardComponent()}
      <Icon className="remove-component" title="delete" type="delete" onClick={() => delCard(id)} />
    </div>
  )
}