3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-04 09:19:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme): allow tabs children to be falsy (#8801)

Browse source
This commit is contained in:
Joshua Chen 2023-03-22 19:15:43 +01:00 • committed by GitHub
parent c04fab3bfb
commit 3a73fdb53f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/docusaurus-theme-classic/src/theme/Tabs/__tests__/index.test.tsx
View file

@ -132,12 +132,9 @@ describe('Tabs', () => {
renderer.create(
<TestProviders>
<Tabs
// @ts-expect-error: for an edge-case that we didn't write types for
values={tabs.map((t, idx) => ({label: t, value: idx}))}
// @ts-expect-error: for an edge-case that we didn't write types for
defaultValue={0}>
{tabs.map((t, idx) => (
// @ts-expect-error: for an edge-case that we didn't write types for
<TabItem key={idx} value={idx}>
{t}
</TabItem>
@ -199,4 +196,19 @@ describe('Tabs', () => {
);
}).not.toThrow();
});
it('allows a tab to be falsy', () => {
expect(() => {
renderer.create(
<TestProviders>
<Tabs>
<TabItem value="val1">Val1</TabItem>
{null}
{false}
{undefined}
</Tabs>
</TestProviders>,
);
}).not.toThrow();
});
});

12
packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
View file

@ -5,11 +5,12 @@
* LICENSE file in the root directory of this source tree.
*/
import React, {cloneElement} from 'react';
import React, {cloneElement, type ReactElement} from 'react';
import clsx from 'clsx';
import {
useScrollPositionBlocker,
useTabs,
type TabItemProps,
} from '@docusaurus/theme-common/internal';
import useIsBrowser from '@docusaurus/useIsBrowser';
import type {Props} from '@theme/Tabs';
@ -109,10 +110,11 @@ function TabContent({
children,
selectedValue,
}: Props & ReturnType<typeof useTabs>) {
// eslint-disable-next-line no-param-reassign
children = Array.isArray(children) ? children : [children];
const childTabs = (Array.isArray(children) ? children : [children]).filter(
Boolean,
) as ReactElement<TabItemProps>[];
if (lazy) {
const selectedTabItem = children.find(
const selectedTabItem = childTabs.find(
(tabItem) => tabItem.props.value === selectedValue,
);
if (!selectedTabItem) {
@ -123,7 +125,7 @@ function TabContent({
}
return (
<div className="margin-top--md">
{children.map((tabItem, i) =>
{childTabs.map((tabItem, i) =>
cloneElement(tabItem, {
key: i,
hidden: tabItem.props.value !== selectedValue,