mirror of
https://github.com/dathere/ckan-devstaller.git
synced 2025-11-09 13:39:49 +00:00
feat(docs): add WIP builder and update biome
This commit is contained in:
rzmk
parent
02d651177e
commit
af15fb3fed
10 changed files with 790 additions and 26 deletions
76
docs/components/builder.tsx
Normal file
76
docs/components/builder.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
|
||||
import defaultMdxComponents from "fumadocs-ui/mdx";
|
||||
import {
|
||||
DocsBody,
|
||||
DocsDescription,
|
||||
DocsPage,
|
||||
DocsTitle,
|
||||
} from "fumadocs-ui/page";
|
||||
import {
|
||||
BarChartBigIcon,
|
||||
BlocksIcon,
|
||||
HomeIcon,
|
||||
SailboatIcon,
|
||||
TerminalSquareIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function Builder() {
|
||||
const { Card, Cards } = defaultMdxComponents;
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="col-span-1 border-r-2 pr-4">
|
||||
<div className="fixed">
|
||||
<h2>ckan-devstaller command</h2>
|
||||
<CodeBlock title="Installation command">
|
||||
<Pre className="text-wrap pl-4 max-w-[21rem]">
|
||||
./ckan-devstaller
|
||||
</Pre>
|
||||
</CodeBlock>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<h2>Configuration options</h2>
|
||||
<h3>Presets</h3>
|
||||
<Cards className="grid-cols-2">
|
||||
<Card
|
||||
className="bg-blue-100 dark:bg-blue-950 border-blue-300 dark:border-blue-900 border-2"
|
||||
icon={<SailboatIcon />}
|
||||
title="CKAN-only"
|
||||
>
|
||||
Installs CKAN with ckan-compose.
|
||||
</Card>
|
||||
<Card icon={<BlocksIcon />} title="CKAN and the DataStore extension">
|
||||
Installs CKAN and the DataStore extension.
|
||||
</Card>
|
||||
<Card
|
||||
icon={<BarChartBigIcon />}
|
||||
title="CKAN, DataStore, ckanext-scheming, and DataPusher+ extensions"
|
||||
>
|
||||
Installs CKAN, the DataStore extension, the ckanext-scheming
|
||||
extension, and the DataPusher+ extension.
|
||||
</Card>
|
||||
</Cards>
|
||||
<h3>CKAN version</h3>
|
||||
<Cards>
|
||||
<Card icon={<SailboatIcon />} title="2.11.3"></Card>
|
||||
<Card icon={<SailboatIcon />} title="2.10.8"></Card>
|
||||
<Card icon={<SailboatIcon />} title="Other"></Card>
|
||||
</Cards>
|
||||
<h3>SSH capability</h3>
|
||||
<Cards>
|
||||
<Card icon={<TerminalSquareIcon />} title="Enable SSH">
|
||||
Installs openssh-server and net-tools.
|
||||
</Card>
|
||||
</Cards>
|
||||
<h3>CKAN extensions</h3>
|
||||
<Cards>
|
||||
<Card icon={<TerminalSquareIcon />} title="ckanext-scheming"></Card>
|
||||
<Card icon={<TerminalSquareIcon />} title="ckanext-gztr"></Card>
|
||||
<Card icon={<TerminalSquareIcon />} title="DataStore"></Card>
|
||||
<Card icon={<TerminalSquareIcon />} title="DataPusher+"></Card>
|
||||
<Card icon={<TerminalSquareIcon />} title="ckanext-spatial"></Card>
|
||||
</Cards>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
261
docs/components/codeblock.tsx
Normal file
261
docs/components/codeblock.tsx
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
'use client';
|
||||
import { Check, Clipboard } from 'lucide-react';
|
||||
import {
|
||||
type ComponentProps,
|
||||
createContext,
|
||||
type HTMLAttributes,
|
||||
type ReactNode,
|
||||
type RefObject,
|
||||
useContext,
|
||||
useMemo,
|
||||
useRef,
|
||||
} from 'react';
|
||||
import { cn } from '../lib/cn';
|
||||
import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
|
||||
import { buttonVariants } from './ui/button';
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from './tabs.unstyled';
|
||||
import { mergeRefs } from '../lib/merge-refs';
|
||||
|
||||
export interface CodeBlockProps extends ComponentProps<'figure'> {
|
||||
/**
|
||||
* Icon of code block
|
||||
*
|
||||
* When passed as a string, it assumes the value is the HTML of icon
|
||||
*/
|
||||
icon?: ReactNode;
|
||||
|
||||
/**
|
||||
* Allow to copy code with copy button
|
||||
*
|
||||
* @defaultValue true
|
||||
*/
|
||||
allowCopy?: boolean;
|
||||
|
||||
/**
|
||||
* Keep original background color generated by Shiki or Rehype Code
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
keepBackground?: boolean;
|
||||
|
||||
viewportProps?: HTMLAttributes<HTMLElement>;
|
||||
|
||||
/**
|
||||
* show line numbers
|
||||
*/
|
||||
'data-line-numbers'?: boolean;
|
||||
|
||||
/**
|
||||
* @defaultValue 1
|
||||
*/
|
||||
'data-line-numbers-start'?: number;
|
||||
|
||||
Actions?: (props: { className?: string; children?: ReactNode }) => ReactNode;
|
||||
}
|
||||
|
||||
const TabsContext = createContext<{
|
||||
containerRef: RefObject<HTMLDivElement | null>;
|
||||
nested: boolean;
|
||||
} | null>(null);
|
||||
|
||||
export function Pre(props: ComponentProps<'pre'>) {
|
||||
return (
|
||||
<pre
|
||||
{...props}
|
||||
className={cn('min-w-full w-max *:flex *:flex-col', props.className)}
|
||||
>
|
||||
{props.children}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
export function CodeBlock({
|
||||
ref,
|
||||
title,
|
||||
allowCopy = true,
|
||||
keepBackground = false,
|
||||
icon,
|
||||
viewportProps = {},
|
||||
children,
|
||||
Actions = (props) => (
|
||||
<div {...props} className={cn('empty:hidden', props.className)} />
|
||||
),
|
||||
...props
|
||||
}: CodeBlockProps) {
|
||||
const inTab = useContext(TabsContext) !== null;
|
||||
const areaRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<figure
|
||||
ref={ref}
|
||||
dir="ltr"
|
||||
{...props}
|
||||
className={cn(
|
||||
inTab
|
||||
? 'bg-fd-secondary -mx-px -mb-px last:rounded-b-xl'
|
||||
: 'my-4 bg-fd-card rounded-xl',
|
||||
keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)',
|
||||
|
||||
'shiki relative border shadow-sm outline-none not-prose overflow-hidden text-sm',
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
{title ? (
|
||||
<div className="flex text-fd-muted-foreground items-center gap-2 h-9.5 border-b px-4">
|
||||
{typeof icon === 'string' ? (
|
||||
<div
|
||||
className="[&_svg]:size-3.5"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: icon,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
icon
|
||||
)}
|
||||
<figcaption className="flex-1 truncate">{title}</figcaption>
|
||||
{Actions({
|
||||
className: '-me-2',
|
||||
children: allowCopy && <CopyButton containerRef={areaRef} />,
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
Actions({
|
||||
className:
|
||||
'absolute top-2 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground',
|
||||
children: allowCopy && <CopyButton containerRef={areaRef} />,
|
||||
})
|
||||
)}
|
||||
<div
|
||||
ref={areaRef}
|
||||
{...viewportProps}
|
||||
className={cn(
|
||||
'text-[13px] py-3.5 overflow-auto max-h-[600px] fd-scroll-container',
|
||||
viewportProps.className,
|
||||
)}
|
||||
style={
|
||||
{
|
||||
// space for toolbar
|
||||
'--padding-right': !title ? 'calc(var(--spacing) * 8)' : undefined,
|
||||
counterSet: props['data-line-numbers']
|
||||
? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
|
||||
: undefined,
|
||||
...viewportProps.style,
|
||||
} as object
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</figure>
|
||||
);
|
||||
}
|
||||
|
||||
function CopyButton({
|
||||
className,
|
||||
containerRef,
|
||||
...props
|
||||
}: ComponentProps<'button'> & {
|
||||
containerRef: RefObject<HTMLElement | null>;
|
||||
}) {
|
||||
const [checked, onClick] = useCopyButton(() => {
|
||||
const pre = containerRef.current?.getElementsByTagName('pre').item(0);
|
||||
if (!pre) return;
|
||||
|
||||
const clone = pre.cloneNode(true) as HTMLElement;
|
||||
clone.querySelectorAll('.nd-copy-ignore').forEach((node) => {
|
||||
node.replaceWith('\n');
|
||||
});
|
||||
|
||||
void navigator.clipboard.writeText(clone.textContent ?? '');
|
||||
});
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
data-checked={checked || undefined}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
className:
|
||||
'hover:text-fd-accent-foreground data-[checked]:text-fd-accent-foreground',
|
||||
size: 'icon-xs',
|
||||
}),
|
||||
className,
|
||||
)}
|
||||
aria-label={checked ? 'Copied Text' : 'Copy Text'}
|
||||
onClick={onClick}
|
||||
{...props}
|
||||
>
|
||||
{checked ? <Check /> : <Clipboard />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function CodeBlockTabs({ ref, ...props }: ComponentProps<typeof Tabs>) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const nested = useContext(TabsContext) !== null;
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
ref={mergeRefs(containerRef, ref)}
|
||||
{...props}
|
||||
className={cn(
|
||||
'bg-fd-card rounded-xl border',
|
||||
!nested && 'my-4',
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
<TabsContext.Provider
|
||||
value={useMemo(
|
||||
() => ({
|
||||
containerRef,
|
||||
nested,
|
||||
}),
|
||||
[nested],
|
||||
)}
|
||||
>
|
||||
{props.children}
|
||||
</TabsContext.Provider>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
export function CodeBlockTabsList(props: ComponentProps<typeof TabsList>) {
|
||||
return (
|
||||
<TabsList
|
||||
{...props}
|
||||
className={cn(
|
||||
'flex flex-row px-2 overflow-x-auto text-fd-muted-foreground',
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
{props.children}
|
||||
</TabsList>
|
||||
);
|
||||
}
|
||||
|
||||
export function CodeBlockTabsTrigger({
|
||||
children,
|
||||
...props
|
||||
}: ComponentProps<typeof TabsTrigger>) {
|
||||
return (
|
||||
<TabsTrigger
|
||||
{...props}
|
||||
className={cn(
|
||||
'relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5',
|
||||
props.className,
|
||||
)}
|
||||
>
|
||||
<div className="absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary" />
|
||||
{children}
|
||||
</TabsTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: currently Vite RSC plugin has problem with `asChild` due to children is automatically wrapped in <Fragment />, maybe revisit this in future
|
||||
export function CodeBlockTab(props: ComponentProps<typeof TabsContent>) {
|
||||
return <TabsContent {...props} />;
|
||||
}
|
||||
202
docs/components/tabs.tsx
Normal file
202
docs/components/tabs.tsx
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
type ComponentProps,
|
||||
createContext,
|
||||
type ReactNode,
|
||||
useContext,
|
||||
useEffect,
|
||||
useId,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { cn } from '../lib/cn';
|
||||
import * as Unstyled from './tabs.unstyled';
|
||||
|
||||
type CollectionKey = string | symbol;
|
||||
|
||||
export interface TabsProps
|
||||
extends Omit<
|
||||
ComponentProps<typeof Unstyled.Tabs>,
|
||||
'value' | 'onValueChange'
|
||||
> {
|
||||
/**
|
||||
* Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.
|
||||
*/
|
||||
items?: string[];
|
||||
|
||||
/**
|
||||
* Shortcut for `defaultValue` when `items` is provided.
|
||||
*
|
||||
* @defaultValue 0
|
||||
*/
|
||||
defaultIndex?: number;
|
||||
|
||||
/**
|
||||
* Additional label in tabs list when `items` is provided.
|
||||
*/
|
||||
label?: ReactNode;
|
||||
}
|
||||
|
||||
const TabsContext = createContext<{
|
||||
items?: string[];
|
||||
collection: CollectionKey[];
|
||||
} | null>(null);
|
||||
|
||||
function useTabContext() {
|
||||
const ctx = useContext(TabsContext);
|
||||
if (!ctx) throw new Error('You must wrap your component in <Tabs>');
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export const TabsList = React.forwardRef<
|
||||
React.ComponentRef<typeof Unstyled.TabsList>,
|
||||
React.ComponentPropsWithoutRef<typeof Unstyled.TabsList>
|
||||
>((props, ref) => (
|
||||
<Unstyled.TabsList
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={cn(
|
||||
'flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose',
|
||||
props.className,
|
||||
)}
|
||||
/>
|
||||
));
|
||||
TabsList.displayName = 'TabsList';
|
||||
|
||||
export const TabsTrigger = React.forwardRef<
|
||||
React.ComponentRef<typeof Unstyled.TabsTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof Unstyled.TabsTrigger>
|
||||
>((props, ref) => (
|
||||
<Unstyled.TabsTrigger
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary',
|
||||
props.className,
|
||||
)}
|
||||
/>
|
||||
));
|
||||
TabsTrigger.displayName = 'TabsTrigger';
|
||||
|
||||
export function Tabs({
|
||||
ref,
|
||||
className,
|
||||
items,
|
||||
label,
|
||||
defaultIndex = 0,
|
||||
defaultValue = items ? escapeValue(items[defaultIndex]) : undefined,
|
||||
...props
|
||||
}: TabsProps) {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const collection = useMemo<CollectionKey[]>(() => [], []);
|
||||
|
||||
return (
|
||||
<Unstyled.Tabs
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex flex-col overflow-hidden rounded-xl border bg-fd-secondary my-4',
|
||||
className,
|
||||
)}
|
||||
value={value}
|
||||
onValueChange={(v: string) => {
|
||||
if (items && !items.some((item) => escapeValue(item) === v)) return;
|
||||
setValue(v);
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{items && (
|
||||
<TabsList>
|
||||
{label && (
|
||||
<span className="text-sm font-medium my-auto me-auto">{label}</span>
|
||||
)}
|
||||
{items.map((item) => (
|
||||
<TabsTrigger key={item} value={escapeValue(item)}>
|
||||
{item}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
)}
|
||||
<TabsContext.Provider
|
||||
value={useMemo(() => ({ items, collection }), [collection, items])}
|
||||
>
|
||||
{props.children}
|
||||
</TabsContext.Provider>
|
||||
</Unstyled.Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
export interface TabProps
|
||||
extends Omit<ComponentProps<typeof Unstyled.TabsContent>, 'value'> {
|
||||
/**
|
||||
* Value of tab, detect from index if unspecified.
|
||||
*/
|
||||
value?: string;
|
||||
}
|
||||
|
||||
export function Tab({ value, ...props }: TabProps) {
|
||||
const { items } = useTabContext();
|
||||
const resolved =
|
||||
value ??
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks -- `value` is not supposed to change
|
||||
items?.at(useCollectionIndex());
|
||||
if (!resolved)
|
||||
throw new Error(
|
||||
'Failed to resolve tab `value`, please pass a `value` prop to the Tab component.',
|
||||
);
|
||||
|
||||
return (
|
||||
<TabsContent value={escapeValue(resolved)} {...props}>
|
||||
{props.children}
|
||||
</TabsContent>
|
||||
);
|
||||
}
|
||||
|
||||
export function TabsContent({
|
||||
value,
|
||||
className,
|
||||
...props
|
||||
}: ComponentProps<typeof Unstyled.TabsContent>) {
|
||||
return (
|
||||
<Unstyled.TabsContent
|
||||
value={value}
|
||||
forceMount
|
||||
className={cn(
|
||||
'p-4 text-[15px] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{props.children}
|
||||
</Unstyled.TabsContent>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Inspired by Headless UI.
|
||||
*
|
||||
* Return the index of children, this is made possible by registering the order of render from children using React context.
|
||||
* This is supposed by work with pre-rendering & pure client-side rendering.
|
||||
*/
|
||||
function useCollectionIndex() {
|
||||
const key = useId();
|
||||
const { collection } = useTabContext();
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
const idx = collection.indexOf(key);
|
||||
if (idx !== -1) collection.splice(idx, 1);
|
||||
};
|
||||
}, [key, collection]);
|
||||
|
||||
if (!collection.includes(key)) collection.push(key);
|
||||
return collection.indexOf(key);
|
||||
}
|
||||
|
||||
/**
|
||||
* only escape whitespaces in values in simple mode
|
||||
*/
|
||||
function escapeValue(v: string): string {
|
||||
return v.toLowerCase().replace(/\s/, '-');
|
||||
}
|
||||
163
docs/components/tabs.unstyled.tsx
Normal file
163
docs/components/tabs.unstyled.tsx
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
'use client';
|
||||
|
||||
import {
|
||||
type ComponentProps,
|
||||
createContext,
|
||||
useContext,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import * as Primitive from '@radix-ui/react-tabs';
|
||||
import { mergeRefs } from '../lib/merge-refs';
|
||||
import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
|
||||
|
||||
type ChangeListener = (v: string) => void;
|
||||
const listeners = new Map<string, ChangeListener[]>();
|
||||
|
||||
function addChangeListener(id: string, listener: ChangeListener): void {
|
||||
const list = listeners.get(id) ?? [];
|
||||
list.push(listener);
|
||||
listeners.set(id, list);
|
||||
}
|
||||
|
||||
function removeChangeListener(id: string, listener: ChangeListener): void {
|
||||
const list = listeners.get(id) ?? [];
|
||||
listeners.set(
|
||||
id,
|
||||
list.filter((item) => item !== listener),
|
||||
);
|
||||
}
|
||||
|
||||
export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
|
||||
/**
|
||||
* Identifier for Sharing value of tabs
|
||||
*/
|
||||
groupId?: string;
|
||||
|
||||
/**
|
||||
* Enable persistent
|
||||
*/
|
||||
persist?: boolean;
|
||||
|
||||
/**
|
||||
* If true, updates the URL hash based on the tab's id
|
||||
*/
|
||||
updateAnchor?: boolean;
|
||||
}
|
||||
|
||||
const TabsContext = createContext<{
|
||||
valueToIdMap: Map<string, string>;
|
||||
} | null>(null);
|
||||
|
||||
function useTabContext() {
|
||||
const ctx = useContext(TabsContext);
|
||||
if (!ctx) throw new Error('You must wrap your component in <Tabs>');
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export const TabsList = Primitive.TabsList;
|
||||
|
||||
export const TabsTrigger = Primitive.TabsTrigger;
|
||||
|
||||
/**
|
||||
* @internal You better not use it
|
||||
*/
|
||||
export function Tabs({
|
||||
ref,
|
||||
groupId,
|
||||
persist = false,
|
||||
updateAnchor = false,
|
||||
defaultValue,
|
||||
value: _value,
|
||||
onValueChange: _onValueChange,
|
||||
...props
|
||||
}: TabsProps) {
|
||||
const tabsRef = useRef<HTMLDivElement>(null);
|
||||
const [value, setValue] =
|
||||
_value === undefined
|
||||
? // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
|
||||
useState(defaultValue)
|
||||
: [_value, _onValueChange ?? (() => undefined)];
|
||||
|
||||
const onChange = useEffectEvent((v: string) => setValue(v));
|
||||
const valueToIdMap = useMemo(() => new Map<string, string>(), []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!groupId) return;
|
||||
const previous = persist
|
||||
? localStorage.getItem(groupId)
|
||||
: sessionStorage.getItem(groupId);
|
||||
|
||||
if (previous) onChange(previous);
|
||||
addChangeListener(groupId, onChange);
|
||||
return () => {
|
||||
removeChangeListener(groupId, onChange);
|
||||
};
|
||||
}, [groupId, persist]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (!hash) return;
|
||||
|
||||
for (const [value, id] of valueToIdMap.entries()) {
|
||||
if (id === hash) {
|
||||
onChange(value);
|
||||
tabsRef.current?.scrollIntoView();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, [valueToIdMap]);
|
||||
|
||||
return (
|
||||
<Primitive.Tabs
|
||||
ref={mergeRefs(ref, tabsRef)}
|
||||
value={value}
|
||||
onValueChange={(v: string) => {
|
||||
if (updateAnchor) {
|
||||
const id = valueToIdMap.get(v);
|
||||
|
||||
if (id) {
|
||||
window.history.replaceState(null, '', `#${id}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (groupId) {
|
||||
listeners.get(groupId)?.forEach((item) => {
|
||||
item(v);
|
||||
});
|
||||
|
||||
if (persist) localStorage.setItem(groupId, v);
|
||||
else sessionStorage.setItem(groupId, v);
|
||||
} else {
|
||||
setValue(v);
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<TabsContext.Provider
|
||||
value={useMemo(() => ({ valueToIdMap }), [valueToIdMap])}
|
||||
>
|
||||
{props.children}
|
||||
</TabsContext.Provider>
|
||||
</Primitive.Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
export function TabsContent({
|
||||
value,
|
||||
...props
|
||||
}: ComponentProps<typeof Primitive.TabsContent>) {
|
||||
const { valueToIdMap } = useTabContext();
|
||||
|
||||
if (props.id) {
|
||||
valueToIdMap.set(value, props.id);
|
||||
}
|
||||
|
||||
return (
|
||||
<Primitive.TabsContent value={value} {...props}>
|
||||
{props.children}
|
||||
</Primitive.TabsContent>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue