1import { View, Button, Row, scale } from 'expo-dev-client-components';
2import * as React from 'react';
3import { StyleSheet } from 'react-native';
4
5import { ActivityIndicator } from '../components/ActivityIndicator';
6
7type ButtonProps = React.ComponentProps<typeof Button.FadeOnPressContainer>;
8
9type BasicButtonProps = ButtonProps & {
10  label: string;
11  type?: ButtonProps['bg'];
12  size?: 'medium' | 'small';
13  isLoading?: boolean;
14  onPress?: () => void;
15};
16
17const sizeMap: Record<'medium' | 'small', any> = {
18  medium: {
19    px: '3',
20    py: '2',
21  },
22  small: {
23    px: '2',
24    py: '1',
25  },
26};
27
28export function BasicButton({
29  label,
30  type = 'tertiary',
31  size = 'medium',
32  children,
33  isLoading,
34  ...props
35}: BasicButtonProps) {
36  return (
37    <View align="start">
38      <View>
39        <View opacity={isLoading ? '0.5' : '1'}>
40          <Button.FadeOnPressContainer bg={type} {...props}>
41            <View {...sizeMap[size]}>
42              <Row align="center" style={{ minHeight: scale.large }}>
43                <Button.Text weight="medium" color={type as any} size={size}>
44                  {label}
45                </Button.Text>
46
47                {children}
48              </Row>
49            </View>
50          </Button.FadeOnPressContainer>
51        </View>
52        {isLoading && (
53          <View
54            style={{
55              ...StyleSheet.absoluteFillObject,
56              justifyContent: 'center',
57              alignItems: 'center',
58            }}>
59            <ActivityIndicator size="small" />
60          </View>
61        )}
62      </View>
63    </View>
64  );
65}
66