10181466301

Committed 31 Jul 2024 01:45PM UTC coverage: 32.069% (-0.01%) from 32.082%

Build # 10181466301

Build Type

Pull #9554

github

Committed by

oetherington

Commit Message

Add digest signup in notifications popover

Pull Request Pull Request #9554: EA Notifications redesign

Run Details

4936 of 40104 branches covered (12.31%)

Branch coverage included in aggregate %.

49 of 101 new or added lines in 13 files covered. (48.51%)

3 existing lines in 2 files now uncovered.

28752 of 64943 relevant lines covered (44.27%)

180.71 hits per line

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

27.59

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

import { registerComponent } from '../../lib/vulcan-lib';
import React, {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';

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,
}: {
  classes: ClassesType,
  children: ReactNode,
  tooltip?: boolean,
  allowOverflow?: boolean,
  overflowPadding?: number,
  flip?: boolean,
  open: boolean,
  placement?: PopperPlacementType,
  anchorEl: any,
  className?: string,
  clickable?: boolean,
  hideOnTouchScreens?: boolean,
}) => {
  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 } = usePopper(anchorEl, popperElement, {
    placement,
    modifiers: [
      {
        name: 'computeStyles',
        options: {
          gpuAcceleration: false, // true by default
        },
      },
      ...flipModifier,
      ...preventOverflowModifier
    ],
  });

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

ForumMagnum / ForumMagnum / 10181466301

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