104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
import CardItem, {getDropStoreId} from "@/component/CardItem";
|
|
import {Content, StepDragType} from "@/component/type";
|
|
import React, {useCallback} from "react";
|
|
import drapStore from "@/mobx/DrapStore";
|
|
import {observer} from "mobx-react";
|
|
|
|
|
|
interface DragListProps {
|
|
data:StepDragType<Content>[]
|
|
parent:StepDragType<Content>|null
|
|
}
|
|
const _tagStore = getDropStoreId()
|
|
const tagStore = _tagStore()
|
|
const DragList = ({data,parent}:DragListProps) => {
|
|
console.log(data)
|
|
if(!Array.isArray(data)){
|
|
data = []
|
|
}
|
|
// const [list, setList] = useState(data);
|
|
data.forEach((e:StepDragType<object>)=>{
|
|
if(!e.tag){
|
|
e.tag = tagStore.tag
|
|
}
|
|
})
|
|
// 在当前位置插入模块
|
|
const insertCard = useCallback(
|
|
(currentDrop:StepDragType<Content>|null,atIndex: number, element:StepDragType<Content>) => {
|
|
drapStore.insertDrop(currentDrop,atIndex,element)
|
|
},
|
|
[data],
|
|
)
|
|
// 删除当前模块
|
|
const deleteCard = useCallback(
|
|
(currentDrop:StepDragType<Content>|null,item:StepDragType<Content>) => {
|
|
if(currentDrop===null){
|
|
drapStore.removeDrop(item)
|
|
}else{
|
|
currentDrop.children = currentDrop.children?.filter(dropItem=>dropItem.id!==item.id)
|
|
drapStore.updateState()
|
|
}
|
|
},
|
|
[data],
|
|
)
|
|
const findCard = useCallback(
|
|
(id: string,item:any) => {
|
|
|
|
const card = data.filter((c:StepDragType<object>) => `${c.id}` === id)[0]
|
|
return {
|
|
card,
|
|
index: data.indexOf(card),
|
|
}
|
|
},
|
|
[data],
|
|
)
|
|
const moveCard = useCallback(
|
|
(id: string, to: number,item:StepDragType<Content>,parentItem:StepDragType<Content>|null) => {
|
|
// debugger
|
|
// if(parent===null){
|
|
// drapStore.moveDrop(id,to,item,parentItem)
|
|
// return;
|
|
// }
|
|
const { card, index } = findCard(id,item)
|
|
// console.log(card)
|
|
if (card===undefined){
|
|
return
|
|
}
|
|
// const ord = data[to]
|
|
// data[to] = card
|
|
// data[index] = ord
|
|
// console.log(data[to]?.data?.value,data[index]?.data?.value)
|
|
drapStore.moveDrop(id,to,item,parentItem)
|
|
// drapStore.updateState()
|
|
},
|
|
[findCard, data],
|
|
)
|
|
const childrenCreate = useCallback((item:StepDragType<Content>,newItem:StepDragType<Content>) =>{
|
|
const Item = { ...newItem, id: String(new Date().getTime()) }
|
|
drapStore.addChildren(item,Item)
|
|
},[data])
|
|
return (
|
|
<div >
|
|
{data&&data.map((item: StepDragType<Content>,index:number) => {
|
|
return <span key={item?.id}>
|
|
<CardItem
|
|
parent={parent} key={item?.id}
|
|
tag={tagStore.tag}
|
|
childrenCreate={(newItem)=>childrenCreate(item as StepDragType<Content>,newItem)}
|
|
len={data?data?.length:0}
|
|
data={item}
|
|
deleteCard={deleteCard}
|
|
insertCard={insertCard}
|
|
moveCard={moveCard}
|
|
findCard={findCard}>
|
|
<DragList
|
|
parent={item}
|
|
data={item.children?item.children:[]} />
|
|
</CardItem>
|
|
</span>;
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
export default DragList
|