ncore-ui-kit 1.0.0-alpha.0

package/src/components/embeddedMenu/index.tsx

@@ -0,0 +1,447 @@
+import {
+    useImperativeHandle,
+    useLayoutEffect,
+    forwardRef,
+    useEffect,
+    useState,
+    Fragment,
+    useRef
+} from "react";
+import {
+    Platform,
+    Animated,
+    Easing,
+    View
+} from "react-native";
+import {
+    type EmbeddedMenuButton as EmbeddedMenuButtonType
+} from "./components/menuButton/type";
+import {
+    type IEmbeddedMenuRef
+} from "./type";
+import type IEmbeddedMenuProps from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import MenuButton from "./components/menuButton";
+import {
+    NCoreUIKitEmbeddedMenu,
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type {
+    RefForwardingComponent
+} from "../../types";
+import {
+    PanelLeftClose,
+    PanelLeftOpen
+} from "lucide-react-native";
+import {
+    SafeAreaView
+} from "react-native-safe-area-context";
+import Seperator from "../seperator";
+import SiteLogo from "../siteLogo";
+import Button from "../button";
+
+const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
+    isWorkWithSafeAreaView = true,
+    isWorkWithHeaderSpace = true,
+    isWorkWithAnimation = true,
+    renderHeader: RenderHeader,
+    renderFooter: RenderFooter,
+    renderHeaderSeperator,
+    isShowSiteLogo = true,
+    close: closeAction,
+    renderSiteLogo,
+    customLocalize,
+    maxWidth = 300,
+    minWidth = 75,
+    siteLogoProps,
+    headerSpace,
+    customTheme,
+    navigation,
+    isCollapse,
+    onClosed,
+    onOpened,
+    buttons,
+    onClose,
+    onOpen,
+    style,
+    id,
+    ...props
+}, ref) => {
+    const {
+        configs,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const [
+        isActive,
+        setIsActive
+    ] = useState(false);
+
+    const {
+        headerContentContainer: headerContentContainerDynamicStyle,
+        headerContainer: headerContainerDynamicStyle,
+        collapseButton: collapseButtonDynamicStyle,
+        seperator: seperatorDynamicStyle,
+        container: containerDynamicStyle,
+        siteLogo: siteLogoDynamicStyle
+    } = useStyles({
+        isCollapse: isActive,
+        colors,
+        spaces
+    });
+
+    const animatedX = useRef(new Animated.Value(!isCollapse ? minWidth : maxWidth)).current;
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            close,
+            open
+        }),
+        []
+    );
+
+    useEffect(() => {
+        if(isCollapse !== undefined && isActive !== isCollapse) setIsActive(isCollapse);
+    }, [isCollapse]);
+
+    useLayoutEffect(() => {
+        if(isActive) {
+            if(onOpen) onOpen({
+                id
+            });
+
+            if(Platform.OS !== "web") {
+                if(onOpened) onOpened({
+                    id
+                });
+            } else if(isWorkWithAnimation) {
+                openAnimation();
+            } else {
+                animatedX.setValue(maxWidth);
+
+                if(onOpened) onOpened({
+                    id
+                });
+            }
+        } else {
+            if(onClose) onClose({
+                id
+            });
+
+            if(isWorkWithAnimation && Platform.OS === "web") {
+                closeAnimation();
+            } else {
+                animatedX.setValue(minWidth);
+
+                if(onClosed) onClosed({
+                    id
+                });
+            }
+        }
+    }, [
+        isActive
+    ]);
+
+    const open = () => {
+        NCoreUIKitEmbeddedMenu.open({
+            id
+        });
+    };
+
+    const close = () => {
+        NCoreUIKitEmbeddedMenu.close({
+            id
+        });
+    };
+
+    const openAnimation = () => {
+        Animated.timing(animatedX, {
+            useNativeDriver: Platform.OS !== "web",
+            easing: Easing.linear,
+            toValue: maxWidth,
+            duration: 300
+        }).start(({
+            finished
+        }) => {
+            if(finished) {
+                if(onOpened) onOpened({
+                    id
+                });
+            }
+        });
+    };
+
+    const closeAnimation = () => {
+        Animated.timing(animatedX, {
+            useNativeDriver: Platform.OS !== "web",
+            easing: Easing.linear,
+            toValue: minWidth,
+            duration: 300
+        }).start(({
+            finished
+        }) => {
+            if(finished) {
+                if(onClosed) onClosed({
+                    id
+                });
+            }
+        });
+    };
+
+    const updateMenuButtonCollabs = ({
+        depthMap,
+        status
+    }: {
+        depthMap: Array<number>;
+        status: boolean;
+    }) => {
+        const state = NCoreUIKitEmbeddedMenu.get({
+            id
+        });
+
+        if(!state) {
+            return;
+        }
+
+        const recursivelyCatch = (item: Array<EmbeddedMenuButtonType>, index = 0): Array<EmbeddedMenuButtonType> => {
+            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<EmbeddedMenuButtonType>, index + 1)
+                };
+            });
+        };
+
+        const newButtons = recursivelyCatch(state.buttons);
+
+        state.buttons = newButtons;
+
+        NCoreUIKitEmbeddedMenu.update({
+            menuData: state,
+            id: id
+        });
+    };
+
+    const renderToggleCollapseForCollabsed = () => {
+        if(isActive) {
+            return null;
+        }
+
+        return <Button
+            isCustomPadding={true}
+            spreadBehaviour="free"
+            type="neutral"
+            size="medium"
+            icon={({
+                color,
+                size
+            }) => {
+                return <PanelLeftOpen
+                    color={colors.content.icon[color]}
+                    size={size * 2}
+                />;
+            }}
+            style={{
+                ...collapseButtonDynamicStyle
+            }}
+            onPress={() => {
+                if(isActive) {
+                    close();
+                } else {
+                    open();
+                }
+            }}
+        />;
+    };
+
+    const renderToggleCollapseForExpended = () => {
+        if(!isActive) {
+            return null;
+        }
+
+        return <Button
+            isCustomPadding={true}
+            spreadBehaviour="free"
+            type="neutral"
+            size="medium"
+            icon={({
+                color,
+                size
+            }) => {
+                return <PanelLeftClose
+                    color={colors.content.icon[color]}
+                    size={size * 2}
+                />;
+            }}
+            style={{
+                ...collapseButtonDynamicStyle
+            }}
+            onPress={() => {
+                if(isActive) {
+                    close();
+                } else {
+                    open();
+                }
+            }}
+        />;
+    };
+
+    const renderHeader = () => {
+        if(RenderHeader) {
+            return <RenderHeader
+                isCollapse={isActive}
+                maxWidth={maxWidth}
+                minWidth={minWidth}
+            />;
+        }
+
+        return <View
+            style={[
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ]}
+        >
+            {renderToggleCollapseForCollabsed()}
+            <View
+                style={[
+                    stylesheet.headerContentContainer,
+                    headerContentContainerDynamicStyle
+                ]}
+            >
+                {isShowSiteLogo ? renderSiteLogo ? renderSiteLogo() : <SiteLogo
+                    customLocalize={customLocalize}
+                    customTheme={customTheme}
+                    {...siteLogoProps}
+                    title={isActive ? siteLogoProps?.title : undefined}
+                    size={isActive ? siteLogoProps?.size : "small"}
+                    style={[
+                        siteLogoProps?.style,
+                        siteLogoDynamicStyle
+                    ]}
+                /> : <View
+                    style={{
+                        flex: 1
+                    }}
+                />}
+                {renderToggleCollapseForExpended()}
+            </View>
+            {renderHeaderSeperator ? renderHeaderSeperator() : <Seperator
+                style={[
+                    stylesheet.seperator,
+                    seperatorDynamicStyle
+                ]}
+            />}
+        </View>;
+    };
+
+    const renderButtons = () => {
+        if(!buttons || !buttons.length) {
+            return null;
+        }
+
+        return buttons.map((buttonItem, buttonIndex) => {
+            return <MenuButton
+                key={`embedded-menu-button-${id}-${buttonIndex}`}
+                updateMenuButtonCollabs={updateMenuButtonCollabs}
+                closeAction={closeAction}
+                buttonIndex={buttonIndex}
+                isMenuCollabs={isActive}
+                depthMap={[buttonIndex]}
+                buttonItem={buttonItem}
+                navigation={navigation}
+                openMenu={() => {
+                    open();
+                }}
+                id={id}
+            />;
+        });
+    };
+
+    const renderFooter = () => {
+        if(!RenderFooter) {
+            return null;
+        }
+
+        return <RenderFooter
+            isCollapse={isActive}
+            maxWidth={maxWidth}
+            minWidth={minWidth}
+        />;
+    };
+
+    const renderSafeAreaContext = () => {
+        if(!isWorkWithSafeAreaView) {
+            return <Fragment>
+                {isWorkWithHeaderSpace && (configs.headerSpace || headerSpace) ? <View
+                    style={{
+                        height: headerSpace ? headerSpace : configs.headerSpace,
+                        width: "100%"
+                    }}
+                /> : null}
+                {renderHeader()}
+                <View
+                    style={[
+                        stylesheet.content
+                    ]}
+                >
+                    {renderButtons()}
+                </View>
+                {renderFooter()}
+            </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,
+                Platform.OS === "web" ? {
+                    width: animatedX
+                } : {
+                    width: isActive ? maxWidth : minWidth
+                }
+            ]}
+        >
+            {renderSafeAreaContext()}
+        </Animated.View>;
+    };
+
+    return renderContent();
+};
+export default forwardRef(Menu);

package/src/components/embeddedMenu/stylesheet.ts

@@ -0,0 +1,77 @@
+import {
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    EmbeddedMenuDynamicStyle
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        display: "flex",
+        height: "100%"
+    },
+    content: {
+        justifyContent: "flex-start",
+        flexDirection: "column",
+        alignItems: "stretch",
+        flex: 1
+    },
+    safeAreaView: {
+        flex: 1
+    },
+    headerContainer: {
+        justifyContent: "center",
+        alignItems: "flex-start",
+        width: "100%"
+    },
+    seperator: {
+    },
+    headerContentContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        width: "100%"
+    }
+});
+
+export const useStyles = ({
+    isCollapse,
+    colors,
+    spaces
+}: EmbeddedMenuDynamicStyle) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container.default
+        } as Mutable<ViewStyle>,
+        headerContainer: {
+            paddingHorizontal: spaces.spacingMd,
+            paddingTop: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        seperator: {
+            marginVertical: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        collapseButton: {
+            marginBottom: spaces.spacingSm,
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        headerContentContainer: {
+        } as Mutable<ViewStyle>,
+        siteLogo: {
+        } as Mutable<ViewStyle>
+    };
+
+    if(isCollapse) {
+        styles.siteLogo.marginRight = spaces.spacingMd;
+    } else {
+        styles.headerContainer.justifyContent = "center";
+        styles.headerContainer.alignItems = "center";
+    }
+
+    return styles;
+};
+
+export default stylesheet;

package/src/components/embeddedMenu/type.ts

@@ -0,0 +1,103 @@
+import type {
+    ComponentType,
+    ReactNode
+} from "react";
+import type {
+    ImageProps,
+    StyleProp,
+    ViewStyle
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+import type ISiteLogoProps from "../siteLogo/type";
+import type IRowCardProps from "../rowCard/type";
+
+export type IEmbeddedMenuRef = {
+    close: () => void;
+    open: () => void;
+};
+
+export type EmbeddedMenuDynamicStyle = {
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    isCollapse: boolean;
+};
+
+export type EmbeddedMenuLogoType = {
+    image?: () => ComponentType<ImageProps>;
+    imageUrl?: string;
+    title?: string;
+};
+
+export type EmbeddedMenuButton = {
+    title: keyof NCoreUIKit.Translation | (string & {});
+    subButtons?: Array<EmbeddedMenuButton>;
+    isShowRedirectIcon?: NCoreUIKitIcon;
+    isCollapsible?: boolean;
+    isUseLocalize?: boolean;
+    redirectMain?: string;
+    props?: IRowCardProps;
+    icon?: NCoreUIKitIcon;
+    redirectSub?: string;
+    isCollapse?: boolean;
+};
+
+interface IEmbeddedMenuProps {
+    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;
+    buttons: Array<EmbeddedMenuButton>;
+    navigation: NCoreUIKit.Navigation;
+    isWorkWithSafeAreaView?: boolean;
+    renderSiteLogo?: () => ReactNode;
+    isWorkWithHeaderSpace?: boolean;
+    isAutoClosedOnClosed?: boolean;
+    siteLogoProps?: ISiteLogoProps;
+    isWorkWithAnimation?: boolean;
+    isShowCollabsButton?: boolean;
+    logo?: EmbeddedMenuLogoType;
+    isShowSiteLogo?: boolean;
+    renderHeader?: (props: {
+        isCollapse: boolean;
+        maxWidth: number;
+        minWidth: number;
+    }) => ReactNode;
+    renderFooter?: (props: {
+        isCollapse: boolean;
+        maxWidth: number;
+        minWidth: number;
+    }) => ReactNode;
+    isCollapsible?: boolean;
+    isAutoClosed?: boolean;
+    isCollapse?: boolean;
+    headerSpace?: number;
+    onOpened?: (props: {
+        id?: string
+    }) => void;
+    onClosed?: (props: {
+        id?: string
+    }) => void;
+    onClose?: (props: {
+        id?: string
+    }) => void;
+    close?: () => void;
+    onOpen?: (props: {
+        id?: string
+    }) => void;
+    maxWidth?: number;
+    minWidth?: number;
+    id: string;
+};
+
+export type {
+    IEmbeddedMenuProps as default
+};