Added variants to Button

BearStudio · Oct 17, 2024 · 7e85226 · 7e85226
1 parent 4044150
commit 7e85226
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 14 deletions.
diff --git a/example/app/components/Button.tsx b/example/app/components/Button.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { SafeAreaView, ScrollView } from 'react-native';
-import { Button, Text, VStack } from 'react-native-ficus-ui';
+import { Button, Icon, Text, HStack, VStack } from 'react-native-ficus-ui';
 import ExampleSection from '@/src/ExampleSection';
 
 const ButtonComponent = () => {
@@ -25,6 +25,56 @@ const ButtonComponent = () => {
             </Button>
           </VStack>
         </ExampleSection>
+
+        <ExampleSection name="variants">
+          <HStack spacing={10}>
+            <Button colorScheme="teal">Button</Button>
+            <Button colorScheme="teal" variant="outline">
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="ghost">
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="link">
+              Button
+            </Button>
+          </HStack>
+          <VStack spacing={10} mt="xl">
+            <Button colorScheme="teal" full>
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="outline" full>
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="ghost" full>
+              Button
+            </Button>
+            <Button colorScheme="teal" variant="outline" full isLoading>
+              Button
+            </Button>
+          </VStack>
+        </ExampleSection>
+
+        <ExampleSection name="prefix and suffix">
+          <VStack spacing={10}>
+            <Button
+              colorScheme="green"
+              prefix={
+                <Icon name="android1" color="white" fontSize="xl" mr="sm" />
+              }
+            >
+              Button
+            </Button>
+            <Button
+              colorScheme="green"
+              suffix={
+                <Icon name="android1" color="white" fontSize="xl" ml="sm" />
+              }
+            >
+              Button
+            </Button>
+          </VStack>
+        </ExampleSection>
       </ScrollView>
     </SafeAreaView>
   );

diff --git a/src/components/button/button.component.tsx b/src/components/button/button.component.tsx
@@ -28,12 +28,10 @@ const Button: React.FunctionComponent<ButtonProps> = (incomingProps) => {
       colorScheme: 'gray',
       py: 'lg',
       px: 15,
-      color: 'white',
       borderRadius: 'lg',
       isLoading: false,
       isDisabled: false,
       loaderSize: Platform.OS === 'ios' ? 'lg' : 'xl',
-      loaderColor: 'white',
       full: false,
       position: 'relative',
       shadowColor: 'gray.800',
@@ -47,6 +45,7 @@ const Button: React.FunctionComponent<ButtonProps> = (incomingProps) => {
       onPress: () => {},
       flexDirection: 'row',
       fontWeight: 'bold',
+      variant: 'solid',
     }
   );
 
@@ -122,6 +121,13 @@ const Button: React.FunctionComponent<ButtonProps> = (incomingProps) => {
         <Text
           {...getSpecificProps(props, ...textProps)}
           style={computedStyle.text}
+          {...(props.variant === 'link'
+            ? {
+                textDecorationLine: 'underline',
+                textDecorationStyle: 'solid',
+                textDecorationColor: computedStyle.text.color,
+              }
+            : {})}
         >
           {children}
         </Text>
@@ -154,7 +160,11 @@ const Button: React.FunctionComponent<ButtonProps> = (incomingProps) => {
           <RNView style={computedStyle.loadingContainer}>
             <RNActivityIndicator
               size={getThemeProperty(theme.fontSize, loaderSize)}
-              color={getThemeColor(theme.colors, loaderColor)}
+              color={
+                loaderColor
+                  ? getThemeColor(theme.colors, loaderColor)
+                  : computedStyle?.text?.color
+              }
             />
           </RNView>
         </RNView>
@@ -179,7 +189,6 @@ const Button: React.FunctionComponent<ButtonProps> = (incomingProps) => {
 // isLoading: false,
 // isDisabled: false,
 // loaderSize: '2xl',
-// loaderColor: 'white',
 // full: false,
 // position: 'relative',
 // shadowColor: 'gray.800',

diff --git a/src/components/button/button.service.ts b/src/components/button/button.service.ts
@@ -4,6 +4,27 @@ import { getThemeColor } from '../../theme/theme.service';
 import { ButtonProps } from './button.type';
 import { ThemeType } from '../../theme/type';
 
+const hexToRgba = (hex: string, alpha = 1) => {
+  // Remove the hash (#) if present
+  hex = hex.replace(/^#/, '');
+
+  // Parse the hex string depending on its length (3, 6, or 8 characters)
+  let r, g, b;
+
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+  }
+
+  // Return the rgba string
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 /**
  * returns underlay color
  *
@@ -13,12 +34,16 @@ import { ThemeType } from '../../theme/type';
 export const getUnderlayColor = (theme: ThemeType, props: ButtonProps) => {
   return props.underlayColor
     ? getThemeColor(theme.colors, props.underlayColor as string)
-    : props.colorScheme
-    ? getThemeColor(theme.colors, `${props.colorScheme}.800`)
-    : color(getThemeColor(theme.colors, props.bg as string))
+    : props.bg
+    ? color(getThemeColor(theme.colors, props.bg as string))
         .darken(0.1)
         .rgb()
-        .string();
+        .string()
+    : props.variant === 'solid'
+    ? getThemeColor(theme.colors, `${props.colorScheme}.800`)
+    : props.variant === 'outline' || props.variant === 'ghost'
+    ? hexToRgba(getThemeColor(theme.colors, `${props.colorScheme}.500`), 0.1)
+    : 'transparent';
 };
 
 /**

diff --git a/src/components/button/button.style.tsx b/src/components/button/button.style.tsx
@@ -22,6 +22,20 @@ import { ButtonProps } from './button.type';
 export const getStyle = (theme: ThemeType, props: ButtonProps) => {
   const computedStyle: any = {};
 
+  const buttonBgColor = props.bg
+    ? getThemeColor(theme.colors, props.bg as string)
+    : props.variant === 'solid'
+    ? getThemeColor(theme.colors, `${props.colorScheme}.500`)
+    : 'transparent';
+
+  const buttonTextColor = props.color
+    ? getThemeColor(theme.colors, props.color as string)
+    : props.variant === 'outline' ||
+      props.variant === 'ghost' ||
+      props.variant === 'link'
+    ? getThemeColor(theme.colors, `${props.colorScheme}.500`)
+    : 'white';
+
   computedStyle.button = {
     overflow: 'hidden',
     justifyContent: 'center',
@@ -37,20 +51,21 @@ export const getStyle = (theme: ThemeType, props: ButtonProps) => {
     minHeight: props.minH,
     maxWidth: props.maxW,
     maxHeight: props.maxH,
+    borderStyle: props.borderStyle,
+    ...(props.variant === 'outline'
+      ? { borderColor: buttonTextColor, borderWidth: 1 }
+      : {}),
     ...createPositionStyle(props),
     ...createBorderWidthStyles(props),
     ...createShadowStyles(props, theme),
     ...createSpacingStyles(props, theme.spacing),
     ...createBorderColorStyles(props, theme.colors),
     ...createBorderRadiusStyles(props, theme.borderRadius),
-    backgroundColor: getThemeColor(
-      theme.colors,
-      (props.bg as string) || `${props.colorScheme}.500`
-    ),
+    backgroundColor: buttonBgColor,
   };
 
   computedStyle.text = {
-    color: getThemeColor(theme.colors, props.color as string),
+    color: buttonTextColor,
   };
 
   computedStyle.loadingContainer = {

diff --git a/src/theme/theme.default.tsx b/src/theme/theme.default.tsx
@@ -450,5 +450,13 @@ export const defaultTheme: ThemeType = {
         outline: {},
       },
     },
+    Button: {
+      variants: {
+        solid: {},
+        outline: {},
+        ghost: {},
+        link: {},
+      },
+    },
   },
 };