10311323550

Committed 09 Aug 2024 12:08AM UTC coverage: 32.039% (+0.02%) from 32.024%

Build # 10311323550

Build Type

Pull #9556

github

Committed by

Raemon

Commit Message

fix lint

Pull Request Pull Request #9556: Minimalist Post Header

Run Details

4937 of 40217 branches covered (12.28%)

Branch coverage included in aggregate %.

50 of 113 new or added lines in 21 files covered. (44.25%)

4 existing lines in 3 files now uncovered.

28806 of 65101 relevant lines covered (44.25%)

180.3 hits per line

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

50.0

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

import classNames from 'classnames';
import React from 'react';
import { Components, registerComponent } from "../../../lib/vulcan-lib";
import { MAX_COLUMN_WIDTH } from '../PostsPage/PostsPage';
import { fullHeightToCEnabled } from '../../../lib/betas';

const FULL_HEIGHT_TOC_LEFT_MARGIN = '1fr'
const DEFAULT_TOC_MARGIN = '1.5fr'
const MAX_TOC_WIDTH = 270
const MIN_TOC_WIDTH = 200
export const MAX_CONTENT_WIDTH = 720;
const TOC_OFFSET_TOP = 92
const TOC_OFFSET_BOTTOM = 64
const LEFT_COLUMN_WIDTH = fullHeightToCEnabled ? '0fr' : '1fr';
const RIGHT_COLUMN_WIDTH = fullHeightToCEnabled ? '0fr' : '1.5fr';

const styles = (theme: ThemeType) => ({
  root: {
    position: "relative",
    display: "grid",
    gridTemplateColumns: `
      ${LEFT_COLUMN_WIDTH}
      minmax(${MIN_TOC_WIDTH}px, ${MAX_TOC_WIDTH}px)
      minmax(50px, ${FULL_HEIGHT_TOC_LEFT_MARGIN})
      minmax(min-content, ${MAX_COLUMN_WIDTH}px)
      minmax(300px, ${DEFAULT_TOC_MARGIN})
      minmax(min-content, 300px)
      10px
      ${RIGHT_COLUMN_WIDTH}
    `,
    [theme.breakpoints.down('sm')]: {
      display: 'block',
      paddingTop: 12
    },
  },
  toc: {
    position: 'unset',
    width: 'unset',
    left: -DEFAULT_TOC_MARGIN,
    marginTop: fullHeightToCEnabled ? -50 : -TOC_OFFSET_TOP,
    marginBottom: fullHeightToCEnabled ? undefined : -TOC_OFFSET_BOTTOM,

    [theme.breakpoints.down('sm')]:{
      display: "none",
      marginTop: 0,
      marginBottom: 0,
    },
  },
  splashPageHeaderToc: {
    marginTop: 'calc(-100vh - 64px)'
  },
  normalHeaderToc: {
    
  },
  commentToCMargin: {
    marginTop: 'unset',
  },
  // This is needed for an annoying IntersectionObserver hack to prevent the title from being hidden when scrolling up
  commentToCIntersection: {
    // And unfortunately we need !important because otherwise this style gets overriden by the `top: 0` in `stickyBlockScroller`
    top: '-1px !important'
  },
  stickyBlockScroller: {
    position: "sticky",
    fontSize: 12,
    top: 0,
    lineHeight: 1.0,
    marginLeft: 1,
    paddingLeft: theme.spacing.unit*2,
    textAlign: "left",
    maxHeight: "100vh",
    height: fullHeightToCEnabled ? "100%" : undefined,
    overflowY: "auto",
    
    scrollbarWidth: "none", //Firefox-specific
    "&::-webkit-scrollbar": { //Everything-else
      width: 0,
    },

    [theme.breakpoints.down('sm')]:{
      display:'none'
    }
  },
  stickyBlock: {
    // Cancels the direction:rtl in stickyBlockScroller
    direction: "ltr",
    height: fullHeightToCEnabled ? "100%" : undefined,
    paddingTop: fullHeightToCEnabled ? undefined : TOC_OFFSET_TOP,
    paddingBottom: fullHeightToCEnabled ? undefined : TOC_OFFSET_BOTTOM,
  },
  content: {},
  gap1: { gridArea: 'gap1' },
  gap2: { gridArea: 'gap2' },
  gap3: { gridArea: 'gap3' },
  rhs: {},
  hideTocButton: {
    position: "fixed",
    top: 0,
    left: 0,
    fontSize: 14,
    fontWeight: 500,
    fontFamily: theme.palette.fonts.sansSerifStack,
    color: theme.palette.grey[600],
    margin: 18,
    display: "flex",
    alignItems: "center",
    gap: "10px",
    userSelect: "none",
    cursor: "pointer",
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
  },
  hideTocButtonHidden: {
    display: "none",
  },
});

export type ToCLayoutSegment = {
  toc?: React.ReactNode,
  centralColumn: React.ReactNode,
  rightColumn?: React.ReactNode,
  isCommentToC?: boolean,
};

const MultiToCLayout = ({segments, classes, tocRowMap = [], showSplashPageHeader = false}: {
  segments: ToCLayoutSegment[],
  classes: ClassesType<typeof styles>,
  tocRowMap?: number[], // This allows you to specify which row each ToC should be in, where maybe you want a ToC to span more than one row
  showSplashPageHeader?: boolean,
}) => {
  const [leftHover, setLeftHover] = React.useState(false);
  const tocVisible = true;
  const gridTemplateAreas = segments
    .map((_segment,i) => `"... toc${tocRowMap[i] || i} gap1 content${i} gap2 rhs${i} gap3 ..."`)
    .join('\n')
  return <div className={classNames(classes.root)} style={{ gridTemplateAreas }}>
    {segments.map((segment,i) => <React.Fragment key={i}>
      {segment.toc && tocVisible && <>
        <div className={classNames(classes.toc, { [classes.commentToCMargin]: segment.isCommentToC, [classes.splashPageHeaderToc]: showSplashPageHeader, [classes.normalHeaderToc]: !showSplashPageHeader })} style={{ "gridArea": `toc${i}` }} onMouseEnter={() => setLeftHover(true)} onMouseLeave={() => setLeftHover(false)}>
          <div className={classNames(classes.stickyBlockScroller, { [classes.commentToCIntersection]: segment.isCommentToC })}>
            <div className={classes.stickyBlock}>
              {/* This allows the ToC to appear when the user hovers over either of the two left-columns */}
              {React.cloneElement(segment.toc as React.ReactElement, { hover: leftHover })}
            </div>
          </div>
        </div>
      </>}
      <div className={classes.gap1} onMouseEnter={() => setLeftHover(true)} onMouseLeave={() => setLeftHover(false)}/>
      <div className={classes.content} style={{ "gridArea": `content${i}` }} >
        {segment.centralColumn}
      </div>
      <div className={classes.gap2}/>
      {segment.rightColumn && <div className={classes.rhs} style={{ "gridArea": `rhs${i}` }}>
        {segment.rightColumn}
      </div>}
      <div className={classes.gap3}/>
    </React.Fragment>)}
  </div>
}

const MultiToCLayoutComponent = registerComponent('MultiToCLayout', MultiToCLayout, {styles});

declare global {
  interface ComponentTypes {
    MultiToCLayout: typeof MultiToCLayoutComponent
  }
}


1	import classNames from 'classnames';	3✔
2	import React from 'react';	1✔
3	import { Components, registerComponent } from "../../../lib/vulcan-lib";	1✔
4	import { MAX_COLUMN_WIDTH } from '../PostsPage/PostsPage';	1✔
5	import { fullHeightToCEnabled } from '../../../lib/betas';	1✔
6
7	const FULL_HEIGHT_TOC_LEFT_MARGIN = '1fr'	1✔
8	const DEFAULT_TOC_MARGIN = '1.5fr'	1✔
9	const MAX_TOC_WIDTH = 270	1✔
10	const MIN_TOC_WIDTH = 200	1✔
11	export const MAX_CONTENT_WIDTH = 720;	1✔
12	const TOC_OFFSET_TOP = 92	1✔
13	const TOC_OFFSET_BOTTOM = 64	1✔
14	const LEFT_COLUMN_WIDTH = fullHeightToCEnabled ? '0fr' : '1fr';	1!
15	const RIGHT_COLUMN_WIDTH = fullHeightToCEnabled ? '0fr' : '1.5fr';	1!
16
17	const styles = (theme: ThemeType) => ({	1✔
18	root: {
19	position: "relative",
20	display: "grid",
21	gridTemplateColumns: `
22	${LEFT_COLUMN_WIDTH}
23	minmax(${MIN_TOC_WIDTH}px, ${MAX_TOC_WIDTH}px)
24	minmax(50px, ${FULL_HEIGHT_TOC_LEFT_MARGIN})
25	minmax(min-content, ${MAX_COLUMN_WIDTH}px)
26	minmax(300px, ${DEFAULT_TOC_MARGIN})
27	minmax(min-content, 300px)
28	10px
29	${RIGHT_COLUMN_WIDTH}
30	`,
31	[theme.breakpoints.down('sm')]: {
32	display: 'block',
33	paddingTop: 12
34	},
35	},
36	toc: {
37	position: 'unset',
38	width: 'unset',
39	left: -DEFAULT_TOC_MARGIN,
40	marginTop: fullHeightToCEnabled ? -50 : -TOC_OFFSET_TOP,	1!
41	marginBottom: fullHeightToCEnabled ? undefined : -TOC_OFFSET_BOTTOM,	1!
42
43	[theme.breakpoints.down('sm')]:{
44	display: "none",
45	marginTop: 0,
46	marginBottom: 0,
47	},
48	},
49	splashPageHeaderToc: {
50	marginTop: 'calc(-100vh - 64px)'
51	},
52	normalHeaderToc: {
53
54	},
55	commentToCMargin: {
56	marginTop: 'unset',
57	},
58	// This is needed for an annoying IntersectionObserver hack to prevent the title from being hidden when scrolling up
59	commentToCIntersection: {
60	// And unfortunately we need !important because otherwise this style gets overriden by the `top: 0` in `stickyBlockScroller`
61	top: '-1px !important'
62	},
63	stickyBlockScroller: {
64	position: "sticky",
65	fontSize: 12,
66	top: 0,
67	lineHeight: 1.0,
68	marginLeft: 1,
69	paddingLeft: theme.spacing.unit*2,
70	textAlign: "left",
71	maxHeight: "100vh",
72	height: fullHeightToCEnabled ? "100%" : undefined,	1!
73	overflowY: "auto",
74
75	scrollbarWidth: "none", //Firefox-specific
76	"&::-webkit-scrollbar": { //Everything-else
77	width: 0,
78	},
79
80	[theme.breakpoints.down('sm')]:{
81	display:'none'
82	}
83	},
84	stickyBlock: {
85	// Cancels the direction:rtl in stickyBlockScroller
86	direction: "ltr",
87	height: fullHeightToCEnabled ? "100%" : undefined,	1!
88	paddingTop: fullHeightToCEnabled ? undefined : TOC_OFFSET_TOP,	1!
89	paddingBottom: fullHeightToCEnabled ? undefined : TOC_OFFSET_BOTTOM,	1!
90	},
91	content: {},
92	gap1: { gridArea: 'gap1' },
93	gap2: { gridArea: 'gap2' },
94	gap3: { gridArea: 'gap3' },
95	rhs: {},
96	hideTocButton: {
97	position: "fixed",
98	top: 0,
99	left: 0,
100	fontSize: 14,
101	fontWeight: 500,
102	fontFamily: theme.palette.fonts.sansSerifStack,
103	color: theme.palette.grey[600],
104	margin: 18,
105	display: "flex",
106	alignItems: "center",
107	gap: "10px",
108	userSelect: "none",
109	cursor: "pointer",
110	[theme.breakpoints.down("sm")]: {
111	display: "none",
112	},
113	},
114	hideTocButtonHidden: {
115	display: "none",
116	},
117	});
118
119	export type ToCLayoutSegment = {
120	toc?: React.ReactNode,
121	centralColumn: React.ReactNode,
122	rightColumn?: React.ReactNode,
123	isCommentToC?: boolean,
124	};
125
126	const MultiToCLayout = ({segments, classes, tocRowMap = [], showSplashPageHeader = false}: {	1!
127	segments: ToCLayoutSegment[],
128	classes: ClassesType<typeof styles>,
129	tocRowMap?: number[], // This allows you to specify which row each ToC should be in, where maybe you want a ToC to span more than one row
130	showSplashPageHeader?: boolean,
131	}) => {
NEW 132	const [leftHover, setLeftHover] = React.useState(false);	×
133	const tocVisible = true;	×
134	const gridTemplateAreas = segments	×
135	.map((_segment,i) => `"... toc${tocRowMap[i] \|\| i} gap1 content${i} gap2 rhs${i} gap3 ..."`)	×
136	.join('\n')
137	return <div className={classNames(classes.root)} style={{ gridTemplateAreas }}>	×
138	{segments.map((segment,i) => <React.Fragment key={i}>	×
139	{segment.toc && tocVisible && <>	×
NEW 140	<div className={classNames(classes.toc, { [classes.commentToCMargin]: segment.isCommentToC, [classes.splashPageHeaderToc]: showSplashPageHeader, [classes.normalHeaderToc]: !showSplashPageHeader })} style={{ "gridArea": `toc${i}` }} onMouseEnter={() => setLeftHover(true)} onMouseLeave={() => setLeftHover(false)}>	×
141	<div className={classNames(classes.stickyBlockScroller, { [classes.commentToCIntersection]: segment.isCommentToC })}>
142	<div className={classes.stickyBlock}>
143	{/* This allows the ToC to appear when the user hovers over either of the two left-columns */}
144	{React.cloneElement(segment.toc as React.ReactElement, { hover: leftHover })}
145	</div>
146	</div>
147	</div>
148	</>}
NEW 149	<div className={classes.gap1} onMouseEnter={() => setLeftHover(true)} onMouseLeave={() => setLeftHover(false)}/>	×
150	<div className={classes.content} style={{ "gridArea": `content${i}` }} >
151	{segment.centralColumn}
152	</div>
153	<div className={classes.gap2}/>
154	{segment.rightColumn && <div className={classes.rhs} style={{ "gridArea": `rhs${i}` }}>	×
155	{segment.rightColumn}
156	</div>}
157	<div className={classes.gap3}/>
158	</React.Fragment>)}
159	</div>
160	}
161
162	const MultiToCLayoutComponent = registerComponent('MultiToCLayout', MultiToCLayout, {styles});	1✔
163
164	declare global {
165	interface ComponentTypes {
166	MultiToCLayout: typeof MultiToCLayoutComponent
167	}
168	}
169

ForumMagnum / ForumMagnum / 10311323550

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