mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-02-23 17:49:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): component will disappear after being dragged

Browse Source 
Component will disappear when dragged to a component that doest not have 'content' slot.
Now the component will be add to the first slot of parent.
This commit is contained in:
Bowen Tan 2022-09-07 16:55:15 +08:00
parent 5b866cb310
commit bdb40b86ad
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/editor/src/components/KeyboardEventWrapper.tsx
View File

@ -21,7 +21,7 @@ export const KeyboardEventWrapper: React.FC<Props> = ({
services,
children,
}) => {
const { eventBus, registry } = services;
const { eventBus, registry, appModelManager } = services;
const pasteManager = useRef(new PasteManager());
const style = css`
&:focus {
@ -30,12 +30,10 @@ export const KeyboardEventWrapper: React.FC<Props> = ({
`;
function getComponentFirstSlot(componentId: string) {
const component = components.find(c => c.id === componentId);
if (component) {
const spec = registry.getComponentByType(component?.type);
return Object.keys(spec.spec.slots)[0] || '';
}
return '';
const component = appModelManager.appModel.getComponentById(
componentId as ComponentId
);
return component?.slots[0] || '';
}
const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

17
packages/editor/src/components/StructureTree/DropComponentWrapper.tsx
View File

@ -1,5 +1,6 @@
import { Box } from '@chakra-ui/react';
import React, { useMemo, useRef, useState, useCallback } from 'react';
import { ComponentId } from '../../AppModel/IAppModel';
import { genOperation } from '../../operations';
import { EditorServices } from '../../types';
@ -26,7 +27,7 @@ export const DropComponentWrapper: React.FC<Props> = props => {
droppable,
hasSlot,
} = props;
const { registry, eventBus } = services;
const { registry, eventBus, appModelManager } = services;
const ref = useRef<HTMLDivElement>(null);
const [dragDirection, setDragDirection] = useState<'prev' | 'next' | undefined>();
const [isDragOver, setIsDragOver] = useState<boolean>(false);
@ -76,9 +77,12 @@ export const DropComponentWrapper: React.FC<Props> = props => {
let targetParentId = parentId;
let targetParentSlot = parentSlot;
let targetId = componentId;
if (dragDirection === 'next' && isExpanded && hasSlot) {
if (dragDirection === 'next' && componentId && isExpanded && hasSlot) {
targetParentId = componentId;
targetParentSlot = 'content';
// get first slot of component
targetParentSlot =
appModelManager.appModel.getComponentById(componentId as ComponentId)
?.slots[0] || '';
targetId = undefined;
}
@ -114,12 +118,13 @@ export const DropComponentWrapper: React.FC<Props> = props => {
},
[
droppable,
parentId,
parentSlot,
componentId,
dragDirection,
isExpanded,
hasSlot,
componentId,
parentId,
parentSlot,
appModelManager.appModel,
eventBus,
registry,
]