docs: redesigned documentation (#2539)
* docs: redesigned navigation bar (#2478) * docs: redesigned homepage (#2480) * docs: redesigned homepage * fixed link * docs: redesigned notes (#2491) * docs: Applied Typography redesign rules (#2516) * changes to typography * small changes and fixes * docs: redesigned table of content (#2518) * redesigning toc * finalized table of content design * docs: redesigned code blocks (#2519) * docs: redesigned code blocks * removed unused package * docs: redesigned survey and content footer (#2522) * fixes to inline code * redesigned doc footer * docs: redesigned footer (#2523) * docs: changed dark mode colors (#2524) * docs: redesigned sidebar (#2535) * docs: redesigned search modal (#2537) * docs: resolved loose ends (#2538) * added spacing for tabs * docs: added no-zoom class for deploy images * fix to tooltip design for inline code
This commit is contained in:
Shahed Nasser
@@ -1,8 +1,174 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, {useState, cloneElement, isValidElement, useEffect} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import {duplicates} from '@docusaurus/theme-common';
|
||||
import {
|
||||
useScrollPositionBlocker,
|
||||
useTabGroupChoice,
|
||||
} from '@docusaurus/theme-common/internal';
|
||||
import styles from './styles.module.css';
|
||||
// A very rough duck type, but good enough to guard against mistakes while
|
||||
// allowing customization
|
||||
function isTabItem(comp) {
|
||||
return 'value' in comp.props;
|
||||
}
|
||||
function TabsComponent(props) {
|
||||
const {
|
||||
lazy,
|
||||
block,
|
||||
defaultValue: defaultValueProp,
|
||||
values: valuesProp,
|
||||
groupId,
|
||||
className,
|
||||
} = props;
|
||||
const children = React.Children.map(props.children, (child) => {
|
||||
if (isValidElement(child) && isTabItem(child)) {
|
||||
return child;
|
||||
}
|
||||
// child.type.name will give non-sensical values in prod because of
|
||||
// minification, but we assume it won't throw in prod.
|
||||
throw new Error(
|
||||
`Docusaurus error: Bad <Tabs> child <${
|
||||
// @ts-expect-error: guarding against unexpected cases
|
||||
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.`,
|
||||
);
|
||||
});
|
||||
const values =
|
||||
valuesProp ??
|
||||
// Only pick keys that we recognize. MDX would inject some keys by default
|
||||
children.map(({props: {value, label, attributes}}) => ({
|
||||
value,
|
||||
label,
|
||||
attributes,
|
||||
}));
|
||||
const dup = duplicates(values, (a, b) => a.value === b.value);
|
||||
if (dup.length > 0) {
|
||||
throw new Error(
|
||||
`Docusaurus error: Duplicate values "${dup
|
||||
.map((a) => a.value)
|
||||
.join(', ')}" found in <Tabs>. Every value needs to be unique.`,
|
||||
);
|
||||
}
|
||||
// When defaultValueProp is null, don't show a default tab
|
||||
const defaultValue =
|
||||
defaultValueProp === null
|
||||
? defaultValueProp
|
||||
: defaultValueProp ??
|
||||
children.find((child) => child.props.default)?.props.value ??
|
||||
children[0].props.value;
|
||||
if (defaultValue !== null && !values.some((a) => a.value === defaultValue)) {
|
||||
throw new Error(
|
||||
`Docusaurus error: The <Tabs> has a defaultValue "${defaultValue}" but none of its children has the corresponding value. Available values are: ${values
|
||||
.map((a) => a.value)
|
||||
.join(
|
||||
', ',
|
||||
)}. If you intend to show no default tab, use defaultValue={null} instead.`,
|
||||
);
|
||||
}
|
||||
const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
|
||||
const [selectedValue, setSelectedValue] = useState(defaultValue);
|
||||
const tabRefs = [];
|
||||
const {blockElementScrollPositionUntilNextRender} =
|
||||
useScrollPositionBlocker();
|
||||
if (groupId != null) {
|
||||
const relevantTabGroupChoice = tabGroupChoices[groupId];
|
||||
if (
|
||||
relevantTabGroupChoice != null &&
|
||||
relevantTabGroupChoice !== selectedValue &&
|
||||
values.some((value) => value.value === relevantTabGroupChoice)
|
||||
) {
|
||||
setSelectedValue(relevantTabGroupChoice);
|
||||
}
|
||||
}
|
||||
const handleTabChange = (event) => {
|
||||
const newTab = event.currentTarget;
|
||||
const newTabIndex = tabRefs.indexOf(newTab);
|
||||
const newTabValue = values[newTabIndex].value;
|
||||
if (newTabValue !== selectedValue) {
|
||||
blockElementScrollPositionUntilNextRender(newTab);
|
||||
setSelectedValue(newTabValue);
|
||||
if (groupId != null) {
|
||||
setTabGroupChoices(groupId, String(newTabValue));
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleKeydown = (event) => {
|
||||
let focusElement = null;
|
||||
switch (event.key) {
|
||||
case 'ArrowRight': {
|
||||
const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
|
||||
focusElement = tabRefs[nextTab] ?? tabRefs[0];
|
||||
break;
|
||||
}
|
||||
case 'ArrowLeft': {
|
||||
const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
|
||||
focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1];
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
focusElement?.focus();
|
||||
};
|
||||
return (
|
||||
<div className={clsx('tabs-container', styles.tabList)}>
|
||||
<ul
|
||||
role="tablist"
|
||||
aria-orientation="horizontal"
|
||||
className={clsx(
|
||||
'tabs',
|
||||
{
|
||||
'tabs--block': block,
|
||||
},
|
||||
className,
|
||||
)}>
|
||||
{values.map(({value, label, attributes}) => (
|
||||
<li
|
||||
role="tab"
|
||||
tabIndex={selectedValue === value ? 0 : -1}
|
||||
aria-selected={selectedValue === value}
|
||||
key={value}
|
||||
ref={(tabControl) => tabRefs.push(tabControl)}
|
||||
onKeyDown={handleKeydown}
|
||||
onFocus={handleTabChange}
|
||||
onClick={handleTabChange}
|
||||
{...attributes}
|
||||
className={clsx(
|
||||
'tabs__item',
|
||||
styles.tabItem,
|
||||
attributes?.className,
|
||||
{
|
||||
'tabs__item--active': selectedValue === value,
|
||||
},
|
||||
)}>
|
||||
{label ?? value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
import Tabs from '@theme-original/Tabs';
|
||||
{lazy ? (
|
||||
cloneElement(
|
||||
children.filter(
|
||||
(tabItem) => tabItem.props.value === selectedValue,
|
||||
)[0],
|
||||
)
|
||||
) : (
|
||||
<div>
|
||||
{children.map((tabItem, i) =>
|
||||
cloneElement(tabItem, {
|
||||
key: i,
|
||||
hidden: tabItem.props.value !== selectedValue,
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TabsWrapper(props) {
|
||||
export default function Tabs(props) {
|
||||
const isBrowser = useIsBrowser();
|
||||
|
||||
useEffect(() => {
|
||||
if (!window.localStorage.getItem('docusaurus.tab.npm2yarn')) {
|
||||
@@ -12,8 +178,13 @@ export default function TabsWrapper(props) {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={`tabs-wrapper ${props.wrapperClassName}`}>
|
||||
<Tabs {...props} />
|
||||
<div className={`tabs-wrapper ${props.wrapperClassName || ''} ${props.groupId === 'npm2yarn' ? 'code-tabs' : ''}`}>
|
||||
<TabsComponent
|
||||
// Remount tabs after hydration
|
||||
// Temporary fix for https://github.com/facebook/docusaurus/issues/5653
|
||||
key={String(isBrowser)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
.tabList {
|
||||
margin-bottom: var(--ifm-leading);
|
||||
}
|
||||
|
||||
.tabItem {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user