mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-30 23:08:54 +02:00
fix(theme): allow tabs children to be falsy (#8801)
This commit is contained in:
parent
c04fab3bfb
commit
3a73fdb53f
3 changed files with 32 additions and 16 deletions
|
@ -29,12 +29,12 @@ export interface TabValue {
|
|||
readonly default?: boolean;
|
||||
}
|
||||
|
||||
type TabItem = ReactElement<TabItemProps> | null | false | undefined;
|
||||
|
||||
export interface TabsProps {
|
||||
readonly lazy?: boolean;
|
||||
readonly block?: boolean;
|
||||
readonly children:
|
||||
| readonly ReactElement<TabItemProps>[]
|
||||
| ReactElement<TabItemProps>;
|
||||
readonly children: TabItem[] | TabItem;
|
||||
readonly defaultValue?: string | null;
|
||||
readonly values?: readonly TabValue[];
|
||||
readonly groupId?: string;
|
||||
|
@ -55,14 +55,16 @@ export interface TabItemProps {
|
|||
// A very rough duck type, but good enough to guard against mistakes while
|
||||
// allowing customization
|
||||
function isTabItem(
|
||||
comp: ReactElement<object>,
|
||||
comp: ReactElement<unknown>,
|
||||
): comp is ReactElement<TabItemProps> {
|
||||
return 'value' in comp.props;
|
||||
const {props} = comp;
|
||||
return !!props && typeof props === 'object' && 'value' in props;
|
||||
}
|
||||
|
||||
function ensureValidChildren(children: TabsProps['children']) {
|
||||
return React.Children.map(children, (child) => {
|
||||
if (isValidElement(child) && isTabItem(child)) {
|
||||
return (React.Children.map(children, (child) => {
|
||||
// Pass falsy values through: allow conditionally not rendering a tab
|
||||
if (!child || (isValidElement(child) && isTabItem(child))) {
|
||||
return child;
|
||||
}
|
||||
// child.type.name will give non-sensical values in prod because of
|
||||
|
@ -73,7 +75,7 @@ function ensureValidChildren(children: TabsProps['children']) {
|
|||
typeof child.type === 'string' ? child.type : child.type.name
|
||||
}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`,
|
||||
);
|
||||
});
|
||||
})?.filter(Boolean) ?? []) as ReactElement<TabItemProps>[];
|
||||
}
|
||||
|
||||
function extractChildrenTabValues(children: TabsProps['children']): TabValue[] {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue