8853331699

Committed 26 Apr 2024 07:27PM UTC coverage: 31.959% (+0.06%) from 31.904%

Build # 8853331699

Build Type

push

github

Committed by

oetherington

Commit Message

Tidy up dropdown multiselect padding

Run Details

4709 of 38529 branches covered (12.22%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

7 existing lines in 2 files now uncovered.

27532 of 62354 relevant lines covered (44.15%)

179.81 hits per line

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

37.93

/packages/lesswrong/components/common/ForumDropdownMultiselect.tsx

import React, { useState } from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import Menu from '@material-ui/core/Menu';
import { QueryLink } from '../../lib/reactRouterWrapper';
import Button from '@material-ui/core/Button';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import classNames from 'classnames';
import { SettingsOption } from '../../lib/collections/posts/dropdownOptions';
import { isFriendlyUI } from '../../themes/forumTheme';

const styles = (theme: ThemeType) => ({
  root: {
    ...theme.typography.body2,
    ...theme.typography.commentStyle,
    color: theme.palette.grey[600],
    textAlign: "center",
    ...(!isFriendlyUI && {
      "& button:hover": {
        backgroundColor: "transparent",
      },
    }),
  },
  button: {
    textTransform: "none",
    boxShadow: "none",
    padding: 0,
    fontSize: "14px",
    minHeight: 32,
    minWidth: 'unset',
    cursor: "pointer",
    color: theme.palette.primary.main,
    paddingLeft: 12,
    paddingRight: 6,
    backgroundColor: "transparent",
    ...(isFriendlyUI && {
      color: "inherit",
      "&:hover": {
        backgroundColor: theme.palette.grey[250],
        color: theme.palette.grey[1000],
      },
    }),
  },
  openButton: {
    ...(isFriendlyUI && {
      backgroundColor: theme.palette.grey[250],
      color: theme.palette.grey[1000],
    }),
  },
  dropdownIcon: {
    verticalAlign: "middle",
    position: "relative",
    ...(isFriendlyUI && { width: 10, fontSize: "18px!important", height: 12, marginLeft: 4, padding: 1}),
  },
  selectedIcon: {
    verticalAlign: "middle",
    position: "relative",
    color: theme.palette.primary.main,
    marginLeft: "auto",
    marginRight: 2,
    width: 19,
    height: 19,
  },
  menu: {
    marginTop: 28,
    ...(isFriendlyUI && {
      "& .MuiPopover-paper": {
        backgroundColor: theme.palette.dropdown.background,
        border: `1px solid ${theme.palette.dropdown.border}`,
      },
      "& a:hover": {
        opacity: "inherit",
      },
    }),
    '& .MuiList-padding': {
      padding: '4px 0px',
    }
  },
  menuNoQueryParam: {
    // I have absolutely no idea what causes it but having queryParam undefined causes the
    // menu to be positioned 18px too high
    marginTop: 46
  },
  menuItem: {
    ...(isFriendlyUI && {
      color: theme.palette.grey[1000],
      borderRadius: theme.borderRadius.small,
      padding: "6px 8px",
      margin: "0px 4px",
      fontSize: "14px",
      lineHeight: "14px",
      "&:hover": {
        backgroundColor: theme.palette.grey[250],
        color: theme.palette.grey[1000],
      },
    }),
    "&:focus": {
      outline: "none",
    },
  },
  iconLabel: {
    width: "16px !important",
  },
  optionIcon: {
    color: theme.palette.grey[600],
    marginRight: 12,
    width: "16px !important",
  },
});

const ForumDropdownMultiselect = ({
  values,
  options,
  queryParam,
  onSelect,
  paddingSize = 10,
  useIconLabel,
  classes,
  className,
}: {
  values: string[],
  options: Record<string, SettingsOption>,
  queryParam?: string,
  onSelect?: (value: string) => void,
  paddingSize?: number,
  useIconLabel?: boolean,
  classes: ClassesType<typeof styles>,
  className?: string,
}) => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)

  const {MenuItem, ForumIcon} = Components;

  const label = useIconLabel
    ? <ForumIcon icon={options[values[0]].icon!} className={classes.iconLabel} />
    : values.reduce((prev, next) => {
      const nextLabel = options[next].shortLabel || options[next].label
      if (!prev) return nextLabel
      return `${prev}, ${nextLabel}`
    }, '');

  const dropdownIcon = isFriendlyUI ? <ForumIcon icon="ThickChevronDown" className={classes.dropdownIcon} /> : <ArrowDropDownIcon className={classes.dropdownIcon}/>
  return (
    <div className={classNames(classes.root, className)}>
      <Button
        variant="contained"
        onClick={(e) => {
          setAnchorEl(e.currentTarget)
        }}
        className={classNames(classes.button, { [classes.openButton]: Boolean(anchorEl) })}
      >
        {label} {dropdownIcon}
      </Button>
      <Menu open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)} className={classNames(classes.menu, {[classes.menuNoQueryParam]: !queryParam})}>
        {Object.keys(options).map((option) => {
          const {icon, label} = options[option];
          const menuItem = <MenuItem
            key={option}
            value={option}
            onClick={() => {
              setAnchorEl(null);
              onSelect?.(option);
            }}
            className={classes.menuItem}
          >
            {icon && <ForumIcon icon={icon} className={classes.optionIcon} />}
            {label}
            {values.includes(option) && isFriendlyUI && (
              <>
                <div style={{width: paddingSize}} />
                <ForumIcon icon="Check" className={classes.selectedIcon} />
              </>
            )}
          </MenuItem>

          if (queryParam) {
            return <QueryLink key={option} query={{ [queryParam]: option }} merge>
              {menuItem}
            </QueryLink>
          }
          return menuItem
        })}
      </Menu>
    </div>
  );
}

const ForumDropdownMultiselectComponent = registerComponent(
  'ForumDropdownMultiselect',
  ForumDropdownMultiselect,
  {styles, stylePriority: -2},
);

declare global {
  interface ComponentTypes {
    ForumDropdownMultiselect: typeof ForumDropdownMultiselectComponent
  }
}

1	import React, { useState } from 'react';	1✔
2	import { registerComponent, Components } from '../../lib/vulcan-lib';	1✔
3	import Menu from '@material-ui/core/Menu';	1✔
4	import { QueryLink } from '../../lib/reactRouterWrapper';	1✔
5	import Button from '@material-ui/core/Button';	1✔
6	import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';	1✔
7	import classNames from 'classnames';	1✔
8	import { SettingsOption } from '../../lib/collections/posts/dropdownOptions';
9	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
10
11	const styles = (theme: ThemeType) => ({	1✔
12	root: {
13	...theme.typography.body2,
14	...theme.typography.commentStyle,
15	color: theme.palette.grey[600],
16	textAlign: "center",
17	...(!isFriendlyUI && {	1!
18	"& button:hover": {
19	backgroundColor: "transparent",
20	},
21	}),
22	},
23	button: {
24	textTransform: "none",
25	boxShadow: "none",
26	padding: 0,
27	fontSize: "14px",
28	minHeight: 32,
29	minWidth: 'unset',
30	cursor: "pointer",
31	color: theme.palette.primary.main,
32	paddingLeft: 12,
33	paddingRight: 6,
34	backgroundColor: "transparent",
35	...(isFriendlyUI && {	2✔
36	color: "inherit",
37	"&:hover": {
38	backgroundColor: theme.palette.grey[250],
39	color: theme.palette.grey[1000],
40	},
41	}),
42	},
43	openButton: {
44	...(isFriendlyUI && {	2✔
45	backgroundColor: theme.palette.grey[250],
46	color: theme.palette.grey[1000],
47	}),
48	},
49	dropdownIcon: {
50	verticalAlign: "middle",
51	position: "relative",
52	...(isFriendlyUI && { width: 10, fontSize: "18px!important", height: 12, marginLeft: 4, padding: 1}),	2✔
53	},
54	selectedIcon: {
55	verticalAlign: "middle",
56	position: "relative",
57	color: theme.palette.primary.main,
58	marginLeft: "auto",
59	marginRight: 2,
60	width: 19,
61	height: 19,
62	},
63	menu: {
64	marginTop: 28,
65	...(isFriendlyUI && {	2✔
66	"& .MuiPopover-paper": {
67	backgroundColor: theme.palette.dropdown.background,
68	border: `1px solid ${theme.palette.dropdown.border}`,
69	},
70	"& a:hover": {
71	opacity: "inherit",
72	},
73	}),
74	'& .MuiList-padding': {
75	padding: '4px 0px',
76	}
77	},
78	menuNoQueryParam: {
79	// I have absolutely no idea what causes it but having queryParam undefined causes the
80	// menu to be positioned 18px too high
81	marginTop: 46
82	},
83	menuItem: {
84	...(isFriendlyUI && {	2✔
85	color: theme.palette.grey[1000],
86	borderRadius: theme.borderRadius.small,
87	padding: "6px 8px",
88	margin: "0px 4px",
89	fontSize: "14px",
90	lineHeight: "14px",
91	"&:hover": {
92	backgroundColor: theme.palette.grey[250],
93	color: theme.palette.grey[1000],
94	},
95	}),
96	"&:focus": {
97	outline: "none",
98	},
99	},
100	iconLabel: {
101	width: "16px !important",
102	},
103	optionIcon: {
104	color: theme.palette.grey[600],
105	marginRight: 12,
106	width: "16px !important",
107	},
108	});
109
110	const ForumDropdownMultiselect = ({	1✔
111	values,
112	options,
113	queryParam,
114	onSelect,
115	paddingSize = 10,	×
116	useIconLabel,
117	classes,
118	className,
119	}: {
120	values: string[],
121	options: Record<string, SettingsOption>,
122	queryParam?: string,
123	onSelect?: (value: string) => void,
124	paddingSize?: number,
125	useIconLabel?: boolean,
126	classes: ClassesType<typeof styles>,
127	className?: string,
128	}) => {
129	const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null)	×
130
131	const {MenuItem, ForumIcon} = Components;	×
132
133	const label = useIconLabel	×
134	? <ForumIcon icon={options[values[0]].icon!} className={classes.iconLabel} />	×
135	: values.reduce((prev, next) => {
136	const nextLabel = options[next].shortLabel \|\| options[next].label	×
137	if (!prev) return nextLabel	×
138	return `${prev}, ${nextLabel}`	×
139	}, '');
140
141	const dropdownIcon = isFriendlyUI ? <ForumIcon icon="ThickChevronDown" className={classes.dropdownIcon} /> : <ArrowDropDownIcon className={classes.dropdownIcon}/>	×
UNCOV 142	return (	×
143	<div className={classNames(classes.root, className)}>
144	<Button
145	variant="contained"
146	onClick={(e) => {
147	setAnchorEl(e.currentTarget)	×
148	}}
149	className={classNames(classes.button, { [classes.openButton]: Boolean(anchorEl) })}
150	>
151	{label} {dropdownIcon}
152	</Button>
153	<Menu open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)} className={classNames(classes.menu, {[classes.menuNoQueryParam]: !queryParam})}>	×
154	{Object.keys(options).map((option) => {
155	const {icon, label} = options[option];	×
156	const menuItem = <MenuItem	×
157	key={option}
158	value={option}
159	onClick={() => {
160	setAnchorEl(null);	×
161	onSelect?.(option);	×
162	}}
163	className={classes.menuItem}
164	>
165	{icon && <ForumIcon icon={icon} className={classes.optionIcon} />}	×
166	{label}
167	{values.includes(option) && isFriendlyUI && (	×
168	<>
169	<div style={{width: paddingSize}} />
170	<ForumIcon icon="Check" className={classes.selectedIcon} />
171	</>
172	)}
173	</MenuItem>
174
175	if (queryParam) {	×
176	return <QueryLink key={option} query={{ [queryParam]: option }} merge>	×
177	{menuItem}
178	</QueryLink>
179	}
180	return menuItem	×
181	})}
182	</Menu>
183	</div>
184	);
185	}
186
187	const ForumDropdownMultiselectComponent = registerComponent(	1✔
188	'ForumDropdownMultiselect',
189	ForumDropdownMultiselect,
190	{styles, stylePriority: -2},
191	);
192
193	declare global {
194	interface ComponentTypes {
195	ForumDropdownMultiselect: typeof ForumDropdownMultiselectComponent
196	}
197	}

ForumMagnum / ForumMagnum / 8853331699

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