💫 Update: Ex - Test06

dominicstop · Apr 22, 2023 · 710501f · 710501f
1 parent 4d63a30
commit 710501f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git a/example/src/examples/Test06/ModalFocusIndicatorPill.tsx b/example/src/examples/Test06/ModalFocusIndicatorPill.tsx
@@ -6,24 +6,26 @@ import { ModalContext } from 'react-native-ios-modal';
 import * as Colors from '../../constants/Colors';
 
 export function ModalFocusIndicatorPill() {
-  const { isModalInFocus } = React.useContext(ModalContext);
+  const { focusState } = React.useContext(ModalContext);
 
   const pillContainerStyle: ViewStyle = {
-    backgroundColor: isModalInFocus
-      ? /* True  */ Colors.PURPLE.A700
-      : /* False */ Colors.RED.A700,
+    // prettier-ignore
+    backgroundColor: (
+      focusState === 'INITIAL'  ? Colors.GREY[900]   :
+      focusState === 'FOCUSING' ? Colors.BLUE.A700   :
+      focusState === 'FOCUSED'  ? Colors.PURPLE.A700 :
+      focusState === 'BLURRING' ? Colors.PINK.A700  :
+      focusState === 'BLURRED'  ? Colors.RED.A700
+      // default
+      : ''
+    ),
   };
 
-  // prettier-ignore
-  const pillText = isModalInFocus
-    ? /* True  */ 'IN FOCUS'
-    : /* False */ 'BLURRED';
-
   return (
     <View style={[styles.modalFocusIndicatorPillContainer, pillContainerStyle]}>
       <Text style={styles.modalFocusIndicatorPillText}>
         {/* Focus Pill Label: Focus/Blur */}
-        {pillText}
+        {focusState}
       </Text>
     </View>
   );

diff --git a/example/src/examples/Test06/ModalGroupItemContent.tsx b/example/src/examples/Test06/ModalGroupItemContent.tsx
@@ -26,40 +26,40 @@ export function ModalGroupItemContent(props: {
   React.useEffect(() => {
     const modalEmitter = modalContext.getEmitterRef();
 
-    const listenerHandleOnModalShow = modalEmitter.addListener(
-      'onModalShow',
+    const listenerOnModalWillFocus = modalEmitter.addListener(
+      'onModalWillFocus',
       () => {
-        logDisplayRef.current?.log('onModalShow');
+        logDisplayRef.current?.log('onModalWillFocus');
       }
     );
 
-    const listenerHandleOnModalDidDismiss = modalEmitter.addListener(
-      'onModalDidDismiss',
+    const listenerOnModalDidFocus = modalEmitter.addListener(
+      'onModalDidFocus',
       () => {
-        logDisplayRef.current?.log('onModalDidDismiss');
+        logDisplayRef.current?.log('onModalDidFocus');
       }
     );
 
-    const listenerHandleOnModalFocus = modalEmitter.addListener(
-      'onModalFocus',
+    const listenerOnModalWillBlur = modalEmitter.addListener(
+      'onModalWillBlur',
       () => {
-        logDisplayRef.current?.log('onModalFocus');
+        logDisplayRef.current?.log('onModalWillBlur');
       }
     );
 
-    const listenerHandleOnModalBlur = modalEmitter.addListener(
-      'onModalBlur',
+    const listenerOnModalDidBlur = modalEmitter.addListener(
+      'onModalDidBlur',
       () => {
-        logDisplayRef.current?.log('onModalBlur');
+        logDisplayRef.current?.log('onModalDidBlur');
       }
     );
 
     return () => {
       // Lifecycle: componentWillUnmount
-      listenerHandleOnModalShow.unsubscribe();
-      listenerHandleOnModalDidDismiss.unsubscribe();
-      listenerHandleOnModalFocus.unsubscribe();
-      listenerHandleOnModalBlur.unsubscribe();
+      listenerOnModalWillFocus.unsubscribe();
+      listenerOnModalDidFocus.unsubscribe();
+      listenerOnModalWillBlur.unsubscribe();
+      listenerOnModalDidBlur.unsubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);