Release: v1.0.0-pre-alpha.11

example/src/pages/home/index.tsx

@@ -19,7 +19,8 @@ import {
     CheckBox,
     Button,
     Dialog,
-    Text
+    Text,
+    NCoreUIKitBottomSheet
 } from "ncore-ui-kit-mobile";
 import {
     useNavigation
@@ -265,6 +266,23 @@ const Home = () => {
                 bottomSheetRef.current?.open();
             }}
             type="success"
+            title="Open Local BottomSheet"
+            variant="filled"
+        />
+        <Button
+            onPress={() => {
+                NCoreUIKitBottomSheet.open({
+                    children: <View>
+                        <Text>Deneme 123</Text>
+                        <Text>Deneme 123</Text>
+                        <Text>Deneme 123</Text>
+                        <Text>Deneme 123</Text>
+                        <Text>Deneme 123</Text>
+                        <Text>Deneme 123</Text>
+                    </View>
+                });
+            }}
+            type="success"
             title="Open BottomSheet"
             variant="filled"
         />

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ncore-ui-kit-mobile",
-    "version": "1.0.0-pre-alpha.10",
+    "version": "1.0.0-pre-alpha.11",
     "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/bottomSheet/index.tsx

@@ -62,9 +62,11 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     scrollViewStyle,
     onScrollEnd,
     customTheme,
+    portalName,
     modalProps,
     snapPoint,
     customKey,
+    id: outID,
     children,
     onClosed,
     onOpened,
@@ -93,6 +95,8 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
         setIsActive
     ] = useState(isActiveProp === undefined ? false : isActiveProp);
 
+    const id = useRef(outID ? outID : uuid());
+
     const bottomSheetKey = useRef(customKey ? customKey : uuid());
 
     let bottomSafeArea = isWrapSafeAreaContext ? bottom : 0;
@@ -145,8 +149,8 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     useImperativeHandle(
         ref,
         () => ({
-            close: (callback) => {
-                closeAnimation(undefined, callback);
+            close: (onClosed) => {
+                closeAnimation(undefined, onClosed);
             },
             open: () => {
                 setIsActive(true);
@@ -302,8 +306,12 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
         });
     };
 
-    const closeAnimation = (toValue?: number, callback?: () => void) => {
-        if(onClose) onClose();
+    const closeAnimation = (toValue?: number, _onClosed?: (props: {
+        id: string;
+    }) => void) => {
+        if(onClose) onClose({
+            id: id.current
+        });
 
         const currentSnapPoint = isWorkAsFullScreen
             ? containerHeightRef.current
@@ -321,8 +329,13 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
 
                 setIsActive(false);
 
-                if(onClosed) onClosed();
-                if(callback) callback();
+                if(onClosed) onClosed({
+                    id: id.current
+                });
+
+                if(_onClosed) _onClosed({
+                    id: id.current
+                });
             }
         });
     };
@@ -672,7 +685,9 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
                             }
                         }
 
-                        if(onClose) onClose();
+                        if(onClose) onClose({
+                            id: id.current
+                        });
 
                         Animated.timing(animatedTranslateY, {
                             useNativeDriver: false,
@@ -684,7 +699,9 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
                             if (finished && isClosing) {
                                 setIsActive(false);
 
-                                if (onClosed) onClosed();
+                                if (onClosed) onClosed({
+                                    id: id.current
+                                });
                             }
                         });
                     }
@@ -806,12 +823,14 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
 
     return <Modal
         {...modalProps}
+        portalName={portalName ? portalName : "bottomSheet-system"}
         isWorkWithPortal={isWorkWithPortal}
         key={`${bottomSheetKey}-modal`}
         isContentRequired={false}
         isActive={isActive}
         alignContent="free"
         isAnimated={false}
+        id={id.current}
         ref={modalRef}
         onContainerLayout={(e) => {
             const containerLayoutHeight = e.nativeEvent.layout.height;

src/components/bottomSheet/type.ts

@@ -9,7 +9,9 @@ import type {
 import type IModalProps from "../modal/type";
 
 export interface IBottomSheetRef {
-    close: (callback: () => void) => void;
+    close: (onClosed: (props: {
+        id: string;
+    }) => void) => void;
     open: () => void;
 }
 
@@ -36,12 +38,17 @@ interface IBottomSheetProps {
     isShowHandle?: boolean;
     isAutoHeight?: boolean;
     handleHeight?: number;
-    onClosed?: () => void;
     onOpened?: () => void;
     isCanSwipe?: boolean;
-    onClose?: () => void;
     children?: ReactNode;
+    onClosed?: (props: {
+        id: string;
+    }) => void;
+    portalName?: string;
     onOpen?: () => void;
+    onClose?: (props: {
+        id: string;
+    }) => void;
     snapPoint?: number;
     isActive?: boolean;
     customKey?: string;
@@ -52,6 +59,7 @@ interface IBottomSheetProps {
         paletteKey?: NCoreUIKit.PaletteKey;
         themeKey?: NCoreUIKit.ThemeKey;
     };
+    id?: string;
 }
 export type {
     IBottomSheetProps as default

src/components/modal/index.tsx

@@ -49,6 +49,7 @@ const Modal: RefForwardingComponent<IModalRef, IModalProps> = ({
     contentStyle,
     overlayProps,
     customTheme,
+    portalName,
     id: outID,
     children,
     onClosed,
@@ -207,7 +208,7 @@ const Modal: RefForwardingComponent<IModalRef, IModalProps> = ({
     };
 
     const renderWithPortal = () => {
-        return <Portal name="modal-system">
+        return <Portal name={portalName ? portalName : "modal-system"}>
             {renderContainer()}
         </Portal>;
     };

src/components/modal/type.ts

@@ -43,6 +43,7 @@ export type ModalInternalProps = {
     onClosed?: (props: {
         id: string;
     }) => void;
+    portalName?: string;
     isActive?: boolean;
     id: string;
 };

src/context/bottomSheet.tsx

@@ -0,0 +1,121 @@
+import {
+    type ReactNode,
+    Fragment
+} from "react";
+import {
+    type BottomSheetContextType,
+    type BottomSheetDataType
+} from "../types/bottomSheet";
+import NCoreContext, {
+    type ConfigType
+} from "ncore-context";
+import BottomSheet from "../components/bottomSheet";
+import {
+    uuid
+} from "../utils";
+
+class NCoreUIKitBottomSheet extends NCoreContext<BottomSheetContextType, ConfigType<BottomSheetContextType>> {
+    constructor({
+        data = []
+    }: {
+        data?: Array<BottomSheetDataType>
+    }) {
+        super({
+            close: () => {},
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-BottomSheetContext"
+        });
+    };
+
+    open = (dialogData: BottomSheetDataType) => {
+        const currentData = this.state.data;
+
+        const dialogID = dialogData.id ? dialogData.id : uuid();
+
+        currentData.push({
+            ...dialogData,
+            id: dialogID
+        });
+
+        this.setState({
+            data: currentData
+        });
+
+        return dialogID;
+    };
+
+    close = (props?: {
+        index?: number;
+        id?: string;
+    }) => {
+        const currentData = this.state.data;
+
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((bottomSheet) => bottomSheet.id === props.id);
+
+            if (keyIndex !== -1) {
+                currentData.splice(keyIndex, 1);
+
+                this.setState({
+                    data: currentData
+                });
+            }
+
+            return;
+        }
+
+        if (props && props.index !== undefined) {
+            currentData.splice(props.index, 1);
+
+            this.setState({
+                data: currentData
+            });
+
+            return;
+        }
+
+        currentData.pop();
+
+        this.setState({
+            data: currentData
+        });
+    };
+
+    Render = ({
+        children
+    }: {
+        children: ReactNode;
+    }) => {
+        const {
+            data
+        } = this.useContext();
+
+        return <Fragment>
+            {children}
+            {data.map((item: BottomSheetDataType) => {
+                return <BottomSheet
+                    key={`NCoreUIKit-BottomSheet-${item.id}`}
+                    id={item.id as string}
+                    isActive={true}
+                    onClosed={() => {
+                        if(item.onClosed) {
+                            item.onClosed({
+                                id: item.id as string
+                            });
+                        }
+
+                        if(item.isAutoClosed === undefined || item.isAutoClosed === true) {
+                            this.close({
+                                id: item.id
+                            });
+                        }
+                    }}
+                    {...item}
+                />;
+            })}
+        </Fragment>;
+    };
+}
+export default NCoreUIKitBottomSheet;

src/context/index.tsx

@@ -1,10 +1,11 @@
 import {
     type ReactNode
 } from "react";
-import NCoreUIKitLocalize from "./localize";
-import NCoreUIKitSnackBar from "./snackBar";
+import NCoreUIKitBottomSheet from "./bottomSheet";
 import NCoreUIKitDialog from "./dialog";
+import NCoreUIKitLocalize from "./localize";
 import NCoreUIKitModal from "./modal";
+import NCoreUIKitSnackBar from "./snackBar";
 import NCoreUIKitTheme from "./theme";
 import NCoreUIKitToast from "./toast";
 import {
@@ -15,6 +16,7 @@ import {
 } from "../helpers/portalize";
 
 class CoreContext<T extends NCoreUIKitConfig> {
+    NCoreUIKitBottomSheet: NCoreUIKitBottomSheet;
     NCoreUIKitLocalize: NCoreUIKitLocalize<T>;
     NCoreUIKitSnackBar: NCoreUIKitSnackBar;
     NCoreUIKitTheme: NCoreUIKitTheme<T>;
@@ -51,6 +53,10 @@ class CoreContext<T extends NCoreUIKitConfig> {
         this.NCoreUIKitDialog = new NCoreUIKitDialog({
             data: []
         });
+
+        this.NCoreUIKitBottomSheet = new NCoreUIKitBottomSheet({
+            data: []
+        });
     }
 
     Provider = ({
@@ -58,6 +64,7 @@ class CoreContext<T extends NCoreUIKitConfig> {
     }: {
         children: ReactNode
     }) => {
+        const BottomSheetContext = this.NCoreUIKitBottomSheet;
         const LocalizeContext = this.NCoreUIKitLocalize;
         const SnackBarContext = this.NCoreUIKitSnackBar;
         const DialogContext = this.NCoreUIKitDialog;
@@ -78,7 +85,13 @@ class CoreContext<T extends NCoreUIKitConfig> {
                                                 <DialogContext.Render>
                                                     <ToastContext.Provider>
                                                         <ToastContext.Render>
-                                                            {children}
+                                                            <Host name="bottomSheet-system">
+                                                                <BottomSheetContext.Provider>
+                                                                    <BottomSheetContext.Render>
+                                                                        {children}
+                                                                    </BottomSheetContext.Render>
+                                                                </BottomSheetContext.Provider>
+                                                            </Host>
                                                         </ToastContext.Render>
                                                     </ToastContext.Provider>
                                                 </DialogContext.Render>

src/core/hooks.ts

@@ -6,6 +6,7 @@ import type {
     LocalizeType,
     ThemesType
 } from "../types";
+import type NCoreUIKitBottomSheetClass from "../context/bottomSheet";
 import type NCoreUIKitLocalizeClass from "../context/localize";
 import type NCoreUIKitSnackBarClass from "../context/snackBar";
 import type NCoreUIKitDialogClass from "../context/dialog";
@@ -13,6 +14,7 @@ import type NCoreUIKitModalClass from "../context/modal";
 import type NCoreUIKitToastClass from "../context/toast";
 import type NCoreUIKitThemeClass from "../context/theme";
 
+export let NCoreUIKitBottomSheet: NCoreUIKitBottomSheetClass;
 export let NCoreUIKitLocalize: NCoreUIKitLocalizeClass<LocalizeType>;
 export let NCoreUIKitTheme: NCoreUIKitThemeClass<ThemesType>;
 export let NCoreUIKitSnackBar: NCoreUIKitSnackBarClass;
@@ -21,6 +23,7 @@ export let NCoreUIKitModal: NCoreUIKitModalClass;
 export let NCoreUIKitToast: NCoreUIKitToastClass;
 
 export const initializeInstances = (NCoreUIKit: NCoreUIKitBase<NCoreUIKitConfig>) => {
+    NCoreUIKitBottomSheet = NCoreUIKit.NCoreUIKitContext.NCoreUIKitBottomSheet;
     NCoreUIKitLocalize = NCoreUIKit.NCoreUIKitContext.NCoreUIKitLocalize;
     NCoreUIKitSnackBar = NCoreUIKit.NCoreUIKitContext.NCoreUIKitSnackBar;
     NCoreUIKitDialog = NCoreUIKit.NCoreUIKitContext.NCoreUIKitDialog;

src/index.tsx

@@ -4,6 +4,7 @@ export {
 } from "./core";
 
 export {
+    NCoreUIKitBottomSheet,
     NCoreUIKitLocalize,
     NCoreUIKitSnackBar,
     NCoreUIKitDialog,

src/types/bottomSheet.ts

@@ -0,0 +1,23 @@
+import type IBottomSheetProps from "../components/bottomSheet/type";
+
+export type BottomSheetType = {
+    data?: Array<BottomSheetDataType>;
+};
+
+export type BottomSheetDataType = Omit<IBottomSheetProps, "id"> & {
+    isAutoClosed?: boolean;
+    id?: string;
+};
+
+export type BottomSheetContextType = {
+    open: (dialogData: BottomSheetDataType) => string;
+    close: (props?: {
+        index?: number;
+        id?: string;
+    }) => void;
+    data: Array<BottomSheetDataType>;
+};
+
+export type BottomSheetStateContextType = {
+    data: Array<BottomSheetDataType>;
+};