@jobber/components-native 0.93.0 → 0.94.0

package/src/BottomSheet/hooks/useBottomSheetBackHandler.ts

@@ -0,0 +1,41 @@
+import { useCallback, useRef } from "react";
+import { BackHandler, type NativeEventSubscription } from "react-native";
+import type BottomSheet from "@gorhom/bottom-sheet";
+
+/**
+ * Hook that closes the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetRef ref to the bottom sheet component
+ */
+export function useBottomSheetBackHandler(
+  bottomSheetRef: React.RefObject<BottomSheet | null>,
+): {
+  handleSheetPositionChange: (index: number) => void;
+} {
+  const backHandlerSubscriptionRef = useRef<NativeEventSubscription | null>(
+    null,
+  );
+
+  const handleSheetPositionChange = useCallback(
+    (index: number) => {
+      const isBottomSheetVisible = index >= 0;
+
+      if (isBottomSheetVisible && !backHandlerSubscriptionRef.current) {
+        // Setup the back handler if the bottom sheet is right in front of the user
+        backHandlerSubscriptionRef.current = BackHandler.addEventListener(
+          "hardwareBackPress",
+          () => {
+            bottomSheetRef.current?.close();
+
+            return true;
+          },
+        );
+      } else if (!isBottomSheetVisible) {
+        backHandlerSubscriptionRef.current?.remove();
+        backHandlerSubscriptionRef.current = null;
+      }
+    },
+    [bottomSheetRef],
+  );
+
+  return { handleSheetPositionChange };
+}

package/src/InputText/InputText.tsx

@@ -126,7 +126,7 @@ export interface InputTextProps
   /**
    * Callback that is called when the text input is blurred
    */
-  readonly onBlur?: () => void;
+  readonly onBlur?: (event?: FocusEvent) => void;
 
   /**
    * VoiceOver will read this string when a user selects the associated element
@@ -436,10 +436,10 @@ function InputTextInternal(
           setFocused(true);
           onFocus?.(event);
         }}
-        onBlur={() => {
+        onBlur={event => {
           _name && setFocusedInput("");
           setFocused(false);
-          onBlur?.();
+          onBlur?.(event);
           field.onBlur();
           trimWhitespace(inputTransform(field.value), updateFormAndState);
         }}

package/src/ThumbnailList/__snapshots__/ThumbnailList.test.tsx.snap

@@ -150,6 +150,204 @@ exports[`renders a thumbnail component with attachments 1`] = `
         "top": 0,
       }
     }
-  />,
+  >
+    <View
+      backdropComponent={[Function]}
+      backgroundStyle={
+        {
+          "borderTopLeftRadius": 24,
+          "borderTopRightRadius": 24,
+        }
+      }
+      enablePanDownToClose={true}
+      handleStyle={
+        {
+          "display": "none",
+        }
+      }
+      keyboardBlurBehavior="restore"
+      style={
+        {
+          "display": "none",
+        }
+      }
+      testID="bottom-sheet-mock"
+    >
+      <View
+        style={
+          {
+            "paddingBottom": 8,
+            "paddingTop": 8,
+          }
+        }
+        testID="bottom-sheet-view"
+      >
+        <View
+          accessibilityLabel="Preview "
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignContent": "center",
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "row",
+              "opacity": 1,
+              "padding": 8,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "paddingHorizontal": 8,
+              }
+            }
+          >
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={24}
+              bbWidth={24}
+              focusable={false}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  {
+                    "display": "flex",
+                    "fill": "hsl(198, 35%, 21%)",
+                    "height": 24,
+                    "verticalAlign": "middle",
+                    "width": 24,
+                  },
+                  {
+                    "flex": 0,
+                    "height": 24,
+                    "width": 24,
+                  },
+                ]
+              }
+              testID="eye"
+              vbHeight={24}
+              vbWidth={24}
+            >
+              <RNSVGGroup
+                fill={
+                  {
+                    "payload": 4280499528,
+                    "type": 0,
+                  }
+                }
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+              >
+                <RNSVGPath
+                  d="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+                  fill={
+                    {
+                      "payload": 4280499528,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+                <RNSVGPath
+                  d="M21.863 12.477C20.794 14.2 16.703 20 12 20c-4.702 0-8.795-5.8-9.863-7.523a.903.903 0 0 1 0-.954C3.205 9.8 7.297 4 12 4c4.703 0 8.794 5.8 9.863 7.523a.903.903 0 0 1 0 .954ZM20 12s-3.582-6-8-6-8 6-8 6 3.582 6 8 6 8-6 8-6Z"
+                  fill={
+                    {
+                      "payload": 4280499528,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
+          <View
+            style={
+              {
+                "flexShrink": 1,
+                "paddingHorizontal": 8,
+              }
+            }
+          >
+            <Text
+              accessibilityRole="text"
+              adjustsFontSizeToFit={false}
+              allowFontScaling={true}
+              collapsable={false}
+              maxFontSizeMultiplier={3.125}
+              selectable={true}
+              selectionColor="hsl(86, 100%, 46%)"
+              style={
+                [
+                  {
+                    "fontFamily": "inter-semibold",
+                  },
+                  {
+                    "color": "hsl(197, 15%, 43%)",
+                  },
+                  {
+                    "textAlign": "left",
+                  },
+                  {
+                    "fontSize": 16,
+                    "lineHeight": 20,
+                  },
+                  {
+                    "letterSpacing": 0,
+                  },
+                ]
+              }
+            >
+              Preview 
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>,
 ]
 `;