@nexara/nativeflow 0.1.8 → 0.1.10

package/src/components/Button/Button.tsx

@@ -1,205 +1,216 @@
-import React, { useMemo } from 'react';
-import type { FC, JSX } from 'react';
-import { StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
-import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations";
-import { StyledText, StyledView } from '../StyledComponents';
-import { useTheme } from '../../hooks';
-import { getButtonColors } from './utils';
-import type { ButtonProps } from '../../types';
-
-
-const Button: FC<ButtonProps> = ({
-    variant = 'contained',
-    type = 'flat',
-    fullWidth = false,
-    paddingH = 19,
-    paddingV = 12,
-    bg,
-    br = 8,
-    stroke = 1,
-    strokeColor,
-    titleColor,
-    title,
-    fScale = 'base',
-    fs,
-    ff,
-    size = 50,
-    rippleColor,
-    renderIcon,
-    renderLeftIcon,
-    renderRightIcon,
-    disabled = false,
-    containerStyle,
-    titleStyle,
-    onPress,
-    children,
-    ...rest
-}) => {
-    const theme: any = useTheme();
-
-    const { backgroundColor, buttonTextColor, buttonBorderColor } = getButtonColors({
-        theme,
-        variant,
-        bg,
-        titleColor,
-        strokeColor,
-        disabled
-    });
-
-    const STYLES = useMemo(customStyles, []);
-
-    const dynamicStyles = {
-        BUTTON_CONT: {
-            backgroundColor: backgroundColor,
-            borderWidth: variant === 'contained' ? 0 : stroke,
-            borderColor: buttonBorderColor,
-        },
-        BUTTON_TEXT: {
-            color: buttonTextColor,
-            fontFamily: ff ?? '',
-        },
-        FLAT_BTN_MAIN_CONT: {
-            borderRadius: verticalScale(br),
-            alignSelf: fullWidth ? 'stretch' : 'flex-start' as ViewStyle['alignSelf'],
-        },
-        FLAT_BTN_INNER_CONT: {
-            paddingVertical: verticalScale(paddingV),
-            paddingHorizontal: horizontalScale(!fullWidth ? paddingH : 30),
-            borderRadius: verticalScale(br),
-        },
-        ROUND_BTN_INNER_CONT: {
-            height: verticalScale(size),
-            width: verticalScale(size),
-        }
-    };
-
-    const cloneElement = (element: JSX.Element): JSX.Element | null => {
-        if (React.isValidElement<{ color?: string }>(element)) {
-            return React.cloneElement(element, {
-                color: element.props.color ?? buttonTextColor
-            })
-        }
-        return null;
-    }
-
-    return (<>
-        {type === 'flat' && (
-            <StyledView style={[STYLES.FLAT_BTN_MAIN_CONT, dynamicStyles.FLAT_BTN_MAIN_CONT]}>
-                <TouchableOpacity
-                    onPress={onPress}
-                    // rippleColor={rippleColor}
-                    disabled={disabled}
-                    // ref={ref}
-                    {...rest}
-                >
-
-                    {/* <TouchableRipple
-                    onPress={onPress}
-                    rippleColor={rippleColor}
-                    disabled={disabled}
-                    // ref={ref}
-                    {...rest}
-                > */}
-                    <StyledView
-                        style={[
-                            STYLES.FLAT_BTN_INNER_CONT,
-                            STYLES.BUTTON_CONT,
-                            dynamicStyles.FLAT_BTN_INNER_CONT,
-                            dynamicStyles.BUTTON_CONT,
-                            containerStyle
-                        ]}>
-                        {(renderLeftIcon || (fullWidth && renderRightIcon)) && (
-                            <StyledView f={fullWidth ? 1 : undefined}>
-                                {renderLeftIcon && cloneElement(renderLeftIcon)}
-                            </StyledView>
-                        )}
-
-                        <StyledView
-                            flexShrink={1}
-                            f={fullWidth ? 8 : undefined}
-                        >
-                            {
-                                (title ?? children) ?
-                                <StyledText numberOfLines={1} fs={fs} fScale={fScale}
-                                    style={[
-                                        STYLES.BUTTON_TEXT,
-                                        dynamicStyles.BUTTON_TEXT,
-                                        titleStyle,
-                                    ]}
-                                >
-                                    {title ?? children}
-                                </StyledText>
-                                :
-                                (renderIcon && cloneElement(renderIcon))
-                            }
-                        </StyledView>
-
-                        {(renderRightIcon || (fullWidth && renderLeftIcon)) && (
-                            <StyledView alignItems='flex-end' f={fullWidth ? 1 : undefined}>
-                                {renderRightIcon && cloneElement(renderRightIcon)}
-                            </StyledView>
-                        )}
-                    </StyledView>
-                    {/* </TouchableRipple> */}
-                </TouchableOpacity>
-
-            </StyledView>
-        )}
-
-        {type === 'round' && (
-            <StyledView style={STYLES.ROUND_BTN_MAIN_CONT} >
-                <TouchableOpacity
-                    onPress={onPress}
-                    // rippleColor={rippleColor}
-                    {...rest}
-                >
-                    <StyledView
-                        style={[
-                            STYLES.BUTTON_CONT,
-                            STYLES.ROUND_BTN_INNER_CONT,
-                            dynamicStyles.BUTTON_CONT,
-                            dynamicStyles.ROUND_BTN_INNER_CONT,
-                            containerStyle
-                        ]}
-                    >
-                        {renderIcon && cloneElement(renderIcon)}
-                    </StyledView>
-                </TouchableOpacity>
-            </StyledView>
-        )}
-    </>
-    );
-};
-
-export default Button;
-export type { ButtonProps };
-
-const customStyles = () => StyleSheet.create({
-    BUTTON_CONT: {
-        maxWidth: '100%',
-    },
-    BUTTON_TEXT: {
-        textAlign: 'center',
-    },
-    FLAT_BTN_MAIN_CONT: {
-        overflow: 'hidden',
-    },
-    FLAT_BTN_INNER_CONT: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: horizontalScale(10),
-    },
-    ROUND_BTN_MAIN_CONT: {
-        overflow: 'hidden',
-        borderRadius: verticalScale(100),
-        alignSelf: 'flex-start',
-    },
-    ROUND_BTN_INNER_CONT: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    }
-});
-
-
-
+import React, { useMemo } from 'react';
+import type { FC, JSX } from 'react';
+import { ActivityIndicator, StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
+import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations";
+import { StyledText, StyledView } from '../StyledComponents';
+import { useTheme } from '../../hooks';
+import { getButtonColors } from './utils';
+import type { ButtonProps } from '../../types';
+
+
+const Button: FC<ButtonProps> = ({
+    variant = 'contained',
+    type = 'flat',
+    fullWidth = false,
+    paddingH = 19,
+    paddingV = 12,
+    bg,
+    br = 8,
+    stroke = 1,
+    strokeColor,
+    titleColor,
+    title,
+    fScale = 'base',
+    fs,
+    ff,
+    size = 50,
+    rippleColor,
+    renderIcon,
+    renderLeftIcon,
+    renderRightIcon,
+    disabled = false,
+    loading = true,
+    containerStyle,
+    titleStyle,
+    onPress,
+    children,
+    ...rest
+}) => {
+    const theme: any = useTheme();
+
+    const { backgroundColor, buttonTextColor, buttonBorderColor } = getButtonColors({
+        theme,
+        variant,
+        bg,
+        titleColor,
+        strokeColor,
+        disabled,
+        loading
+    });
+
+    const STYLES = useMemo(customStyles, []);
+    
+    const dynamicStyles = {
+        BUTTON_CONT: {
+            backgroundColor: backgroundColor,
+            borderWidth: variant === 'contained' ? 0 : stroke,
+            borderColor: buttonBorderColor,
+        },
+        BUTTON_TEXT: {
+            color: buttonTextColor,
+            fontFamily: ff ?? '',
+        },
+        FLAT_BTN_MAIN_CONT: {
+            borderRadius: verticalScale(br),
+            alignSelf: fullWidth ? 'stretch' : 'flex-start' as ViewStyle['alignSelf'],
+        },
+        FLAT_BTN_INNER_CONT: {
+            paddingVertical: verticalScale(paddingV),
+            paddingHorizontal: horizontalScale(!fullWidth ? paddingH : 30),
+            borderRadius: verticalScale(br),
+        },
+        ROUND_BTN_INNER_CONT: {
+            height: verticalScale(size),
+            width: verticalScale(size),
+        }
+    };
+
+    const cloneElement = (element: JSX.Element): JSX.Element | null => {
+        if (React.isValidElement<{ color?: string }>(element)) {
+            return React.cloneElement(element, {
+                color: element.props.color ?? buttonTextColor
+            })
+        }
+        return null;
+    }
+
+    return (<>
+        {type === 'flat' && (
+            <StyledView style={[STYLES.FLAT_BTN_MAIN_CONT, dynamicStyles.FLAT_BTN_MAIN_CONT]}>
+                <TouchableOpacity
+                    onPress={onPress}
+                    // rippleColor={rippleColor}
+                    disabled={disabled || loading}
+                    // ref={ref}
+                    {...rest}
+                >
+
+                    {/* <TouchableRipple
+                    onPress={onPress}
+                    rippleColor={rippleColor}
+                    disabled={disabled}
+                    // ref={ref}
+                    {...rest}
+                > */}
+                    <StyledView
+                        style={[
+                            STYLES.FLAT_BTN_INNER_CONT,
+                            STYLES.BUTTON_CONT,
+                            dynamicStyles.FLAT_BTN_INNER_CONT,
+                            dynamicStyles.BUTTON_CONT,
+                            containerStyle,
+                        ]}
+                    >
+                        {(renderLeftIcon || (fullWidth && renderRightIcon)) && (
+                            <StyledView f={fullWidth ? 1 : undefined}>
+                                {renderLeftIcon && cloneElement(renderLeftIcon)}
+                            </StyledView>
+                        )}
+
+                        <StyledView flexShrink={1} f={fullWidth ? 8 : undefined}>
+                            {!loading ? (
+                                (title ?? children) ? (
+                                    <StyledText
+                                        numberOfLines={1}
+                                        fs={fs}
+                                        fScale={fScale}
+                                        style={[
+                                            STYLES.BUTTON_TEXT,
+                                            dynamicStyles.BUTTON_TEXT,
+                                            titleStyle,
+                                        ]}
+                                    >
+                                        {title ?? children}
+                                    </StyledText>
+                                ) : (
+                                    renderIcon && cloneElement(renderIcon)
+                                )
+                            ) : (
+                                <ActivityIndicator
+                                    color={dynamicStyles.BUTTON_TEXT.color}
+                                    size="small"
+                                />
+                            )}
+                        </StyledView>
+
+                        {(renderRightIcon || (fullWidth && renderLeftIcon)) && (
+                            <StyledView alignItems="flex-end" f={fullWidth ? 1 : undefined}>
+                                {renderRightIcon && cloneElement(renderRightIcon)}
+                            </StyledView>
+                        )}
+                    </StyledView>
+
+
+                    {/* </TouchableRipple> */}
+                </TouchableOpacity>
+
+            </StyledView>
+        )}
+
+        {type === 'round' && (
+            <StyledView style={STYLES.ROUND_BTN_MAIN_CONT} >
+                <TouchableOpacity
+                    onPress={onPress}
+                    // rippleColor={rippleColor}
+                    {...rest}
+                >
+                    <StyledView
+                        style={[
+                            STYLES.BUTTON_CONT,
+                            STYLES.ROUND_BTN_INNER_CONT,
+                            dynamicStyles.BUTTON_CONT,
+                            dynamicStyles.ROUND_BTN_INNER_CONT,
+                            containerStyle
+                        ]}
+                    >
+                        {renderIcon && cloneElement(renderIcon)}
+                    </StyledView>
+                </TouchableOpacity>
+            </StyledView>
+        )}
+    </>
+    );
+};
+
+export default Button;
+export type { ButtonProps };
+
+const customStyles = () => StyleSheet.create({
+    BUTTON_CONT: {
+        maxWidth: '100%',
+    },
+    BUTTON_TEXT: {
+        textAlign: 'center',
+    },
+    FLAT_BTN_MAIN_CONT: {
+        overflow: 'hidden',
+    },
+    FLAT_BTN_INNER_CONT: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: horizontalScale(10),
+    },
+    ROUND_BTN_MAIN_CONT: {
+        overflow: 'hidden',
+        borderRadius: verticalScale(100),
+        alignSelf: 'flex-start',
+    },
+    ROUND_BTN_INNER_CONT: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+});
+
+
+