Merge branch 'release/1.0.0-pre-alpha.2'

example/src/index.tsx

@@ -7,6 +7,7 @@ import {
 import moment from "moment";
 import "moment/locale/tr";
 import {
+    Host,
     setupNCoreUIKit
 } from "ncore-ui-kit";
 
@@ -44,7 +45,11 @@ const ContextAPI = () => {
     }
 
     return <NCoreUIKitBase.Provider>
-        <App/>
+        <Host
+            name="main-header"
+        >
+            <App/>
+        </Host>
     </NCoreUIKitBase.Provider>;
 };
 export default ContextAPI;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ncore-ui-kit",
-    "version": "1.0.0-pre-alpha.1",
+    "version": "1.0.0-pre-alpha.2",
     "description": "NİBGAT® | NCore - UI Kit for React-Native Mobile Apps.",
     "main": "./lib/module/index.js",
     "types": "./lib/typescript/src/index.d.ts",

src/components/mainHeader/index.tsx

@@ -12,11 +12,16 @@ import {
     SafeAreaView
 } from "react-native-safe-area-context";
 import SiteLogo from "../siteLogo";
+import {
+    Portal
+} from "../../helpers/portalize";
 
 const MainHeader = ({
     isWorkWithSafeAreaView = true,
     isWorkWithSeperator = false,
     backgroundColor = "default",
+    portalName = "main-header",
+    isWorkWithPortal = false,
     renderRight: RenderRight,
     renderLeft: RenderLeft,
     siteLogoProps,
@@ -70,27 +75,44 @@ const MainHeader = ({
         </View>;
     };
 
+    const renderContentContainer = () => {
+        if(isWorkWithPortal) {
+            return <Portal
+                name={portalName}
+            >
+                {renderContent()}
+            </Portal>;
+        }
+
+        return renderContent();
+    };
+
     const renderSafeAreaView = () => {
         return <SafeAreaView
             edges={[
                 "top"
             ]}
         >
-            {renderContent()}
+            {renderContentContainer()}
         </SafeAreaView>;
     };
 
-    if(children) {
+    const renderWithChildren = () => {
         return <View
             style={[
                 stylesheet.baseContainer
             ]}
         >
-            {isWorkWithSafeAreaView ? renderSafeAreaView() : renderContent()}
-            {children}
+            {isWorkWithPortal ? children : null}
+            {isWorkWithSafeAreaView ? renderSafeAreaView() : renderContentContainer()}
+            {isWorkWithPortal ? null : children}
         </View>;
+    };
+
+    if(children) {
+        return renderWithChildren();
     }
 
-    return renderContent();
+    return isWorkWithSafeAreaView ? renderSafeAreaView() : renderContentContainer();
 };
 export default MainHeader;

src/components/mainHeader/type.ts

@@ -18,7 +18,9 @@ interface IMainHeader {
     isWorkWithSeperator?: boolean;
     renderRight?: () => ReactNode;
     renderLeft?: () => ReactNode;
+    isWorkWithPortal?: boolean;
     children?: ReactNode;
+    portalName?: string;
 };
 
 export type {

src/components/menu/index.tsx

@@ -25,8 +25,8 @@ import stylesheet, {
 } from "./stylesheet";
 import MenuButton from "./components/menuButton";
 import {
-    NCoreUIKitMenu,
-    NCoreUIKitTheme
+    NCoreUIKitTheme,
+    NCoreUIKitMenu
 } from "../../core/hooks";
 import type {
     RefForwardingComponent
@@ -37,9 +37,9 @@ import {
 import {
     Portal
 } from "../../helpers/portalize";
-import Modal from "../modal";
 import Seperator from "../seperator";
 import SiteLogo from "../siteLogo";
+import Modal from "../modal";
 
 const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     isWorkWithSafeAreaView = true,
@@ -115,7 +115,27 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
     }, [measures]);
 
     useEffect(() => {
-        if(isCollapse !== undefined) setIsActive(isCollapse);
+        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(() => {
@@ -133,23 +153,6 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
                     id
                 });
             }
-        } else {
-            if(onClose) onClose({
-                id
-            });
-
-            if(!isWorkWithModal) {
-
-                if(isWorkWithAnimation) {
-                    closeAnimation();
-                } else {
-                    animatedX.setValue(measures! * -1);
-
-                    if(onClosed) onClosed({
-                        id
-                    });
-                }
-            }
         }
     }, [
         isOpacityVisible,
@@ -165,18 +168,16 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
             id
         });
 
-        if(isWorkWithModal) {
-            if(isWorkWithAnimation) {
-                closeAnimation();
-            } else {
-                animatedX.setValue(measures! * -1);
-
-                if(onClosed) onClosed({
-                    id
-                });
-            }
+        if(isWorkWithAnimation) {
+            closeAnimation(() => setIsActive(false));
         } else {
+            animatedX.setValue(measures! * -1);
+
             setIsActive(false);
+
+            if(onClosed) onClosed({
+                id
+            });
         }
     };
 
@@ -197,7 +198,7 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
         });
     };
 
-    const closeAnimation = () => {
+    const closeAnimation = (callback?: () => void) => {
         Animated.timing(animatedX, {
             useNativeDriver: Platform.OS !== "web",
             toValue: measures! * -1,
@@ -207,6 +208,8 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
             finished
         }) => {
             if(finished) {
+                if(callback) callback();
+
                 if(onClosed) onClosed({
                     id
                 });