11201424499

Committed 06 Oct 2024 11:23AM UTC coverage: 31.722% (+0.008%) from 31.714%

Build # 11201424499

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9841 from ForumMagnum/wh-debate-week-comments-2024-10

Debate week UI: Commenting from the banner

Run Details

5060 of 41690 branches covered (12.14%)

Branch coverage included in aggregate %.

33 of 113 new or added lines in 7 files covered. (29.2%)

4 existing lines in 1 file now uncovered.

29561 of 67448 relevant lines covered (43.83%)

181.48 hits per line

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

22.86

/packages/lesswrong/components/common/LWPopper.tsx

import { registerComponent } from '../../lib/vulcan-lib';
import React, {MutableRefObject, ReactNode, useState} from 'react';
import type { PopperPlacementType } from '@material-ui/core/Popper'
import classNames from 'classnames';
import { usePopper } from 'react-popper';
import { createPortal } from 'react-dom';
import type { State } from '@popperjs/core/lib/types';

const styles = (theme: ThemeType): JssStyles => ({
  popper: {
    position: "absolute",
    zIndex: theme.zIndexes.lwPopper
  },
  default: {
    position: "relative",
    zIndex: theme.zIndexes.lwPopperTooltip,
  },
  tooltip: {
    backgroundColor: theme.palette.panelBackground.tooltipBackground,
    borderRadius: 3,
    ...theme.typography.commentStyle,
    ...theme.typography.body2,
    fontSize: "1rem",
    padding: theme.spacing.unit,
    color: theme.palette.text.tooltipText,
    position: "relative",
    zIndex: theme.zIndexes.lwPopperTooltip,
  },
  noMouseEvents: {
    pointerEvents: "none",
  },
  hideOnTouchScreens: {
    "@media (pointer:coarse)": {
      display: "none",
    },
  },
})

// This is a wrapper around the Popper library so we can easily replace it with different versions and
// implementations
const LWPopper = ({
  classes,
  children,
  className,
  tooltip=false,
  allowOverflow,
  overflowPadding,
  flip,
  open,
  anchorEl,
  placement,
  clickable = true,
  hideOnTouchScreens,
  updateRef
}: {
  classes: ClassesType,
  children: ReactNode,
  tooltip?: boolean,
  allowOverflow?: boolean,
  overflowPadding?: number,
  flip?: boolean,
  open: boolean,
  placement?: PopperPlacementType,
  anchorEl: any,
  className?: string,
  clickable?: boolean,
  hideOnTouchScreens?: boolean,
  updateRef?: MutableRefObject<(() => Promise<Partial<State>>) | null | undefined>
}) => {
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);

  const flipModifier = !flip && allowOverflow ? [
    {
      name: 'flip',
      enabled: false,
    }
  ] : [];

  const preventOverflowModifier = [
    {
      name: 'preventOverflow',
      enabled: !allowOverflow,
      options: {padding: overflowPadding},
    }
  ];

  const { styles, attributes, update } = usePopper(anchorEl, popperElement, {
    placement,
    modifiers: [
      {
        name: 'computeStyles',
        options: {
          gpuAcceleration: false, // true by default
        },
      },
      ...flipModifier,
      ...preventOverflowModifier
    ],
  });

  if (updateRef && update) {
    updateRef.current = update
  }

  if (!open)
    return null;
  
  // In some cases, interacting with something inside a popper will cause a rerender that detaches the anchorEl
  // This happened in hovers on in-line reacts, and the button to create a new react ended up on the top-left corner of the page
  if (anchorEl && !anchorEl.isConnected) {
    return null;
  }
  
  // We use createPortal here to avoid having to deal with overflow problems and styling from the current child
  // context, by placing the Popper element directly into the document root
  // Rest of usage from https://popper.js.org/react-popper/v2/
  return <>{
    createPortal(
      <div
        ref={setPopperElement}
        className={classNames({
          [classes.tooltip]: tooltip,
          [classes.default]: !tooltip,
          [classes.noMouseEvents]: !clickable,
          [classes.hideOnTouchScreens]: hideOnTouchScreens},
          className
        )}
        style={styles.popper}
        {...attributes.popper}
      >
        { children }
      </div>,
      document.body
    )
  }</>
};

const LWPopperComponent = registerComponent('LWPopper', LWPopper, {styles});

declare global {
  interface ComponentTypes {
    LWPopper: typeof LWPopperComponent
  }
}

1	import { registerComponent } from '../../lib/vulcan-lib';	1✔
2	import React, {MutableRefObject, ReactNode, useState} from 'react';	1✔
3	import type { PopperPlacementType } from '@material-ui/core/Popper'
4	import classNames from 'classnames';	1✔
5	import { usePopper } from 'react-popper';	1✔
6	import { createPortal } from 'react-dom';	1✔
7	import type { State } from '@popperjs/core/lib/types';
8
9	const styles = (theme: ThemeType): JssStyles => ({	1✔
10	popper: {
11	position: "absolute",
12	zIndex: theme.zIndexes.lwPopper
13	},
14	default: {
15	position: "relative",
16	zIndex: theme.zIndexes.lwPopperTooltip,
17	},
18	tooltip: {
19	backgroundColor: theme.palette.panelBackground.tooltipBackground,
20	borderRadius: 3,
21	...theme.typography.commentStyle,
22	...theme.typography.body2,
23	fontSize: "1rem",
24	padding: theme.spacing.unit,
25	color: theme.palette.text.tooltipText,
26	position: "relative",
27	zIndex: theme.zIndexes.lwPopperTooltip,
28	},
29	noMouseEvents: {
30	pointerEvents: "none",
31	},
32	hideOnTouchScreens: {
33	"@media (pointer:coarse)": {
34	display: "none",
35	},
36	},
37	})
38
39	// This is a wrapper around the Popper library so we can easily replace it with different versions and
40	// implementations
41	const LWPopper = ({	1✔
42	classes,
43	children,
44	className,
45	tooltip=false,	×
46	allowOverflow,
47	overflowPadding,
48	flip,
49	open,
50	anchorEl,
51	placement,
52	clickable = true,	×
53	hideOnTouchScreens,
54	updateRef
55	}: {
56	classes: ClassesType,
57	children: ReactNode,
58	tooltip?: boolean,
59	allowOverflow?: boolean,
60	overflowPadding?: number,
61	flip?: boolean,
62	open: boolean,
63	placement?: PopperPlacementType,
64	anchorEl: any,
65	className?: string,
66	clickable?: boolean,
67	hideOnTouchScreens?: boolean,
68	updateRef?: MutableRefObject<(() => Promise<Partial<State>>) \| null \| undefined>
69	}) => {
70	const [popperElement, setPopperElement] = useState<HTMLElement \| null>(null);	×
71
72	const flipModifier = !flip && allowOverflow ? [	×
73	{
74	name: 'flip',
75	enabled: false,
76	}
77	] : [];
78
79	const preventOverflowModifier = [	×
80	{
81	name: 'preventOverflow',
82	enabled: !allowOverflow,
83	options: {padding: overflowPadding},
84	}
85	];
86
NEW 87	const { styles, attributes, update } = usePopper(anchorEl, popperElement, {	×
88	placement,
89	modifiers: [
90	{
91	name: 'computeStyles',
92	options: {
93	gpuAcceleration: false, // true by default
94	},
95	},
96	...flipModifier,
97	...preventOverflowModifier
98	],
99	});
100
NEW 101	if (updateRef && update) {	×
NEW 102	updateRef.current = update	×
103	}
104
105	if (!open)	×
106	return null;	×
107
108	// In some cases, interacting with something inside a popper will cause a rerender that detaches the anchorEl
109	// This happened in hovers on in-line reacts, and the button to create a new react ended up on the top-left corner of the page
110	if (anchorEl && !anchorEl.isConnected) {	×
111	return null;	×
112	}
113
114	// We use createPortal here to avoid having to deal with overflow problems and styling from the current child
115	// context, by placing the Popper element directly into the document root
116	// Rest of usage from https://popper.js.org/react-popper/v2/
117	return <>{	×
118	createPortal(
119	<div
120	ref={setPopperElement}
121	className={classNames({
122	[classes.tooltip]: tooltip,
123	[classes.default]: !tooltip,
124	[classes.noMouseEvents]: !clickable,
125	[classes.hideOnTouchScreens]: hideOnTouchScreens},
126	className
127	)}
128	style={styles.popper}
129	{...attributes.popper}
130	>
131	{ children }
132	</div>,
133	document.body
134	)
135	}</>
136	};
137
138	const LWPopperComponent = registerComponent('LWPopper', LWPopper, {styles});	1✔
139
140	declare global {
141	interface ComponentTypes {
142	LWPopper: typeof LWPopperComponent
143	}
144	}

ForumMagnum / ForumMagnum / 11201424499

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