#7225

Committed 29 Mar 2024 06:54PM UTC coverage: 5.935%. First build

Build # #7225

Build Type

Pull #5841

travis-ci

Pull Request Pull Request #5841: Client 5739

Run Details

183 of 8887 branches covered (2.06%)

Branch coverage included in aggregate %.

18 of 123 new or added lines in 14 files covered. (14.63%)

1322 of 16472 relevant lines covered (8.03%)

0.19 hits per line

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

0.0

/src/domain/shared/components/SearchTagsInput/SearchTagsInput.tsx

import { gutters } from '@/core/ui/grid/utils';
import { Chip, SxProps } from '@mui/material';
import Autocomplete, { AutocompleteProps, AutocompleteRenderInputParams } from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { useCallback, useMemo } from 'react';
import uniqSortedByOccurrences from './uniqSortedByOccurrences';

export interface SearchTagsInputProps {
  value: string[];
  availableTags?: string[];
  onChange?: AutocompleteProps<string, true, undefined, true>['onChange'];
  label?: string;
  placeholder?: string;
  disableCloseOnSelect?: boolean;
  fullWidth?: boolean;
  sx?: SxProps;
}

const SearchTagsInput = ({
  value,
  availableTags = [],
  onChange,
  label,
  placeholder,
  disableCloseOnSelect = true,
  fullWidth = true,
  sx,
}: SearchTagsInputProps) => {
  const options = useMemo(() => uniqSortedByOccurrences(availableTags), [availableTags]);

  const handleChange: SearchTagsInputProps['onChange'] = (event, value, reason) => {
    const trimmedValues = value.map(x => x.trim().toLowerCase());
    onChange?.(event, trimmedValues, reason);
  };

  const renderInput = useCallback(
    (props: AutocompleteRenderInputParams) => (
      <TextField
        {...props}
        variant="outlined"
        placeholder={placeholder}
        label={label}
        sx={{
          '.MuiTextField-root input': {
            height: gutters(),
            paddingY: 0,
          },
        }}
      />
    ),
    [label, placeholder]
  );

  return (
    <Autocomplete
      aria-label="Filter"
      multiple
      fullWidth={fullWidth}
      freeSolo
      disableCloseOnSelect={disableCloseOnSelect}
      options={options}
      getOptionLabel={option => option}
      value={value}
      isOptionEqualToValue={(option, value) => option === value}
      groupBy={() => 'Tags'}
      onChange={handleChange}
      size="small"
      sx={{
        '.MuiAutocomplete-inputRoot.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
          backgroundColor: 'background.paper',
          paddingY: 0.25,
          paddingLeft: 0.25,
          '.MuiAutocomplete-input': {
            height: gutters(),
          },
        },
        ...sx,
      }}
      renderTags={(value, getTagProps) =>
        value.map((option, index) => (
          <Chip color="primary" variant="outlined" label={option} {...getTagProps({ index })} />
        ))
      }
      renderInput={renderInput}
    />
  );
};

export default SearchTagsInput;

1	import { gutters } from '@/core/ui/grid/utils';
2	import { Chip, SxProps } from '@mui/material';
3	import Autocomplete, { AutocompleteProps, AutocompleteRenderInputParams } from '@mui/material/Autocomplete';
4	import TextField from '@mui/material/TextField';
5	import { useCallback, useMemo } from 'react';
6	import uniqSortedByOccurrences from './uniqSortedByOccurrences';
7
8	export interface SearchTagsInputProps {
9	value: string[];
10	availableTags?: string[];
11	onChange?: AutocompleteProps<string, true, undefined, true>['onChange'];
12	label?: string;
13	placeholder?: string;
14	disableCloseOnSelect?: boolean;
15	fullWidth?: boolean;
16	sx?: SxProps;
17	}	×
18
19	const SearchTagsInput = ({	×
20	value,
21	availableTags = [],
22	onChange,
23	label,	×
24	placeholder,
25	disableCloseOnSelect = true,	×
26	fullWidth = true,
27	sx,	×
28	}: SearchTagsInputProps) => {	×
29	const options = useMemo(() => uniqSortedByOccurrences(availableTags), [availableTags]);	×
30
31	const handleChange: SearchTagsInputProps['onChange'] = (event, value, reason) => {
32	const trimmedValues = value.map(x => x.trim().toLowerCase());	×
33	onChange?.(event, trimmedValues, reason);
NEW 34	};	×
35
36	const renderInput = useCallback(
37	(props: AutocompleteRenderInputParams) => (
38	<TextField
39	{...props}
40	variant="outlined"
41	placeholder={placeholder}
42	label={label}
43	sx={{
44	'.MuiTextField-root input': {
45	height: gutters(),
46	paddingY: 0,
47	},
48	}}
49	/>
50	),	×
51	[label, placeholder]
52	);
53
54	return (
55	<Autocomplete
56	aria-label="Filter"
57	multiple
58	fullWidth={fullWidth}
59	freeSolo	×
60	disableCloseOnSelect={disableCloseOnSelect}
61	options={options}	×
62	getOptionLabel={option => option}	×
63	value={value}
64	isOptionEqualToValue={(option, value) => option === value}
65	groupBy={() => 'Tags'}
66	onChange={handleChange}
67	size="small"
68	sx={{
69	'.MuiAutocomplete-inputRoot.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
70	backgroundColor: 'background.paper',
71	paddingY: 0.25,
72	paddingLeft: 0.25,
73	'.MuiAutocomplete-input': {
74	height: gutters(),
75	},
76	},	×
77	...sx,	×
78	}}
79	renderTags={(value, getTagProps) =>
80	value.map((option, index) => (
81	<Chip color="primary" variant="outlined" label={option} {...getTagProps({ index })} />
82	))
83	}
84	renderInput={renderInput}
85	/>
86	);
87	};
88
89	export default SearchTagsInput;

alkem-io / client-web / #7225

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