10715141464

Committed 05 Sep 2024 06:33AM UTC coverage: 31.854% (-0.005%) from 31.859%

Build # 10715141464

Build Type

Pull #9713

github

Committed by

web-flow

Commit Message

Merge dc2c449cb into 7d567d8ee

Pull Request Pull Request #9713: Merge master into LW Deploy

Run Details

5070 of 41306 branches covered (12.27%)

Branch coverage included in aggregate %.

55 of 108 new or added lines in 17 files covered. (50.93%)

6 existing lines in 1 file now uncovered.

29404 of 66918 relevant lines covered (43.94%)

184.96 hits per line

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

13.08

/packages/lesswrong/components/contents/SideItems.tsx

import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
import classNames from 'classnames';
import orderBy from 'lodash/orderBy';
import { createPortal } from 'react-dom';
import { useHover } from '@/components/common/withHover';
import { registerComponent } from '@/lib/vulcan-lib';
import { getOffsetChainTop } from '@/lib/utils/domUtil';

type SideItemOptions = {
  format: "block"|"icon"
  offsetTop: number,
}
const defaultSideItemOptions: SideItemOptions = {
  format: "block",
  offsetTop: 0,
};

type SideItem = {
  id: number
  anchorEl: HTMLElement
  container: HTMLElement
  options: SideItemOptions

  anchorTop: number|null
  anchorLeft: number|null
  sideItemHeight: number|null
}
type SideItemsState = {
  maxId: number
  sideItems: SideItem[]
}
type SideItemsPlacementContextType = {
  addSideItem: (anchorEl: HTMLElement, options: SideItemOptions) => HTMLDivElement
  removeSideItem: (anchorEl: HTMLElement) => void
  resizeItem: (anchorEl: HTMLElement, newHeight: number) => void
}
type SideItemsDisplayContextType = {
  sideItems: SideItem[]
};
const SideItemsPlacementContext = createContext<SideItemsPlacementContextType|null>(null);
const SideItemsDisplayContext = createContext<SideItemsDisplayContextType|null>(null);

export type SideItemContentContextType = {
};
export const SideItemContentContext = createContext<SideItemContentContextType|null>(null);

export const styles = (theme: ThemeType) => ({
  sideItem: {
    position: "absolute",
    width: "100%",
  },
  sidebar: {
    position: "relative",
  },
});

///////////////////////////////////////////////////////////////////////////

function useForceRerender() {
  const [renderCount, rerender] = useReducer(c=>c+1, 0);
  return {renderCount, rerender};
}

const SideItemsContainer = ({classes, children}: {
  classes: ClassesType<typeof styles>,
  children: React.ReactNode
}) => {
  const state = useRef<SideItemsState>({sideItems: [], maxId: -1});
  const contentsRef = useRef<HTMLDivElement|null>(null);
  const {renderCount, rerender} = useForceRerender();
  
  const addSideItem = useCallback((anchorEl: HTMLElement, options: SideItemOptions) => {
    const container = document.createElement("div");
    container.setAttribute("class", classes.sideItem);
    state.current.sideItems = [...state.current.sideItems, {
      id: ++state.current.maxId,
      anchorEl, container,
      options,
      anchorTop: null, anchorLeft: null, sideItemHeight: null,
    }];
    rerender();
    return container;
  }, [rerender, classes]);
  
  const removeSideItem = useCallback((anchorEl: HTMLElement) => {
    const removedItemIndex = state.current.sideItems.findIndex(s => s.anchorEl === anchorEl);
    if (removedItemIndex >= 0) {
      const [removedItem] = state.current.sideItems.splice(removedItemIndex, 1);
      if (removedItem) {
        removedItem.container.remove();
      }
      rerender();
    }
  }, [rerender]);
  
  const resizeItem = useCallback((anchorEl: HTMLElement, newHeight: number) => {
    // Find the corresponding sideItem
    const sideItem = state.current.sideItems.find(s => s.container === anchorEl);
    
    // Compare height reported by the ResizeObserver to the last known height.
    // Round down, becauses the ResizeObserver may report a non-integer size,
    // but when we measure it with `Element.clientHeight`, it gets rounded.
    if (sideItem && sideItem.sideItemHeight && Math.abs(sideItem.sideItemHeight - newHeight) >= 1.0) {
      state.current.sideItems = [...state.current.sideItems];
      rerender();
    }
  }, [rerender]);
  
  const sideItemsPlacementContext: SideItemsPlacementContextType = useMemo(() => ({
    addSideItem, removeSideItem, resizeItem
  }), [addSideItem, removeSideItem, resizeItem]);
  
  const sideItemsDisplayContext: SideItemsDisplayContextType = useMemo(() => ({
    sideItems: state.current.sideItems
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }), [renderCount, state.current.sideItems]);
  
  useEffect(() => {
    // Watch contents for size-change of the central column, which will happen
    // if text reflows because browser width changed, or if the user
    // opened/closed a collapsible section, or various other things. When that
    // happens, rerender, so that the vertical positions of anchor elements are
    // rechecked.
    const contentsDiv = contentsRef.current;
    if (contentsDiv) {
      const resizeObserver = new ResizeObserver((_entries) => {
        rerender();
      });
      resizeObserver.observe(contentsDiv);
      
      return () => {
        resizeObserver.disconnect();
      };
    }
  }, [rerender]);
  
  return (
    <SideItemsPlacementContext.Provider value={sideItemsPlacementContext}>
    <SideItemsDisplayContext.Provider value={sideItemsDisplayContext}>
      <div ref={contentsRef}>
        {children}
      </div>
    </SideItemsDisplayContext.Provider>
    </SideItemsPlacementContext.Provider>
  );
}

const SideItemsSidebar = ({classes}: {
  classes: ClassesType<typeof styles>,
}) => {
  const placementContext = useContext(SideItemsPlacementContext);
  const displayContext = useContext(SideItemsDisplayContext);
  const sideItemColumnRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!sideItemColumnRef.current) return;
    if (!displayContext) return;
    
    const sidebarColumnTop = getOffsetChainTop(sideItemColumnRef.current);

    // Place all the side-items in the container, without yet handling their
    // positioning. This makes it possible to measure their heights (which may
    // depend on the width of the column).
    for (const sideItem of displayContext.sideItems) {
      if (sideItem.container.parentNode === sideItemColumnRef.current) {
        continue;
      }
      if (sideItem.container.parentNode !== null) {
        sideItem.container.remove();
      }
      sideItemColumnRef.current.appendChild(sideItem.container);
    }
    
    // Measure side-item anchor positions and element heights
    // (Note that it's important to do the measurement all at once, and not
    // alternate between measuring and editing the DOM, for performance
    // reasons, as each edit invalidates layout and each measurement triggers
    // reflow if layout is invalidated.)
    for (let i=0; i<displayContext.sideItems.length; i++) {
      const sideItem = displayContext.sideItems[i];
      sideItem.anchorTop = getOffsetChainTop(sideItem.anchorEl) - sidebarColumnTop + sideItem.options.offsetTop;
      sideItem.anchorLeft = sideItem.anchorEl.offsetLeft;
      sideItem.sideItemHeight = sideItem.container.clientHeight;
    }
    
    // Sort side-items by their anchor position
    const sortedSideItems = orderBy(displayContext.sideItems,
      [s => s.anchorTop, s => s.anchorLeft]
    );
    
    // Place them vertically
    let top = 0;
    for (let i=0; i<sortedSideItems.length; i++) {
      const sideItem = sortedSideItems[i];
      let newTop = Math.max(top, sideItem.anchorTop!);
      sideItem.container.setAttribute("style", `top:${newTop}px;`);
      top = newTop + sideItem.sideItemHeight!;
    }
    
    // Use a ResizeObserver to watch for size-changes of side-item containers
    const resizeObserver = new ResizeObserver((entries) => {
      if (placementContext) {
        for (let entry of entries) {
          placementContext.resizeItem(entry.target as HTMLElement, entry.contentRect.height);
        }
      }
    });
    for (const sideItem of displayContext.sideItems) {
      resizeObserver.observe(sideItem.container);
    }
    return () => {
      resizeObserver.disconnect();
    };
  }, [displayContext, placementContext]);

  return useMemo(() => <div
    className={classes.sidebar}
    ref={sideItemColumnRef}
  />, [classes]);
}

const SideItem = ({options, children}: {
  options?: Partial<SideItemOptions>,
  children: React.ReactNode
}) => {
  const placementContext = useContext(SideItemsPlacementContext);
  const anchorRef = useRef<HTMLSpanElement>(null);
  const [portalContainer, setPortalContainer] = useState<HTMLDivElement|null>(null);
  const mergedOptions: SideItemOptions = {...defaultSideItemOptions, ...options};
  
  useEffect(() => {
    if (placementContext && anchorRef.current) {
      const anchor = anchorRef.current;
      setPortalContainer(placementContext.addSideItem(anchor, mergedOptions));
      
      return () => {
        placementContext.removeSideItem(anchor);
        setPortalContainer(null);
      }
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [placementContext, JSON.stringify(mergedOptions)]);

  if (!placementContext) {
    return null;
  }

  return <span ref={anchorRef}>
    {portalContainer && createPortal(children, portalContainer)}
  </span>
}

export const useHasSideItemsSidebar = (): boolean => {
  return !!useContext(SideItemsPlacementContext);
}

const SideItemsContainerComponent = registerComponent('SideItemsContainer', SideItemsContainer, {styles});
const SideItemsSidebarComponent = registerComponent('SideItemsSidebar', SideItemsSidebar, {styles});
const SideItemComponent = registerComponent('SideItem', SideItem, {});

declare global {
  interface ComponentTypes {
    SideItemsContainer: typeof SideItemsContainerComponent,
    SideItemsSidebar: typeof SideItemsSidebarComponent,
    SideItem: typeof SideItemComponent
  }
}

1	import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';	3✔
2	import classNames from 'classnames';
3	import orderBy from 'lodash/orderBy';	1✔
4	import { createPortal } from 'react-dom';	1✔
5	import { useHover } from '@/components/common/withHover';
6	import { registerComponent } from '@/lib/vulcan-lib';	1✔
7	import { getOffsetChainTop } from '@/lib/utils/domUtil';	1✔
8
9	type SideItemOptions = {
10	format: "block"\|"icon"
11	offsetTop: number,
12	}
13	const defaultSideItemOptions: SideItemOptions = {	1✔
14	format: "block",
15	offsetTop: 0,
16	};
17
18	type SideItem = {
19	id: number
20	anchorEl: HTMLElement
21	container: HTMLElement
22	options: SideItemOptions
23
24	anchorTop: number\|null
25	anchorLeft: number\|null
26	sideItemHeight: number\|null
27	}
28	type SideItemsState = {
29	maxId: number
30	sideItems: SideItem[]
31	}
32	type SideItemsPlacementContextType = {
33	addSideItem: (anchorEl: HTMLElement, options: SideItemOptions) => HTMLDivElement
34	removeSideItem: (anchorEl: HTMLElement) => void
35	resizeItem: (anchorEl: HTMLElement, newHeight: number) => void
36	}
37	type SideItemsDisplayContextType = {
38	sideItems: SideItem[]
39	};
40	const SideItemsPlacementContext = createContext<SideItemsPlacementContextType\|null>(null);	1✔
41	const SideItemsDisplayContext = createContext<SideItemsDisplayContextType\|null>(null);	1✔
42
43	export type SideItemContentContextType = {
44	};
45	export const SideItemContentContext = createContext<SideItemContentContextType\|null>(null);	1✔
46
47	export const styles = (theme: ThemeType) => ({	2✔
48	sideItem: {
49	position: "absolute",
50	width: "100%",
51	},
52	sidebar: {
53	position: "relative",
54	},
55	});
56
57	///////////////////////////////////////////////////////////////////////////
58
59	function useForceRerender() {
60	const [renderCount, rerender] = useReducer(c=>c+1, 0);	×
61	return {renderCount, rerender};	×
62	}
63
64	const SideItemsContainer = ({classes, children}: {	1✔
65	classes: ClassesType<typeof styles>,
66	children: React.ReactNode
67	}) => {
68	const state = useRef<SideItemsState>({sideItems: [], maxId: -1});	×
69	const contentsRef = useRef<HTMLDivElement\|null>(null);	×
70	const {renderCount, rerender} = useForceRerender();	×
71
72	const addSideItem = useCallback((anchorEl: HTMLElement, options: SideItemOptions) => {	×
73	const container = document.createElement("div");	×
74	container.setAttribute("class", classes.sideItem);	×
75	state.current.sideItems = [...state.current.sideItems, {	×
76	id: ++state.current.maxId,
77	anchorEl, container,
78	options,
79	anchorTop: null, anchorLeft: null, sideItemHeight: null,
80	}];
81	rerender();	×
82	return container;	×
83	}, [rerender, classes]);
84
85	const removeSideItem = useCallback((anchorEl: HTMLElement) => {	×
86	const removedItemIndex = state.current.sideItems.findIndex(s => s.anchorEl === anchorEl);	×
87	if (removedItemIndex >= 0) {	×
88	const [removedItem] = state.current.sideItems.splice(removedItemIndex, 1);	×
89	if (removedItem) {	×
90	removedItem.container.remove();	×
91	}
92	rerender();	×
93	}
94	}, [rerender]);
95
96	const resizeItem = useCallback((anchorEl: HTMLElement, newHeight: number) => {	×
97	// Find the corresponding sideItem
98	const sideItem = state.current.sideItems.find(s => s.container === anchorEl);	×
99
100	// Compare height reported by the ResizeObserver to the last known height.
101	// Round down, becauses the ResizeObserver may report a non-integer size,
102	// but when we measure it with `Element.clientHeight`, it gets rounded.
103	if (sideItem && sideItem.sideItemHeight && Math.abs(sideItem.sideItemHeight - newHeight) >= 1.0) {	×
104	state.current.sideItems = [...state.current.sideItems];	×
105	rerender();	×
106	}
107	}, [rerender]);
108
109	const sideItemsPlacementContext: SideItemsPlacementContextType = useMemo(() => ({	×
110	addSideItem, removeSideItem, resizeItem
111	}), [addSideItem, removeSideItem, resizeItem]);
112
113	const sideItemsDisplayContext: SideItemsDisplayContextType = useMemo(() => ({	×
114	sideItems: state.current.sideItems
115	// eslint-disable-next-line react-hooks/exhaustive-deps
116	}), [renderCount, state.current.sideItems]);
117
118	useEffect(() => {	×
119	// Watch contents for size-change of the central column, which will happen
120	// if text reflows because browser width changed, or if the user
121	// opened/closed a collapsible section, or various other things. When that
122	// happens, rerender, so that the vertical positions of anchor elements are
123	// rechecked.
124	const contentsDiv = contentsRef.current;	×
125	if (contentsDiv) {	×
126	const resizeObserver = new ResizeObserver((_entries) => {	×
127	rerender();	×
128	});
129	resizeObserver.observe(contentsDiv);	×
130
131	return () => {	×
132	resizeObserver.disconnect();	×
133	};
134	}
135	}, [rerender]);
136
137	return (	×
138	<SideItemsPlacementContext.Provider value={sideItemsPlacementContext}>
139	<SideItemsDisplayContext.Provider value={sideItemsDisplayContext}>
140	<div ref={contentsRef}>
141	{children}
142	</div>
143	</SideItemsDisplayContext.Provider>
144	</SideItemsPlacementContext.Provider>
145	);
146	}
147
148	const SideItemsSidebar = ({classes}: {	1✔
149	classes: ClassesType<typeof styles>,
150	}) => {
151	const placementContext = useContext(SideItemsPlacementContext);	×
152	const displayContext = useContext(SideItemsDisplayContext);	×
153	const sideItemColumnRef = useRef<HTMLDivElement>(null);	×
154
155	useEffect(() => {	×
156	if (!sideItemColumnRef.current) return;	×
157	if (!displayContext) return;	×
158
159	const sidebarColumnTop = getOffsetChainTop(sideItemColumnRef.current);	×
160
161	// Place all the side-items in the container, without yet handling their
162	// positioning. This makes it possible to measure their heights (which may
163	// depend on the width of the column).
164	for (const sideItem of displayContext.sideItems) {	×
165	if (sideItem.container.parentNode === sideItemColumnRef.current) {	×
166	continue;	×
167	}
168	if (sideItem.container.parentNode !== null) {	×
169	sideItem.container.remove();	×
170	}
171	sideItemColumnRef.current.appendChild(sideItem.container);	×
172	}
173
174	// Measure side-item anchor positions and element heights
175	// (Note that it's important to do the measurement all at once, and not
176	// alternate between measuring and editing the DOM, for performance
177	// reasons, as each edit invalidates layout and each measurement triggers
178	// reflow if layout is invalidated.)
179	for (let i=0; i<displayContext.sideItems.length; i++) {	×
180	const sideItem = displayContext.sideItems[i];	×
181	sideItem.anchorTop = getOffsetChainTop(sideItem.anchorEl) - sidebarColumnTop + sideItem.options.offsetTop;	×
182	sideItem.anchorLeft = sideItem.anchorEl.offsetLeft;	×
183	sideItem.sideItemHeight = sideItem.container.clientHeight;	×
184	}
185
186	// Sort side-items by their anchor position
187	const sortedSideItems = orderBy(displayContext.sideItems,	×
188	[s => s.anchorTop, s => s.anchorLeft]	×
189	);
190
191	// Place them vertically
192	let top = 0;	×
193	for (let i=0; i<sortedSideItems.length; i++) {	×
194	const sideItem = sortedSideItems[i];	×
195	let newTop = Math.max(top, sideItem.anchorTop!);	×
196	sideItem.container.setAttribute("style", `top:${newTop}px;`);	×
197	top = newTop + sideItem.sideItemHeight!;	×
198	}
199
200	// Use a ResizeObserver to watch for size-changes of side-item containers
201	const resizeObserver = new ResizeObserver((entries) => {	×
202	if (placementContext) {	×
203	for (let entry of entries) {	×
204	placementContext.resizeItem(entry.target as HTMLElement, entry.contentRect.height);	×
205	}
206	}
207	});
208	for (const sideItem of displayContext.sideItems) {	×
209	resizeObserver.observe(sideItem.container);	×
210	}
211	return () => {	×
212	resizeObserver.disconnect();	×
213	};
214	}, [displayContext, placementContext]);
215
216	return useMemo(() => <div	×
217	className={classes.sidebar}
218	ref={sideItemColumnRef}
219	/>, [classes]);
220	}
221
222	const SideItem = ({options, children}: {	1✔
223	options?: Partial<SideItemOptions>,
224	children: React.ReactNode
225	}) => {
226	const placementContext = useContext(SideItemsPlacementContext);	×
227	const anchorRef = useRef<HTMLSpanElement>(null);	×
228	const [portalContainer, setPortalContainer] = useState<HTMLDivElement\|null>(null);	×
229	const mergedOptions: SideItemOptions = {...defaultSideItemOptions, ...options};	×
230
231	useEffect(() => {	×
232	if (placementContext && anchorRef.current) {	×
233	const anchor = anchorRef.current;	×
234	setPortalContainer(placementContext.addSideItem(anchor, mergedOptions));	×
235
236	return () => {	×
237	placementContext.removeSideItem(anchor);	×
238	setPortalContainer(null);	×
239	}
240	}
241	// eslint-disable-next-line react-hooks/exhaustive-deps
242	}, [placementContext, JSON.stringify(mergedOptions)]);
243
244	if (!placementContext) {	×
245	return null;	×
246	}
247
248	return <span ref={anchorRef}>	×
249	{portalContainer && createPortal(children, portalContainer)}	×
250	</span>
251	}
252
253	export const useHasSideItemsSidebar = (): boolean => {	1✔
NEW 254	return !!useContext(SideItemsPlacementContext);	×
255	}
256
257	const SideItemsContainerComponent = registerComponent('SideItemsContainer', SideItemsContainer, {styles});	1✔
258	const SideItemsSidebarComponent = registerComponent('SideItemsSidebar', SideItemsSidebar, {styles});	1✔
259	const SideItemComponent = registerComponent('SideItem', SideItem, {});	1✔
260
261	declare global {
262	interface ComponentTypes {
263	SideItemsContainer: typeof SideItemsContainerComponent,
264	SideItemsSidebar: typeof SideItemsSidebarComponent,
265	SideItem: typeof SideItemComponent
266	}
267	}

ForumMagnum / ForumMagnum / 10715141464

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