@nexara/nativeflow 0.1.7 → 0.1.9

package/src/components/Chip/Chip.tsx

@@ -1,90 +1,82 @@
-import React from 'react';
-import { StyleSheet, Pressable, TouchableOpacity } from 'react-native';
-import { StyledText, StyledView } from '../StyledComponents';
-import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
-import { useTheme } from '../../hooks';
-import { getChipColors } from './utils';
-import type { ChipProps } from '../../types';
-
-const Chip: React.FC<ChipProps> = ({
-    title = 'Chip',
-    bg,
-    titleColor,
-    fs,
-    br = 7,
-    gap = 7,
-    paddingV = 9,
-    paddingH = 13,
-    stroke = 0.9,
-    strokeColor,
-    rippleColor,
-    disabled = false,
-    renderLeftIcon,
-    renderRightIcon,
-    containerStyle,
-    textStyle,
-    ...rest
-}) => {
-
-    const theme: any = useTheme();
-
-    const { buttonTextColor, buttonBorderColor, backgroundColor } = getChipColors({
-        theme,
-        bg,
-        titleColor,
-        strokeColor,
-        disabled
-    });
-
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            borderWidth: stroke,
-            borderColor: buttonBorderColor,
-            backgroundColor: backgroundColor,
-            borderRadius: verticalScale(br),
-            paddingVertical: verticalScale(paddingV),
-            paddingHorizontal: horizontalScale(paddingH),
-            gap: horizontalScale(gap)
-        },
-        TEXT: {
-            color: buttonTextColor,
-        }
-    });
-    return (<>
-        <StyledView alignSelf='flex-start'>
-            <Pressable
-                android_ripple={{
-                    color: rippleColor,
-                }}
-                {...rest}
-                disabled={disabled}
-            >
-                <StyledView style={[STYLES.CONTAINER, containerStyle]}>
-                    {
-                        renderLeftIcon &&
-                        <TouchableOpacity
-                            disabled={disabled}
-                        >
-                            {renderLeftIcon}
-                        </TouchableOpacity>
-                    }
-                    <StyledText primary variant='h5' fs={fs} style={[STYLES.TEXT, textStyle]}>{title}</StyledText>
-                    {
-                        renderRightIcon &&
-                        <TouchableOpacity
-                            disabled={disabled}
-                        >
-                            {renderRightIcon}
-                        </TouchableOpacity>
-                    }
-                </StyledView>
-
-            </Pressable>
-        </StyledView>
-    </>);
-}
-export default Chip;
-export type { ChipProps };
-
+import React, { type FC } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyledText, StyledView } from '../StyledComponents';
+import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import { useTheme } from '../../hooks';
+import { getChipColors } from './utils';
+import type { ChipProps } from '../../types';
+
+const Chip: FC<ChipProps> = ({
+    label = 'Chip',
+    labelColor,
+    fs,
+    fScale = 'sm',
+    ff,
+    bg,
+    br = 7,
+    gap = 7,
+    paddingV = 6,
+    paddingH = 15,
+    stroke = 0.8,
+    strokeColor,
+    rippleColor,
+    disabled = false,
+    renderLeftIcon,
+    renderRightIcon,
+    containerStyle,
+    textStyle,
+    active = false,
+    ...rest
+}) => {
+
+    const theme: any = useTheme();
+
+    const { buttonTextColor, buttonBorderColor, backgroundColor } = getChipColors({
+        theme,
+        bg,
+        labelColor,
+        strokeColor,
+        disabled,
+        active
+    });
+
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderWidth: stroke,
+            borderColor: buttonBorderColor,
+            backgroundColor: backgroundColor,
+            borderRadius: verticalScale(br),
+            paddingVertical: verticalScale(paddingV),
+            paddingLeft: horizontalScale((renderLeftIcon && paddingH / 2) ?? paddingH),
+            paddingRight: horizontalScale((renderRightIcon && paddingH / 2) ?? paddingH),
+            gap: horizontalScale(gap)
+        },
+        TEXT: {
+            color: buttonTextColor,
+        }
+    });
+    return (<>
+        <StyledView alignSelf='flex-start'>
+            <TouchableOpacity
+                disabled={disabled}
+                {...rest}
+            >
+                <StyledView style={[STYLES.CONTAINER, containerStyle]}>
+                    {
+                        React.isValidElement(renderLeftIcon) && renderLeftIcon
+                    }
+                    <StyledText fScale={fScale} ff={ff} fs={fs} style={[STYLES.TEXT, textStyle]}>{label}</StyledText>
+                    {
+                        React.isValidElement(renderRightIcon) && renderRightIcon
+                    }
+                </StyledView>
+
+            </TouchableOpacity>
+        </StyledView>
+    </>);
+}
+export default Chip;
+export type { ChipProps };
+

package/src/components/Chip/utils.ts

@@ -1,96 +1,110 @@
-import type { ThemeTypes } from "../../types";
-
-const getBorderColor = ({
-    theme,
-    strokeColor,
-    disabled,
-}: {
-    theme: ThemeTypes;
-    strokeColor: string | undefined;
-    disabled: boolean;
-}) => {
-    if (disabled) {
-        return theme.colors.disable;
-    }
-    if (strokeColor) {
-        return strokeColor
-    }
-    return theme.colors.outline;
-};
-
-
-const getTextColor = ({
-    theme,
-    titleColor,
-    disabled
-}: {
-    theme: ThemeTypes;
-    titleColor: string | undefined;
-    disabled: boolean;
-}) => {
-    if (disabled) {
-        return theme.colors.textDisable;
-    }
-    else if (titleColor) {
-        return titleColor;
-    }
-    return theme.colors.textTertiary;
-};
-
-const getBgColor = ({
-    theme,
-    bg,
-    disabled
-}: {
-    theme: ThemeTypes;
-    bg: string | undefined;
-    disabled: boolean;
-}) => {
-    if (disabled) {
-        return theme.colors.disable;
-    }
-    else if (bg) {
-        return bg
-    }
-    return theme.colors.chipBgColor;
-};
-
-const getChipColors = ({
-    theme,
-    bg,
-    titleColor,
-    strokeColor,
-    disabled
-}: {
-    theme: ThemeTypes;
-    bg: string | undefined;
-    titleColor: string | undefined;
-    strokeColor: string | undefined;
-    disabled: boolean;
-}) => {
-
-
-    const backgroundColor = getBgColor({
-        theme,
-        bg,
-        disabled
-    });
-    const buttonTextColor = getTextColor({
-        theme,
-        titleColor,
-        disabled
-    });
-    const buttonBorderColor = getBorderColor({
-        theme,
-        strokeColor,
-        disabled,
-    });
-
-    return {
-        backgroundColor,
-        buttonTextColor,
-        buttonBorderColor
-    }
-};
-
+import Color from "color";
+import type { ThemeTypes } from "../../types";
+
+const getBorderColor = ({
+    theme,
+    strokeColor,
+    disabled,
+    active
+}: {
+    theme: ThemeTypes;
+    strokeColor: string | undefined;
+    disabled: boolean;
+    active: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.border.strong;
+    } else if (strokeColor) {
+        return strokeColor
+    } else if (active) {
+        return Color(theme.colors.brand.primary).alpha(0.3).rgb().toString();
+    }
+    return theme.colors.border.default;
+};
+
+
+const getTextColor = ({
+    theme,
+    labelColor,
+    disabled
+}: {
+    theme: ThemeTypes;
+    labelColor: string | undefined;
+    disabled: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.typography.disabled;
+    }
+    else if (labelColor) {
+        return labelColor;
+    }
+    return theme.colors.typography.secondary;
+};
+
+const getBgColor = ({
+    theme,
+    bg,
+    disabled,
+    active
+}: {
+    theme: ThemeTypes;
+    bg: string | undefined;
+    disabled: boolean;
+    active: boolean;
+}) => {
+    if (disabled) {
+        return theme.colors.states.disabled;
+    } else if (bg) {
+        return bg
+    } else if (active) {
+        return Color(theme.colors.brand.primary).alpha(0.1).rgb().toString();
+    }
+    return 'transparent'
+    // return theme.colors.background.default
+    // return Color(theme.colors.brand.primary).alpha(0.2).rgb().toString();
+    // return Color(theme.colors.brand.primary).alpha(0.1).rgb().toString();
+};
+
+const getChipColors = ({
+    theme,
+    bg,
+    labelColor,
+    strokeColor,
+    disabled,
+    active
+}: {
+    theme: ThemeTypes;
+    bg: string | undefined;
+    labelColor: string | undefined;
+    strokeColor: string | undefined;
+    disabled: boolean;
+    active: boolean;
+}) => {
+
+
+    const backgroundColor = getBgColor({
+        theme,
+        bg,
+        disabled,
+        active
+    });
+    const buttonTextColor = getTextColor({
+        theme,
+        labelColor,
+        disabled
+    });
+    const buttonBorderColor = getBorderColor({
+        theme,
+        strokeColor,
+        disabled,
+        active
+    });
+
+    return {
+        backgroundColor,
+        buttonTextColor,
+        buttonBorderColor
+    }
+};
+
 export { getChipColors };

package/src/components/Dialog/Dialog.tsx

@@ -1,121 +1,125 @@
-import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import type { ReactElement } from "react";
-import { Keyboard, BackHandler, StyleSheet, Animated } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { dialogSizes } from '../../constants';
-import Portal from '../Portal/Portal';
-import type { DialogProps, DialogRefProps } from '../../types';
-
-
-const Dialog = forwardRef<DialogRefProps, DialogProps>(({
-    variant = 'default',
-    size = 'lg',
-    fullScreen,
-    backdropColor = 'rgba(0, 0, 0, 0.5)',
-    // backdropColor = 'red',
-    // animationDuration = 800,
-    onClose,
-    containerStyle,
-    children,
-}, ref) => {
-
-    const [dialogVisible, setDialogVisible] = useState(false);
-    const scale = useRef(new Animated.Value(0.9)).current;
-    const opacity = useRef(new Animated.Value(0)).current;
-
-    useEffect(() => {
-        Animated.timing(opacity, {
-            toValue: dialogVisible ? 1 : 0,
-            duration: 300,
-            useNativeDriver: true,
-        }).start();
-        Animated.spring(scale, {
-            toValue: dialogVisible ? 1 : 0.9,
-            damping: 10,
-            stiffness: 90,
-            useNativeDriver: true,
-        }).start();
-    }, [dialogVisible]);
-
-    useEffect(() => {
-        const handler = BackHandler.addEventListener('hardwareBackPress', hardwareBackPress);
-        return () => handler.remove();
-    }, [dialogVisible]);
-
-    const hardwareBackPress = () => {
-        onClose?.();
-        setDialogVisible(false);
-        return dialogVisible;
-    };
-    useImperativeHandle(ref, () => ({
-        open: () => setDialogVisible(true),
-        close: () => setDialogVisible(false)
-    }));
-
-    const backdropAnimatedStyles = {
-        opacity: opacity,
-        backgroundColor: backdropColor,
-    };
-    const modalContAnimatedStyles = {
-        transform: [{ scale }],
-        opacity: opacity,
-    };
-    const dynamicModalContStyles: ViewStyle = {
-        minHeight: fullScreen ? '100%' : 'auto',
-        maxHeight: fullScreen ? '100%' : '80%',
-        width: `${dialogSizes[size]}%`,
-    };
-
-    const renderChildrenWithVariant = () => {
-        return React.Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return cloneElement(child as ReactElement<any>, { variant });
-            }
-            return child;
-        });
-    };
-
-    const handleStartShouldSetResponder = (): boolean => {
-        Keyboard.dismiss();
-        onClose?.();
-        setDialogVisible(false);
-        return true;
-    };
-
-    return (<>
-        <Portal name='dialog'>
-            <Animated.View
-                style={[STYLES.BACKDROP_CONT, backdropAnimatedStyles]}
-                pointerEvents={dialogVisible ? 'auto' : 'none'}
-                onStartShouldSetResponder={handleStartShouldSetResponder}
-            >
-                <Animated.View
-                    style={[STYLES.MODAL_CONT, dynamicModalContStyles, modalContAnimatedStyles, containerStyle]}
-                    onStartShouldSetResponder={() => true}
-                >
-                    {renderChildrenWithVariant()}
-                </Animated.View>
-            </Animated.View>
-        </Portal>
-    </>);
-});
-export default Dialog;
-export type { DialogProps };
-
-const STYLES = StyleSheet.create({
-    BACKDROP_CONT: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    MODAL_CONT: {
-        backgroundColor: '#fff',
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: '#d4d4d4'
-    }
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import type { ReactElement } from "react";
+import { Keyboard, BackHandler, StyleSheet, Animated } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { dialogSizes } from '../../constants';
+import Portal from '../Portal/Portal';
+import type { DialogProps, DialogRefProps } from '../../types';
+import { useTheme } from '../../hooks';
+import { verticalScale } from '../../helpers';
+
+
+const Dialog = forwardRef<DialogRefProps, DialogProps>(({
+    variant = 'classic',
+    size = 'lg',
+    fullScreen,
+    backdropColor,
+    onClose,
+    containerStyle,
+    children,
+}, ref) => {
+
+    const [dialogVisible, setDialogVisible] = useState(false);
+    const scale = useRef(new Animated.Value(0.9)).current;
+    const opacity = useRef(new Animated.Value(0)).current;
+    const theme = useTheme();
+
+    useEffect(() => {
+        Animated.timing(opacity, {
+            toValue: dialogVisible ? 1 : 0,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+        Animated.spring(scale, {
+            toValue: dialogVisible ? 1 : 0.9,
+            damping: 10,
+            stiffness: 90,
+            useNativeDriver: true,
+        }).start();
+    }, [dialogVisible]);
+
+    useEffect(() => {
+        const handler = BackHandler.addEventListener('hardwareBackPress', hardwareBackPress);
+        return () => handler.remove();
+    }, [dialogVisible]);
+
+    const hardwareBackPress = () => {
+        onClose?.();
+        setDialogVisible(false);
+        return dialogVisible;
+    };
+    useImperativeHandle(ref, () => ({
+        open: () => setDialogVisible(true),
+        close: () => setDialogVisible(false)
+    }));
+
+    const backdropAnimatedStyles = {
+        opacity: opacity,
+        backgroundColor:  backdropColor ?? theme?.colors.background.backdrop,
+    };
+    const modalContAnimatedStyles = {
+        transform: [{ scale }],
+        opacity: opacity,
+    };
+    const dynamicModalContStyles: ViewStyle = {
+        minHeight: fullScreen ? '100%' : 'auto',
+        maxHeight: fullScreen ? '100%' : '80%',
+        width: `${dialogSizes[size]}%`,
+        backgroundColor:theme?.colors.background.elevated,
+        borderColor:  theme?.colors.border.default,
+        borderRadius: verticalScale(40)
+    };
+
+    const renderChildrenWithVariant = () => {
+        return React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return cloneElement(child as ReactElement<any>, { variant });
+            }
+            return child;
+        });
+    };
+
+    const handleStartShouldSetResponder = (): boolean => {
+        Keyboard.dismiss();
+        onClose?.();
+        setDialogVisible(false);
+        return true;
+    };
+
+    return (<>
+        <Portal name='dialog'>
+            <Animated.View
+                style={[STYLES.BACKDROP_CONT, backdropAnimatedStyles]}
+                pointerEvents={dialogVisible ? 'auto' : 'none'}
+                onStartShouldSetResponder={handleStartShouldSetResponder}
+            >
+                <Animated.View
+                    style={[STYLES.MODAL_CONT, dynamicModalContStyles, modalContAnimatedStyles, containerStyle]}
+                    onStartShouldSetResponder={() => true}
+                >
+                    {renderChildrenWithVariant()}
+                </Animated.View>
+            </Animated.View>
+        </Portal>
+    </>);
+});
+export default Dialog;
+export type { DialogProps };
+
+const STYLES = StyleSheet.create({
+    BACKDROP_CONT: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    MODAL_CONT: {
+        // backgroundColor: '#fff',
+        borderRadius: 5,
+        borderWidth: 1,
+        // borderColor: '#d4d4d4'
+    }
 });