Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 7x 7x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x | import { i18n } from '@/helpers/i18n';
import { extractReagentNames } from '@/utils/search-query/extractPositiveTerms';
import { parseSearchQuery } from '@/utils/search-query/parseSearchQuery';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useMemo } from 'react';
/** Props for {@link ChemicalChips}. */
interface ChemicalChipsProps {
/** The executed search query. */
query: string;
/** Called with the reagent name when a chip is clicked. */
onSelect: (name: string) => void;
}
/**
* One clickable chip per reagent in the executed query. A boolean query such as
* `(sodium OR potassium) hydroxide OR potassium carbonate` expands to three chips.
* @component
* @category Components
* @group Chemical Info
* @param props - See {@link ChemicalChipsProps}.
* @returns The chip row, or nothing when the query names no reagents.
* @example
* ```tsx
* <ChemicalChips query="acetone" onSelect={setSelected} />
* ```
* @source
*/
export function ChemicalChips({ query, onSelect }: ChemicalChipsProps) {
const names = useMemo(() => extractReagentNames(parseSearchQuery(query).ast), [query]);
if (names.length === 0) return null;
return (
<Stack direction="row" spacing={0.5} useFlexGap flexWrap="wrap" alignItems="center">
<Typography variant="body2" fontWeight={600}>
{i18n('chem_info_searched_for')}
</Typography>
{names.map((name) => (
<Chip
key={name.toLowerCase()}
size="small"
label={name}
onClick={() => onSelect(name)}
aria-label={i18n('chem_info_chip_aria', [name])}
/>
))}
</Stack>
);
}
|