import React, { useState } from 'react'
|
import { useDrop } from 'react-dnd'
|
import { is, fromJS } from 'immutable'
|
import update from 'immutability-helper'
|
import { Modal } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
import Card from './card'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
const Container = ({menu, handleList }) => {
|
const [cards, setCards] = useState(menu.components)
|
|
if (!is(fromJS(cards), fromJS(menu.components))) {
|
setCards(menu.components)
|
}
|
|
const findCard = id => {
|
const card = cards.filter(c => `${c.uuid}` === id)[0]
|
return {
|
card,
|
index: cards.indexOf(card),
|
}
|
}
|
|
const updateConfig = (element) => {
|
let _cards = cards.map(item => item.uuid === element.uuid ? element : item)
|
|
if (element.type === 'tabs' && element.subtabs.length === 0) {
|
_cards = cards.filter(item => item.uuid !== element.uuid)
|
}
|
|
handleList({...menu, components: _cards})
|
}
|
|
const switchConfig = (dragKey, hoverKey, callback) => {
|
let _tab = null
|
|
let hoverTabsIndex = 0
|
let hoverIndex = 0
|
let _cards = cards.map((item, pindex) => {
|
if (item.type === 'tabs') {
|
item.subtabs = item.subtabs.filter((tab, index) => {
|
if (tab.uuid === dragKey) {
|
_tab = tab
|
return false
|
}
|
if (tab.uuid === hoverKey) {
|
hoverTabsIndex = pindex
|
hoverIndex = index
|
}
|
return true
|
})
|
}
|
return item
|
})
|
|
if (hoverTabsIndex && _tab) {
|
_cards[hoverTabsIndex].subtabs.splice(hoverIndex + 1, 0, _tab)
|
} else {
|
return
|
}
|
|
_cards = _cards.filter(item => {
|
if (item.type !== 'tabs') return true
|
if (item.subtabs.length === 0) return false
|
|
return true
|
})
|
|
handleList({...menu, components: _cards})
|
|
setTimeout(() => {
|
callback()
|
}, 100)
|
}
|
|
const deleteCard = (id) => {
|
const { card } = findCard(id)
|
|
confirm({
|
title: `确定删除子表组吗？`,
|
onOk() {
|
const _cards = cards.filter(item => item.uuid !== card.uuid)
|
handleList({...menu, components: _cards})
|
},
|
onCancel() {}
|
})
|
}
|
|
const [, drop] = useDrop({
|
accept: 'menu',
|
drop(item) {
|
if (item.added || item.index) {
|
delete item.added // 删除组件添加标记
|
delete item.dropTargetId
|
return
|
}
|
|
let newcard = {
|
uuid: Utils.getuuid(),
|
type: 'tabs',
|
isNew: true
|
}
|
|
let targetId = ''
|
|
if (item.dropTargetId) {
|
targetId = item.dropTargetId
|
delete item.dropTargetId
|
} else if (cards.length > 0) {
|
targetId = cards.slice(-1)[0].uuid
|
}
|
|
const { index: overIndex } = findCard(`${targetId}`)
|
const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] })
|
|
// setCards(_cards)
|
handleList({...menu, components: _cards})
|
}
|
})
|
|
let style = JSON.stringify(menu.style || {})
|
style = style.replace(/@mywebsite@\//ig, window.GLOB.baseurl)
|
style = JSON.parse(style)
|
|
return (
|
<div ref={drop} className="table-shell-inner" style={style}>
|
<div className="ant-row">
|
{cards.map(card => (
|
<Card
|
id={card.uuid}
|
key={card.uuid}
|
card={card}
|
delCard={deleteCard}
|
findCard={findCard}
|
updateConfig={updateConfig}
|
switchConfig={switchConfig}
|
/>
|
))}
|
</div>
|
</div>
|
)
|
}
|
export default Container
|
