react-native-ficus-ui/apps/examples/app/components/Radio.tsx at 4e0d3f120116fbd25d9956f9fb0640246096b2f0 · BearStudio/react-native-ficus-ui · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import {
  Badge,
  Box,
  Button,
  HStack,
  Radio,
  RadioGroup,
  SafeAreaBox,
  Text,
  VStack,
  useColorModeValue,
} from 'react-native-ficus-ui';

import ExampleSection from '@/src/ExampleSection';

const RadioComponent = () => {
  return (
    <SafeAreaBox flex={1} bg={useColorModeValue('gray.100', 'gray.800')}>
      <Text mx="xl" fontSize="4xl">
        Radio component
      </Text>
      <ExampleSection name="Simple radio">
        <Box>
          <Radio value={1}>Label</Radio>
          <Radio value={2} defaultChecked>
            Label
          </Radio>
          <Radio value={3} colorScheme="green">
            Label
          </Radio>
          <Radio value={4} isDisabled>
            Label
          </Radio>
          <Radio value={5}>Label</Radio>
        </Box>
      </ExampleSection>

      <ExampleSection name="Simple radio group">
        <RadioGroup colorScheme="red">
          <VStack spacing="sm">
            <Radio value={1}>Option 1</Radio>
            <Radio value={2}>Option 2</Radio>
            <Radio value={3}>Option 3</Radio>
          </VStack>
        </RadioGroup>
      </ExampleSection>

      <ExampleSection name="Radio sizes">
        <RadioGroup>
          <VStack spacing="sm">
            <Radio value={1} size="xs">
              Option 1
            </Radio>
            <Radio value={2} size="sm">
              Option 2
            </Radio>
            <Radio value={3} size="md">
              Option 3
            </Radio>
            <Radio value={4} size="lg">
              Option 4
            </Radio>
          </VStack>
        </RadioGroup>
      </ExampleSection>

      <ExampleSection name="Custom radio">
        <RadioGroup colorScheme="red">
          <HStack spacing="md">
            {['Option 1', 'Option 2', 'Option 3'].map((item) => (
              <Radio value={item} key={`radio-option-${item}`}>
                {({ isChecked }) => (
                  <Badge
                    variant={isChecked ? 'solid' : 'subtle'}
                    colorScheme="pink"
                    fontSize="xl"
                    px="lg"
                    py="lg"
                    borderRadius="full"
                  >
                    {item}
                  </Badge>
                )}
              </Radio>
            ))}
          </HStack>
        </RadioGroup>
      </ExampleSection>
      <ExampleSection name="Custom radio with button">
        <RadioGroup colorScheme="red">
          <HStack spacing="md">
            {['Option 1', 'Option 2', 'Option 3'].map((item) => (
              <Radio value={item} key={`radio-option-${item}`}>
                {({ isChecked, onToggle }) => (
                  <Button
                    bg={isChecked ? 'pink.500' : 'pink.200'}
                    fontSize="xl"
                    borderRadius="full"
                    onPress={onToggle}
                  >
                    {item}
                  </Button>
                )}
              </Radio>
            ))}
          </HStack>
        </RadioGroup>
      </ExampleSection>
    </SafeAreaBox>
  );
};

export default RadioComponent;