diff --git a/platform/example/src/App.tsx b/platform/example/src/App.tsx index a8cecd9..409fd30 100644 --- a/platform/example/src/App.tsx +++ b/platform/example/src/App.tsx @@ -1,9 +1,5 @@ import React, {Component, useCallback, useRef, useState} from "react"; import "./App.css" -import CustDrag from "./component/CustDrag.js" -import {DndProvider, useDrop} from "react-dnd"; -import CardItem, {getDropStoreId} from "./component/CardItem.js" -import {HTML5Backend} from "react-dnd-html5-backend"; import {Content, StepDragEnum, StepDragType} from "@/component/type"; import drapStore from "./mobx/DrapStore.js"; import {observer} from "mobx-react"; diff --git a/platform/example/src/component/CardItem.tsx b/platform/example/src/component/CardItem.tsx index 4f839ff..c5797fe 100644 --- a/platform/example/src/component/CardItem.tsx +++ b/platform/example/src/component/CardItem.tsx @@ -1,7 +1,7 @@ import {memo, useRef} from "react"; import {useDrag, useDrop} from "react-dnd"; import drapStore from "@/mobx/DrapStore"; -import {StepDragType, StepType} from "@/component/type"; +import {Content, StepDragType, StepType} from "@/component/type"; import style from "./css/DrapItem.module.less" import {stepMap} from "@/component/step"; @@ -24,14 +24,14 @@ export const getDropStoreId = (type?:string) =>{ interface CardItemProps { tag:string - data:StepDragType - parent:StepDragType|null + data:StepDragType + parent:StepDragType|null len:number - moveCard: (id: string, to: number, item: StepDragType, parentItem: StepDragType | null) => void + moveCard: (id: string, to: number, item: StepDragType, parentItem: StepDragType | null) => void findCard: (id: string,item:any) => { index: number } - insertCard: (currentDrop:StepDragType|null, atIndex: number,item:StepDragType) => void - deleteCard: (currentDrop:StepDragType|null,item:StepDragType) => void - childrenCreate: (item: StepDragType) => void + insertCard: (currentDrop:StepDragType|null, atIndex: number,item:StepDragType) => void + deleteCard: (currentDrop:StepDragType|null,item:StepDragType) => void + childrenCreate: (item: StepDragType) => void children?:any } @@ -66,7 +66,6 @@ const CardItem = memo((props:CardItemProps) => { if(props.parent===null){ return; } - console.log(item,props.parent) // 跨组件移动--移除自身 deleteCard(props.parent,props.data) @@ -77,7 +76,7 @@ const CardItem = memo((props:CardItemProps) => { const [{isOver,canDrop,isOverCurrent}, drop] = useDrop( () => ({ accept: StepType.CARD, - hover(item: StepDragType,monitor) { + hover(item: StepDragType,monitor) { const { id: draggedId,tag } = item; if(!draggedId) { const hoverBoundingRect = nodeRef?.current?.getBoundingClientRect() as DOMRect; @@ -106,7 +105,7 @@ const CardItem = memo((props:CardItemProps) => { canDrop: monitor.canDrop(), isOverCurrent: monitor.isOver({ shallow: true }), }), - drop:(item, monitor)=>{ + drop:(item:StepDragType, monitor)=>{ const { id: currentId,tag } = item if(tag===props.data.tag) return let { index: overIndex } = findCard(id,item) @@ -123,9 +122,9 @@ const CardItem = memo((props:CardItemProps) => { [findCard, moveCard], ) - const [{childrenIsOver,childrenIsOverCurrent},childrenDrop] = useDrop(()=>({ + const [,childrenDrop] = useDrop(()=>({ accept: StepType.CARD, - drop:(item, monitor)=>{ + drop:(item:StepDragType, monitor)=>{ const isOver = monitor.isOver({ shallow: false }) const { tag } = item; if(isOver){ @@ -135,9 +134,7 @@ const CardItem = memo((props:CardItemProps) => { if(tag!==Propstag){ // @ts-ignore const newItem = { ...item, id: String(new Date().getTime()) } - // insertCard(props.parent,0, newItem) childrenCreate(newItem) - console.log(1) } return } @@ -152,6 +149,13 @@ const CardItem = memo((props:CardItemProps) => { }),[data]) const step = stepMap[data.mold] const StepComponent = step&&step.Menu.component; + + const updateData = (data:string) =>{ + props.data.data.content = data + drapStore.updateState() + + } + return (
drag(drop(node))} > @@ -166,7 +170,7 @@ const CardItem = memo((props:CardItemProps) => {
- {step&&()} + {step&&()}
{props.data.children&&props.data.children.length>0&&(
childrenDrop(node)} className={style.woodExampleChildren}> diff --git a/platform/example/src/component/CustDrag.tsx b/platform/example/src/component/CustDrag.tsx deleted file mode 100644 index 7ed3ce1..0000000 --- a/platform/example/src/component/CustDrag.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import {useDrag, useDrop} from "react-dnd"; -import {isElement} from "react-dom/test-utils"; -import {StepType} from "@/component/type"; - -// @ts-ignore -const CustDrag = (props) => { - const {data} = props - const [{ opacity }, dragRef] = useDrag({ - - type: StepType.CARD, - item: { ...data }, - collect: (monitor) => ({ - opacity: monitor.isDragging() ? 0.5 : 1, - }), - end: (item, monitor) => { - // const { id: droppedId, originalIndex } = item - const didDrop = monitor.didDrop() - // 每次拖动完成更改自身id - if(didDrop){ - data.id = String(new Date().getTime()) - } - // 每次拖动 - // console.log(didDrop,item,data) - // if (!didDrop) { - // moveCard(droppedId, originalIndex) - // } - }, - }); - // const [, drop] = useDrop( - // () => ({ - // accept: "card", - // hover({ id: draggedId }: Item) { - // if (draggedId !== id) { - // const { index: overIndex } = findCard(id) - // moveCard(draggedId, overIndex) - // } - // }, - // }), - // [findCard, moveCard], - // ) - return ( - - {data?.data?.value} - - ); -}; -export default CustDrag diff --git a/platform/example/src/component/CustDrop.tsx b/platform/example/src/component/CustDrop.tsx deleted file mode 100644 index 579d368..0000000 --- a/platform/example/src/component/CustDrop.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import { useDrop } from "react-dnd"; -import React, {useCallback, useRef, useState} from "react"; -import CustDrag from "@/component/CustDrag"; -import update from 'immutability-helper' -// 同级为排序 -// 跨级为插入 -import {Content, StepDragEnum, StepDragType, StepType} from "@/component/type"; - - -const DrapStore = { - id:0, - tag:"", - type:"drop" -} -const getDrapStoreId = () =>{ - DrapStore.id +=1 - const store = {...DrapStore} - store.tag = store.type+"-"+store.id - return store -} - - - -const dndList:StepDragType[] = [ - {id:1, label: "组件1", value: "组件1" }, - {id:2,label: "组件2", value: "组件2" }, - {id:3, label: "组件3", value: "组件3" }, -].map((item:Content,index)=>{ - let content:Content = {...item} - return { - tag:"", - type:StepDragEnum.NODE, - id: String(index), - index:index, - originalIndex: index, - data: content, - } -}) - - - // @ts-ignore -const CustDrop = ({ onChange }) => { - const [tag,setTag] = useState(getDrapStoreId()) - const [itemClass, setItemClass] = useState<{ key: number | null; value: string }>({ - key: null, - value: '', - }) - const sortItems = useRef<{ dragRow: any; placeRow: any; posi: string }>({ - dragRow: {}, - placeRow: {}, - posi: '', - }) - const propsList = dndList.map(item=>{ - item.tag = tag.tag - return item - }) - const [value, setValue] = useState(propsList); - console.log(value) - - const [{ canDrop, isOver }, drop] = useDrop({ - accept: StepType.CARD, - hover(item:Content) { - console.log(item) - }, - // 同组的打上标签-同标签不允许添加， - drop: (item:StepDragType) => { - - // const { dragRow, placeRow, posi } = sortItems.current - // let _map: any[] = JSON.parse(JSON.stringify(dndList)) - // let index1 = _map.findIndex(v => v.id === dragRow.id) // 拖拽的itemIndex - // _map.splice(index1, 1) // 先删掉拖拽的，在获取放置的 - const targetValue = [...value]; - console.log(item.tag,tag.tag) - if (item.tag==tag.tag) { - return - } - // 没有tag就设置tag 不一样就重新设置 - if(item.tag == "" || item.tag == null||item.tag!=tag.tag){ - item.tag = tag.tag - } - targetValue.push(item); - setValue(targetValue); - console.log(item,value) - onChange(targetValue); - // let index = _map.findIndex(v => v.id === placeRow.id) // 放置的itemIndex - // if (index !== -1 && index1 !== -1) { - // _map.splice(posi === 'bottom' ? index + 1 : index, 0, dragRow) - // setValue(() => _map) - // } - }, - collect: (monitor) => ({ - // 是否放置在目标上 - isOver: monitor.isOver(), - // 是否开始拖拽 - canDrop: monitor.canDrop(), - }), - - }); - - // 展示拖动时的界面效果 - const showCanDrop = () => { - if (canDrop && !isOver && !value.length) return
请拖拽到此处
; - }; - - const delItem = (ind: number) => { - const newValue = [...value]; - newValue.splice(ind, 1); - setValue(newValue); - onChange(newValue); - }; - const onItemDragClass = (key:number,value:string) => { - console.log(key,value,itemClass.value) - if (itemClass.value !== value) { - setItemClass(() => { - let data = { key, value } - return data - }) - } - } - const onSortItemChange = (dragRow: any, placeRow: any, posi: string) => { - console.log(dragRow,placeRow,posi) - sortItems.current = { dragRow, placeRow, posi } - } - const findCard = useCallback( - (id: string) => { - const card = value.filter((c) => `${c.id}` === id)[0] - return { - card, - index: value.indexOf(card), - } - }, - [value], - ) - const moveCard = useCallback( - (id: string, atIndex: number) => { - const { card, index } = findCard(id) - setValue( - update(value, { - $splice: [ - [index, 1], - [atIndex, 0, card], - ], - }), - ) - }, - [findCard, value, setValue], - ) - // 内容展示 - const showValue = () => { - const [, sortDrop] = useDrop(() => ({ accept: "Sort" })) - return value.map((item, index: number) => { - return ( -
- -
- ); - }); - }; - - return ( -
- {showCanDrop()} - {showValue()} -
- ); -}; -export default CustDrop diff --git a/platform/example/src/component/DragList.tsx b/platform/example/src/component/DragList.tsx index 2b55e4f..ce4cfe2 100644 --- a/platform/example/src/component/DragList.tsx +++ b/platform/example/src/component/DragList.tsx @@ -1,13 +1,13 @@ import CardItem, {getDropStoreId} from "@/component/CardItem"; -import {StepDragType} from "@/component/type"; +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[] - parent:StepDragType|null + data:StepDragType[] + parent:StepDragType|null } const _tagStore = getDropStoreId() const tagStore = _tagStore() @@ -23,14 +23,14 @@ const DragList = ({data,parent}:DragListProps) => { }) // 在当前位置插入模块 const insertCard = useCallback( - (currentDrop:StepDragType,atIndex: number, element:StepDragType) => { + (currentDrop:StepDragType|null,atIndex: number, element:StepDragType) => { drapStore.insertDrop(currentDrop,atIndex,element) }, [data], ) // 删除当前模块 const deleteCard = useCallback( - (currentDrop:StepDragType|null,item:StepDragType) => { + (currentDrop:StepDragType|null,item:StepDragType) => { if(currentDrop===null){ drapStore.removeDrop(item) }else{ @@ -52,7 +52,7 @@ const DragList = ({data,parent}:DragListProps) => { [data], ) const moveCard = useCallback( - (id: string, to: number,item:StepDragType,parentItem:StepDragType) => { + (id: string, to: number,item:StepDragType,parentItem:StepDragType|null) => { // debugger // if(parent===null){ // drapStore.moveDrop(id,to,item,parentItem) @@ -72,25 +72,27 @@ const DragList = ({data,parent}:DragListProps) => { }, [findCard, data], ) - const childrenCreate = useCallback((item:StepDragType,newItem:StepDragType) =>{ + const childrenCreate = useCallback((item:StepDragType,newItem:StepDragType) =>{ const Item = { ...newItem, id: String(new Date().getTime()) } drapStore.addChildren(item,Item) },[data]) return (
- {data&&data.map((item: StepDragType,index:number) => { + {data&&data.map((item: StepDragType,index:number) => { return childrenCreate(item as StepDragType,newItem)} - len={data.length} + childrenCreate={(newItem)=>childrenCreate(item as StepDragType,newItem)} + len={data?data?.length:0} data={item} deleteCard={deleteCard} insertCard={insertCard} moveCard={moveCard} findCard={findCard}> - + ; })} diff --git a/platform/example/src/component/step/StepProps.ts b/platform/example/src/component/step/StepProps.ts deleted file mode 100644 index 058e464..0000000 --- a/platform/example/src/component/step/StepProps.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface StepProps { - data:T - -} \ No newline at end of file diff --git a/platform/example/src/component/step/http/Headers.tsx b/platform/example/src/component/step/http/Headers.tsx index dfd7a25..bbde0d2 100644 --- a/platform/example/src/component/step/http/Headers.tsx +++ b/platform/example/src/component/step/http/Headers.tsx @@ -147,6 +147,7 @@ const Headers: React.FC = () => { const newData = dataSource.filter((item) => item.key !== key); setDataSource(newData); }; + // 用户操作 const TitleSelectClick: MenuProps['onClick'] = ({key}) => { const SelectKey = Number(key) switch (SelectKey){ diff --git a/platform/example/src/component/step/http/Http.module.less b/platform/example/src/component/step/http/Http.module.less index 56621c3..c2dcfbc 100644 --- a/platform/example/src/component/step/http/Http.module.less +++ b/platform/example/src/component/step/http/Http.module.less @@ -17,4 +17,7 @@ .HttpHandleAdd{ cursor: pointer; color: #19abdb; +} +.HttpTab{ + margin-top: 10px; } \ No newline at end of file diff --git a/platform/example/src/component/step/http/edit.tsx b/platform/example/src/component/step/http/edit.tsx index 98afda2..3bc2be8 100644 --- a/platform/example/src/component/step/http/edit.tsx +++ b/platform/example/src/component/step/http/edit.tsx @@ -1,7 +1,6 @@ import React, {Component} from "react"; -import {StepProps} from "@/component/step/StepProps"; import {Input, Select, Space, Tabs, TabsProps} from "antd"; -import Head from "./Headers" +import Heads from "./Headers" import Host from "./Host" import Params from "./Params"; import Path from "./Path"; @@ -11,10 +10,9 @@ import Check from "@/component/step/http/Check"; import Extract from "@/component/step/http/Extract"; import Options from "@/component/step/http/Options"; import style from "@/component/step/http/Http.module.less"; +import {stepProps} from "@/component/step/type"; -interface httpInterface { -} const onChange = (key: string) => { console.log(key); @@ -31,7 +29,7 @@ const items: TabsProps['items'] = [ key: 'Headers', label: `Headers`, closable: false, - children: , + children: , }, { key: 'Params', @@ -76,9 +74,15 @@ const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map( label:method } }) -class HttpEditComponent extends Component, any> { - constructor(props: StepProps) { +class HttpEditComponent extends Component { + constructor(props: stepProps) { super(props); + this.state = { + data:JSON.parse(props.data.content) + } + } + updateData(){ + this.props.updateData(JSON.stringify(this.state.data)) } handleChange(value:string){ console.log(value) @@ -105,8 +109,8 @@ class HttpEditComponent extends Component, any> { render() { return (
{this.HttpMetod()} -
- +
+
) } diff --git a/platform/example/src/component/step/http/type.d.ts b/platform/example/src/component/step/http/type.d.ts new file mode 100644 index 0000000..6dffc6a --- /dev/null +++ b/platform/example/src/component/step/http/type.d.ts @@ -0,0 +1,53 @@ + + +interface httpInterface extends stepProps{ + +} +type allData = HostData|HeaderData|ParamsData|BeforeRequestData|ResponseData|CheckData|OptionsData|ExtractData +interface HttpMethod{ + type:string + data:allData +} +interface HttpChilProps{ + onchange:(data:HttpMethod)=>void +} + + +interface HttpData { + host:HostData + header:HeaderData + params:ParamsData + beforeRequest:BeforeRequestData + response:ResponseData + check:CheckData + options:OptionsData + extract:ExtractData +} +interface HostData { + +} +interface CheckData { + +} +interface HeaderData { + +} +interface ParamsData { + +} +interface BeforeRequestData { + +} +interface ResponseData { + +} +interface OptionsData { + +} +interface ExtractData { + +} + +interface childrenProps { + onchange:()=>void +} \ No newline at end of file diff --git a/platform/example/src/component/step/index.ts b/platform/example/src/component/step/index.ts index c816229..525b915 100644 --- a/platform/example/src/component/step/index.ts +++ b/platform/example/src/component/step/index.ts @@ -1,6 +1,7 @@ import HttpStepComponent from "./http" import {ComponentClass} from "react" import {Content, StepDragType} from "@/component/type"; +import {stepProps} from "@/component/step/type"; export interface StepComponentExport { @@ -8,7 +9,7 @@ export interface StepComponentExport { label: string key: string options: {} - component: ComponentClass + component: ComponentClass } defaultDataFunc: () => StepDragType diff --git a/platform/example/src/component/step/type.d.ts b/platform/example/src/component/step/type.d.ts new file mode 100644 index 0000000..d516dad --- /dev/null +++ b/platform/example/src/component/step/type.d.ts @@ -0,0 +1,9 @@ +import {Content} from "@/component/type"; + +export interface stepProps { + updateData:(data:string)=>void + data:Content +} +export interface stepState { + data:string +} diff --git a/platform/example/src/component/type.ts b/platform/example/src/component/type.ts index da2c8e5..af437d3 100644 --- a/platform/example/src/component/type.ts +++ b/platform/example/src/component/type.ts @@ -21,6 +21,7 @@ export interface StepDragType { } // 组件内容 export interface Content { + content:string id:number label:string value:string diff --git a/platform/example/src/main.tsx b/platform/example/src/main.tsx index e3ac737..8ff319e 100644 --- a/platform/example/src/main.tsx +++ b/platform/example/src/main.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.tsx'; +import App from './App'; ReactDOM.render( diff --git a/platform/example/src/mobx/DrapStore.ts b/platform/example/src/mobx/DrapStore.ts index aeac724..16e2cc4 100644 --- a/platform/example/src/mobx/DrapStore.ts +++ b/platform/example/src/mobx/DrapStore.ts @@ -4,15 +4,15 @@ import { makeAutoObservable, observable, action } from "mobx" import update from "immutability-helper"; import _ from 'lodash' import cardItem from "@/component/CardItem"; -import { StepDragType } from "@/component/type"; +import {Content, StepDragType} from "@/component/type"; class DrapStore { @observable - state: StepDragType[] = [] + state: StepDragType[] = [] - treeData: Map = new Map() - treeListData: WeakMap = new WeakMap() + treeData: Map> = new Map>() + treeListData: WeakMap[]> = new WeakMap[]>() @observable data: string[] = ["1", "2"] @@ -26,7 +26,7 @@ class DrapStore { * @param dropItem */ @action - registerTree(dropItem: StepDragType) { + registerTree(dropItem: StepDragType) { const key = dropItem.tag+dropItem.id if (!this.treeData.has(dropItem)) { this.treeData.set(dropItem, dropItem) @@ -43,7 +43,7 @@ class DrapStore { // this.setState([]) } @action - insertDrop(drop: StepDragType, index: number, dropNew: StepDragType) { + insertDrop(drop: StepDragType|null, index: number, dropNew: StepDragType) { if(drop===null){ this.state.splice(index,0,dropNew) @@ -56,7 +56,7 @@ class DrapStore { } @action - removeDrop(drop: StepDragType){ + removeDrop(drop: StepDragType){ const state = this.state.filter(cardItem=>cardItem.id!==drop.id) if(state.length!==this.state.length){ this.setState(state) @@ -64,7 +64,7 @@ class DrapStore { } } @action - addChildren(drop: StepDragType, dropNew: StepDragType) { + addChildren(drop: StepDragType, dropNew: StepDragType) { console.log(drop) if(drop===null){ this.state.push(dropNew) @@ -82,14 +82,15 @@ class DrapStore { } @action - moveDrop(id: string, to: number,item:StepDragType,parentItem:StepDragType){ + moveDrop(id: string, to: number,item:StepDragType,parentItem:StepDragType|null){ let drop = null let index = -1 - const drap:StepDragType = this.treeData.get(parentItem); + // @ts-ignore + const drap:StepDragType = this.treeData.get(parentItem); // console.log(id,to,drap,item,this.treeData) - let DrapChildren:StepDragType[] = [] + let DrapChildren:StepDragType[] = [] if(drap){ - DrapChildren = drap.children + DrapChildren = drap.children||[] } if(parentItem===null){ DrapChildren = this.state @@ -110,6 +111,7 @@ class DrapStore { this.state[to] = drop this.state[index] = ord }else{ + // @ts-ignore const ord = parentItem.children[to] DrapChildren[to] = drop DrapChildren[index] = ord @@ -118,7 +120,7 @@ class DrapStore { this.updateState() } @action - setState(dropList: StepDragType[]) { + setState(dropList: StepDragType[]) { this.state = dropList }