mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-03-25 21:20:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve the Slot component

Browse Source 
1. bypass props to children
2. render null when slot not set
This commit is contained in:
Yanzhen Yu 2021-12-15 16:35:24 +08:00
parent 5b7b21655b
commit 9c5bc4a0ac
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/runtime/src/components/_internal/Slot.tsx
View File

@ -1,17 +1,21 @@
import React from 'react';
import { SlotsMap } from '../../types/RuntimeSchema';
export function getSlots(slotsMap: SlotsMap | undefined, slot: string) {
export function getSlots<T>(slotsMap: SlotsMap | undefined, slot: string, rest: T) {
return (slotsMap?.get(slot) || []).map(({ component: ImplWrapper, id }) => (
<ImplWrapper key={id} />
<ImplWrapper key={id} {...rest} />
));
}
const Slot: React.FC<{ slotsMap: SlotsMap | undefined; slot: string }> = ({
slotsMap,
slot,
...rest
}) => {
return <>{getSlots(slotsMap, slot)}</>;
if (!slotsMap?.has(slot)) {
return null;
}
return <>{getSlots(slotsMap, slot, rest)}</>;
};
export default Slot;

2
packages/runtime/src/components/chakra-ui/Tabs.tsx
View File

@ -36,7 +36,7 @@ const Tabs: ComponentImplementation<Static<typeof PropsSchema>> = ({
))}
</TabList>
<TabPanels>
{getSlots(slotsMap, 'content').map((content, idx) => {
{getSlots(slotsMap, 'content', {}).map((content, idx) => {
return (
<TabPanel
key={idx}

6
packages/runtime/src/components/core/GridLayout.tsx
View File

@ -30,9 +30,11 @@ const GridLayout: ComponentImplementation<Static<typeof PropsSchema>> = ({
onDragStop={onDragStop}
onDrop={onDrop}
layout={layout}
css={css`${customStyle?.content}`}
css={css`
${customStyle?.content}
`}
>
{getSlots(slotsMap, 'content')}
{getSlots(slotsMap, 'content', {})}
</BaseGridLayout>
</Suspense>
);