Merge pull request #614 from navi-medici/alfred-bottomsheet

Alfred bottomsheet

android/app/build.gradle

@@ -313,7 +313,7 @@ dependencies {
 
     implementation "com.github.anrwatchdog:anrwatchdog:1.4.0"
 
-    implementation 'com.navi.medici:alfred:v1.0.1'
+    implementation 'com.navi.medici:alfred:v1.0.2'
 
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/java/com/avapp/DeviceUtilsModule.java

@@ -21,6 +21,9 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.NativeViewHierarchyManager;
+import com.facebook.react.uimanager.UIBlock;
+import com.facebook.react.uimanager.UIManagerModule;
 import com.navi.alfred.AlfredManager;
 
 import android.content.pm.PackageInfo;
@@ -156,16 +159,29 @@ public class DeviceUtilsModule extends ReactContextBaseJavaModule {
     }
 
     @ReactMethod
-    public void sendBottomSheetOpenSignal(Boolean isBottomSheetOpen) {
-        if (isBottomSheetOpen) {
-            View bottomSheetScreen = LayoutInflater.from(RNContext).inflate(R.layout.bottom_sheet_screen, null);
-            AlfredManager.INSTANCE.measureInflatedView(bottomSheetScreen, 1080, 540);
-            AlfredManager.INSTANCE.setCosmosBottomSheet(bottomSheetScreen);
-        } else {
-            AlfredManager.INSTANCE.setCosmosBottomSheet(null);
+    public void setBottomSheetView(Integer refID) {
+        if (refID != null) {
+            UIManagerModule uiManagerModule = RNContext.getNativeModule(UIManagerModule.class);
+            if (uiManagerModule != null) {
+                try {
+                    uiManagerModule.addUIBlock(nativeViewHierarchyManager -> {
+                        Log.d("Alfred", "setBottomSheetView nativeViewHierarchyManager:" + nativeViewHierarchyManager);
+                        View view = nativeViewHierarchyManager.resolveView(refID);
+                        Log.d("Alfred", "setBottomSheetView view:" + view);
+                        AlfredManager.INSTANCE.setBottomSheetView(view);
+                    });
+                } catch (Exception error) {
+                    Log.d("Alfred", "setBottomSheetView error:" + error);
+                }
+            }
         }
-        return;
     }
+
+    @ReactMethod
+    public void clearBottomSheet() {
+        AlfredManager.INSTANCE.clearBottomSheetView();
+    }
+
     private static File convertBase64ToFile(Context context,String base64Data) {
         try {
             byte[] decodedBytes = Base64.decode(base64Data, Base64.DEFAULT);

src/common/BottomSheetWrapper.tsx

@@ -2,24 +2,28 @@ import React from 'react';
 import BottomSheet, {
   BottomSheetProps,
 } from '../../RN-UI-LIB/src/components/bottom_sheet/BottomSheet';
-import { sendBottomSheetOpenSignal } from '../components/utlis/DeviceUtils';
-import { NativeSyntheticEvent } from 'react-native';
+import { clearBottomSheet, setBottomSheetView } from '../components/utlis/DeviceUtils';
 
 interface IBottomSheetWrapperProps extends BottomSheetProps {}
 
 const BottomSheetWrapper: React.FC<IBottomSheetWrapperProps> = (props) => {
   const { children, onShow, onSwipeDownClose, onClose, ...restProps } = props;
   const onCloseHandler = () => {
-    sendBottomSheetOpenSignal(false);
+    clearBottomSheet();
     if (typeof onClose === 'function') onClose();
   };
 
-  const onShowHandler = (event: NativeSyntheticEvent<any>) => {
-    sendBottomSheetOpenSignal(true);
-    if (typeof onShow === 'function') onShow(event);
+  const onAnimationEndHandler = (id: number | null) => {
+    if (!id) return;
+    setBottomSheetView(id);
   };
   return (
-    <BottomSheet onShow={onShowHandler} onClose={onCloseHandler} {...restProps}>
+    <BottomSheet
+      onShow={onShow}
+      onClose={onCloseHandler}
+      onBottomSheetAnimationEnd={onAnimationEndHandler}
+      {...restProps}
+    >
       {children}
     </BottomSheet>
   );

src/common/DropDownWrapper.tsx

@@ -1,19 +1,27 @@
 import React from 'react';
 import Dropdown, { IDropdown } from '../../RN-UI-LIB/src/components/dropdown/Dropdown';
-import { sendBottomSheetOpenSignal } from '../components/utlis/DeviceUtils';
+import {
+  clearBottomSheet,
+  sendBottomSheetOpenSignal,
+  setBottomSheetView,
+} from '../components/utlis/DeviceUtils';
 
 const DropDownWrapper: React.FC<IDropdown> = (props) => {
-  const { onShow, onClose, children, ...remainingProps } = props;
-  const onShowHandler = () => {
-    if (typeof onShow === 'function') onShow();
-    sendBottomSheetOpenSignal(true);
-  };
+  const { onShow, onClose, onAnimationEnd, children, ...remainingProps } = props;
+
   const onCloseHandler = () => {
     if (typeof onClose === 'function') onClose();
-    sendBottomSheetOpenSignal(false);
+    clearBottomSheet();
   };
+
+  const onAnimationEndHandler = (id: number | null) => {
+    if (!id) return;
+    console.log('dropdown opened', id);
+    setBottomSheetView(id);
+  };
+
   return (
-    <Dropdown onShow={onShowHandler} onClose={onCloseHandler} {...remainingProps}>
+    <Dropdown onClose={onCloseHandler} onAnimationEnd={onAnimationEndHandler} {...remainingProps}>
       {children}
     </Dropdown>
   );

src/common/ModalWrapperForAlfredV2.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { Modal, NativeSyntheticEvent, View, findNodeHandle } from 'react-native';
+import { IModalWrapper } from '../../RN-UI-LIB/src/components/modalWrapper/ModalWrapper';
+import {
+  clearBottomSheet,
+  sendBottomSheetOpenSignal,
+  setBottomSheetView,
+} from '../components/utlis/DeviceUtils';
+import { GenericStyles } from '@rn-ui-lib/styles';
+
+const ModalWrapperForAlfredV2: React.FC<IModalWrapper> = ({ children, ...props }) => {
+  const { onRequestClose, onShow, visible } = props;
+  const modalRef = React.useRef<View>(null);
+  const lastSent = React.useRef(visible);
+  const onRequestCloseHandler = (event: NativeSyntheticEvent<any>) => {
+    if (typeof onRequestClose === 'function') onRequestClose(event);
+    clearBottomSheet();
+  };
+  const onShowHandler = (event: NativeSyntheticEvent<any>) => {
+    if (typeof onShow === 'function') onShow(event);
+    const nodeId = findNodeHandle(modalRef.current);
+    lastSent.current = true;
+    setBottomSheetView(nodeId);
+  };
+
+  return (
+    <Modal
+      transparent={false}
+      onShow={onShowHandler}
+      animationType="none"
+      onRequestClose={onRequestCloseHandler}
+      {...props}
+    >
+      <View
+        ref={modalRef}
+        collapsable={false}
+        style={[GenericStyles.fill, GenericStyles.whiteBackground]}
+      >
+        {children}
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalWrapperForAlfredV2;

src/components/utlis/DeviceUtils.ts

@@ -29,6 +29,10 @@ export const alfredSetUserId = (userId: string) => DeviceUtilsModule.setUserId(u
 export const sendBottomSheetOpenSignal = (e: boolean) =>
   DeviceUtilsModule.sendBottomSheetOpenSignal(e);
 
+export const setBottomSheetView = (id: number | null) => DeviceUtilsModule.setBottomSheetView(id);
+
+export const clearBottomSheet = () => DeviceUtilsModule.clearBottomSheet();
+
 export const alfredSetEmailId = (emailId: string) => DeviceUtilsModule.setEmailId(emailId);
 
 // sends feedback data to whatsapp.

src/screens/allCases/CasesList.tsx

@@ -56,6 +56,7 @@ import BottomSheetWrapper from '../../common/BottomSheetWrapper';
 import { toast } from '../../../RN-UI-LIB/src/components/toast';
 import { setFilteredListToast } from '../../reducer/allCasesSlice';
 import { getFilterCount, getSelectedFilters } from '../Dashboard/utils';
+import ModalWrapperForAlfredV2 from '@common/ModalWrapperForAlfredV2';
 
 export const getItem = (item: Array<ICaseItem>, index: number) => item[index];
 export const ESTIMATED_ITEM_SIZE = 250; // Average height of List item
@@ -354,7 +355,7 @@ const CasesList: React.FC<ICasesList> = ({
           <View style={GenericStyles.ph12}>{listEmptyComponent}</View>
         )}
       </View>
-      <ModalWrapperForAlfred
+      <ModalWrapperForAlfredV2
         animationType="slide"
         animated
         onRequestClose={() => {
@@ -370,7 +371,7 @@ const CasesList: React.FC<ICasesList> = ({
           isVisitPlan={isVisitPlan}
           isAgentDashboard={isAgentDashboard}
         />
-      </ModalWrapperForAlfred>
+      </ModalWrapperForAlfredV2>
       <BottomSheetWrapper
         HeaderNode={() => (
           <View style={[...row, GenericStyles.ph16]}>