@jobber/components-native 0.98.4 → 0.99.0

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;
-  }
-}