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 | 2x 3x 81x 3x 9x 3x 3x | import { useCallback } from "react";
import { FlashList } from "@shopify/flash-list";
import { makeStyles } from "@repo/ui/themes/makeStyles";
import { BriefReasonItem, ReasonItem } from "./ReasonItem";
interface Props {
value: string;
onChange: (reason: string) => void;
reasons: BriefReasonItem[];
}
export const BriefReason = ({ value, onChange, reasons }: Props) => {
const styles = useStyles();
const keyExtractor = useCallback((item: BriefReasonItem) => item.label, []);
const renderItem = useCallback(
({ item }: { item: BriefReasonItem }) => (
<ReasonItem
item={item}
selected={value === item.label}
onPress={onChange}
/>
),
[value, onChange],
);
return (
<FlashList
data={reasons}
horizontal={true}
showsHorizontalScrollIndicator={false}
keyExtractor={keyExtractor}
renderItem={renderItem}
contentContainerStyle={styles.contentContainer}
/>
);
};
const useStyles = makeStyles(({ metrics }) => ({
contentContainer: {
paddingLeft: metrics.spacing[6],
height: 260,
},
}));
|