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 53 54 55 56 57 | 1x | import { Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { SEARCH_ANALYTICS } from "./constants";
import { FilterHeading, FilterHeadingProps } from "./FilterHeading";
import testIds from "./testIds";
import { eventName } from "../../contexts/Analytics";
export interface RadioFilterProps extends FilterHeadingProps {
"data-testid"?: string;
value?: string;
onValueChange: (value: string) => void;
options: {
display: string;
value: string;
}[];
}
export const RadioFilter: FunctionComponent<RadioFilterProps> = ({
"data-testid": dataTestid,
value: checkedValue,
onValueChange,
options,
name,
hint,
}) => {
return (
<Stack data-testid={dataTestid} spacing={1}>
<FilterHeading hint={hint} name={name} />
<RadioGroup onChange={onValueChange} value={checkedValue}>
<Stack spacing={1}>
{options.map(({ display, value }) => {
const dataEvent = eventName(
SEARCH_ANALYTICS.FILTERS,
name,
"Filter",
display
);
return (
<Radio data-event={dataEvent} key={value} value={value}>
<Text
color="textTertiary"
data-event={dataEvent}
data-testid={testIds.filterItem}
data-value={value}
isTruncated
>
{display}
</Text>
</Radio>
);
})}
</Stack>
</RadioGroup>
</Stack>
);
};
|