@jobber/components-native 0.36.0 → 0.38.0

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -0,0 +1,371 @@
+import React, { createRef } from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { AccessibilityInfo, View } from "react-native";
+import { Host } from "react-native-portalize";
+import { ReactTestInstance, act } from "react-test-renderer";
+import { useIntl } from "react-intl";
+import {
+  ContentOverlay,
+  ContentOverlayRef,
+  ModalBackgroundColor,
+} from "./ContentOverlay";
+import { messages } from "./messages";
+import { tokens } from "../utils/design";
+import { Button } from "../Button";
+import { Content } from "../Content";
+import { Text } from "../Text";
+
+jest.unmock("../hooks/useIsScreenReaderEnabled");
+function fireLayoutEvent(childrenContent: ReactTestInstance) {
+  fireEvent(childrenContent, "onLayout", {
+    nativeEvent: {
+      layout: {
+        height: 100,
+      },
+    },
+  });
+}
+
+interface testRendererOptions {
+  text: string;
+  title: string;
+  buttonLabel: string;
+  a11yLabel?: string;
+  fullScreen?: boolean;
+  showDismiss?: boolean;
+  modalBackgroundColor?: ModalBackgroundColor;
+  onCloseCallback?: () => void;
+  onOpenCallback?: () => void;
+  onBeforeExitCallback?: () => void;
+}
+
+function getDefaultOptions(): testRendererOptions {
+  return {
+    text: "I am the contentOverlay text",
+    title: "Title",
+    buttonLabel: "Open Content Overlay",
+    fullScreen: false,
+    showDismiss: false,
+    modalBackgroundColor: "surface",
+    onCloseCallback: () => {
+      return;
+    },
+    onOpenCallback: () => {
+      return;
+    },
+  };
+}
+
+function renderContentOverlay(
+  {
+    text,
+    title,
+    buttonLabel,
+    a11yLabel,
+    fullScreen,
+    showDismiss,
+    modalBackgroundColor,
+    onCloseCallback,
+    onOpenCallback,
+    onBeforeExitCallback,
+  } = getDefaultOptions(),
+) {
+  const contentOverlayRef = createRef<ContentOverlayRef>();
+
+  const renderResult = render(
+    <Host>
+      <View>
+        <Text>I am a bunch of text</Text>
+        <Button
+          label={buttonLabel}
+          onPress={() => {
+            contentOverlayRef?.current?.open?.();
+          }}
+        />
+        <ContentOverlay
+          ref={contentOverlayRef}
+          title={title}
+          onClose={onCloseCallback}
+          onOpen={onOpenCallback}
+          accessibilityLabel={a11yLabel}
+          fullScreen={fullScreen}
+          showDismiss={showDismiss}
+          modalBackgroundColor={modalBackgroundColor}
+          onBeforeExit={onBeforeExitCallback}
+        >
+          <Content>
+            <Text>{text}</Text>
+          </Content>
+        </ContentOverlay>
+      </View>
+    </Host>,
+  );
+
+  const childrenView = renderResult.getByTestId("ATL-Overlay-Children");
+  fireLayoutEvent(childrenView);
+  const headerComponent = renderResult.getByTestId("ATL-Overlay-Header");
+  fireLayoutEvent(headerComponent);
+
+  return renderResult;
+}
+
+function renderAndOpenContentOverlay(defaultOptions = getDefaultOptions()) {
+  const rendered = renderContentOverlay(defaultOptions);
+
+  act(() => {
+    fireEvent.press(rendered.getByLabelText(defaultOptions.buttonLabel));
+  });
+
+  return rendered;
+}
+
+describe("when open is called on the content overlay ref", () => {
+  it("should open the content overlay, exposing the content to the user", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      text: "I am text within the content overlay",
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    expect(contentOverlayScreen.getByText(options.text)).toBeDefined();
+  });
+});
+
+describe("when the close button is clicked on an open content overlay", () => {
+  it("should close the content overlay", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      text: "I am text within the content overlay",
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    act(() => {
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
+    });
+
+    await waitFor(() => {
+      expect(contentOverlayScreen.queryByText(options.text)).toBeNull();
+    });
+  });
+});
+
+describe("when the close button is clicked on an open content overlay with a defined onClose prop", () => {
+  it("should call the passed in onClose prop", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      onCloseCallback: jest.fn(),
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    act(() => {
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
+    });
+
+    await waitFor(() => {
+      expect(options.onCloseCallback).toHaveBeenCalled();
+    });
+  });
+});
+
+describe("when the content overlay is created with a defined onOpen prop", () => {
+  describe("when the content overlay is not opened", () => {
+    it("should not call the passed in onOpen prop", async () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+        onOpenCallback: jest.fn(),
+      };
+      renderContentOverlay(options);
+
+      await waitFor(() => {
+        expect(options.onOpenCallback).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("when the content overlay is opened", () => {
+    it("should call the passed in onOpen prop", async () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+        onOpenCallback: jest.fn(),
+      };
+      renderAndOpenContentOverlay(options);
+
+      await waitFor(() => {
+        expect(options.onOpenCallback).toHaveBeenCalled();
+      });
+    });
+  });
+});
+
+describe("when title prop passed to content overlay", () => {
+  it("should set the header title", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      title: "Awesome Title",
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    expect(contentOverlayScreen.getByText(options.title)).toBeDefined();
+  });
+});
+
+describe("when accessibilityLabel prop passed to content overlay", () => {
+  it("should set the header accessibilityLabel", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      a11yLabel: "Awesome a11y Label",
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    expect(
+      contentOverlayScreen.getByLabelText(options.a11yLabel || "ohno"),
+    ).toBeDefined();
+  });
+});
+
+describe("when accessibilityLabel prop NOT passed to content overlay", () => {
+  it("should use default accessibilityLabel", () => {
+    const { formatMessage } = useIntl();
+
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      title: "Awesome Title",
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    const defaultCloseOverlayA11YLabel = formatMessage(
+      messages.closeOverlayA11YLabel,
+      {
+        title: options.title,
+      },
+    );
+    expect(
+      contentOverlayScreen.getAllByLabelText(defaultCloseOverlayA11YLabel),
+    ).toHaveLength(2);
+  });
+});
+
+describe("when there is a screen reader enabled", () => {
+  jest
+    .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
+    .mockImplementation(() => Promise.resolve(true));
+
+  it("should show the dismiss button", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    expect(
+      await contentOverlayScreen.findByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
+  });
+});
+
+describe("when fullScreen is set to true", () => {
+  it("should show the dismiss button", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      fullScreen: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    expect(
+      contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
+  });
+});
+
+describe("when showDismiss is set to true", () => {
+  it("should show the dismiss button", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    expect(
+      contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
+  });
+});
+
+describe("when the close button is clicked on an open content overlay with a defined onBeforeExit", () => {
+  it("should call the callback method on exit", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      onBeforeExitCallback: jest.fn(),
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    act(() => {
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
+    });
+
+    await waitFor(() => {
+      expect(options.onBeforeExitCallback).toHaveBeenCalled();
+    });
+  });
+});
+
+describe("modalBackgroundColor prop", () => {
+  describe("when using the default surface value", () => {
+    it("renders the component with the color-surface color", () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+      };
+      const contentOverlayScreen = renderAndOpenContentOverlay(options);
+      const OverlayHeader = contentOverlayScreen.getByTestId(
+        "ATL-Overlay-Header",
+      ).children[0] as ReactTestInstance;
+      const OverlayHeaderStyles = OverlayHeader.props.style;
+
+      expect(OverlayHeaderStyles).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: tokens["color-surface"],
+          }),
+        ]),
+      );
+
+      expect(OverlayHeaderStyles).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: tokens["color-surface--background"],
+          }),
+        ]),
+      );
+    });
+  });
+
+  describe("when set to background", () => {
+    it("changes the backround color of the modal to color-surface--background", () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+        modalBackgroundColor: "background",
+      };
+      const contentOverlayScreen = renderAndOpenContentOverlay(options);
+      const OverlayHeader = contentOverlayScreen.getByTestId(
+        "ATL-Overlay-Header",
+      ).children[0] as ReactTestInstance;
+      const OverlayHeaderStyles = OverlayHeader.props.style;
+
+      expect(OverlayHeaderStyles).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: tokens["color-surface--background"],
+          }),
+        ]),
+      );
+    });
+  });
+});

package/src/ContentOverlay/ContentOverlay.tsx

@@ -0,0 +1,295 @@
+import React, {
+  Ref,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Modalize } from "react-native-modalize";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  AccessibilityInfo,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  View,
+  findNodeHandle,
+  useWindowDimensions,
+} from "react-native";
+import { Portal } from "react-native-portalize";
+import { useIntl } from "react-intl";
+import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
+import { styles } from "./ContentOverlay.style";
+import { messages } from "./messages";
+import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
+import {
+  ContentOverlayProps,
+  ContentOverlayRef,
+  ModalBackgroundColor,
+} from "./types";
+import { useIsScreenReaderEnabled } from "../hooks";
+import { IconButton } from "../IconButton";
+import { tokens } from "../utils/design";
+import { Heading } from "../Heading";
+
+export const ContentOverlay = forwardRef(ContentOverlayPortal);
+const ContentOverlayModal = forwardRef(ContentOverlayInternal);
+
+// eslint-disable-next-line max-statements
+function ContentOverlayInternal(
+  {
+    children,
+    title,
+    accessibilityLabel,
+    fullScreen = false,
+    showDismiss = false,
+    isDraggable = true,
+    adjustToContentHeight = false,
+    keyboardShouldPersistTaps = false,
+    keyboardAvoidingBehavior,
+    scrollEnabled = false,
+    modalBackgroundColor = "surface",
+    onClose,
+    onOpen,
+    onBeforeExit,
+    loading = false,
+    avoidKeyboardLikeIOS,
+  }: ContentOverlayProps,
+  ref: Ref<ContentOverlayRef>,
+): JSX.Element {
+  isDraggable = onBeforeExit ? false : isDraggable;
+  const isCloseableOnOverlayTap = onBeforeExit ? false : true;
+  const { formatMessage } = useIntl();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const [position, setPosition] = useState<"top" | "initial">("initial");
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  const isFullScreenOrTopPosition =
+    fullScreen || (!adjustToContentHeight && position === "top");
+  const shouldShowDismiss =
+    showDismiss || isScreenReaderEnabled || isFullScreenOrTopPosition;
+  const [showHeaderShadow, setShowHeaderShadow] = useState<boolean>(false);
+  const overlayHeader = useRef<View>();
+
+  const internalRef = useRef<Modalize>();
+  const [modalizeMethods, setModalizeMethods] = useState<ContentOverlayRef>();
+  const callbackInternalRef = useCallback((instance: Modalize) => {
+    if (instance && !internalRef.current) {
+      internalRef.current = instance;
+      setModalizeMethods(instance);
+    }
+  }, []);
+
+  const refMethods = useMemo(() => {
+    if (!modalizeMethods?.open || !modalizeMethods?.close) {
+      return {};
+    }
+    return {
+      open: modalizeMethods?.open,
+      close: modalizeMethods?.close,
+    };
+  }, [modalizeMethods]);
+
+  const { keyboardHeight } = useKeyboardVisibility();
+  useImperativeHandle(ref, () => refMethods, [refMethods]);
+
+  const {
+    handleLayout: handleChildrenLayout,
+    height: childrenHeight,
+    heightKnown: childrenHeightKnown,
+  } = useViewLayoutHeight();
+  const {
+    handleLayout: handleHeaderLayout,
+    height: headerHeight,
+    heightKnown: headerHeightKnown,
+  } = useViewLayoutHeight();
+
+  const snapPoint = useMemo(() => {
+    if (fullScreen || !isDraggable || adjustToContentHeight) {
+      return undefined;
+    }
+    const overlayHeight = headerHeight + childrenHeight;
+    if (overlayHeight >= windowHeight) {
+      return undefined;
+    }
+    return overlayHeight;
+  }, [
+    fullScreen,
+    isDraggable,
+    adjustToContentHeight,
+    headerHeight,
+    childrenHeight,
+    windowHeight,
+  ]);
+
+  const modalStyle = [
+    styles.modal,
+    windowWidth > 640 ? styles.modalForLargeScreens : undefined,
+    { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
+    keyboardHeight > 0 && { marginBottom: 0 },
+  ];
+
+  const renderedChildren = renderChildren();
+  const renderedHeader = renderHeader();
+
+  const onCloseController = () => {
+    if (!onBeforeExit) {
+      internalRef.current?.close();
+      return true;
+    } else {
+      onBeforeExit();
+      return false;
+    }
+  };
+
+  return (
+    <>
+      {headerHeightKnown && childrenHeightKnown && (
+        <Modalize
+          ref={callbackInternalRef}
+          overlayStyle={styles.overlay}
+          handleStyle={styles.handle}
+          handlePosition="inside"
+          modalStyle={modalStyle}
+          modalTopOffset={tokens["space-larger"]}
+          snapPoint={snapPoint}
+          closeSnapPointStraightEnabled={false}
+          withHandle={isDraggable}
+          panGestureEnabled={isDraggable}
+          adjustToContentHeight={adjustToContentHeight}
+          disableScrollIfPossible={!adjustToContentHeight} // workaround for scroll not working on Android when content fills the screen with adjustToContentHeight
+          onClose={onClose}
+          onOpen={onOpen}
+          keyboardAvoidingBehavior={keyboardAvoidingBehavior}
+          avoidKeyboardLikeIOS={avoidKeyboardLikeIOS}
+          childrenStyle={styles.childrenStyle}
+          onBackButtonPress={onCloseController}
+          closeOnOverlayTap={isCloseableOnOverlayTap}
+          onOpened={() => {
+            if (overlayHeader.current) {
+              const reactTag = findNodeHandle(overlayHeader.current);
+              if (reactTag) {
+                AccessibilityInfo.setAccessibilityFocus(reactTag);
+              }
+            }
+          }}
+          scrollViewProps={{
+            scrollEnabled,
+            showsVerticalScrollIndicator: false,
+            stickyHeaderIndices: Platform.OS === "android" ? [0] : undefined,
+            onScroll: handleOnScroll,
+            keyboardShouldPersistTaps: keyboardShouldPersistTaps
+              ? "handled"
+              : "never",
+          }}
+          HeaderComponent={Platform.OS === "ios" ? renderedHeader : undefined}
+          onPositionChange={setPosition}
+        >
+          {Platform.OS === "android" ? renderedHeader : undefined}
+          {renderedChildren}
+        </Modalize>
+      )}
+      {!childrenHeightKnown && (
+        <View style={[styles.hiddenContent, modalStyle]}>
+          {renderedChildren}
+        </View>
+      )}
+      {!headerHeightKnown && (
+        <View style={[styles.hiddenContent, modalStyle]}>{renderedHeader}</View>
+      )}
+    </>
+  );
+
+  function renderHeader() {
+    const closeOverlayA11YLabel = formatMessage(
+      messages.closeOverlayA11YLabel,
+      {
+        title: title,
+      },
+    );
+
+    const headerStyles = [
+      styles.header,
+      showHeaderShadow && styles.headerShadow,
+      { backgroundColor: getModalBackgroundColor(modalBackgroundColor) },
+    ];
+
+    return (
+      <View onLayout={handleHeaderLayout} testID="ATL-Overlay-Header">
+        <View style={headerStyles}>
+          <View
+            style={
+              showDismiss ? styles.titleWithDismiss : styles.titleWithoutDimiss
+            }
+          >
+            <Heading
+              level="subtitle"
+              variation={loading ? "subdued" : "heading"}
+            >
+              {title}
+            </Heading>
+          </View>
+          {shouldShowDismiss && (
+            <View
+              style={styles.dismissButton}
+              // @ts-expect-error tsc-ci
+              ref={overlayHeader}
+              accessibilityLabel={accessibilityLabel || closeOverlayA11YLabel}
+              accessible={true}
+            >
+              <IconButton
+                name="cross"
+                customColor={
+                  loading ? tokens["color-disabled"] : tokens["color-heading"]
+                }
+                onPress={() => onCloseController()}
+                accessibilityLabel={closeOverlayA11YLabel}
+                testID="ATL-Overlay-CloseButton"
+              />
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  }
+
+  function renderChildren() {
+    return (
+      <View
+        style={{ paddingBottom: insets.bottom }}
+        onLayout={handleChildrenLayout}
+        testID="ATL-Overlay-Children"
+      >
+        {children}
+      </View>
+    );
+  }
+
+  function handleOnScroll({
+    nativeEvent,
+  }: NativeSyntheticEvent<NativeScrollEvent>) {
+    setShowHeaderShadow(nativeEvent.contentOffset.y > 0);
+  }
+
+  function getModalBackgroundColor(variation: ModalBackgroundColor) {
+    switch (variation) {
+      case "surface":
+        return tokens["color-surface"];
+      case "background":
+        return tokens["color-surface--background"];
+    }
+  }
+}
+
+function ContentOverlayPortal(
+  modalProps: ContentOverlayProps,
+  ref: Ref<ContentOverlayRef>,
+) {
+  return (
+    <Portal>
+      <ContentOverlayModal ref={ref} {...modalProps} />
+    </Portal>
+  );
+}

package/src/ContentOverlay/hooks/useKeyboardVisibility.test.ts

@@ -0,0 +1,42 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import { DeviceEventEmitter, KeyboardEvent } from "react-native";
+import { useKeyboardVisibility } from "./useKeyboardVisibility";
+
+const keyboardEvent: Partial<KeyboardEvent> = {
+  endCoordinates: { height: 350, screenX: 120, screenY: 120, width: 200 },
+};
+
+describe("when the user is typing", () => {
+  it("sets the isKeyboardVisible to true", () => {
+    const { result } = renderHook(() => useKeyboardVisibility());
+
+    act(() => {
+      DeviceEventEmitter.emit("keyboardDidShow", keyboardEvent);
+    });
+
+    expect(result.current.isKeyboardVisible).toBe(true);
+  });
+  it("the keyboardDidShow event emits the keyboard height", () => {
+    const { result } = renderHook(() => useKeyboardVisibility());
+
+    act(() => {
+      DeviceEventEmitter.emit("keyboardDidShow", keyboardEvent);
+    });
+
+    expect(result.current.keyboardHeight).toBe(
+      keyboardEvent.endCoordinates?.height,
+    );
+  });
+});
+
+describe("when the user not typing", () => {
+  it("sets the isKeyboardVisible to false", () => {
+    const { result } = renderHook(() => useKeyboardVisibility());
+
+    act(() => {
+      DeviceEventEmitter.emit("keyboardDidHide");
+    });
+
+    expect(result.current.isKeyboardVisible).toBe(false);
+  });
+});