@terreno/ui 0.14.0 → 0.14.2

package/src/ActionSheet.test.tsx

@@ -334,4 +334,558 @@ describe("ActionSheet", () => {
       expect(result).toBeNull();
     });
   });
+
+  describe("measure", () => {
+    it("resolves with 20 when safeAreaViewRef has no measureInWindow", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      const result = await (ref.current as any).measure();
+      expect(result).toBe(20);
+    });
+
+    it("resolves with height from measureInWindow when available", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).safeAreaViewRef = {
+        current: {
+          measureInWindow: (_cb: any) => {
+            _cb(0, 0, 100, 44);
+          },
+        },
+      };
+      const result = await (ref.current as any).measure();
+      expect(result).toBe(44);
+    });
+
+    it("resolves with 20 when measureInWindow returns 0 height", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).safeAreaViewRef = {
+        current: {
+          measureInWindow: (_cb: any) => {
+            _cb(0, 0, 100, 0);
+          },
+        },
+      };
+      const result = await (ref.current as any).measure();
+      expect(result).toBe(20);
+    });
+  });
+
+  describe("_showModal", () => {
+    it("returns early when nativeEvent is missing", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      await (ref.current as any)._showModal({});
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("processes layout event on first call and sets actionSheetHeight", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet animated={false} ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      ref.current!.layoutHasCalled = false;
+      await (ref.current as any)._showModal({
+        nativeEvent: {layout: {height: 500, width: 400}},
+      });
+      expect((ref.current as any).actionSheetHeight).toBe(500);
+      expect(ref.current!.layoutHasCalled).toBe(true);
+    });
+
+    it("handles subsequent layout calls (layoutHasCalled=true)", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      ref.current!.layoutHasCalled = true;
+      (ref.current as any).actionSheetHeight = 400;
+      await (ref.current as any)._showModal({
+        nativeEvent: {layout: {height: 600, width: 400}},
+      });
+      expect((ref.current as any).actionSheetHeight).toBe(600);
+    });
+  });
+
+  describe("_openAnimation", () => {
+    it("runs spring animation when animated is true", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet animated ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      expect(() => (ref.current as any)._openAnimation(100)).not.toThrow();
+    });
+
+    it("sets opacity directly when animated is false", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet animated={false} ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      expect(() => (ref.current as any)._openAnimation(100)).not.toThrow();
+    });
+  });
+
+  describe("_onScrollBeginDrag", () => {
+    it("stores the scroll position in prevScroll", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      await (ref.current as any)._onScrollBeginDrag({
+        nativeEvent: {contentOffset: {y: 42}},
+      });
+      expect((ref.current as any).prevScroll).toBe(42);
+    });
+  });
+
+  describe("_applyHeightLimiter", () => {
+    it("clamps actionSheetHeight to deviceHeight", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).actionSheetHeight = 99999;
+      (ref.current as any)._applyHeightLimiter();
+      expect((ref.current as any).actionSheetHeight).toBeLessThanOrEqual(
+        ref.current!.state.deviceHeight
+      );
+    });
+
+    it("does not change actionSheetHeight when smaller than deviceHeight", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).actionSheetHeight = 100;
+      (ref.current as any)._applyHeightLimiter();
+      expect((ref.current as any).actionSheetHeight).toBe(100);
+    });
+  });
+
+  describe("_onScrollEnd", () => {
+    it("handles upward scroll past springOffset threshold", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref} springOffset={50}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).prevScroll = 100;
+      (ref.current as any).actionSheetHeight = 500;
+      (ref.current as any).isRecoiling = false;
+      await (ref.current as any)._onScrollEnd({
+        nativeEvent: {contentOffset: {y: 200}},
+      });
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("returns early when isRecoiling is true", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).isRecoiling = true;
+      await (ref.current as any)._onScrollEnd({
+        nativeEvent: {contentOffset: {y: 50}},
+      });
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("handles downward scroll past springOffset (hides modal)", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref} springOffset={10}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).prevScroll = 200;
+      (ref.current as any).isRecoiling = false;
+      await (ref.current as any)._onScrollEnd({
+        nativeEvent: {contentOffset: {y: 50}},
+      });
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("handles small downward scroll (recoils to previous position)", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref} springOffset={200}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).prevScroll = 100;
+      (ref.current as any).isRecoiling = false;
+      await (ref.current as any)._onScrollEnd({
+        nativeEvent: {contentOffset: {y: 95}},
+      });
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("handles small upward scroll (returns to prev position)", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref} springOffset={200}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).prevScroll = 100;
+      (ref.current as any).actionSheetHeight = 500;
+      (ref.current as any).isRecoiling = false;
+      await (ref.current as any)._onScrollEnd({
+        nativeEvent: {contentOffset: {y: 110}},
+      });
+      expect(ref.current).toBeTruthy();
+    });
+  });
+
+  describe("_onKeyboardShow", () => {
+    it("sets keyboard state to true and handles no focused field", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      const {TextInput: MockTextInput} = require("react-native");
+      const origState = MockTextInput.State;
+      MockTextInput.State = {
+        currentlyFocusedField: () => null,
+      };
+      act(() => {
+        (ref.current as any)._onKeyboardShow({
+          endCoordinates: {height: 300, screenX: 0, screenY: 500, width: 400},
+        });
+      });
+      expect(ref.current!.state.keyboard).toBe(true);
+      MockTextInput.State = origState;
+    });
+
+    it("handles keyboard show with focused field", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      const {TextInput: MockTextInput, UIManager: MockUIManager} = require("react-native");
+      const origState = MockTextInput.State;
+      const origMeasure = MockUIManager.measure;
+      MockTextInput.State = {
+        currentlyFocusedField: () => 42,
+      };
+      MockUIManager.measure = (_node: any, cb: any) => {
+        cb(0, 0, 100, 40, 0, 400);
+      };
+      act(() => {
+        (ref.current as any)._onKeyboardShow({
+          endCoordinates: {height: 300, screenX: 0, screenY: 500, width: 400},
+        });
+      });
+      expect(ref.current!.state.keyboard).toBe(true);
+      MockTextInput.State = origState;
+      MockUIManager.measure = origMeasure;
+    });
+
+    it("handles keyboard show with enough gap (no animation needed)", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      const {TextInput: MockTextInput, UIManager: MockUIManager} = require("react-native");
+      const origState = MockTextInput.State;
+      const origMeasure = MockUIManager.measure;
+      MockTextInput.State = {
+        currentlyFocusedField: () => 42,
+      };
+      MockUIManager.measure = (_node: any, cb: any) => {
+        cb(0, 0, 100, 40, 0, 100);
+      };
+      act(() => {
+        (ref.current as any)._onKeyboardShow({
+          endCoordinates: {height: 100, screenX: 0, screenY: 500, width: 400},
+        });
+      });
+      expect(ref.current!.state.keyboard).toBe(true);
+      MockTextInput.State = origState;
+      MockUIManager.measure = origMeasure;
+    });
+  });
+
+  describe("_onKeyboardHide", () => {
+    it("sets keyboard state to false and animates", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      act(() => {
+        (ref.current as any)._onKeyboardHide();
+      });
+      expect(ref.current!.state.keyboard).toBe(false);
+    });
+  });
+
+  describe("handleChildScrollEnd", () => {
+    it("returns early when offsetY > prevScroll", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).offsetY = 200;
+      (ref.current as any).prevScroll = 100;
+      await (ref.current as any).handleChildScrollEnd();
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("hides modal when scroll offset is far from initial position", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref} springOffset={10}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).offsetY = 0;
+      (ref.current as any).prevScroll = 200;
+      (ref.current as any).actionSheetHeight = 500;
+      await (ref.current as any).handleChildScrollEnd();
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("recoils to prevScroll when within springOffset range", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref} springOffset={200}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).offsetY = 90;
+      (ref.current as any).prevScroll = 100;
+      await (ref.current as any).handleChildScrollEnd();
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("scrolls back to initial position when close to it", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet gestureEnabled initialOffsetFromBottom={1} ref={ref} springOffset={10}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).offsetY = 50;
+      (ref.current as any).prevScroll = 200;
+      (ref.current as any).actionSheetHeight = 200;
+      await (ref.current as any).handleChildScrollEnd();
+      expect(ref.current).toBeTruthy();
+    });
+  });
+
+  describe("componentWillUnmount", () => {
+    it("removes keyboard listeners on unmount", () => {
+      const ref = createRef<ActionSheet>();
+      const {unmount} = render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      expect(() => unmount()).not.toThrow();
+    });
+  });
+
+  describe("_onDeviceLayout", () => {
+    it("clears existing timeout before scheduling new one", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      const existingTimeout = setTimeout(() => {}, 1000);
+      (ref.current as any).timeout = existingTimeout;
+      (ref.current as any)._onDeviceLayout({
+        nativeEvent: {layout: {height: 812, width: 375}},
+      });
+      const newTimeout = (ref.current as any).timeout;
+      expect(newTimeout).not.toBe(existingTimeout);
+      clearTimeout(newTimeout);
+    });
+  });
+
+  describe("getInitialScrollPosition", () => {
+    it("returns a scroll position with gestureEnabled", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet gestureEnabled initialOffsetFromBottom={0.5} ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).actionSheetHeight = 500;
+      const pos = (ref.current as any).getInitialScrollPosition();
+      expect(typeof pos).toBe("number");
+    });
+
+    it("returns a scroll position without gestureEnabled", () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet gestureEnabled={false} ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      (ref.current as any).actionSheetHeight = 500;
+      const pos = (ref.current as any).getInitialScrollPosition();
+      expect(typeof pos).toBe("number");
+    });
+  });
+
+  describe("_hideAnimation with closable=false", () => {
+    it("snaps to bottomOffset when closable=false and bottomOffset>0", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet bottomOffset={50} closable={false} closeAnimationDuration={1} ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      act(() => {
+        ref.current?.show();
+      });
+      (ref.current as any).isClosing = false;
+      act(() => {
+        (ref.current as any)._hideAnimation();
+      });
+      await act(async () => {
+        await new Promise((r) => setTimeout(r, 50));
+      });
+      expect(ref.current).toBeTruthy();
+    });
+
+    it("scrolls to initialOffset when closable=false and bottomOffset<=0", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet closable={false} closeAnimationDuration={1} ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      act(() => {
+        ref.current?.show();
+      });
+      (ref.current as any).isClosing = false;
+      act(() => {
+        (ref.current as any)._hideAnimation();
+      });
+      await act(async () => {
+        await new Promise((r) => setTimeout(r, 50));
+      });
+      expect(ref.current).toBeTruthy();
+    });
+  });
+
+  describe("_onScrollBegin", () => {
+    it("does not throw", async () => {
+      const ref = createRef<ActionSheet>();
+      render(
+        <ThemeProvider>
+          <ActionSheet ref={ref}>
+            <Text>Content</Text>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+      await expect((ref.current as any)._onScrollBegin()).resolves.toBeUndefined();
+    });
+  });
 });

package/src/ActionSheet.tsx

@@ -56,7 +56,7 @@ export const styles = StyleSheet.create({
   },
 });
 
-export function getDeviceHeight(statusBarTranslucent: boolean | undefined): number {
+export const getDeviceHeight = (statusBarTranslucent: boolean | undefined): number => {
   const height = Dimensions.get("window").height;
 
   if (Platform.OS === "android" && !statusBarTranslucent) {
@@ -64,7 +64,7 @@ export function getDeviceHeight(statusBarTranslucent: boolean | undefined): numb
   }
 
   return height;
-}
+};
 
 export const getElevation = (elevation?: number) => {
   if (!elevation) {
@@ -580,48 +580,35 @@ export class ActionSheet extends Component<Props, State, unknown> {
     this.setState({
       keyboard: true,
     });
-    const ReactNativeVersion = require("react-native/Libraries/Core/ReactNativeVersion");
-
-    let v = ReactNativeVersion.version.major + ReactNativeVersion.version.minor;
-    v = parseInt(v, 10);
 
-    if (v >= 63 || Platform.OS === "ios") {
-      const keyboardHeight = event.endCoordinates.height;
-      const {height: windowHeight} = Dimensions.get("window");
+    const keyboardHeight = event.endCoordinates.height;
+    const {height: windowHeight} = Dimensions.get("window");
 
-      const currentlyFocusedField = TextInput.State.currentlyFocusedField
-        ? findNodeHandle(TextInput.State.currentlyFocusedField())
-        : TextInput.State.currentlyFocusedField();
+    const currentlyFocusedField = TextInput.State.currentlyFocusedField
+      ? findNodeHandle(TextInput.State.currentlyFocusedField())
+      : TextInput.State.currentlyFocusedField();
 
-      if (!currentlyFocusedField) {
-        return;
-      }
+    if (!currentlyFocusedField) {
+      return;
+    }
 
-      UIManager.measure(
-        currentlyFocusedField,
-        (_originX, _originY, _width, height, _pageX, pageY) => {
-          const fieldHeight = height;
-          const gap = windowHeight - keyboardHeight - (pageY + fieldHeight);
-          if (gap >= 0) {
-            return;
-          }
-          const toValue =
-            this.props.keyboardMode === "position" ? -(keyboardHeight + 15) : gap - 10;
-
-          Animated.timing(this.transformValue, {
-            duration: 250,
-            toValue,
-            useNativeDriver: true,
-          }).start();
+    UIManager.measure(
+      currentlyFocusedField,
+      (_originX, _originY, _width, height, _pageX, pageY) => {
+        const fieldHeight = height;
+        const gap = windowHeight - keyboardHeight - (pageY + fieldHeight);
+        if (gap >= 0) {
+          return;
         }
-      );
-    } else {
-      Animated.timing(this.transformValue, {
-        duration: 250,
-        toValue: -10,
-        useNativeDriver: true,
-      }).start();
-    }
+        const toValue = this.props.keyboardMode === "position" ? -(keyboardHeight + 15) : gap - 10;
+
+        Animated.timing(this.transformValue, {
+          duration: 250,
+          toValue,
+          useNativeDriver: true,
+        }).start();
+      }
+    );
   };
 
   /**