ncore-ui-kit 1.0.0-alpha.0

package/src/components/menu/components/menuButton/type.ts

@@ -0,0 +1,34 @@
+import type {
+    NCoreUIKitIcon
+} from "../../../../types";
+import type IRowCardProps from "../../../rowCard/type";
+
+export type MenuButton = {
+    title: keyof NCoreUIKit.Translation | (string & {});
+    isShowRedirectIcon?: NCoreUIKitIcon;
+    subButtons?: Array<MenuButton>;
+    isCollapsible?: boolean;
+    isUseLocalize?: boolean;
+    redirectMain?: string;
+    props?: IRowCardProps;
+    icon?: NCoreUIKitIcon;
+    redirectSub?: string;
+    isCollapse?: boolean;
+};
+
+interface IMenuButton {
+    updateMenuButtonCollabs: (props: {
+        depthMap: Array<number>;
+        buttonItem: MenuButton;
+        status: boolean;
+    }) => void;
+    navigation: NCoreUIKit.Navigation;
+    closeAction?: () => void;
+    depthMap: Array<number>;
+    buttonItem: MenuButton;
+    buttonIndex: number;
+    id: string;
+};
+export type {
+    IMenuButton as default
+};

package/src/components/menu/index.tsx

@@ -0,0 +1,406 @@
+import {
+    useImperativeHandle,
+    useLayoutEffect,
+    forwardRef,
+    useEffect,
+    useState,
+    Fragment,
+    useRef
+} from "react";
+import {
+    Platform,
+    Animated,
+    Easing,
+    View
+} from "react-native";
+import {
+    type MenuButton as MenuButtonType
+} from "./components/menuButton/type";
+import {
+    type IMenuRef
+} from "./type";
+import type IMenuProps from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import MenuButton from "./components/menuButton";
+import {
+    NCoreUIKitTheme,
+    NCoreUIKitMenu
+} from "../../core/hooks";
+import type {
+    RefForwardingComponent
+} from "../../types";
+import {
+    SafeAreaView
+} from "react-native-safe-area-context";
+import {
+    Portal
+} from "../../helpers/portalize";
+import Seperator from "../seperator";
+import SiteLogo from "../siteLogo";
+import Modal from "../modal";
+
+const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
+    isWorkWithSafeAreaView = true,
+    isWorkWithAnimation = true,
+    renderHeader: RenderHeader,
+    renderFooter: RenderFooter,
+    portalName = "menu-system",
+    customBackgroundColorKey,
+    isWorkWithPortal = true,
+    isWorkWithModal = true,
+    customBackgroundColor,
+    renderHeaderSeperator,
+    close: closeAction,
+    glassEffect = 0,
+    customLocalize,
+    seperatorProps,
+    renderSiteLogo,
+    siteLogoProps,
+    customTheme,
+    navigation,
+    modalProps,
+    isCollapse,
+    onClosed,
+    onOpened,
+    buttons,
+    onClose,
+    onOpen,
+    style,
+    id,
+    ...props
+}, ref) => {
+    const {
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const {
+        headerContainer: headerContainerDynamicStyle,
+        seperator: seperatorDynamicStyle,
+        container: containerDynamicStyle
+    } = useStyles({
+        customBackgroundColorKey,
+        customBackgroundColor,
+        glassEffect,
+        colors,
+        spaces
+    });
+
+    const [
+        isOpacityVisible,
+        setIsOpacityVisible
+    ] = useState(false);
+
+    const [
+        measures,
+        setMeasures
+    ] = useState<null | number>(null);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState(false);
+
+    const animatedX = useRef(new Animated.Value(0)).current;
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            close,
+            open
+        }),
+        []
+    );
+
+    useEffect(() => {
+        if(measures !== null) {
+            animatedX.setValue(measures * -1);
+
+            if(!isOpacityVisible) setIsOpacityVisible(true);
+
+            if(isActive) setIsActive(false);
+        }
+    }, [measures]);
+
+    useEffect(() => {
+        if(isCollapse !== undefined) {
+            if(isCollapse) {
+                setIsActive(isCollapse);
+            } else {
+                if(onClose) onClose({
+                    id
+                });
+
+                if(isWorkWithAnimation) {
+                    closeAnimation(() => setIsActive(isCollapse));
+                } else {
+                    animatedX.setValue(measures! * -1);
+
+                    setIsActive(isCollapse);
+
+                    if(onClosed) onClosed({
+                        id
+                    });
+                }
+            }
+        }
+    }, [isCollapse]);
+
+    useLayoutEffect(() => {
+        if(isActive && isOpacityVisible) {
+            if(onOpen) onOpen({
+                id
+            });
+
+            if(isWorkWithAnimation) {
+                openAnimation();
+            } else {
+                animatedX.setValue(0);
+
+                if(onOpened) onOpened({
+                    id
+                });
+            }
+        }
+    }, [
+        isOpacityVisible,
+        isActive
+    ]);
+
+    const open = () => {
+        setIsActive(true);
+    };
+
+    const close = () => {
+        if(onClose) onClose({
+            id
+        });
+
+        if(isWorkWithAnimation) {
+            closeAnimation(() => setIsActive(false));
+        } else {
+            animatedX.setValue(measures! * -1);
+
+            setIsActive(false);
+
+            if(onClosed) onClosed({
+                id
+            });
+        }
+    };
+
+    const openAnimation = () => {
+        Animated.timing(animatedX, {
+            useNativeDriver: Platform.OS !== "web",
+            easing: Easing.linear,
+            duration: 300,
+            toValue: 0
+        }).start(({
+            finished
+        }) => {
+            if(finished) {
+                if(onOpened) onOpened({
+                    id
+                });
+            }
+        });
+    };
+
+    const closeAnimation = (callback?: () => void) => {
+        Animated.timing(animatedX, {
+            useNativeDriver: Platform.OS !== "web",
+            toValue: measures! * -1,
+            easing: Easing.linear,
+            duration: 300
+        }).start(({
+            finished
+        }) => {
+            if(finished) {
+                if(callback) callback();
+
+                if(onClosed) onClosed({
+                    id
+                });
+            }
+        });
+    };
+
+    const updateMenuButtonCollabs = ({
+        depthMap,
+        status
+    }: {
+        depthMap: Array<number>;
+        status: boolean;
+    }) => {
+        const state = NCoreUIKitMenu.get({
+            id
+        });
+
+        if(!state) {
+            return;
+        }
+
+        const recursivelyCatch = (item: Array<MenuButtonType>, index = 0): Array<MenuButtonType> => {
+            const tIndex = depthMap[index];
+
+            return item.map((c_item, c_index) => {
+                if(c_index !== tIndex) {
+                    return c_item;
+                }
+
+                if(index === depthMap.length - 1) {
+                    return {
+                        ...c_item,
+                        isCollapse: status
+                    };
+                }
+
+                return {
+                    ...c_item,
+                    subButtons: recursivelyCatch(c_item.subButtons as Array<MenuButtonType>, index + 1)
+                };
+            });
+        };
+
+        const newButtons = recursivelyCatch(state.buttons);
+
+        state.buttons = newButtons;
+
+        NCoreUIKitMenu.update({
+            menuData: state,
+            id: id
+        });
+    };
+
+    const renderHeader = () => {
+        if(RenderHeader) {
+            return <RenderHeader/>;
+        }
+
+        return <View
+            style={[
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ]}
+        >
+            {renderSiteLogo ? renderSiteLogo() : <SiteLogo
+                customLocalize={customLocalize}
+                customTheme={customTheme}
+                {...siteLogoProps}
+            />}
+            {renderHeaderSeperator ? renderHeaderSeperator() : <Seperator
+                {...seperatorProps}
+                length="100%"
+                style={[
+                    seperatorProps?.style,
+                    stylesheet.seperator,
+                    seperatorDynamicStyle
+                ]}
+            />}
+        </View>;
+    };
+
+    const renderButtons = () => {
+        if(!buttons || !buttons.length) {
+            return null;
+        }
+
+        return buttons.map((buttonItem, buttonIndex) => {
+            return <MenuButton
+                updateMenuButtonCollabs={updateMenuButtonCollabs}
+                key={`menu-button-${id}-${buttonIndex}`}
+                closeAction={closeAction}
+                buttonIndex={buttonIndex}
+                depthMap={[buttonIndex]}
+                buttonItem={buttonItem}
+                navigation={navigation}
+                id={id}
+            />;
+        });
+    };
+
+    const renderFooter = () => {
+        if(!RenderFooter) {
+            return null;
+        }
+
+        return <RenderFooter/>;
+    };
+
+    const renderSafeAreaContext = () => {
+        if(!isWorkWithSafeAreaView) {
+            return <Fragment>
+                {renderHeader()}
+            </Fragment>;
+        }
+
+        return <SafeAreaView
+            style={[
+                stylesheet.safeAreaView
+            ]}
+        >
+            {renderHeader()}
+            <View
+                style={[
+                    stylesheet.content
+                ]}
+            >
+                {renderButtons()}
+            </View>
+            {renderFooter()}
+        </SafeAreaView>;
+    };
+
+    const renderContent = () => {
+        return <Animated.View
+            {...props}
+            style={[
+                style,
+                stylesheet.container,
+                containerDynamicStyle,
+                {
+                    opacity: isOpacityVisible ? 1 : 0,
+                    transform: [{
+                        translateX: animatedX
+                    }]
+                }
+            ]}
+            onLayout={(event) => {
+                const width = event.nativeEvent.layout.width;
+
+                setMeasures(width);
+            }}
+        >
+            {renderSafeAreaContext()}
+        </Animated.View>;
+    };
+
+    if(isWorkWithModal && measures !== null) {
+        return <Modal
+            {...modalProps}
+            isWorkWithPortal={isWorkWithPortal}
+            isOverlayVisible={isOpacityVisible}
+            onOverlayPress={() => {
+                close();
+            }}
+            portalName={portalName}
+            isActive={isActive}
+            id="menu-modal"
+        >
+            {renderContent()}
+        </Modal>;
+    }
+
+    if(isWorkWithPortal && measures !== null) {
+        return <Portal
+            name={portalName}
+        >
+            {renderContent()}
+        </Portal>;
+    }
+
+    return renderContent();
+};
+export default forwardRef(Menu);

package/src/components/menu/stylesheet.ts

@@ -0,0 +1,90 @@
+import {
+    type ViewStyle,
+    StyleSheet,
+    Platform
+} from "react-native";
+import type {
+    MenuDynamicStyle
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+import {
+    webStyle
+} from "../../utils";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        ...Platform.select({
+            web: {
+                minWidth: 280,
+                maxWidth: 340,
+                width: "auto"
+            },
+            default: {
+                width: "82%"
+            }
+        }),
+        position: "absolute",
+        display: "flex",
+        height: "100%",
+        zIndex: 99997,
+        bottom: 0,
+        left: 0,
+        top: 0
+    },
+    content: {
+        justifyContent: "flex-start",
+        flexDirection: "column",
+        alignItems: "stretch",
+        flex: 1
+    },
+    safeAreaView: {
+        flex: 1
+    },
+    headerContainer: {
+        justifyContent: "center",
+        alignItems: "flex-start",
+        width: "100%"
+    },
+    seperator: {
+    }
+});
+
+export const useStyles = ({
+    customBackgroundColorKey,
+    customBackgroundColor,
+    glassEffect,
+    colors,
+    spaces
+}: MenuDynamicStyle) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container.default,
+            ...webStyle({
+                WebkitBackdropFilter: `blur(${glassEffect}px)`,
+                backdropFilter: `blur(${glassEffect}px)`
+            })
+        } as Mutable<ViewStyle>,
+        headerContainer: {
+            paddingHorizontal: spaces.spacingMd,
+            paddingTop: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        seperator: {
+            marginVertical: spaces.spacingMd
+        } as Mutable<ViewStyle>
+    };
+
+    if(customBackgroundColor) {
+        styles.container.backgroundColor = customBackgroundColor;
+    }
+
+    if(customBackgroundColorKey) {
+        styles.container.backgroundColor = colors.project[customBackgroundColorKey];
+    }
+
+    return styles;
+};
+
+export default stylesheet;

package/src/components/menu/type.ts

@@ -0,0 +1,102 @@
+import type {
+    ComponentType,
+    ReactNode
+} from "react";
+import type {
+    ImageProps,
+    StyleProp,
+    ViewStyle
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+import type ISeperatorProps from "../seperator/type";
+import type ISiteLogoProps from "../siteLogo/type";
+import type IRowCardProps from "../rowCard/type";
+import type IModalProps from "../modal/type";
+
+export type IMenuRef = {
+    close: () => void;
+    open: () => void;
+};
+
+export type MenuDynamicStyle = {
+    customBackgroundColorKey?: keyof NCoreUIKit.ProjectColorPalette;
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    customBackgroundColor?: string;
+    glassEffect?: number;
+};
+
+export type MenuLogoType = {
+    image?: () => ComponentType<ImageProps>;
+    imageUrl?: string;
+    title?: string;
+};
+
+export type MenuButton = {
+    title: keyof NCoreUIKit.Translation | (string & {});
+    isShowRedirectIcon?: NCoreUIKitIcon;
+    subButtons?: Array<MenuButton>;
+    isCollapsible?: boolean;
+    isUseLocalize?: boolean;
+    redirectMain?: string;
+    props?: IRowCardProps;
+    icon?: NCoreUIKitIcon;
+    redirectSub?: string;
+    isCollapse?: boolean;
+};
+
+interface IMenuProps {
+    customBackgroundColorKey?: keyof NCoreUIKit.ProjectColorPalette;
+    style?: StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    customLocalize?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
+    };
+    renderHeaderSeperator?: () => ReactNode;
+    navigation: NCoreUIKit.Navigation;
+    isWorkWithSafeAreaView?: boolean;
+    seperatorProps?: ISeperatorProps;
+    renderSiteLogo?: () => ReactNode;
+    customBackgroundColor?: string;
+    isAutoClosedOnClosed?: boolean;
+    siteLogoProps?: ISiteLogoProps;
+    renderHeader?: () => ReactNode;
+    renderFooter?: () => ReactNode;
+    isWorkWithAnimation?: boolean;
+    isShowCollabsButton?: boolean;
+    isWorkWithPortal?: boolean;
+    buttons: Array<MenuButton>;
+    isWorkWithModal?: boolean;
+    modalProps?: IModalProps;
+    isCollapsible?: boolean;
+    isAutoClosed?: boolean;
+    glassEffect?: number;
+    isCollapse?: boolean;
+    onOpened?: (props: {
+        id?: string
+    }) => void;
+    onClosed?: (props: {
+        id?: string
+    }) => void;
+    portalName?: string;
+    logo?: MenuLogoType;
+    onClose?: (props: {
+        id?: string
+    }) => void;
+    close?: () => void;
+    onOpen?: (props: {
+        id?: string
+    }) => void;
+    id: string;
+};
+
+export type {
+    IMenuProps as default
+};