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

Merge pull request #499 from smartxworks/feat/windlike-dev

Browse Source 
feat: make the slot more compact
This commit is contained in:
tanbowensg 2022-07-13 10:08:08 +08:00 committed by GitHub
commit 3db323e41e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/editor/src/components/StructureTree/ComponentTree.tsx
View File

@ -57,6 +57,23 @@ const ComponentTree = (props: ComponentTreeProps) => {
return slots.map(_slot => {
let slotContent;
const slotChildren = slotMap.get(_slot);
const slotName = (
<DropComponentWrapper
componentId={undefined}
parentId={component.id}
parentSlot={_slot}
services={services}
isExpanded={isExpanded}
isDropInOnly
droppable={!isAncestorDragging && !isDragging}
hasSlot={true}
>
<Text fontSize={12} color="gray.500" paddingLeft="3" paddingY={1}>
Slot: {_slot}
</Text>
</DropComponentWrapper>
);
if (slotChildren && slotChildren.length > 0) {
slotContent = slotChildren.map(c => {
return (
@ -74,35 +91,14 @@ const ComponentTree = (props: ComponentTreeProps) => {
);
});
} else {
slotContent = (
<DropComponentWrapper
componentId={undefined}
parentId={component.id}
parentSlot={_slot}
services={services}
isExpanded={isExpanded}
isDropInOnly
droppable={!isAncestorDragging && !isDragging}
hasSlot={true}
>
<Text fontSize="sm" color="gray.500" paddingLeft="6" paddingY={1}>
Empty
</Text>
</DropComponentWrapper>
);
slotContent = slotName;
}
const slotName = (
<Text color="gray.500" fontSize={12} fontWeight="medium" paddingLeft="3">
Slot: {_slot}
</Text>
);
return (
<Box key={_slot} paddingLeft="3" width="full" display={isExpanded ? '' : 'none'}>
{/* although component can have multiple slots, but for now, most components have only one slot
so we hide slot name to save more view area */}
{slots.length > 1 ? slotName : undefined}
{(slotChildren || []).length ? slotName : undefined}
<VStack spacing="0" width="full" alignItems="start">
{slotContent}
</VStack>