Merge pull request #235 from webzard-io/fix/ui-tree

fix(editor): forbid drop to component which has no slots
This commit is contained in:
tanbowensg 2022-01-28 10:31:12 +08:00 committed by GitHub
commit 8399882243
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 4 deletions

View File

@ -160,6 +160,7 @@ export const ComponentTree: React.FC<Props> = props => {
<DropComponentWrapper
onCreateComponent={onCreateComponent}
onMoveComponent={onMoveComponent}
droppable={slots.length !== 0}
>
<ComponentItemView
id={component.id}

View File

@ -3,12 +3,21 @@ import { Box } from '@chakra-ui/react';
type Props = {
onCreateComponent: (componentType: string) => void;
onMoveComponent: (from: string) => void;
droppable?: boolean;
};
export const DropComponentWrapper: React.FC<Props> = props => {
const {
onCreateComponent,
onMoveComponent,
droppable = true
} = props;
const onDragOver = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
if (droppable) {
e.preventDefault();
e.stopPropagation();
}
};
const onDrop = (e: React.DragEvent) => {
@ -18,11 +27,11 @@ export const DropComponentWrapper: React.FC<Props> = props => {
const movingComponent = e.dataTransfer?.getData('moveComponent') || '';
if (movingComponent) {
props.onMoveComponent(movingComponent)
onMoveComponent(movingComponent);
}
if (creatingComponent) {
props.onCreateComponent(creatingComponent);
onCreateComponent(creatingComponent);
}
};
return (