ncore-ui-kit 1.0.0-alpha.0

package/lib/src/components/menu/index.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useLayoutEffect, forwardRef, useEffect, useState, Fragment, useRef } from "react";
+import { Platform, Animated, Easing, View } from "react-native";
+import {} from "./components/menuButton/type";
+import {} from "./type";
+import stylesheet, { useStyles } from "./stylesheet";
+import MenuButton from "./components/menuButton";
+import { NCoreUIKitTheme, NCoreUIKitMenu } from "../../core/hooks";
+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 = ({ 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);
+    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) => {
+        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 }) => {
+        const state = NCoreUIKitMenu.get({
+            id
+        });
+        if (!state) {
+            return;
+        }
+        const recursivelyCatch = (item, index = 0) => {
+            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, index + 1)
+                };
+            });
+        };
+        const newButtons = recursivelyCatch(state.buttons);
+        state.buttons = newButtons;
+        NCoreUIKitMenu.update({
+            menuData: state,
+            id: id
+        });
+    };
+    const renderHeader = () => {
+        if (RenderHeader) {
+            return _jsx(RenderHeader, {});
+        }
+        return _jsxs(View, { style: [
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ], children: [renderSiteLogo ? renderSiteLogo() : _jsx(SiteLogo, { customLocalize: customLocalize, customTheme: customTheme, ...siteLogoProps }), renderHeaderSeperator ? renderHeaderSeperator() : _jsx(Seperator, { ...seperatorProps, length: "100%", style: [
+                        seperatorProps?.style,
+                        stylesheet.seperator,
+                        seperatorDynamicStyle
+                    ] })] });
+    };
+    const renderButtons = () => {
+        if (!buttons || !buttons.length) {
+            return null;
+        }
+        return buttons.map((buttonItem, buttonIndex) => {
+            return _jsx(MenuButton, { updateMenuButtonCollabs: updateMenuButtonCollabs, closeAction: closeAction, buttonIndex: buttonIndex, depthMap: [buttonIndex], buttonItem: buttonItem, navigation: navigation, id: id }, `menu-button-${id}-${buttonIndex}`);
+        });
+    };
+    const renderFooter = () => {
+        if (!RenderFooter) {
+            return null;
+        }
+        return _jsx(RenderFooter, {});
+    };
+    const renderSafeAreaContext = () => {
+        if (!isWorkWithSafeAreaView) {
+            return _jsx(Fragment, { children: renderHeader() });
+        }
+        return _jsxs(SafeAreaView, { style: [
+                stylesheet.safeAreaView
+            ], children: [renderHeader(), _jsx(View, { style: [
+                        stylesheet.content
+                    ], children: renderButtons() }), renderFooter()] });
+    };
+    const renderContent = () => {
+        return _jsx(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);
+            }, children: renderSafeAreaContext() });
+    };
+    if (isWorkWithModal && measures !== null) {
+        return _jsx(Modal, { ...modalProps, isWorkWithPortal: isWorkWithPortal, isOverlayVisible: isOpacityVisible, onOverlayPress: () => {
+                close();
+            }, portalName: portalName, isActive: isActive, id: "menu-modal", children: renderContent() });
+    }
+    if (isWorkWithPortal && measures !== null) {
+        return _jsx(Portal, { name: portalName, children: renderContent() });
+    }
+    return renderContent();
+};
+export default forwardRef(Menu);

package/lib/src/components/menu/stylesheet.js

@@ -0,0 +1,65 @@
+import { StyleSheet, Platform } from "react-native";
+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 }) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container.default,
+            ...webStyle({
+                WebkitBackdropFilter: `blur(${glassEffect}px)`,
+                backdropFilter: `blur(${glassEffect}px)`
+            })
+        },
+        headerContainer: {
+            paddingHorizontal: spaces.spacingMd,
+            paddingTop: spaces.spacingMd
+        },
+        seperator: {
+            marginVertical: spaces.spacingMd
+        }
+    };
+    if (customBackgroundColor) {
+        styles.container.backgroundColor = customBackgroundColor;
+    }
+    if (customBackgroundColorKey) {
+        styles.container.backgroundColor = colors.project[customBackgroundColorKey];
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/menu/type.js

@@ -0,0 +1,2 @@
+;
+export {};

package/lib/src/components/modal/index.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, forwardRef, useEffect, useState, useRef } from "react";
+import { TouchableWithoutFeedback, Animated, Platform, Easing, View } from "react-native";
+import {} from "./type";
+import stylesheet from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import {} from "../../types";
+import { Portal } from "../../helpers/portalize";
+import { uuid } from "../../utils";
+/**
+ * A generic modal
+ * @param props {@link IModalProps}
+ * @returns Element
+ */
+const Modal = ({ isScaleAnimatedOnlyOpen = true, closeAnimationDelay = 100, isDisabledOverlay = false, openAnimationDelay = 100, isContentRequired = true, isOverlayVisible = true, isScaleAnimated = false, alignContent = "center", isWorkWithPortal = true, isActive: isActiveProp, onContainerLayout, isAnimated = true, onOverlayPress, contentStyle, overlayProps, customTheme, portalName, id: outID, children, onClosed, style }, ref) => {
+    const { colors } = NCoreUIKitTheme.useContext(customTheme);
+    const id = useRef(outID ? outID : uuid());
+    const scaleAnim = useRef(new Animated.Value(isAnimated && isScaleAnimated ? 0 : 1)).current;
+    const opacityAnim = useRef(new Animated.Value(isAnimated ? 0 : 1)).current;
+    const [isActive, setIsActive] = useState(isActiveProp === undefined ? true : isActiveProp);
+    useEffect(() => {
+        if (isAnimated) {
+            if (isScaleAnimated) {
+                Animated.timing(scaleAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 1
+                }).start();
+            }
+            Animated.timing(opacityAnim, {
+                duration: openAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 1
+            }).start();
+        }
+    }, [isActive]);
+    useEffect(() => {
+        if (isActiveProp !== undefined) {
+            setIsActive(isActiveProp);
+        }
+    }, [isActiveProp]);
+    useImperativeHandle(ref, () => ({
+        closeAnimation,
+        setIsActive
+    }), []);
+    const closeAnimation = (_onClosed) => {
+        if (isAnimated) {
+            if (isScaleAnimated && !isScaleAnimatedOnlyOpen) {
+                Animated.timing(scaleAnim, {
+                    duration: closeAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 0
+                }).start();
+            }
+            Animated.timing(opacityAnim, {
+                duration: closeAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            }).start(({ finished }) => {
+                if (finished) {
+                    if (_onClosed)
+                        _onClosed({
+                            id: id.current
+                        });
+                    if (onClosed)
+                        onClosed({
+                            id: id.current
+                        });
+                }
+            });
+        }
+    };
+    const renderOverlay = () => {
+        if (!isOverlayVisible) {
+            return null;
+        }
+        return _jsx(TouchableWithoutFeedback, { ...overlayProps, style: [
+                stylesheet.overlay
+            ], onPress: () => {
+                if (isDisabledOverlay) {
+                    return;
+                }
+                if (onOverlayPress)
+                    onOverlayPress({
+                        closeAnimation
+                    });
+            }, children: _jsx(View, { style: [
+                    stylesheet.overlayContent,
+                    {
+                        backgroundColor: colors.system.scrim
+                    }
+                ], ...Platform.select({
+                    web: {
+                        dataSet: {
+                            disablePressableHoverEffect: "true",
+                            disablePressableDownEffect: "true"
+                        }
+                    },
+                    default: {}
+                }) }) });
+    };
+    const renderContainer = () => {
+        return _jsxs(Animated.View, { onLayout: (e) => {
+                if (onContainerLayout)
+                    onContainerLayout(e);
+            }, style: [
+                style,
+                stylesheet.container,
+                {
+                    justifyContent: alignContent === "center" ? "center" : undefined,
+                    alignItems: alignContent === "center" ? "center" : "baseline",
+                    opacity: opacityAnim,
+                    transform: [{
+                            scale: scaleAnim
+                        }]
+                }
+            ], children: [renderOverlay(), isContentRequired ? renderContent() : children] });
+    };
+    const renderContent = () => {
+        if (!children) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                contentStyle,
+                stylesheet.content
+            ], children: children });
+    };
+    const renderWithPortal = () => {
+        return _jsx(Portal, { name: portalName ? portalName : "modal-system", children: renderContainer() });
+    };
+    if (!isActive) {
+        return null;
+    }
+    return isWorkWithPortal ? renderWithPortal() : renderContainer();
+};
+export default forwardRef(Modal);

package/lib/src/components/modal/stylesheet.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        position: "absolute",
+        display: "flex",
+        zIndex: 99994,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    overlay: {
+        position: "absolute",
+        zIndex: 99995,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    overlayContent: {
+        position: "absolute",
+        zIndex: 99996,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    content: {
+        display: "contents",
+        zIndex: 99997
+    }
+});
+export default stylesheet;

package/lib/src/components/modal/type.js

@@ -0,0 +1,3 @@
+import {} from "react";
+import {} from "react-native";
+;