@jobber/components-native 0.36.0 → 0.38.0

package/src/ContentOverlay/hooks/useKeyboardVisibility.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { Keyboard, KeyboardEvent } from "react-native";
+
+interface KeyboardVisibility {
+  readonly isKeyboardVisible: boolean;
+  readonly keyboardHeight: number;
+}
+
+export function useKeyboardVisibility(): KeyboardVisibility {
+  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      "keyboardDidShow",
+      (event: KeyboardEvent) => {
+        setKeyboardVisible(true);
+        setKeyboardHeight(event.endCoordinates.height);
+      },
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      "keyboardDidHide",
+      () => {
+        setKeyboardVisible(false);
+        setKeyboardHeight(0);
+      },
+    );
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
+  return { isKeyboardVisible, keyboardHeight };
+}

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

@@ -0,0 +1,56 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import { LayoutChangeEvent } from "react-native";
+import { useViewLayoutHeight } from "./useViewLayoutHeight";
+
+describe("useViewLayoutHeight", () => {
+  it("should return initial values", async () => {
+    const { result } = renderHook(() => useViewLayoutHeight());
+    expect(result.current.height).toBe(0);
+    expect(result.current.heightKnown).toBe(false);
+    expect(typeof result.current.handleLayout).toBe("function");
+  });
+  it("should handle layout change event", async () => {
+    const expectedHeight = 100;
+    const layoutChangeEvent: LayoutChangeEvent = {
+      nativeEvent: {
+        layout: {
+          height: expectedHeight,
+          width: 100,
+          x: 0,
+          y: 0,
+        },
+      },
+      currentTarget: 0,
+      target: 0,
+      bubbles: false,
+      cancelable: false,
+      defaultPrevented: false,
+      eventPhase: 0,
+      isTrusted: false,
+      preventDefault: function (): void {
+        throw new Error("Function not implemented.");
+      },
+      isDefaultPrevented: function (): boolean {
+        throw new Error("Function not implemented.");
+      },
+      stopPropagation: function (): void {
+        throw new Error("Function not implemented.");
+      },
+      isPropagationStopped: function (): boolean {
+        throw new Error("Function not implemented.");
+      },
+      persist: function (): void {
+        throw new Error("Function not implemented.");
+      },
+      timeStamp: 0,
+      type: "",
+    };
+    const { result } = renderHook(() => useViewLayoutHeight());
+    await act(async () => {
+      result.current.handleLayout(layoutChangeEvent);
+    });
+
+    expect(result.current.height).toBe(expectedHeight);
+    expect(result.current.heightKnown).toBe(true);
+  });
+});

package/src/ContentOverlay/hooks/useViewLayoutHeight.ts

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { LayoutChangeEvent } from "react-native";
+
+export function useViewLayoutHeight(): {
+  readonly handleLayout: ({ nativeEvent }: LayoutChangeEvent) => void;
+  readonly height: number;
+  readonly heightKnown: boolean;
+} {
+  const [heightKnown, setHeightKnown] = useState(false);
+  const [height, setHeight] = useState(0);
+
+  const handleLayout = ({ nativeEvent }: LayoutChangeEvent): void => {
+    setHeightKnown(true);
+    setHeight(nativeEvent.layout.height);
+  };
+
+  return { handleLayout, height, heightKnown } as const;
+}

package/src/ContentOverlay/index.ts

@@ -0,0 +1,2 @@
+export { ContentOverlay } from "./ContentOverlay";
+export type { ContentOverlayRef, ModalBackgroundColor } from "./types";

package/src/ContentOverlay/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  closeOverlayA11YLabel: {
+    id: "closeOverlayA11yLabel",
+    defaultMessage: "Close {title} modal",
+    description: "Accessibility label for button to close the overlay modal",
+  },
+});

package/src/ContentOverlay/types.ts

@@ -0,0 +1,96 @@
+import { ReactNode } from "react";
+import { Modalize } from "react-native-modalize";
+
+export interface ContentOverlayProps {
+  /**
+   * Content to be passed into the overlay
+   */
+  readonly children: ReactNode;
+  /**
+   * Title of overlay, appears in the header next to the close button.
+   */
+  readonly title: string;
+  /**
+   * Optional accessibilityLabel describing the overlay.
+   * This will read out when the overlay is opened.
+   * @default "Close {title} modal"
+   */
+  readonly accessibilityLabel?: string;
+  /**
+   * Force overlay height to fill the screen.
+   * Width not impacted.
+   * @default false
+   */
+  readonly fullScreen?: boolean;
+  /**
+   * Display the dismiss button in the header of the overlay.
+   * @default false
+   */
+  readonly showDismiss?: boolean;
+  /**
+   * If false, hides the handle and turns off dragging.
+   * @default true
+   */
+  readonly isDraggable?: boolean;
+  /**
+   * If true, automatically adjusts the overlay height to the content height.
+   * This will disable the ability to drag the overlay to fullscreen when
+   * `isDraggable` is true.
+   * @default false
+   */
+  readonly adjustToContentHeight?: boolean;
+  /**
+   * Allows taps to be registered behind keyboard if enabled
+   * @default false
+   */
+  readonly keyboardShouldPersistTaps?: boolean;
+  /**
+   * Enables scrolling in the content body of overlay
+   */
+  readonly scrollEnabled?: boolean;
+  /**
+   * Set the background color of the modal window
+   * @default "surface"
+   */
+  readonly modalBackgroundColor?: ModalBackgroundColor;
+  /**
+   * Callback that is called when the overlay is closed.
+   */
+  readonly onClose?: () => void;
+  /**
+   * Callback that is called when the overlay is opened.
+   */
+  readonly onOpen?: () => void;
+
+  /**
+   * Callback that is called between overlay is closed and when the "x" button is pressed
+   */
+  readonly onBeforeExit?: () => void;
+
+  /**
+   * Define the behavior of the keyboard when having inputs inside the modal.
+   * @default padding
+   */
+  readonly keyboardAvoidingBehavior?: "height" | "padding" | "position";
+
+  /**
+   * Boolean to show a disabled state
+   * @default false
+   */
+  readonly loading?: boolean;
+
+  /**
+   * Define keyboard's Android behavior like iOS's one.
+   * @default Platform.select({ ios: true, android: false })
+   */
+  readonly avoidKeyboardLikeIOS?: boolean;
+}
+
+export type ModalBackgroundColor = "surface" | "background";
+
+export type ContentOverlayRef =
+  | {
+      open?: Modalize["open"];
+      close?: Modalize["close"];
+    }
+  | undefined;

package/src/Disclosure/Disclosure.style.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+  },
+  countColumn: {
+    paddingRight: tokens["space-base"],
+  },
+  titleContainer: {
+    flexDirection: "row",
+  },
+  contentContainer: {
+    paddingTop: tokens["space-small"],
+  },
+});

package/src/Disclosure/Disclosure.test.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { ReactTestInstance } from "react-test-renderer";
+import { Disclosure } from ".";
+import { Text } from "../Text";
+
+jest.mock("react-native-svg", () => {
+  return {
+    __esModule: true,
+    ...jest.requireActual("react-native-svg"),
+    Path: "Path",
+    default: "SVGMock",
+  };
+});
+
+function fireLayoutEvent(disclosureContent: ReactTestInstance) {
+  fireEvent(disclosureContent, "onLayout", {
+    nativeEvent: {
+      layout: {
+        height: 100,
+      },
+    },
+  });
+}
+
+it("renders a Disclosure with a header and a content when open is true", () => {
+  const disclosure = render(
+    <Disclosure
+      header={<Text>This is the header</Text>}
+      content={<Text>This is the content</Text>}
+      open={true}
+      isEmpty={false}
+      onToggle={() => {
+        return;
+      }}
+    />,
+  );
+  fireLayoutEvent(disclosure.getByTestId("content"));
+  expect(disclosure).toMatchSnapshot();
+});
+
+it("renders a Disclosure with a header and with a content of size 0 when closed is false", () => {
+  const disclosure = render(
+    <Disclosure
+      header={<Text>This is the header</Text>}
+      content={<Text>This is the content</Text>}
+      open={false}
+      isEmpty={false}
+      onToggle={() => {
+        return;
+      }}
+    />,
+  );
+  fireLayoutEvent(disclosure.getByTestId("content"));
+  expect(disclosure).toMatchSnapshot();
+});
+
+it("should not render the caret when the Disclosure is empty", () => {
+  const disclosure = render(
+    <Disclosure
+      header={<Text>This is the header</Text>}
+      content={<Text>This is the content</Text>}
+      open={false}
+      isEmpty={true}
+      onToggle={() => {
+        return;
+      }}
+    />,
+  );
+  expect(disclosure).toMatchSnapshot();
+});

package/src/Disclosure/Disclosure.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+import {
+  LayoutChangeEvent,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import Reanimated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { EASE_CUBIC_IN_OUT } from "./constants";
+import { styles } from "./Disclosure.style";
+import { tokens } from "../utils/design";
+import { Icon } from "../Icon";
+
+const ReanimatedView = Reanimated.createAnimatedComponent(View);
+const ReanimatedScrollView = Reanimated.createAnimatedComponent(ScrollView);
+
+interface DisclosureProps {
+  /**
+   * Specifies the main content of the disclosure component.
+   * It can be any React Node - simple text, JSX, or a complex React component.
+   */
+  readonly content: React.ReactNode;
+
+  /**
+   * Defines the header of the disclosure component.
+   * Similar to `content`, it can be any React Node.
+   */
+  readonly header: React.ReactNode;
+
+  /**
+   * A boolean that determines whether the disclosure component is in an open or closed state.
+   * If `open` is true, the disclosure is in an open state; if false, it's closed.
+   */
+  readonly open: boolean;
+
+  /**
+   * A boolean that indicates whether the disclosure component is empty or not.
+   * If `isEmpty` is `true`, there is no content in the disclosure; if false, there is some content.
+   */
+  readonly isEmpty: boolean;
+
+  /**
+   * An optional property that determines the duration of the opening and closing animation of the disclosure component.
+   * It's defined in milliseconds.
+   * @default tokens["timing-slowest"]
+   */
+  readonly animationDuration?: number;
+
+  /**
+   * A function that is called whenever the disclosure component is toggled between its open and closed states.
+   */
+  onToggle(): void;
+}
+
+export function Disclosure({
+  content,
+  header,
+  open,
+  onToggle,
+  isEmpty,
+  animationDuration = tokens["timing-slowest"],
+}: DisclosureProps): JSX.Element {
+  return (
+    <View style={styles.container}>
+      <DisclosureHeader
+        {...{ header, onToggle, isEmpty, open, animationDuration }}
+      />
+      <DisclosureContent {...{ content, open, animationDuration }} />
+    </View>
+  );
+}
+
+type DisclosureHeaderProps = Pick<
+  DisclosureProps,
+  "header" | "onToggle" | "isEmpty" | "open" | "animationDuration"
+>;
+
+function DisclosureHeader({
+  header,
+  onToggle,
+  isEmpty,
+  open,
+  animationDuration,
+}: DisclosureHeaderProps) {
+  const rotateZ = useSharedValue(0);
+
+  rotateZ.value = withTiming(open ? 0 : -180, {
+    easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
+    duration: animationDuration,
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ rotateZ: `${rotateZ.value}deg` }],
+    };
+  });
+
+  return (
+    <TouchableOpacity
+      activeOpacity={tokens["opacity-pressed"]}
+      onPress={onToggle}
+      disabled={isEmpty}
+    >
+      <View style={styles.headerContainer}>
+        {header}
+        {!isEmpty && (
+          <ReanimatedView style={[animatedStyle]}>
+            <Icon name={"arrowUp"} color="grey" />
+          </ReanimatedView>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+type DisclosureContentProps = Pick<
+  DisclosureProps,
+  "content" | "open" | "animationDuration"
+>;
+
+function DisclosureContent({
+  content,
+  open,
+  animationDuration,
+}: DisclosureContentProps) {
+  const [maxHeight, setMaxHeight] = useState(0);
+  const height = useSharedValue(0);
+
+  const onContentLayoutChange = (event: LayoutChangeEvent) => {
+    const newHeight = event.nativeEvent.layout.height;
+    setMaxHeight(newHeight);
+  };
+
+  height.value = withTiming(open ? maxHeight : 0, {
+    duration: animationDuration,
+    easing: Easing.bezier(...EASE_CUBIC_IN_OUT),
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      height: height.value,
+    };
+  }, []);
+
+  return (
+    <ReanimatedScrollView
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      style={[styles.contentContainer, animatedStyle]}
+    >
+      <View testID={"content"} onLayout={onContentLayoutChange}>
+        {content}
+      </View>
+    </ReanimatedScrollView>
+  );
+}