()
| 12 | type FABMode = 'flat' | 'elevated'; |
| 13 | |
| 14 | const FABExample = () => { |
| 15 | const [visible, setVisible] = React.useState<boolean>(true); |
| 16 | const [toggleStackOnLongPress, setToggleStackOnLongPress] = |
| 17 | React.useState<boolean>(false); |
| 18 | const [open, setOpen] = React.useState<boolean>(false); |
| 19 | const { isV3 } = useExampleTheme(); |
| 20 | |
| 21 | const variants = ['primary', 'secondary', 'tertiary', 'surface']; |
| 22 | const sizes = ['small', 'medium', 'large']; |
| 23 | const modes = ['flat', 'elevated']; |
| 24 | |
| 25 | return ( |
| 26 | <ScreenWrapper style={styles.container}> |
| 27 | <View style={styles.column}> |
| 28 | <FAB |
| 29 | icon={visible ? 'eye-off' : 'eye'} |
| 30 | size="small" |
| 31 | style={styles.fab} |
| 32 | onPress={() => setVisible(!visible)} |
| 33 | /> |
| 34 | </View> |
| 35 | {isV3 && ( |
| 36 | <> |
| 37 | <View style={styles.row}> |
| 38 | {variants.map((variant) => ( |
| 39 | <View style={styles.fabVariant} key={variant}> |
| 40 | <FAB |
| 41 | icon="pencil" |
| 42 | style={styles.fab} |
| 43 | onPress={() => {}} |
| 44 | visible={visible} |
| 45 | variant={variant as FABVariant} |
| 46 | /> |
| 47 | {visible && <Text variant="bodyMedium">{variant}</Text>} |
| 48 | </View> |
| 49 | ))} |
| 50 | </View> |
| 51 | <View style={styles.row}> |
| 52 | {sizes.map((size) => ( |
| 53 | <View style={styles.fabVariant} key={size}> |
| 54 | <FAB |
| 55 | icon="pencil" |
| 56 | style={styles.fab} |
| 57 | onPress={() => {}} |
| 58 | visible={visible} |
| 59 | size={size as FABSize} |
| 60 | /> |
| 61 | {visible && <Text variant="bodyMedium">{size}</Text>} |
| 62 | </View> |
| 63 | ))} |
| 64 | </View> |
| 65 | <View style={styles.row}> |
| 66 | {modes.map((mode) => ( |
| 67 | <View style={styles.fabVariant} key={mode}> |
| 68 | <FAB |
| 69 | icon="pencil" |
| 70 | style={styles.fab} |
| 71 | onPress={() => {}} |
nothing calls this directly
no test coverage detected
searching dependent graphs…