feat(Toc): render 6 levels of nested items

gravity-ui · Dec 28, 2024 · 81d3d42 · 81d3d42
1 parent 91e8cd3
commit 81d3d42
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 91 deletions.
diff --git a/src/components/Toc/Toc.scss b/src/components/Toc/Toc.scss
diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
@@ -3,63 +3,31 @@ import React from 'react';
 import type {QAProps} from '../types';
 import {block} from '../utils/cn';
 
-import {TocItem} from './TocItem/TocItem';
+import {TocSections} from './TocSections';
 import type {TocItem as TocItemType} from './types';
 
-import './Toc.scss';
-
 const b = block('toc');
 
 export interface TocProps extends QAProps {
     className?: string;
     items: TocItemType[];
     value?: string;
     onUpdate?: (value: string) => void;
+    onItemClick?: (event: React.MouseEvent) => void;
 }
 
 export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, ref) {
-    const {value: activeValue, items, className, onUpdate, qa} = props;
+    const {value: activeValue, items, className, onUpdate, qa, onItemClick} = props;
 
     return (
         <nav className={b(null, className)} ref={ref} data-qa={qa}>
-            <ul className={b('sections')}>
-                {items.map(({value, content, href, items: childrenItems}) => (
-                    <li key={value ?? href} aria-current={activeValue === value}>
-                        <TocItem
-                            content={content}
-                            value={value}
-                            href={href}
-                            active={activeValue === value}
-                            onClick={onUpdate}
-                        />
-                        {childrenItems?.length && (
-                            <ul className={b('subsections')}>
-                                {childrenItems?.map(
-                                    ({
-                                        value: childrenValue,
-                                        content: childrenContent,
-                                        href: childrenHref,
-                                    }) => (
-                                        <li
-                                            key={childrenValue ?? childrenHref}
-                                            aria-current={activeValue === childrenValue}
-                                        >
-                                            <TocItem
-                                                content={childrenContent}
-                                                value={childrenValue}
-                                                href={childrenHref}
-                                                childItem={true}
-                                                active={activeValue === childrenValue}
-                                                onClick={onUpdate}
-                                            />
-                                        </li>
-                                    ),
-                                )}
-                            </ul>
-                        )}
-                    </li>
-                ))}
-            </ul>
+            <TocSections
+                items={items}
+                value={activeValue}
+                onUpdate={onUpdate}
+                depth={1}
+                onItemClick={onItemClick}
+            />
         </nav>
     );
 });
diff --git a/src/components/Toc/TocItem/TocItem.scss b/src/components/Toc/TocItem/TocItem.scss
@@ -33,9 +33,13 @@ $block: '.#{variables.$ns}toc-item';
             }
         }
 
-        &_child {
-            #{$class}__section-link {
-                padding-inline-start: 25px;
+        @for $i from 1 through 6 {
+            $item-padding: 12px * $i;
+
+            &_depth_#{$i} {
+                #{$class}__section-link {
+                    padding-inline-start: $item-padding;
+                }
             }
         }
 

diff --git a/src/components/Toc/TocItem/TocItem.tsx b/src/components/Toc/TocItem/TocItem.tsx
@@ -13,38 +13,31 @@ const b = block('toc-item');
 export interface TocItemProps extends TocItemType {
     childItem?: boolean;
     active?: boolean;
-    onClick?: (value: string) => void;
+    onClick?: (event: React.MouseEvent) => void;
+    depth: number;
 }
 
 export const TocItem = (props: TocItemProps) => {
-    const {active = false, childItem = false, content, href, value, onClick} = props;
+    const {active = false, childItem = false, content, href, onClick, depth} = props;
 
-    const handleClick = React.useCallback(() => {
-        if (value === undefined || !onClick) {
-            return;
-        }
-
-        onClick(value);
-    }, [onClick, value]);
-
-    const {onKeyDown} = useActionHandlers(handleClick);
+    const {onKeyDown} = useActionHandlers(onClick);
 
     const item =
         href === undefined ? (
             <div
                 role="button"
                 tabIndex={0}
                 className={b('section-link')}
-                onClick={handleClick}
+                onClick={onClick}
                 onKeyDown={onKeyDown}
             >
                 {content}
             </div>
         ) : (
-            <a href={href} onClick={handleClick} className={b('section-link')}>
+            <a href={href} onClick={onClick} className={b('section-link')}>
                 {content}
             </a>
         );
 
-    return <div className={b('section', {child: childItem, active})}>{item}</div>;
+    return <div className={b('section', {child: childItem, depth, active})}>{item}</div>;
 };
diff --git a/src/components/Toc/TocItem/index.ts b/src/components/Toc/TocItem/index.ts
@@ -0,0 +1 @@
+export * from './TocItem';
diff --git a/src/components/Toc/TocSections/TocSections.scss b/src/components/Toc/TocSections/TocSections.scss
@@ -0,0 +1,13 @@
+@use '../../variables';
+@use '../../../../styles/mixins.scss';
+
+$block: '.#{variables.$ns}toc';
+
+#{$block}__sections {
+    padding: 0;
+    margin: 0;
+
+    overflow: hidden auto;
+
+    list-style: none;
+}
diff --git a/src/components/Toc/TocSections/TocSections.tsx b/src/components/Toc/TocSections/TocSections.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import {block} from '../../utils/cn';
+import {TocItem} from '../TocItem';
+import type {TocItem as TocItemType} from '../types';
+
+import './TocSections.scss';
+
+const b = block('toc');
+
+export interface TocSectionsProps {
+    items: TocItemType[];
+    value?: string;
+    onUpdate?: (value: string) => void;
+    depth?: number;
+    childItem?: boolean;
+    onItemClick?: (event: React.MouseEvent) => void;
+}
+
+export const TocSections = React.forwardRef<HTMLElement, TocSectionsProps>(
+    function TocSections(props) {
+        const {value: activeValue, items, onUpdate, childItem, depth = 1, onItemClick} = props;
+
+        if (depth > 6) {
+            return null;
+        }
+
+        return (
+            <ul className={b('sections')}>
+                {items.map(({value, content, href, items: childrenItems}) => (
+                    <li key={value ?? href} aria-current={activeValue === value}>
+                        <TocItem
+                            content={content}
+                            href={href}
+                            active={activeValue === value}
+                            onClick={(event: React.MouseEvent) => {
+                                onItemClick?.(event);
+
+                                if (value === undefined || !onUpdate) {
+                                    return;
+                                }
+
+                                onUpdate?.(value);
+                            }}
+                            childItem={childItem}
+                            depth={depth}
+                        />
+                        {childrenItems && childrenItems.length > 0 && (
+                            <TocSections
+                                items={childrenItems}
+                                onUpdate={onUpdate}
+                                childItem
+                                depth={depth + 1}
+                                value={activeValue}
+                            />
+                        )}
+                    </li>
+                ))}
+            </ul>
+        );
+    },
+);
diff --git a/src/components/Toc/TocSections/index.ts b/src/components/Toc/TocSections/index.ts
@@ -0,0 +1 @@
+export * from './TocSections';
diff --git a/src/components/Toc/__stories__/Toc.stories.tsx b/src/components/Toc/__stories__/Toc.stories.tsx
@@ -53,10 +53,27 @@ Default.args = {
                 {
                     value: 'control',
                     content: 'Disk controls',
+                    items: [
+                        {
+                            value: 'floppy',
+                            content: 'Floppy',
+                        },
+                        {
+                            value: 'hard',
+                            content: 'Hard',
+                            items: [],
+                        },
+                    ],
                 },
                 {
                     value: 'snapshots',
                     content: 'Disk snapshots',
+                    items: [
+                        {
+                            value: 'standard',
+                            content: 'Standard',
+                        },
+                    ],
                 },
             ],
         },