feat(DocPage): added new prop for minitoc onclick handler

diplodoc-platform · Oct 12, 2023 · ee0b1dc · ee0b1dc
1 parent 9921c6d
commit ee0b1dc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/demo/src/Components/DocPage/index.stories.tsx b/demo/src/Components/DocPage/index.stories.tsx
@@ -53,6 +53,10 @@ const useSettings = () => {
         onChangeShowMiniToc,
         textSize,
         onChangeTextSize,
+        onMiniTocItemClick: (event: MouseEvent) => {
+            // eslint-disable-next-line no-console
+            console.log((event.target as HTMLAnchorElement).hash);
+        },
     };
 };
 

diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx
@@ -70,6 +70,7 @@ export interface DocPageProps extends DocPageData, DocSettings {
     onContentLoaded?: () => void;
     onSubscribe?: (data: SubscribeData) => void;
     pdfLink?: string;
+    onMiniTocItemClick?: (event: MouseEvent) => void;
 }
 
 type DocPageInnerProps = InnerProps<DocPageProps, DocSettings>;
@@ -483,7 +484,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
     }
 
     private renderAsideMiniToc() {
-        const {headings, router, headerHeight} = this.props;
+        const {headings, router, headerHeight, onMiniTocItemClick} = this.props;
         const {keyDOM} = this.state;
 
         return (
@@ -493,6 +494,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
                     router={router}
                     headerHeight={headerHeight}
                     key={keyDOM}
+                    onItemClick={onMiniTocItemClick}
                 />
             </div>
         );

diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx
@@ -14,6 +14,7 @@ export interface MinitocProps {
     headings: DocHeadingItem[];
     router: Router;
     headerHeight?: number;
+    onItemClick?: (event: MouseEvent) => void;
 }
 
 export interface MinitocSectionProps {
@@ -34,7 +35,7 @@ function getFlatHeadings(items: DocHeadingItem[], isChild = false): FlatHeadingI
     }, [] as FlatHeadingItem[]);
 }
 
-const MiniToc = memo<MinitocProps>(({headings, router, headerHeight}) => {
+const MiniToc = memo<MinitocProps>(({headings, router, headerHeight, onItemClick}) => {
     const {t} = useTranslation('mini-toc');
     const flatHeadings = useMemo(() => getFlatHeadings(headings), [headings]);
     const sectionHrefs = useMemo(
@@ -55,6 +56,7 @@ const MiniToc = memo<MinitocProps>(({headings, router, headerHeight}) => {
                 items={sectionHrefs}
                 router={router}
                 headerHeight={headerHeight}
+                onSectionClick={onItemClick}
             >
                 {flatHeadings.map(({href, title, isChild}) => (
                     <li key={href} data-hash={href} className={b('section', {child: isChild})}>