mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-21 03:15:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

support drag componen to tree to create

Browse Source
This commit is contained in:
Bowen Tan 2021-10-11 17:21:22 +08:00
parent 6da304e286
commit 6b51cde840
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/editor/src/components/StructureTree/StructureTree.tsx
View File

@ -1,9 +1,12 @@
import React from 'react';
import React, { DragEvent } from 'react';
import { Application } from '@meta-ui/core';
import { IconButton } from '@chakra-ui/react';
import { DeleteIcon } from '@chakra-ui/icons';
import { eventBus } from '../../eventBus';
import { RemoveComponentOperation } from '../../operations/Operations';
import {
CreateComponentOperation,
RemoveComponentOperation,
} from '../../operations/Operations';
type ChildrenMap = Map<string, SlotsMap>;
type SlotsMap = Map<string, Array<Application['spec']['components'][0]>>;
@ -19,6 +22,7 @@ export const StructureTree: React.FC<Props> = props => {
const topLevelComponents: Component[] = [];
const childrenMap: ChildrenMap = new Map();
// parse components array to slotsMap
app.spec.components.forEach(c => {
const slotTrait = c.traits.find(t => t.type === 'core/v1/slot');
if (slotTrait) {
@ -42,9 +46,17 @@ export const StructureTree: React.FC<Props> = props => {
if (slots) {
slotsEle = Array.from(slots.keys()).map(slot => {
const children = slots.get(slot)!.map(genTreeItem);
const onDrop = (e: DragEvent) => {
const creatingComponent = e.dataTransfer?.getData('component') || '';
console.log('createComponent', component.id, slot, creatingComponent);
eventBus.send(
'operation',
new CreateComponentOperation(component.id, slot, creatingComponent)
);
};
return (
<div key={slot}>
<div>slot: {slot}</div>
<div onDrop={onDrop}>slot: {slot}</div>
{children}
</div>
);