feat: button

Author: bsdaoquang

README.md

@@ -45,12 +45,11 @@ pod install
             return (
                   <View>
                         <Card>
-
                               <Text>Hello world</Text>
                         </Card>
                   </View>
             );
-            };
+      };
 
       export default App;
 

example/src/App.tsx

@@ -1,14 +1,25 @@
-import { View } from 'react-native';
 import React from 'react';
-import Card from '../../src/components/Card';
+import { View } from 'react-native';
+import Button from '../../src/components/Button';
+import Section from '../../src/components/Section';
 import Text from '../../src/components/Text';
 
 const App = () => {
   return (
-    <View>
-      <Card>
-        <Text text="Hello world!!!" size={32} />
-      </Card>
+    <View style={{ flex: 1, paddingVertical: 20 }}>
+      <Section>
+        <Button
+          title="Button Default"
+          iconPosition="right"
+          onPress={() => console.log('dada')}
+        />
+        <Button
+          icon={<Text text="a" />}
+          iconExtra
+          title="Button Default"
+          onPress={() => console.log('dada')}
+        />
+      </Section>
     </View>
   );
 };

package.json

@@ -170,8 +170,6 @@
     "jsSrcsDir": "src"
   },
   "dependencies": {
-    "@react-native-community/checkbox": "^0.5.17",
-    "iconsax-react-native": "^0.0.8",
-    "react-native-svg": "^15.3.0"
+    "@react-native-community/checkbox": "^0.5.17"
   }
 }

src/components/Button.tsx

@@ -0,0 +1,137 @@
+import React, { type ReactNode } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { colors } from '../colors/colors';
+import { globalStyles } from '../styles/globalStyles';
+import Text from './Text';
+
+interface Props {
+  title?: string;
+  icon?: ReactNode;
+  outline?: boolean;
+  color?: string;
+  styles?: StyleProp<ViewStyle>;
+  onPress: () => void;
+  type?: 'primary' | 'text' | 'link' | 'dashed';
+  textStyleProps?: StyleProp<TextStyle>;
+  size?: 'large' | 'default' | 'small';
+  onLongPress?: () => void;
+  inline?: boolean;
+  isShadow?: boolean;
+  iconPosition?: 'left' | 'right';
+  textLine?: number;
+  iconExtra?: boolean;
+}
+
+const Button = (props: Props) => {
+  const {
+    title,
+    icon,
+    outline,
+    color,
+    styles,
+    onPress,
+    type,
+    textStyleProps,
+    size,
+    onLongPress,
+    inline,
+    isShadow,
+    iconPosition,
+    textLine,
+    iconExtra,
+  } = props;
+
+  const localstyles: StyleProp<ViewStyle> =
+    type === 'text' || type === 'link'
+      ? {}
+      : {
+          paddingVertical: size === 'large' ? 14 : size === 'small' ? 6 : 12,
+          paddingHorizontal: size === 'large' ? 30 : size === 'small' ? 12 : 20,
+          backgroundColor: outline
+            ? colors.white
+            : color
+              ? color
+              : type === 'primary'
+                ? colors.blue400
+                : colors.white,
+          borderWidth: 1,
+          borderColor: outline
+            ? color
+              ? color
+              : colors.blue400
+            : type === 'primary'
+              ? colors.blue400
+              : color
+                ? color
+                : colors.gray400,
+          borderStyle: type === 'dashed' ? 'dashed' : 'solid',
+          borderRadius: 100,
+          minHeight: size === 'small' ? 38 : 42,
+        };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.6}
+      onLongPress={onLongPress}
+      style={[
+        localstyles,
+        globalStyles.row,
+        globalStyles.center,
+        isShadow !== false ? globalStyles.shadow : undefined,
+        {
+          marginBottom: inline ? 0 : 16,
+        },
+        styles,
+      ]}
+      onPress={onPress}
+    >
+      {icon && (iconPosition === 'left' || !iconPosition) && icon}
+      {title && (
+        <View
+          style={{
+            flex: iconExtra ? 1 : 0,
+            marginLeft:
+              icon && (!iconPosition || iconPosition === 'left') && !iconExtra
+                ? 12
+                : 0,
+            marginRight:
+              icon && iconPosition === 'right' && !iconExtra ? 12 : 0,
+          }}
+        >
+          <Text
+            numberOfLine={textLine ?? 1}
+            textAlign="center"
+            text={title}
+            size={size === 'small' ? 12 : 14}
+            weight={!type || type === 'text' || type === 'link' ? '400' : '600'}
+            color={
+              outline
+                ? color
+                  ? color
+                  : colors.blue400
+                : type === 'primary'
+                  ? colors.white
+                  : !type || type === 'text' || type === 'link'
+                    ? type === 'link'
+                      ? colors.blue500
+                      : color && color !== '#ffffff' && color !== 'white'
+                        ? colors.white
+                        : colors.black
+                    : colors.black
+            }
+            styles={[{}, textStyleProps]}
+          />
+        </View>
+      )}
+      {icon && iconPosition === 'right' && icon}
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

src/components/CheckboxItem.tsx

@@ -1,5 +1,4 @@
 import CheckBox from '@react-native-community/checkbox';
-import { ArrowDown2, ArrowRight2 } from 'iconsax-react-native';
 import React, { useState, type ReactNode } from 'react';
 import {
   Text,
@@ -127,12 +126,12 @@ const CheckboxItem = (props: Props) => {
               expandedIcon ? (
                 expandedIcon
               ) : (
-                <ArrowDown2 size={16} color="#212121" />
+                <></>
               )
             ) : unExpandedIcon ? (
               unExpandedIcon
             ) : (
-              <ArrowRight2 size={16} color="#212121" />
+              <></>
             )}
           </TouchableOpacity>
         ) : (

src/components/Text.tsx

@@ -58,6 +58,7 @@ interface Props {
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
   userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all' | undefined;
   letterSpacing?: number | undefined;
+  flex?: number;
 }
 
 const Text = (props: Props) => {
@@ -71,6 +72,7 @@ const Text = (props: Props) => {
     numberOfLine,
     styles,
     textAlign,
+    flex,
     transform,
     letterSpacing,
     textDecorationColor,
@@ -104,6 +106,7 @@ const Text = (props: Props) => {
             textShadowRadius,
             textShadowColor,
             userSelect,
+            flex: flex ?? 0,
           },
           styles,
         ]}