diff --git a/demo/src/Components/DocPage/index.stories.tsx b/demo/src/Components/DocPage/index.stories.tsx index 447c31db..a8e2cecc 100644 --- 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 index ab12471c..8b06ef3b 100644 --- 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; @@ -483,7 +484,7 @@ class DocPage extends React.Component { } 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 { router={router} headerHeight={headerHeight} key={keyDOM} + onItemClick={onMiniTocItemClick} /> ); diff --git a/src/components/MiniToc/MiniToc.tsx b/src/components/MiniToc/MiniToc.tsx index a7ca05f6..311efaae 100644 --- 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(({headings, router, headerHeight}) => { +const MiniToc = memo(({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(({headings, router, headerHeight}) => { items={sectionHrefs} router={router} headerHeight={headerHeight} + onSectionClick={onItemClick} > {flatHeadings.map(({href, title, isChild}) => (