9001387726

Committed 08 May 2024 11:57AM UTC coverage: 31.949% (+0.07%) from 31.881%

Build # 9001387726

Build Type

Pull #9197

github

Committed by

Will-Howard

Commit Message

generate types

Pull Request Pull Request #9197: Standardise rendering of dates and times

Run Details

4767 of 38783 branches covered (12.29%)

Branch coverage included in aggregate %.

60 of 109 new or added lines in 28 files covered. (55.05%)

6 existing lines in 6 files now uncovered.

27637 of 62642 relevant lines covered (44.12%)

177.82 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

10.61

/packages/lesswrong/components/posts/TableOfContents/FixedPositionToC.tsx

import React, { useContext, useEffect, useState } from 'react';
import { Components, registerComponent } from '../../../lib/vulcan-lib';
import withErrorBoundary from '../../common/withErrorBoundary'
import { isServer } from '../../../lib/executionEnvironment';
import { useLocation } from '../../../lib/routeUtil';
import type { ToCSection, ToCSectionWithOffset } from '../../../lib/tableOfContents';
import qs from 'qs'
import isEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import filter from 'lodash/filter';
import { getCurrentSectionMark, ScrollHighlightLandmark, useScrollHighlight } from '../../hooks/useScrollHighlight';
import { useNavigate } from '../../../lib/reactRouterWrapper';
import { usePostReadProgress } from '../usePostReadProgress';
import { usePostsPageContext } from '../PostsPage/PostsPageContext';
import { SidebarsContext } from '../../common/SidebarsWrapper';
import classNames from 'classnames';
import { ToCDisplayOptions, adjustHeadingText, getAnchorY, isRegularClick, jumpToY } from './TableOfContentsList';

function normalizeOffsets(sections: (ToCSection | ToCSectionWithOffset)[]): ToCSectionWithOffset[] {
  if (sections.length === 0) {
    return [];
  }
  
  const titleSection: ToCSectionWithOffset = { ...sections[0], offset: sections[0].offset ?? 0 };

  const remainingSections = sections.slice(1);

  const normalizedSections: ToCSectionWithOffset[] = remainingSections.map((section, idx) => ({
    ...section,
    offset: section.divider ? (1 - (sections[idx].offset ?? 0)) : ((section.offset ?? 0) - (sections[idx].offset ?? 0))
  }));

  return [titleSection, ...normalizedSections];
};

function getSectionsWithOffsets(sectionHeaders: Element[], filteredSections: ToCSection[]) {
  let sectionsWithOffsets;
  const parentContainer = sectionHeaders[0]?.parentElement;
  // If we have any section headers, assign offsets to them
  if (parentContainer) {
    const containerHeight = parentContainer.getBoundingClientRect().height;

    const anchorOffsets = sectionHeaders.map(sectionHeader => ({
      anchorHref: sectionHeader.getAttribute('id'),
      offset: (sectionHeader as HTMLElement).offsetTop / containerHeight
    }));

    sectionsWithOffsets = filteredSections.map((section) => {
      const anchorOffset = anchorOffsets.find((anchorOffset) => anchorOffset.anchorHref === section.anchor);
      return {
        ...section,
        offset: anchorOffset?.offset,
      };
    });
  } else {
    // Otherwise, we'll just default to assigning the entire offset to the comments "section" in the ToC in `normalizeOffsets`
    sectionsWithOffsets = filteredSections;
  }
  return sectionsWithOffsets;
}

const styles = (theme: ThemeType) => ({
  root: {
    left: 0,
    top: 0,
    maxHeight: '100vh',
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    //Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
    '& .TableOfContentsRow-title': {
      borderBottom: "none",
    },
    wordBreak: 'break-word',
    transition: 'opacity .5s ease-in-out 0.5s, transform .5s ease-in-out 0.5s, height 0.4s ease-in-out, max-height 0.4s ease-in-out',
  },
  fadeOut: {
    opacity: 0,
    transform: 'translateX(-50px)',
    transitionDelay: '0s',
  },
  fadeIn: {
  },
  //Use our PostTitle styling with small caps
  tocTitle: {
    ...theme.typography.postStyle,
    ...theme.typography.smallCaps,
    fontSize: "1.3rem",
    marginTop: 16,
    marginBottom: 8,
  },
  tocPostedAt: {
    color: theme.palette.link.tocLink
  },
  belowTitle: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    flexGrow: 1,
  },
  progressBarContainer: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    '--scrollAmount': '0%',
    marginRight: -4,
    marginBottom: 20,
    width: 1,
    background: theme.palette.grey[400],
    overflowY: 'clip',
  },
  progressBar: {
    flex: 'var(--scrollAmount)',
    display: 'flex',
    [theme.breakpoints.down('sm')]: {
      marginLeft: -8,
      marginRight: -8
    },
    "&:after": {
      content: "''",
      marginLeft: -0.5,
      paddingLeft: 2,
      alignSelf: 'end',
      height: 'var(--windowHeight)',
      background: theme.palette.grey[600],
    }
  },
  unfilledProgressBar: {
    width: 1,
    flex: 'calc(100% - var(--scrollAmount))',
    [theme.breakpoints.down('sm')]: {
      marginLeft: -8,
      marginRight: -8
    },
  },
  nonTitleRows: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    flexGrow: 1,
    '& .TableOfContentsRow-link': {
      background: theme.palette.panelBackground.default
    },
    '& .TableOfContentsDivider-divider': {
      marginLeft: 4,
    },
  },
});

const FixedPositionToc = ({tocSections, title, postedAt, onClickSection, displayOptions, classes}: {
  tocSections: ToCSection[],
  title: string|null,
  postedAt?: Date,
  onClickSection?: () => void,
  displayOptions?: ToCDisplayOptions,
  classes: ClassesType<typeof styles>,
}) => {
  const { TableOfContentsRow, AnswerTocRow, FormatDate } = Components;

  const navigate = useNavigate();
  const location = useLocation();
  const { query } = location;
  const { tocVisible } = useContext(SidebarsContext)!;

  const [normalizedSections, setNormalizedSections] = useState<ToCSectionWithOffset[]>([]);
  const [hasLoaded, setHasLoaded] = useState(false);

  const postContext = usePostsPageContext();
  const disableProgressBar = (!postContext || isServer || postContext.shortform || postContext.readTimeMinutes < 2);

  const { readingProgressBarRef } = usePostReadProgress({
    updateProgressBar: (element, scrollPercent) => element.style.setProperty("--scrollAmount", `${scrollPercent}%`),
    disabled: disableProgressBar || !hasLoaded,
    setScrollWindowHeight: (element, height) => element.style.setProperty("--windowHeight", `${height}px`),
    useFirstViewportHeight: true
  });

  const jumpToAnchor = (anchor: string) => {
    if (isServer) return;

    const anchorY = getAnchorY(anchor);
    if (anchorY !== null) {
      delete query.commentId;
      navigate({
        search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,
        hash: `#${anchor}`,
      });
      let sectionYdocumentSpace = anchorY + window.scrollY;
      jumpToY(sectionYdocumentSpace);
    }
  }

  let filteredSections = (displayOptions?.maxHeadingDepth && tocSections)
    ? filter(tocSections, s=>s.level <= displayOptions.maxHeadingDepth!)
    : tocSections;

  if (displayOptions?.addedRows) {
    filteredSections = [...filteredSections, ...displayOptions.addedRows];
  }

  // Filter out answers in the full-height ToC, along with the section heading and divider (which are only present if there's at least one answer)
  if (filteredSections.some(section => section.answer)) {
    filteredSections = filteredSections.filter(section => !['answers', 'postAnswersDivider'].includes(section.anchor) && !section.answer);
  }
  
  const { landmarkName: currentSection } = useScrollHighlight([
    ...filteredSections.map((section): ScrollHighlightLandmark => ({
      landmarkName: section.anchor,
      elementId: section.anchor,
      position: "centerOfElement",
      offset: -(getCurrentSectionMark() * 2)
    })),
    {
      landmarkName: "comments",
      elementId: "postBody",
      position: "bottomOfElement",
      offset: -(getCurrentSectionMark() * 2)
    },
  ]);

  const handleClick = async (ev: React.SyntheticEvent, jumpToSection: () => void): Promise<void> => {
    ev.preventDefault();
    if (onClickSection) {
      onClickSection();
      // One of the things this callback can do is expand folded-up text which
      // might contain the anchor we want to scroll to. We wait for a setTimeout
      // here, to allow React re-rendering to finish in that case.
      await new Promise((resolve,reject) => setTimeout(resolve, 0));
    }
    jumpToSection();
  }

  useEffect(() => {
    const postBodyRef = document.getElementById('postBody');
    if (!postBodyRef) return;
    //Get all elements with href corresponding to anchors from the table of contents
    const postImages = Array.from(postBodyRef.getElementsByTagName('img'));
    function updateImageLoadingState(this: HTMLImageElement) {
      if (postImages.every(image => image.complete)) setHasLoaded(true)
      this.removeEventListener('load', updateImageLoadingState);
    };
    postImages.forEach((postImage) => postImage.addEventListener('load', updateImageLoadingState));
    if (postImages.every(image => image.complete)) setHasLoaded(true);
    return () => {
      postImages.forEach((postImage) => postImage.removeEventListener('load', updateImageLoadingState));
    }
  }, [])

  useEffect(() => {
    const postBodyRef = document.getElementById('postBody');
    if (!postBodyRef) return;
    const postBodyBlocks = Array.from(postBodyRef.querySelectorAll('[id]'));
    const sectionHeaders = postBodyBlocks.filter(block => filteredSections.map(section => section.anchor).includes(block.getAttribute('id') ?? ''));
    const sectionsWithOffsets = getSectionsWithOffsets(sectionHeaders, filteredSections);
    const newNormalizedSections = normalizeOffsets(sectionsWithOffsets);

    if (!isEqual(normalizedSections, newNormalizedSections)) {
      setNormalizedSections(newNormalizedSections);
    }
  }, [filteredSections, normalizedSections, hasLoaded]);

  const titleRow = (
    <TableOfContentsRow
      key="postTitle"
      href="#"
      offset={0}
      onClick={ev => {
        if (isRegularClick(ev)) {
          void handleClick(ev, () => {
            navigate("#");
            jumpToY(0)
          });
        }
      }}
      highlighted={currentSection === "above"}
      title
      fullHeight
    >
      <div className={classes.tocTitle}>
        {title?.trim()}
      </div>
      {postedAt && <div className={classes.tocPostedAt}>
        <FormatDate date={postedAt} format={"Do MMM YYYY"} />
      </div>}
    </TableOfContentsRow>
  );

  const rows = normalizedSections.map((section, index) => {
    return (
      <TableOfContentsRow
        key={section.anchor}
        indentLevel={section.level}
        divider={section.divider}
        highlighted={section.anchor === currentSection}
        href={"#"+section.anchor}
        offset={section.offset}
        onClick={(ev) => {
          if (isRegularClick(ev)) {
            void handleClick(ev, () => {
              jumpToAnchor(section.anchor)
            });
          }
        }}
        answer={!!section.answer}
        fullHeight
      >
        {section.answer
          ? <AnswerTocRow answer={section.answer} />
          : <span>{adjustHeadingText(section.title)}</span>
        }
      </TableOfContentsRow>
    )
  });

  const commentsRow = normalizedSections.slice(-1)?.[0]?.anchor === 'comments' ? rows.pop() : undefined;

  if (!tocSections || !hasLoaded)
    return <div/>

  return <div className={classNames(classes.root, { [classes.fadeIn]: tocVisible, [classes.fadeOut]: !tocVisible })}>
    {titleRow}
    <div className={classes.belowTitle}>
      <div className={classes.progressBarContainer} ref={readingProgressBarRef}>
        <div className={classes.progressBar} />
        <div className={classes.unfilledProgressBar}/>
      </div>
      <div className={classes.nonTitleRows}>
        {rows}
      </div>
    </div>
    {commentsRow}
  </div>
}

const FixedPositionTocComponent = registerComponent(
  "FixedPositionToC", FixedPositionToc, {
    hocs: [withErrorBoundary],
    styles
  }
);

declare global {
  interface ComponentTypes {
    FixedPositionToC: typeof FixedPositionTocComponent
  }
}

1	import React, { useContext, useEffect, useState } from 'react';	1✔
2	import { Components, registerComponent } from '../../../lib/vulcan-lib';	1✔
3	import withErrorBoundary from '../../common/withErrorBoundary'	1✔
4	import { isServer } from '../../../lib/executionEnvironment';	1✔
5	import { useLocation } from '../../../lib/routeUtil';	1✔
6	import type { ToCSection, ToCSectionWithOffset } from '../../../lib/tableOfContents';
7	import qs from 'qs'	1✔
8	import isEmpty from 'lodash/isEmpty';	1✔
9	import isEqual from 'lodash/isEqual';	1✔
10	import filter from 'lodash/filter';	1✔
11	import { getCurrentSectionMark, ScrollHighlightLandmark, useScrollHighlight } from '../../hooks/useScrollHighlight';	1✔
12	import { useNavigate } from '../../../lib/reactRouterWrapper';	1✔
13	import { usePostReadProgress } from '../usePostReadProgress';	1✔
14	import { usePostsPageContext } from '../PostsPage/PostsPageContext';	1✔
15	import { SidebarsContext } from '../../common/SidebarsWrapper';	1✔
16	import classNames from 'classnames';	1✔
17	import { ToCDisplayOptions, adjustHeadingText, getAnchorY, isRegularClick, jumpToY } from './TableOfContentsList';	1✔
18
19	function normalizeOffsets(sections: (ToCSection \| ToCSectionWithOffset)[]): ToCSectionWithOffset[] {
20	if (sections.length === 0) {	×
21	return [];	×
22	}
23
24	const titleSection: ToCSectionWithOffset = { ...sections[0], offset: sections[0].offset ?? 0 };	×
25
26	const remainingSections = sections.slice(1);	×
27
28	const normalizedSections: ToCSectionWithOffset[] = remainingSections.map((section, idx) => ({	×
29	...section,
30	offset: section.divider ? (1 - (sections[idx].offset ?? 0)) : ((section.offset ?? 0) - (sections[idx].offset ?? 0))	×
31	}));
32
33	return [titleSection, ...normalizedSections];	×
34	};
35
36	function getSectionsWithOffsets(sectionHeaders: Element[], filteredSections: ToCSection[]) {
37	let sectionsWithOffsets;
38	const parentContainer = sectionHeaders[0]?.parentElement;	×
39	// If we have any section headers, assign offsets to them
40	if (parentContainer) {	×
41	const containerHeight = parentContainer.getBoundingClientRect().height;	×
42
43	const anchorOffsets = sectionHeaders.map(sectionHeader => ({	×
44	anchorHref: sectionHeader.getAttribute('id'),
45	offset: (sectionHeader as HTMLElement).offsetTop / containerHeight
46	}));
47
48	sectionsWithOffsets = filteredSections.map((section) => {	×
49	const anchorOffset = anchorOffsets.find((anchorOffset) => anchorOffset.anchorHref === section.anchor);	×
50	return {	×
51	...section,
52	offset: anchorOffset?.offset,	×
53	};
54	});
55	} else {
56	// Otherwise, we'll just default to assigning the entire offset to the comments "section" in the ToC in `normalizeOffsets`
57	sectionsWithOffsets = filteredSections;	×
58	}
59	return sectionsWithOffsets;	×
60	}
61
62	const styles = (theme: ThemeType) => ({	1✔
63	root: {
64	left: 0,
65	top: 0,
66	maxHeight: '100vh',
67	height: '100%',
68	display: 'flex',
69	flexDirection: 'column',
70	//Override bottom border of title row for FixedToC but not in other uses of TableOfContentsRow
71	'& .TableOfContentsRow-title': {
72	borderBottom: "none",
73	},
74	wordBreak: 'break-word',
75	transition: 'opacity .5s ease-in-out 0.5s, transform .5s ease-in-out 0.5s, height 0.4s ease-in-out, max-height 0.4s ease-in-out',
76	},
77	fadeOut: {
78	opacity: 0,
79	transform: 'translateX(-50px)',
80	transitionDelay: '0s',
81	},
82	fadeIn: {
83	},
84	//Use our PostTitle styling with small caps
85	tocTitle: {
86	...theme.typography.postStyle,
87	...theme.typography.smallCaps,
88	fontSize: "1.3rem",
89	marginTop: 16,
90	marginBottom: 8,
91	},
92	tocPostedAt: {
93	color: theme.palette.link.tocLink
94	},
95	belowTitle: {
96	display: 'flex',
97	flexDirection: 'row',
98	justifyContent: 'space-evenly',
99	flexGrow: 1,
100	},
101	progressBarContainer: {
102	display: 'flex',
103	flexDirection: 'column',
104	justifyContent: 'space-evenly',
105	'--scrollAmount': '0%',
106	marginRight: -4,
107	marginBottom: 20,
108	width: 1,
109	background: theme.palette.grey[400],
110	overflowY: 'clip',
111	},
112	progressBar: {
113	flex: 'var(--scrollAmount)',
114	display: 'flex',
115	[theme.breakpoints.down('sm')]: {
116	marginLeft: -8,
117	marginRight: -8
118	},
119	"&:after": {
120	content: "''",
121	marginLeft: -0.5,
122	paddingLeft: 2,
123	alignSelf: 'end',
124	height: 'var(--windowHeight)',
125	background: theme.palette.grey[600],
126	}
127	},
128	unfilledProgressBar: {
129	width: 1,
130	flex: 'calc(100% - var(--scrollAmount))',
131	[theme.breakpoints.down('sm')]: {
132	marginLeft: -8,
133	marginRight: -8
134	},
135	},
136	nonTitleRows: {
137	display: 'flex',
138	flexDirection: 'column',
139	justifyContent: 'space-evenly',
140	flexGrow: 1,
141	'& .TableOfContentsRow-link': {
142	background: theme.palette.panelBackground.default
143	},
144	'& .TableOfContentsDivider-divider': {
145	marginLeft: 4,
146	},
147	},
148	});
149
150	const FixedPositionToc = ({tocSections, title, postedAt, onClickSection, displayOptions, classes}: {	1✔
151	tocSections: ToCSection[],
152	title: string\|null,
153	postedAt?: Date,
154	onClickSection?: () => void,
155	displayOptions?: ToCDisplayOptions,
156	classes: ClassesType<typeof styles>,
157	}) => {
NEW 158	const { TableOfContentsRow, AnswerTocRow, FormatDate } = Components;	×
159
160	const navigate = useNavigate();	×
161	const location = useLocation();	×
162	const { query } = location;	×
163	const { tocVisible } = useContext(SidebarsContext)!;	×
164
165	const [normalizedSections, setNormalizedSections] = useState<ToCSectionWithOffset[]>([]);	×
166	const [hasLoaded, setHasLoaded] = useState(false);	×
167
168	const postContext = usePostsPageContext();	×
169	const disableProgressBar = (!postContext \|\| isServer \|\| postContext.shortform \|\| postContext.readTimeMinutes < 2);	×
170
171	const { readingProgressBarRef } = usePostReadProgress({	×
172	updateProgressBar: (element, scrollPercent) => element.style.setProperty("--scrollAmount", `${scrollPercent}%`),	×
173	disabled: disableProgressBar \|\| !hasLoaded,	×
174	setScrollWindowHeight: (element, height) => element.style.setProperty("--windowHeight", `${height}px`),	×
175	useFirstViewportHeight: true
176	});
177
178	const jumpToAnchor = (anchor: string) => {	×
179	if (isServer) return;	×
180
181	const anchorY = getAnchorY(anchor);	×
182	if (anchorY !== null) {	×
183	delete query.commentId;	×
184	navigate({	×
185	search: isEmpty(query) ? '' : `?${qs.stringify(query)}`,	×
186	hash: `#${anchor}`,
187	});
188	let sectionYdocumentSpace = anchorY + window.scrollY;	×
189	jumpToY(sectionYdocumentSpace);	×
190	}
191	}
192
193	let filteredSections = (displayOptions?.maxHeadingDepth && tocSections)	×
194	? filter(tocSections, s=>s.level <= displayOptions.maxHeadingDepth!)	×
195	: tocSections;
196
197	if (displayOptions?.addedRows) {	×
198	filteredSections = [...filteredSections, ...displayOptions.addedRows];	×
199	}
200
201	// Filter out answers in the full-height ToC, along with the section heading and divider (which are only present if there's at least one answer)
202	if (filteredSections.some(section => section.answer)) {	×
203	filteredSections = filteredSections.filter(section => !['answers', 'postAnswersDivider'].includes(section.anchor) && !section.answer);	×
204	}
205
206	const { landmarkName: currentSection } = useScrollHighlight([	×
207	...filteredSections.map((section): ScrollHighlightLandmark => ({	×
208	landmarkName: section.anchor,
209	elementId: section.anchor,
210	position: "centerOfElement",
211	offset: -(getCurrentSectionMark() * 2)
212	})),
213	{
214	landmarkName: "comments",
215	elementId: "postBody",
216	position: "bottomOfElement",
217	offset: -(getCurrentSectionMark() * 2)
218	},
219	]);
220
221	const handleClick = async (ev: React.SyntheticEvent, jumpToSection: () => void): Promise<void> => {	×
222	ev.preventDefault();	×
223	if (onClickSection) {	×
224	onClickSection();	×
225	// One of the things this callback can do is expand folded-up text which
226	// might contain the anchor we want to scroll to. We wait for a setTimeout
227	// here, to allow React re-rendering to finish in that case.
228	await new Promise((resolve,reject) => setTimeout(resolve, 0));	×
229	}
230	jumpToSection();	×
231	}
232
233	useEffect(() => {	×
234	const postBodyRef = document.getElementById('postBody');	×
235	if (!postBodyRef) return;	×
236	//Get all elements with href corresponding to anchors from the table of contents
237	const postImages = Array.from(postBodyRef.getElementsByTagName('img'));	×
238	function updateImageLoadingState(this: HTMLImageElement) {
239	if (postImages.every(image => image.complete)) setHasLoaded(true)	×
240	this.removeEventListener('load', updateImageLoadingState);	×
241	};
242	postImages.forEach((postImage) => postImage.addEventListener('load', updateImageLoadingState));	×
243	if (postImages.every(image => image.complete)) setHasLoaded(true);	×
244	return () => {	×
245	postImages.forEach((postImage) => postImage.removeEventListener('load', updateImageLoadingState));	×
246	}
247	}, [])
248
249	useEffect(() => {	×
250	const postBodyRef = document.getElementById('postBody');	×
251	if (!postBodyRef) return;	×
252	const postBodyBlocks = Array.from(postBodyRef.querySelectorAll('[id]'));	×
253	const sectionHeaders = postBodyBlocks.filter(block => filteredSections.map(section => section.anchor).includes(block.getAttribute('id') ?? ''));	×
254	const sectionsWithOffsets = getSectionsWithOffsets(sectionHeaders, filteredSections);	×
255	const newNormalizedSections = normalizeOffsets(sectionsWithOffsets);	×
256
257	if (!isEqual(normalizedSections, newNormalizedSections)) {	×
258	setNormalizedSections(newNormalizedSections);	×
259	}
260	}, [filteredSections, normalizedSections, hasLoaded]);
261
262	const titleRow = (
263	<TableOfContentsRow	×
264	key="postTitle"
265	href="#"
266	offset={0}
267	onClick={ev => {
268	if (isRegularClick(ev)) {	×
269	void handleClick(ev, () => {	×
270	navigate("#");	×
271	jumpToY(0)	×
272	});
273	}
274	}}
275	highlighted={currentSection === "above"}
276	title
277	fullHeight
278	>
279	<div className={classes.tocTitle}>
280	{title?.trim()}	×
281	</div>
282	{postedAt && <div className={classes.tocPostedAt}>	×
283	<FormatDate date={postedAt} format={"Do MMM YYYY"} />
284	</div>}
285	</TableOfContentsRow>
286	);
287
288	const rows = normalizedSections.map((section, index) => {	×
289	return (	×
290	<TableOfContentsRow
291	key={section.anchor}
292	indentLevel={section.level}
293	divider={section.divider}
294	highlighted={section.anchor === currentSection}
295	href={"#"+section.anchor}
296	offset={section.offset}
297	onClick={(ev) => {
298	if (isRegularClick(ev)) {	×
299	void handleClick(ev, () => {	×
300	jumpToAnchor(section.anchor)	×
301	});
302	}
303	}}
304	answer={!!section.answer}
305	fullHeight
306	>
307	{section.answer
308	? <AnswerTocRow answer={section.answer} />	×
309	: <span>{adjustHeadingText(section.title)}</span>
310	}
311	</TableOfContentsRow>
312	)
313	});
314
315	const commentsRow = normalizedSections.slice(-1)?.[0]?.anchor === 'comments' ? rows.pop() : undefined;	×
316
317	if (!tocSections \|\| !hasLoaded)	×
318	return <div/>	×
319
320	return <div className={classNames(classes.root, { [classes.fadeIn]: tocVisible, [classes.fadeOut]: !tocVisible })}>	×
321	{titleRow}
322	<div className={classes.belowTitle}>
323	<div className={classes.progressBarContainer} ref={readingProgressBarRef}>
324	<div className={classes.progressBar} />
325	<div className={classes.unfilledProgressBar}/>
326	</div>
327	<div className={classes.nonTitleRows}>
328	{rows}
329	</div>
330	</div>
331	{commentsRow}
332	</div>
333	}
334
335	const FixedPositionTocComponent = registerComponent(	1✔
336	"FixedPositionToC", FixedPositionToc, {
337	hocs: [withErrorBoundary],
338	styles
339	}
340	);
341
342	declare global {
343	interface ComponentTypes {
344	FixedPositionToC: typeof FixedPositionTocComponent
345	}
346	}

ForumMagnum / ForumMagnum / 9001387726

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous