@jobber/components-native 0.98.4 → 0.98.5

package/src/Menu/Menu.test.tsx

@@ -1,203 +0,0 @@
-import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
-import { Host } from "react-native-portalize";
-import { View } from "react-native";
-import type { MenuOptionProps, MenuProps } from ".";
-import { Menu } from ".";
-import { tokens } from "../utils/design";
-import { Icon } from "../Icon";
-import { Button } from "../Button";
-
-const mockOnPress = jest.fn();
-jest
-  .spyOn(View.prototype, "measureInWindow")
-  .mockImplementation(cb => cb(50, 50, 100, 100));
-
-const setup = (props?: MenuProps) => {
-  return render(
-    <Host>
-      <Menu
-        menuOptions={props?.menuOptions}
-        customActivator={props?.customActivator}
-      />
-    </Host>,
-  );
-};
-
-const menuLabel = "Menu";
-
-describe("Menu", () => {
-  beforeEach(() => {
-    mockOnPress.mockClear();
-  });
-
-  it("renders the default Activator", () => {
-    const { getByTestId, getByLabelText } = setup({
-      menuOptions: [{ label: "hi", icon: "add", onPress: mockOnPress }],
-    });
-
-    expect(getByTestId("more")).toBeDefined();
-    expect(getByLabelText(menuLabel)).toBeDefined();
-  });
-
-  it("renders every menu option when menu is opened", () => {
-    const menuOptions: MenuOptionProps[] = [
-      { label: "option1", icon: "add", onPress: mockOnPress },
-      { label: "option2", icon: "arrowDown", onPress: mockOnPress },
-      { label: "option3", onPress: mockOnPress },
-    ];
-    const { getByLabelText } = setup({
-      menuOptions,
-    });
-
-    fireEvent.press(getByLabelText(menuLabel));
-    expect(getByLabelText(menuOptions[0].label)).toBeDefined();
-    expect(getByLabelText(menuOptions[1].label)).toBeDefined();
-    expect(getByLabelText(menuOptions[2].label)).toBeDefined();
-  });
-
-  describe("Custom Activator", () => {
-    it("renders a custom Activator", () => {
-      const { getByTestId } = setup({
-        menuOptions: [{ label: "hi", onPress: mockOnPress }],
-        customActivator: <Icon name="addNote" />,
-      });
-
-      expect(getByTestId("addNote")).toBeDefined();
-    });
-
-    it("renders menu when the custom activator is clicked", () => {
-      const { getByLabelText, getByTestId, getAllByTestId } = setup({
-        menuOptions: [
-          { label: "hi", icon: "add", onPress: mockOnPress },
-          { label: "option2", onPress: mockOnPress },
-        ],
-        customActivator: <Icon name="addNote" />,
-      });
-
-      fireEvent.press(getByTestId("addNote"));
-
-      expect(getAllByTestId("ATL-MENU-OPTIONS")).toHaveLength(2);
-      expect(getByTestId("add")).toBeDefined();
-      expect(getByLabelText("hi")).toBeDefined();
-    });
-
-    describe("Pressable used as Custom Activator", () => {
-      it("menu is open and custom activator's onPress is called", () => {
-        const mockActivatorPress = jest.fn();
-        const buttonLabel = "Test me!";
-        const menuOptions: MenuOptionProps[] = [
-          { label: "menuOption", icon: "add", onPress: mockOnPress },
-        ];
-
-        const { getByLabelText } = setup({
-          menuOptions,
-          customActivator: (
-            <Button label={buttonLabel} onPress={mockActivatorPress} />
-          ),
-        });
-
-        fireEvent.press(getByLabelText(buttonLabel));
-
-        expect(mockActivatorPress).toHaveBeenCalledTimes(1);
-        expect(getByLabelText(menuOptions[0].label)).toBeDefined();
-      });
-    });
-  });
-
-  describe("Menu Options", () => {
-    it("fires the onPress of the menu option", () => {
-      const { getByLabelText } = setup({
-        menuOptions: [
-          {
-            label: "hi",
-            icon: "add",
-            onPress: mockOnPress,
-            destructive: true,
-          },
-        ],
-      });
-
-      fireEvent.press(getByLabelText(menuLabel));
-      fireEvent.press(getByLabelText("hi"));
-      expect(mockOnPress).toHaveBeenCalled();
-    });
-
-    it("renders a menuOption with an icon with destructive styling", () => {
-      const { getByLabelText, getByTestId } = setup({
-        menuOptions: [
-          { label: "hi", icon: "add", onPress: mockOnPress, destructive: true },
-        ],
-      });
-
-      fireEvent.press(getByLabelText(menuLabel));
-      expect(getByTestId("add").props.style).toContainEqual({
-        display: "flex",
-        fill: tokens["color-critical"],
-        height: 24,
-        verticalAlign: "middle",
-        width: 24,
-      });
-    });
-
-    it("closes the menu after clicking on a menu option", () => {
-      const { getByLabelText, queryByLabelText } = setup({
-        menuOptions: [
-          {
-            label: "hi",
-            icon: "add",
-            onPress: mockOnPress,
-            destructive: true,
-          },
-        ],
-      });
-
-      fireEvent.press(getByLabelText(menuLabel));
-      fireEvent.press(getByLabelText("hi"));
-      expect(mockOnPress).toHaveBeenCalled();
-      expect(queryByLabelText("hi")).toBeNull();
-    });
-
-    it("transforms the text", () => {
-      const { getByLabelText, getByText } = setup({
-        menuOptions: [
-          {
-            label: "hi",
-            icon: "add",
-            onPress: mockOnPress,
-            textTransform: "capitalize",
-          },
-        ],
-      });
-      fireEvent.press(getByLabelText(menuLabel));
-      expect(getByText("Hi")).toBeDefined();
-    });
-
-    it("does not transform the text when textTransform set to none", () => {
-      const { getByLabelText, getByText } = setup({
-        menuOptions: [
-          {
-            label: "hi",
-            icon: "add",
-            onPress: mockOnPress,
-            textTransform: "none",
-          },
-        ],
-      });
-      fireEvent.press(getByLabelText(menuLabel));
-      expect(getByText("hi")).toBeDefined();
-    });
-  });
-
-  it("renders a menu when the default activator is clicked", () => {
-    const { getByLabelText, getByTestId } = setup({
-      menuOptions: [{ label: "hi", icon: "add", onPress: mockOnPress }],
-    });
-
-    fireEvent.press(getByLabelText(menuLabel));
-
-    expect(getByTestId("ATL-MENU-OPTIONS")).toBeDefined();
-    expect(getByTestId("add")).toBeDefined();
-    expect(getByLabelText("hi")).toBeDefined();
-  });
-});

package/src/Menu/Menu.tsx

@@ -1,141 +0,0 @@
-import React, { useCallback, useRef, useState } from "react";
-import type { LayoutRectangle } from "react-native";
-import {
-  Keyboard,
-  Platform,
-  Pressable,
-  View,
-  useWindowDimensions,
-} from "react-native";
-import { Portal } from "react-native-portalize";
-import { useSafeAreaFrame } from "react-native-safe-area-context";
-import { useStyles } from "./Menu.style";
-import { findViewpoint } from "./utils";
-import type { MenuProps } from "./types";
-import { MenuOption } from "./components/MenuOption";
-import { Overlay } from "./components/Overlay";
-import { Button } from "../Button";
-import { Content } from "../Content";
-import { useAtlantisContext } from "../AtlantisContext";
-import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-import { useAtlantisTheme } from "../AtlantisThemeContext";
-
-export function Menu({ menuOptions, customActivator }: MenuProps) {
-  const [open, setOpen] = useState<boolean>(false);
-  const [menuPosition, setMenuPosition] = useState<object>();
-  const activatorLayout = useRef<LayoutRectangle>(null);
-  const menuButtonRef = useRef<View>(null);
-  const screenInfo = useScreenInformation();
-
-  const { t } = useAtlantisI18n();
-  const styles = useStyles();
-
-  const findMenuLayout = useCallback(() => {
-    if (activatorLayout.current) {
-      setMenuPosition(
-        findViewpoint(screenInfo, activatorLayout.current, styles),
-      );
-    }
-  }, [screenInfo, activatorLayout, styles]);
-
-  const openMenu = () => {
-    menuButtonRef.current?.measureInWindow(
-      (x: number, y: number, width: number, height: number) => {
-        activatorLayout.current = {
-          x,
-          y,
-          width,
-          height,
-        };
-        findMenuLayout();
-        setOpen(true);
-      },
-    );
-  };
-
-  const activatorOnPress = (onPress?: () => void) => {
-    onPress && onPress();
-
-    if (Platform.OS === "ios" && Keyboard.isVisible()) {
-      // On iOS, the keyboard height causes problems with the menu positioning logic.
-      // Wait until the keyboard is fully hidden before we show the menu.
-      onKeyboardDidHide(openMenu);
-      Keyboard.dismiss();
-    } else {
-      openMenu();
-    }
-  };
-
-  const { tokens } = useAtlantisTheme();
-
-  return (
-    <>
-      <View
-        ref={ref => {
-          menuButtonRef.current = ref;
-        }}
-        collapsable={false}
-      >
-        {customActivator && (
-          <Pressable
-            style={({ pressed }) => [
-              {
-                opacity: pressed ? tokens["opacity-pressed"] : 1,
-              },
-            ]}
-            pointerEvents="box-only"
-            onPress={() => {
-              activatorOnPress(customActivator.props.onPress);
-            }}
-            onLongPress={customActivator.props.onLongPress}
-          >
-            {customActivator}
-          </Pressable>
-        )}
-
-        {!customActivator && (
-          <Button
-            icon="more"
-            accessibilityLabel={t("menu")}
-            variation="cancel"
-            type="tertiary"
-            onPress={() => {
-              activatorOnPress();
-            }}
-          />
-        )}
-      </View>
-      <Portal>
-        {open && (
-          <>
-            <Overlay setOpen={setOpen} />
-            <View style={[open && menuPosition, styles.menu]}>
-              <Content spacing="none" childSpacing="small">
-                {menuOptions?.map((menuOption, index) => {
-                  return (
-                    <MenuOption {...menuOption} key={index} setOpen={setOpen} />
-                  );
-                })}
-              </Content>
-            </View>
-          </>
-        )}
-      </Portal>
-    </>
-  );
-}
-
-function useScreenInformation() {
-  const { headerHeight } = useAtlantisContext();
-  const windowWidth = useWindowDimensions().width;
-  const { height: windowHeight } = useSafeAreaFrame();
-
-  return { headerHeight, windowWidth, windowHeight };
-}
-
-function onKeyboardDidHide(callback: () => void) {
-  const listener = Keyboard.addListener("keyboardDidHide", () => {
-    listener.remove();
-    callback();
-  });
-}

package/src/Menu/components/MenuOption/MenuOption.style.tsx

@@ -1,12 +0,0 @@
-import { buildThemedStyles } from "../../../AtlantisThemeContext";
-
-export const useStyles = buildThemedStyles(tokens => {
-  return {
-    menuOption: {
-      display: "flex",
-      paddingHorizontal: tokens["space-base"],
-      paddingVertical: tokens["space-small"],
-      borderRadius: tokens["radius-large"],
-    },
-  };
-});

package/src/Menu/components/MenuOption/MenuOption.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { Pressable, View } from "react-native";
-import capitalize from "lodash/capitalize";
-import { useStyles } from "./MenuOption.style";
-import type { MenuOptionInternalProps } from "../../types";
-import { Flex } from "../../../Flex";
-import { Typography } from "../../../Typography";
-import { Icon } from "../../../Icon";
-import { useAtlantisTheme } from "../../../AtlantisThemeContext";
-
-export function MenuOption({
-  label,
-  icon,
-  iconColor = "heading",
-  textAlign,
-  destructive,
-  textTransform = "capitalize",
-  onPress,
-  setOpen,
-}: MenuOptionInternalProps) {
-  const destructiveColor = "destructive";
-  const textVariation = destructive ? destructiveColor : "heading";
-  const styles = useStyles();
-  const { tokens } = useAtlantisTheme();
-
-  return (
-    <View testID="ATL-MENU-OPTIONS">
-      <Pressable
-        style={({ pressed }) => [
-          styles.menuOption,
-          { opacity: pressed ? tokens["opacity-pressed"] : 1 },
-        ]}
-        onPress={() => {
-          onPress();
-          setOpen(false);
-        }}
-        accessibilityLabel={label}
-      >
-        <Flex
-          template={["grow", "shrink"]}
-          align={"flex-start"}
-          gap={"smaller"}
-        >
-          <Typography
-            selectable={false}
-            color={textVariation}
-            fontWeight={"semiBold"}
-            lineHeight={"large"}
-            align={textAlign}
-          >
-            {textTransform === "capitalize"
-              ? capitalize(label.toLocaleLowerCase())
-              : label}
-          </Typography>
-
-          {icon && (
-            <Icon
-              name={icon}
-              color={destructive ? destructiveColor : iconColor}
-            />
-          )}
-        </Flex>
-      </Pressable>
-    </View>
-  );
-}

package/src/Menu/components/MenuOption/index.ts

@@ -1 +0,0 @@
-export { MenuOption } from "./MenuOption";

package/src/Menu/components/Overlay/Overlay.style.ts

@@ -1,15 +0,0 @@
-import { Dimensions, StyleSheet } from "react-native";
-import { buildThemedStyles } from "../../../AtlantisThemeContext";
-
-const { height } = Dimensions.get("window");
-
-export const useStyles = buildThemedStyles(tokens => {
-  return {
-    overlay: {
-      ...StyleSheet.absoluteFillObject,
-      backgroundColor: tokens["color-overlay"],
-      opacity: 0,
-      height,
-    },
-  };
-});

package/src/Menu/components/Overlay/Overlay.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { Pressable, View } from "react-native";
-import { useStyles } from "./Overlay.style";
-import type { OverlayProp } from "../../types";
-
-export function Overlay({ setOpen }: OverlayProp) {
-  const styles = useStyles();
-
-  return (
-    <Pressable
-      onPressIn={() => {
-        setOpen(false);
-      }}
-    >
-      <View style={styles.overlay} />
-    </Pressable>
-  );
-}

package/src/Menu/components/Overlay/index.ts

@@ -1 +0,0 @@
-export { Overlay } from "./Overlay";

package/src/Menu/index.ts

@@ -1,6 +0,0 @@
-export { Menu } from "./Menu";
-export type {
-  MenuProps,
-  MenuOptionProps,
-  MenuOptionInternalProps,
-} from "./types";

package/src/Menu/types.ts

@@ -1,31 +0,0 @@
-import type { ReactElement } from "react";
-import type { IconColorNames, IconNames } from "@jobber/design";
-import type { TextAlign } from "../Typography";
-
-export interface MenuOptionProps {
-  readonly label: string;
-  readonly icon?: IconNames;
-  readonly iconColor?: IconColorNames;
-  readonly textAlign?: TextAlign;
-  readonly destructive?: boolean;
-  readonly textTransform?: "none" | "capitalize";
-  onPress: () => void;
-}
-
-export interface MenuOptionInternalProps extends MenuOptionProps {
-  setOpen: (bool: boolean) => void;
-}
-
-export interface CustomActivatorProps {
-  readonly onPress?: () => void;
-  readonly onLongPress?: () => void;
-}
-
-export interface MenuProps {
-  readonly menuOptions?: MenuOptionProps[];
-  readonly customActivator?: ReactElement<CustomActivatorProps>;
-}
-
-export interface OverlayProp {
-  setOpen: (bool: boolean) => void;
-}

package/src/Menu/utils.ts

@@ -1,148 +0,0 @@
-import type { LayoutRectangle } from "react-native";
-import type { useStyles } from "./Menu.style";
-
-interface ScreenInfo {
-  windowHeight: number;
-  headerHeight: number;
-  windowWidth: number;
-}
-
-export function findViewpoint(
-  screenInfo: ScreenInfo,
-  activatorLayout: LayoutRectangle,
-  styles: ReturnType<typeof useStyles>,
-): { [key: string]: number | undefined } {
-  const { windowHeight, windowWidth, headerHeight } = screenInfo;
-  const pos: { [key: string]: number | undefined } = {};
-  const menuWidth = styles.menu.width;
-  const windowHalf = (windowHeight - headerHeight) / 2 + headerHeight;
-  const menuPositionVertical =
-    activatorLayout.y + activatorLayout.height > windowHalf
-      ? "menuAbove"
-      : "menuBelow";
-
-  const menuPositionHorizontal =
-    windowWidth / 2 > activatorLayout.width / 2 + activatorLayout.x
-      ? "menuRight"
-      : "menuLeft";
-
-  const menuPadding = 36;
-
-  getVerticalPosition(pos, windowHeight, activatorLayout, menuPositionVertical);
-
-  getHorizontalPosition(
-    pos,
-    activatorLayout,
-    windowWidth,
-    menuPadding,
-    menuWidth,
-    menuPositionHorizontal,
-  );
-
-  return pos;
-}
-
-function getVerticalPosition(
-  pos: { [key: string]: number | undefined },
-  windowHeight: number,
-  activatorLayout: LayoutRectangle,
-  menuPositionVertical: string,
-) {
-  if (menuPositionVertical === "menuAbove") {
-    getAbovePosition(pos, windowHeight, activatorLayout);
-  }
-
-  if (menuPositionVertical === "menuBelow") {
-    getBelowPosition(pos, activatorLayout);
-  }
-}
-
-function getBelowPosition(
-  pos: { [key: string]: number | undefined },
-  activatorLayout: LayoutRectangle,
-) {
-  pos.top = activatorLayout.y + activatorLayout.height;
-}
-
-function getAbovePosition(
-  pos: { [key: string]: number | undefined },
-  windowHeight: number,
-  activatorLayout: LayoutRectangle,
-) {
-  pos.bottom = windowHeight - activatorLayout.y;
-}
-
-function getHorizontalPosition(
-  pos: { [key: string]: number | undefined },
-  activatorLayout: LayoutRectangle,
-  windowWidth: number,
-  menuPadding: number,
-  menuWidth: number,
-  menuPositionHorizontal: string,
-) {
-  if (menuPositionHorizontal === "menuRight") {
-    getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
-  }
-
-  if (menuPositionHorizontal === "menuLeft") {
-    getLeftPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
-  }
-}
-
-function getLeftPosition(
-  pos: { [key: string]: number | undefined },
-  activatorLayout: LayoutRectangle,
-  windowWidth: number,
-  menuHorizontalPadding: number,
-  menuWidth: number,
-) {
-  const overflowLeft =
-    windowWidth -
-      activatorLayout.x -
-      activatorLayout.width +
-      activatorLayout.width / 2 -
-      menuHorizontalPadding +
-      menuWidth >
-    windowWidth;
-
-  const overflowRight =
-    windowWidth -
-      activatorLayout.x -
-      activatorLayout.width +
-      activatorLayout.width / 2 -
-      menuHorizontalPadding <
-    0;
-
-  if (overflowLeft) {
-    pos.right = undefined;
-    pos.left = 0;
-  } else if (overflowRight) {
-    pos.right = 0;
-  } else {
-    pos.right = windowWidth - activatorLayout.x - activatorLayout.width;
-  }
-}
-
-function getRightPosition(
-  pos: { [key: string]: number | undefined },
-  activatorLayout: LayoutRectangle,
-  windowWidth: number,
-  menuPadding: number,
-  menuWidth: number,
-) {
-  const overflowRight =
-    activatorLayout.x + activatorLayout.width / 2 - menuPadding + menuWidth >
-    windowWidth;
-
-  const overflowLeft =
-    activatorLayout.x + activatorLayout.width / 2 - menuPadding < 0;
-
-  if (overflowRight) {
-    pos.left = undefined;
-    pos.right = 0;
-  } else if (overflowLeft) {
-    pos.left = 0;
-  } else {
-    pos.left = activatorLayout.x;
-  }
-}