9872178807

Committed 10 Jul 2024 10:02AM UTC coverage: 31.993% (-0.01%) from 32.004%

Build # 9872178807

Build Type

Pull #9473

github

Committed by

oetherington

Commit Message

Add mobile filter dropdown for people directory

Pull Request Pull Request #9473: [EA] People directory mobile styles

Run Details

4891 of 39929 branches covered (12.25%)

Branch coverage included in aggregate %.

55 of 93 new or added lines in 34 files covered. (59.14%)

2 existing lines in 2 files now uncovered.

28511 of 64474 relevant lines covered (44.22%)

180.56 hits per line

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

9.62

/packages/lesswrong/components/peopleDirectory/PeopleDirectorySearchableFilter.tsx

import React, { Fragment, ReactNode, useCallback, useRef } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import type { SearchableMultiSelectResult } from "../hooks/useSearchableMultiSelect";

const styles = (theme: ThemeType) => ({
  search: {
    padding: 4,
  },
  noResults: {
    color: theme.palette.grey[600],
    padding: 16,
  },
  loading: {
    margin: 16,
  },
  results: {
    borderTop: `1px solid ${theme.palette.grey[300]}`,
    display: "flex",
    flexDirection: "column",
    padding: 4,
  },
  result: {
    padding: 8,
  },
  grandfatheredHr: {
    borderBottom: `1px solid ${theme.palette.grey[300]}`,
    width: "100%",
    margin: "4px 0",
  },
  clearAll: {
    padding: 8,
  },
});

const PeopleDirectorySearchableFilter = ({
  filter: {
    search,
    setSearch,
    loading,
    suggestions,
    selectedValues,
    summary,
    placeholder,
    clear,
    grandfatheredCount,
  },
  justContent,
  classes,
}: {
  filter: SearchableMultiSelectResult,
  justContent?: boolean,
  classes: ClassesType<typeof styles>,
}) => {
  const ref = useRef<HTMLInputElement | null>(null);

  const onOpen = useCallback(() => {
    setTimeout(() => {
      if (ref.current) {
        ref.current.focus()
      }
    }, 0);
  }, [ref]);

  const onClose = useCallback(() => {
    setSearch("");
  }, [setSearch]);

  const showLoading = loading;
  const showNoResults = search && !loading && suggestions.length === 0;
  const showResults = !loading && suggestions.length > 0;
  const showClearAll = !loading && selectedValues.length > 0;
  const showAnything = showLoading || showNoResults || showResults || showClearAll;

  const Wrapper = useCallback(({children}: {children: ReactNode}) => {
    if (justContent) {
      return (
        <>{children}</>
      );
    }
    return (
      <Components.PeopleDirectoryFilterDropdown
        title={summary}
        active={selectedValues.length > 0}
        onOpen={onOpen}
        onClose={onClose}
      >
        {children}
      </Components.PeopleDirectoryFilterDropdown>
    );
  }, [justContent, summary, selectedValues.length, onOpen, onClose]);

  const {
    PeopleDirectoryInput, Loading, PeopleDirectorySelectOption,
    PeopleDirectoryClearAll,
  } = Components;
  return (
    <Wrapper>
      <div className={classes.search}>
        <PeopleDirectoryInput
          value={search}
          setValue={setSearch}
          placeholder={placeholder}
          inputRef={ref}
          noBorder
        />
      </div>
      {showAnything &&
        <div className={classes.results}>
          {showLoading && <Loading className={classes.loading} />}
          {showNoResults &&
            <div className={classes.noResults}>No results found</div>
          }
          {showResults && suggestions.map((suggestion, i) => (
            <Fragment key={suggestion.value}>
              {!!grandfatheredCount && i === grandfatheredCount &&
                <div className={classes.grandfatheredHr} />
              }
              <PeopleDirectorySelectOption
                state={suggestion}
                className={classes.result}
              />
            </Fragment>
          ))}
          {showClearAll &&
            <div className={classes.clearAll}>
              <PeopleDirectoryClearAll onClear={clear} />
            </div>
          }
        </div>
      }
    </Wrapper>
  );
}

const PeopleDirectorySearchableFilterComponent = registerComponent(
  "PeopleDirectorySearchableFilter",
  PeopleDirectorySearchableFilter,
  {styles},
);

declare global {
  interface ComponentTypes {
    PeopleDirectorySearchableFilter: typeof PeopleDirectorySearchableFilterComponent
  }
}

1	import React, { Fragment, ReactNode, useCallback, useRef } from "react";	1✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import type { SearchableMultiSelectResult } from "../hooks/useSearchableMultiSelect";
4
5	const styles = (theme: ThemeType) => ({	1✔
6	search: {
7	padding: 4,
8	},
9	noResults: {
10	color: theme.palette.grey[600],
11	padding: 16,
12	},
13	loading: {
14	margin: 16,
15	},
16	results: {
17	borderTop: `1px solid ${theme.palette.grey[300]}`,
18	display: "flex",
19	flexDirection: "column",
20	padding: 4,
21	},
22	result: {
23	padding: 8,
24	},
25	grandfatheredHr: {
26	borderBottom: `1px solid ${theme.palette.grey[300]}`,
27	width: "100%",
28	margin: "4px 0",
29	},
30	clearAll: {
31	padding: 8,
32	},
33	});
34
35	const PeopleDirectorySearchableFilter = ({	1✔
36	filter: {
37	search,
38	setSearch,
39	loading,
40	suggestions,
41	selectedValues,
42	summary,
43	placeholder,
44	clear,
45	grandfatheredCount,
46	},
47	justContent,
48	classes,
49	}: {
50	filter: SearchableMultiSelectResult,
51	justContent?: boolean,
52	classes: ClassesType<typeof styles>,
53	}) => {
54	const ref = useRef<HTMLInputElement \| null>(null);	×
55
56	const onOpen = useCallback(() => {	×
57	setTimeout(() => {	×
58	if (ref.current) {	×
59	ref.current.focus()	×
60	}
61	}, 0);
62	}, [ref]);
63
64	const onClose = useCallback(() => {	×
65	setSearch("");	×
66	}, [setSearch]);
67
68	const showLoading = loading;	×
69	const showNoResults = search && !loading && suggestions.length === 0;	×
70	const showResults = !loading && suggestions.length > 0;	×
71	const showClearAll = !loading && selectedValues.length > 0;	×
72	const showAnything = showLoading \|\| showNoResults \|\| showResults \|\| showClearAll;	×
73
NEW 74	const Wrapper = useCallback(({children}: {children: ReactNode}) => {	×
NEW 75	if (justContent) {	×
NEW 76	return (	×
77	<>{children}</>
78	);
79	}
NEW 80	return (	×
81	<Components.PeopleDirectoryFilterDropdown
82	title={summary}
83	active={selectedValues.length > 0}
84	onOpen={onOpen}
85	onClose={onClose}
86	>
87	{children}
88	</Components.PeopleDirectoryFilterDropdown>
89	);
90	}, [justContent, summary, selectedValues.length, onOpen, onClose]);
91
92	const {
93	PeopleDirectoryInput, Loading, PeopleDirectorySelectOption,
94	PeopleDirectoryClearAll,
95	} = Components;	×
96	return (	×
97	<Wrapper>
98	<div className={classes.search}>
99	<PeopleDirectoryInput
100	value={search}
101	setValue={setSearch}
102	placeholder={placeholder}
103	inputRef={ref}
104	noBorder
105	/>
106	</div>
107	{showAnything &&	×
108	<div className={classes.results}>
109	{showLoading && <Loading className={classes.loading} />}	×
110	{showNoResults &&	×
111	<div className={classes.noResults}>No results found</div>
112	}
113	{showResults && suggestions.map((suggestion, i) => (	×
114	<Fragment key={suggestion.value}>	×
115	{!!grandfatheredCount && i === grandfatheredCount &&	×
116	<div className={classes.grandfatheredHr} />
117	}
118	<PeopleDirectorySelectOption
119	state={suggestion}
120	className={classes.result}
121	/>
122	</Fragment>
123	))}
124	{showClearAll &&	×
125	<div className={classes.clearAll}>
126	<PeopleDirectoryClearAll onClear={clear} />
127	</div>
128	}
129	</div>
130	}
131	</Wrapper>
132	);
133	}
134
135	const PeopleDirectorySearchableFilterComponent = registerComponent(	1✔
136	"PeopleDirectorySearchableFilter",
137	PeopleDirectorySearchableFilter,
138	{styles},
139	);
140
141	declare global {
142	interface ComponentTypes {
143	PeopleDirectorySearchableFilter: typeof PeopleDirectorySearchableFilterComponent
144	}
145	}

ForumMagnum / ForumMagnum / 9872178807

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