ncore-ui-kit 1.0.0-pre-alpha.0

package/src/components/toast/index.tsx

@@ -0,0 +1,272 @@
+import {
+    useEffect,
+    type FC,
+    useRef
+} from "react";
+import {
+    TouchableWithoutFeedback,
+    Animated,
+    Easing,
+    View
+} from "react-native";
+import type IToastProps from "./type";
+import stylesheet, {
+    getToastType,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import {
+    useSafeAreaInsets
+} from "react-native-safe-area-context";
+import {
+    X as XIcon
+} from "lucide-react-native";
+import {
+    Portal
+} from "../../helpers/portalize";
+import Button from "../button";
+import Text from "../text";
+
+const Toast: FC<IToastProps> = ({
+    isCloseOnPressActionButton = true,
+    closeAnimationDelay = 350,
+    openAnimationDelay = 200,
+    contentContainerStyle,
+    autoCloseDelay = 3000,
+    isCloseOnPress = true,
+    icon: CustomIcon,
+    type = "neutral",
+    isShowAction,
+    customTheme,
+    onClosed,
+    subTitle,
+    children,
+    action,
+    style,
+    title,
+    id
+}) => {
+    const {
+        radiuses,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const {
+        bottom
+    } = useSafeAreaInsets();
+
+    const TRANSFORM_DISTANCE = 75;
+
+    const transformAnim = useRef(new Animated.Value(TRANSFORM_DISTANCE)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+
+    const currentType = getToastType({
+        type
+    });
+
+    const {
+        contentContainer: contentContainerDynamicStyle,
+        containerObject: containerObjectDynamicStyle,
+        iconContainer: iconContainerDynamicStyle,
+        container: containerDynamicStyle,
+        subTitle: subTitleDynamicStyle,
+        action: actionDynamicStyle,
+        title: titleDynamicStyle
+    } = useStyles({
+        safeAreaBottom: bottom,
+        currentType,
+        radiuses,
+        subTitle,
+        spaces,
+        colors,
+        type
+    });
+
+    useEffect(() => {
+        Animated.parallel([
+            Animated.timing(opacityAnim, {
+                duration: openAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 1
+            }),
+            Animated.timing(transformAnim, {
+                duration: openAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            })
+        ]).start();
+
+        setTimeout(() => {
+            closeAnimation();
+        }, autoCloseDelay);
+    }, []);
+
+    const closeAnimation = (_onClosed?: (props: {
+        id: string;
+    }) => void) => {
+        Animated.parallel([
+            Animated.timing(transformAnim, {
+                duration: closeAnimationDelay,
+                toValue: TRANSFORM_DISTANCE,
+                useNativeDriver: true,
+                easing: Easing.linear
+            }),
+            Animated.timing(opacityAnim, {
+                duration: closeAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            })
+        ]).start(({
+            finished
+        }) => {
+            if(finished) {
+                if(onClosed) onClosed({
+                    id
+                });
+
+                if(_onClosed) _onClosed({
+                    id
+                });
+            }
+        });
+    };
+
+    const renderIcon = () => {
+        if(!CustomIcon) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.iconContainer,
+                iconContainerDynamicStyle
+            ]}
+        >
+            <CustomIcon
+                color={currentType.iconColor}
+                size={18}
+            />
+        </View>;
+    };
+
+    const renderContent = () => {
+        return <View
+            style={[
+                contentContainerStyle,
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ]}
+        >
+            <Text
+                color={currentType.titleColor}
+                numberOfLines={3}
+                style={{
+                    ...stylesheet.title,
+                    ...titleDynamicStyle
+                }}
+            >
+                {title}
+            </Text>
+            {
+                subTitle ?
+                    <Text
+                        color={currentType.subTitleColor}
+                        variant="labelSmallSize"
+                        numberOfLines={2}
+                        style={{
+                            ...stylesheet.subTitle,
+                            ...subTitleDynamicStyle
+                        }}
+                    >
+                        {subTitle}
+                    </Text>
+                    :
+                    null
+            }
+        </View>;
+    };
+
+    const renderAction = () => {
+        if(!isShowAction) {
+            return null;
+        }
+
+        return <Button
+            title={action && action.title ? action.title : undefined}
+            isCustomPadding={true}
+            spreadBehaviour="free"
+            onPress={() => {
+                if(isCloseOnPressActionButton) closeAnimation();
+
+                if(action && action.onPress) action.onPress({
+                    closeAnimation: ({
+                        onClosed: _onClosed
+                    }) => closeAnimation(_onClosed)
+                });
+            }}
+            icon={() => {
+                if(action?.title) {
+                    return null;
+                }
+
+                return <XIcon
+                    color={colors.content.text[currentType.actionColor]}
+                    size={18}
+                />;
+            }}
+            style={{
+                ...action?.style,
+                ...actionDynamicStyle
+            }}
+            variant="ghost"
+            size="small"
+            type={type}
+        />;
+    };
+
+    const renderContainer = () => {
+        return <View
+            style={[
+                stylesheet.containerObject,
+                containerObjectDynamicStyle
+            ]}
+        >
+            {renderIcon()}
+            {renderContent()}
+            {renderAction()}
+        </View>;
+    };
+
+    return <Portal name="toast-system">
+        <Animated.View
+            style={[
+                style,
+                stylesheet.container,
+                containerDynamicStyle,
+                {
+                    opacity: opacityAnim,
+                    transform: [{
+                        translateY: transformAnim
+                    }]
+                }
+            ]}
+        >
+            <TouchableWithoutFeedback
+                onPress={() => {
+                    if(isCloseOnPress) {
+                        closeAnimation();
+                    }
+                }}
+            >
+                {children ? children : renderContainer()}
+            </TouchableWithoutFeedback>
+        </Animated.View>
+    </Portal>;
+};
+export default Toast;

package/src/components/toast/stylesheet.ts

@@ -0,0 +1,156 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    ToastDynamicStyleType,
+    ToastTypeConstantType,
+    ToastTypes,
+    ToastType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+import {
+    windowWidth
+} from "../../utils";
+
+export const TOAST_TYPE_STYLES: Record<
+    ToastType,
+    {
+        containerColor: keyof NCoreUIKit.ContainerContentColors;
+        subTitleColor: keyof NCoreUIKit.TextContentColors;
+        actionColor: keyof NCoreUIKit.TextContentColors;
+        titleColor: keyof NCoreUIKit.TextContentColors;
+        iconColor: keyof NCoreUIKit.IconContentColors;
+    }
+> = {
+    primary: {
+        actionColor: "onPrimary",
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        actionColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        containerColor: "success",
+        actionColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        containerColor: "warning",
+        actionColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        containerColor: "info",
+        actionColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "mid",
+        subTitleColor: "low",
+        actionColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+
+export const getToastType = ({
+    type
+}: ToastTypeConstantType): ToastTypes => {
+    const currentType = TOAST_TYPE_STYLES[type];
+
+    return currentType;
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        position: "absolute",
+        alignSelf: "center",
+        zIndex: 99998
+    },
+    containerObject: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    contentContainer: {
+        justifyContent: "center",
+        alignItems: "flex-start",
+        flexDirection: "column",
+        flexShrink: 1
+    },
+    iconContainer: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "left"
+    },
+    subTitle: {
+        textAlign: "left"
+    }
+});
+
+export const useStyles = ({
+    safeAreaBottom,
+    currentType,
+    radiuses,
+    subTitle,
+    colors,
+    spaces
+}: ToastDynamicStyleType) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            maxWidth: windowWidth - (spaces.spacingMd * 2),
+            bottom: safeAreaBottom + 100,
+            borderRadius: radiuses.full
+        } as Mutable<ViewStyle>,
+        containerObject: {
+            paddingHorizontal: spaces.spacingLg,
+            paddingVertical: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        contentContainer: {
+
+        } as Mutable<ViewStyle>,
+        title: {
+
+        } as Mutable<TextStyle>,
+        subTitle: {
+            marginTop: spaces.spacingXs
+        } as Mutable<TextStyle>,
+        iconContainer: {
+            paddingRight: spaces.spacingSm,
+            marginRight: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        action: {
+            paddingBottom: spaces.spacingSm,
+            paddingRight: spaces.spacingSm,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingSm,
+            marginLeft: spaces.spacingMd
+        } as Mutable<ViewStyle>
+    };
+
+    if(subTitle) {
+        styles.container.borderRadius = radiuses.lg;
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/toast/type.ts

@@ -0,0 +1,79 @@
+import {
+    type ReactNode
+} from "react";
+import {
+    type StyleProp,
+    type ViewStyle
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+
+export type ToastDynamicStyleType = {
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    currentType: ToastTypes;
+    safeAreaBottom: number;
+    subTitle?: string;
+    type: ToastType;
+};
+
+export type ToastTypes = {
+    containerColor: keyof NCoreUIKit.ContainerContentColors;
+    subTitleColor: keyof NCoreUIKit.TextContentColors;
+    actionColor: keyof NCoreUIKit.TextContentColors;
+    titleColor: keyof NCoreUIKit.TextContentColors;
+    iconColor: keyof NCoreUIKit.IconContentColors;
+};
+
+export type ToastTypeConstantType = {
+    type: ToastType;
+};
+
+export type ToastType = "primary" | "danger" | "warning" | "neutral" | "success" | "info";
+
+export type ToastInternalProps = {
+    contentContainerStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    action?: {
+        onPress: (props: {
+            closeAnimation: (props: {
+                onClosed?: (props: {
+                    id: string;
+                }) => void;
+            }) => void;
+        }) => void;
+        icon?: NCoreUIKitIcon;
+        style?: ViewStyle;
+        title?: string;
+    };
+    isCloseOnPressActionButton?: boolean;
+    closeAnimationDelay?: number;
+    openAnimationDelay?: number;
+    isCloseOnPress?: boolean;
+    autoCloseDelay?: number;
+    isShowAction?: boolean;
+    icon?: NCoreUIKitIcon;
+    children?: ReactNode;
+    subTitle?: string;
+    type?: ToastType;
+    title: string;
+    id: string;
+    onClosed?: (props: {
+        id: string;
+    }) => void;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+};
+
+interface IToastProps extends ToastInternalProps {
+};
+
+export type {
+    IToastProps as default
+};