@jobber/components-native 0.40.1 → 0.42.0

package/src/AutoLink/AutoLink.test.tsx

@@ -0,0 +1,203 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { copyTextToClipboard } from "./clipboard";
+import { AutoLink } from "./AutoLink";
+import { messages } from "./messages";
+
+const mockOpenUrl = jest.fn();
+jest.mock("react-native/Libraries/Linking/Linking", () => ({
+  openURL: mockOpenUrl,
+}));
+
+jest.mock("./clipboard", () => {
+  return {
+    copyTextToClipboard: jest.fn(),
+  };
+});
+
+describe("AutoLink", () => {
+  beforeEach(() => {
+    mockOpenUrl.mockClear();
+  });
+
+  describe("Urls", () => {
+    it("should find and link url amongst other text", () => {
+      const linkText = "getjobber.com";
+      const nonLinkText = "The best website is ";
+      const { getByText } = render(
+        <AutoLink>{`${nonLinkText}${linkText}`}</AutoLink>,
+      );
+      fireEvent.press(getByText(linkText));
+      expect(mockOpenUrl).toHaveBeenCalledWith(`http://${linkText}`);
+    });
+
+    it("should find and link a url without other text around it", () => {
+      const linkText = "getjobber.com";
+      const { getByText } = render(<AutoLink>{linkText}</AutoLink>);
+      fireEvent.press(getByText(linkText));
+      expect(mockOpenUrl).toHaveBeenCalled();
+    });
+
+    it("should copy link onLongPress", () => {
+      const linkText = "getjobber.com";
+      const nonLinkText = "The best website is ";
+      const { getByText } = render(
+        <AutoLink>{`${nonLinkText}${linkText}`}</AutoLink>,
+      );
+
+      fireEvent(getByText(linkText), "onLongPress");
+
+      const expectedToastConfig = {
+        message: messages.urlCopied.defaultMessage,
+        bottomTabsVisible: true,
+      };
+      expect(copyTextToClipboard).toHaveBeenCalledWith(
+        `http://${linkText}`,
+        expectedToastConfig,
+      );
+      expect(mockOpenUrl).not.toHaveBeenCalled();
+    });
+
+    it("should skip linking url if linkUrls is false", () => {
+      const linkText = "getjobber.com";
+      const nonLinkText = "The best website is ";
+      const { getByText } = render(
+        <AutoLink urls={false}>{`${nonLinkText}${linkText}`}</AutoLink>,
+      );
+      fireEvent.press(getByText(RegExp(linkText, "i")));
+
+      expect(mockOpenUrl).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Emails", () => {
+    it("should find and link emails in text", () => {
+      const nonEmailText = "The best email is ";
+      const emailText = "test@example.com";
+      const { getByText } = render(
+        <AutoLink>{`${nonEmailText}${emailText}`}</AutoLink>,
+      );
+
+      fireEvent.press(getByText(emailText));
+      expect(mockOpenUrl).toHaveBeenCalledWith(
+        `mailto:${encodeURIComponent(emailText)}`,
+      );
+    });
+
+    it("should find and link an email without other text around it", () => {
+      const emailText = "test@example.com";
+      const { getByText } = render(<AutoLink>{emailText}</AutoLink>);
+
+      fireEvent.press(getByText(emailText));
+      expect(mockOpenUrl).toHaveBeenCalledWith(
+        `mailto:${encodeURIComponent(emailText)}`,
+      );
+    });
+
+    it("should copy email onLongPress", () => {
+      const nonEmailText = "The best email is ";
+      const emailText = "test@example.com";
+      const { getByText } = render(
+        <AutoLink>{`${nonEmailText}${emailText}`}</AutoLink>,
+      );
+
+      fireEvent(getByText(emailText), "onLongPress");
+
+      const expectedToastConfig = {
+        message: messages.emailCopied.defaultMessage,
+        bottomTabsVisible: true,
+      };
+      expect(copyTextToClipboard).toHaveBeenCalledWith(
+        emailText,
+        expectedToastConfig,
+      );
+      expect(mockOpenUrl).not.toHaveBeenCalled();
+    });
+
+    it("should skip linking email if linkEmails is false", () => {
+      const nonEmailText = "The best email is ";
+      const emailText = "test@example.com";
+      const { getByText } = render(
+        <AutoLink email={false}>{`${nonEmailText}${emailText}`}</AutoLink>,
+      );
+      fireEvent.press(getByText(RegExp(emailText, "i")));
+
+      expect(mockOpenUrl).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Phone Numbers", () => {
+    it("should find and link phone numbers in text", () => {
+      const nonPhoneText = "The best phone number is ";
+      const phoneText = "902-555-5555";
+      const { getByText } = render(
+        <AutoLink>{`${nonPhoneText}${phoneText}`}</AutoLink>,
+      );
+
+      const expectedPhone = phoneText.replace(/-/g, "");
+      fireEvent.press(getByText(phoneText));
+      expect(mockOpenUrl).toHaveBeenCalledWith(`tel:${expectedPhone}`);
+    });
+
+    it("should find and link a phone number without other text around it", () => {
+      const phoneText = "902-555-5555";
+      const { getByText } = render(<AutoLink>{phoneText}</AutoLink>);
+
+      const expectedPhone = phoneText.replace(/-/g, "");
+      fireEvent.press(getByText(phoneText));
+      expect(mockOpenUrl).toHaveBeenCalledWith(`tel:${expectedPhone}`);
+    });
+
+    it("should copy phone number onLongPress", () => {
+      const nonPhoneText = "The best phone number is ";
+      const phoneText = "902-555-5555";
+      const { getByText } = render(
+        <AutoLink>{`${nonPhoneText}${phoneText}`}</AutoLink>,
+      );
+
+      fireEvent(getByText(phoneText), "onLongPress");
+
+      const expectedToastConfig = {
+        message: messages.phoneCopied.defaultMessage,
+        bottomTabsVisible: true,
+      };
+      expect(copyTextToClipboard).toHaveBeenCalledWith(
+        phoneText.replace(/-/g, ""),
+        expectedToastConfig,
+      );
+      expect(mockOpenUrl).not.toHaveBeenCalled();
+    });
+
+    it("should skip linking phone number if linkPhones is false", () => {
+      const nonPhoneText = "The best phone number is ";
+      const phoneText = "902-555-5555";
+      const { getByText } = render(
+        <AutoLink phone={false}>{`${nonPhoneText}${phoneText}`}</AutoLink>,
+      );
+      fireEvent.press(getByText(RegExp(phoneText, "i")));
+
+      expect(mockOpenUrl).not.toHaveBeenCalled();
+    });
+  });
+
+  it("should properly link a combination of urls, emails and phone numbers", () => {
+    const phoneText = "902-555-5555";
+    const emailText = "test@example.com";
+    const urlText = "getjobber.com";
+    const { getByText } = render(
+      <AutoLink>{`${phoneText} ${emailText} ${urlText}`}</AutoLink>,
+    );
+
+    const expectedPhone = phoneText.replace(/-/g, "");
+    fireEvent.press(getByText(phoneText));
+    expect(mockOpenUrl).toHaveBeenCalledWith(`tel:${expectedPhone}`);
+
+    fireEvent.press(getByText(emailText));
+    expect(mockOpenUrl).toHaveBeenCalledWith(
+      `mailto:${encodeURIComponent(emailText)}`,
+    );
+
+    fireEvent.press(getByText(urlText));
+    expect(mockOpenUrl).toHaveBeenCalledWith(`http://${urlText}`);
+  });
+});

package/src/AutoLink/AutoLink.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Text as RNText } from "react-native";
+import { AutoLinkProps } from "./types";
+import { ComposeTextWithLinks } from "./components";
+import { useCreateLinkedText } from "./hooks/useCreateLinkedText";
+import { TypographyGestureDetector } from "../Typography";
+import { tokens } from "../utils/design";
+
+export function AutoLink({
+  children: text = "",
+  bottomTabsVisible = true,
+  selectable = true,
+  ...rest
+}: AutoLinkProps): JSX.Element {
+  const { splitText, matches } = useCreateLinkedText({ text, ...rest });
+
+  return (
+    <TypographyGestureDetector>
+      <RNText
+        selectable={selectable}
+        selectionColor={tokens["color-brand--highlight"]}
+      >
+        {splitText.map((part, index) => (
+          <ComposeTextWithLinks
+            key={index}
+            part={part}
+            index={index}
+            match={matches[part]}
+            bottomTabsVisible={bottomTabsVisible}
+            selectable={selectable}
+          />
+        ))}
+      </RNText>
+    </TypographyGestureDetector>
+  );
+}

package/src/AutoLink/clipboard.ts

@@ -0,0 +1,14 @@
+import Clipboard from "@react-native-clipboard/clipboard";
+import { ShowToastParams, showToast } from "../Toast";
+
+export function copyTextToClipboard(
+  text: string,
+  toastConfig?: ShowToastParams,
+): void {
+  Clipboard.setString(text);
+
+  if (toastConfig) {
+    const { message, bottomTabsVisible } = toastConfig;
+    showToast({ message, bottomTabsVisible });
+  }
+}

package/src/AutoLink/components/ComposeTextWithLinks/ComposeTextWithLinks.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { Platform } from "react-native";
+import { ComposeTextWithLinksProps } from "../../types";
+import { onLongPressLink, onPressLink } from "../../utils";
+import { Link } from "../Link/Link";
+import { Text } from "../../../Text";
+
+export function ComposeTextWithLinks({
+  part,
+  index,
+  match,
+  bottomTabsVisible,
+  selectable = true,
+}: ComposeTextWithLinksProps): JSX.Element {
+  const { formatMessage } = useIntl();
+
+  const isLink = match?.getType();
+
+  if (isLink) {
+    return (
+      <Link
+        key={index}
+        onPress={() => onPressLink(match)}
+        onLongPress={() => {
+          if (selectable && Platform.OS === "android") {
+            return;
+          }
+          onLongPressLink(match, bottomTabsVisible, formatMessage);
+        }}
+      >
+        {match.getAnchorText()}
+      </Link>
+    );
+  }
+
+  return <Text key={index}>{part}</Text>;
+}

package/src/AutoLink/components/Link/Link.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Link } from "./Link";
+
+describe("Link", () => {
+  const textLink = "getjobber.com";
+  const mockPress = jest.fn();
+
+  it("should call the onPress callback", () => {
+    const { getAllByText } = render(
+      <Link onPress={mockPress}>{textLink}</Link>,
+    );
+
+    fireEvent.press(getAllByText("getjobber.com")[0]);
+    expect(mockPress).toHaveBeenCalled();
+  });
+
+  it("should call the longPress callback", () => {
+    const mockLongPress = jest.fn();
+    const { getAllByText } = render(
+      <Link onPress={mockPress} onLongPress={mockLongPress}>
+        {textLink}
+      </Link>,
+    );
+
+    fireEvent(getAllByText(textLink)[0], "onLongPress");
+
+    expect(mockLongPress).toHaveBeenCalled();
+  });
+});

package/src/AutoLink/components/Link/Link.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Text as RNText } from "react-native";
+import { Text } from "../../../Text";
+
+interface LinkProps {
+  readonly children: string;
+  readonly onPress: () => void;
+  readonly onLongPress?: () => void;
+}
+
+export function Link({
+  children,
+  onPress,
+  onLongPress,
+}: LinkProps): JSX.Element {
+  return (
+    <RNText onPress={onPress} onLongPress={onLongPress}>
+      <Text variation="interactive">{children}</Text>
+    </RNText>
+  );
+}

package/src/AutoLink/components/index.ts

@@ -0,0 +1,2 @@
+export { Link } from "./Link/Link";
+export { ComposeTextWithLinks } from "./ComposeTextWithLinks/ComposeTextWithLinks";

package/src/AutoLink/hooks/useCreateLinkedText.ts

@@ -0,0 +1,35 @@
+import Autolinker, { Match } from "autolinker";
+import { useTokenGenerator } from "./useTokenGenerator";
+import { shouldIgnoreURL } from "../utils";
+
+export function useCreateLinkedText({
+  text = "",
+  email = true,
+  phone = true,
+  urls = true,
+}) {
+  const [generateToken, tokenRegexp] = useTokenGenerator();
+
+  const matches: { [token: string]: Match } = {};
+
+  const linkedText = Autolinker.link(text, {
+    email,
+    phone,
+    urls,
+    replaceFn: match => {
+      if (shouldIgnoreURL(text, match)) return false;
+
+      const token = generateToken();
+      matches[token] = match;
+      return token;
+    },
+  });
+
+  const splitText = splitLinkedText(linkedText, tokenRegexp);
+
+  return { splitText, matches };
+}
+
+function splitLinkedText(linkedText: string, tokenRegexp: RegExp): string[] {
+  return linkedText.split(tokenRegexp).filter(part => Boolean(part));
+}

package/src/AutoLink/hooks/useTokenGenerator.ts

@@ -0,0 +1,11 @@
+import { useState } from "react";
+import { v1 } from "react-native-uuid";
+
+export function useTokenGenerator(): [() => string, RegExp] {
+  let counter = 0;
+  const [identifier] = useState(v1());
+  return [
+    () => `@__ELEMENT-${identifier}-${counter++}__@`,
+    new RegExp(`(@__ELEMENT-${identifier}-\\d+__@)`, "g"),
+  ];
+}

package/src/AutoLink/index.ts

@@ -0,0 +1 @@
+export * from "./AutoLink";

package/src/AutoLink/messages.ts

@@ -0,0 +1,19 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  phoneCopied: {
+    id: "phoneCopied",
+    defaultMessage: "Phone number copied",
+    description: "Message shown after copying a phone number",
+  },
+  emailCopied: {
+    id: "emailCopied",
+    defaultMessage: "Email copied",
+    description: "Message shown after copying an email",
+  },
+  urlCopied: {
+    id: "urlCopied",
+    defaultMessage: "URL copied",
+    description: "Message shown after copying a URL",
+  },
+});

package/src/AutoLink/types.ts

@@ -0,0 +1,39 @@
+import { Match } from "autolinker";
+import { TextProps } from "react-native";
+
+export interface AutoLinkProps extends Pick<TextProps, "selectable"> {
+  /**
+   * Text to display.
+   */
+  readonly children: string;
+
+  /**
+   * Flag for linking phone numbers in text
+   */
+  readonly phone?: boolean;
+
+  /**
+   * Flag for linking emails in text
+   */
+  readonly email?: boolean;
+
+  /**
+   * Flag for linking urls in text
+   */
+  readonly urls?: boolean;
+
+  /**
+   * Determines the placement of the toast that gets shown onLongPress
+   */
+  readonly bottomTabsVisible?: boolean;
+}
+
+export type LinkType = "email" | "phone" | "url";
+
+export interface ComposeTextWithLinksProps {
+  part: string;
+  index: number;
+  match: Match;
+  bottomTabsVisible: boolean;
+  selectable?: boolean;
+}

package/src/AutoLink/utils.ts

@@ -0,0 +1,63 @@
+import { EmailMatch, Match, PhoneMatch } from "autolinker";
+import { MessageDescriptor } from "react-intl";
+import { Linking } from "react-native";
+import { messages } from "./messages";
+import { LinkType } from "./types";
+import { copyTextToClipboard } from "./clipboard";
+
+function hasPrefix(text: string, prefixes: string[]): boolean {
+  return prefixes.some(prefix => text.includes(prefix));
+}
+
+export function shouldIgnoreURL(text: string, match: Match): boolean {
+  const matchedText = match.getMatchedText().toLocaleLowerCase();
+  const urlPrefixes = ["http://", "https://", "www."];
+  const ignorePrefixes = ["file://", "ftp://"];
+  const previousChar = text.charAt(match.getOffset() - 1);
+
+  if (match.getType() === "url") {
+    const hasUrlPrefix = hasPrefix(matchedText, urlPrefixes);
+    const hasIgnorePrefix =
+      hasPrefix(matchedText, ignorePrefixes) || previousChar === "/";
+
+    return hasIgnorePrefix && !hasUrlPrefix;
+  }
+
+  return false;
+}
+
+export function getUrl(match: Match, immediateOpen = true): string {
+  const matchType = match.getType();
+
+  switch (matchType) {
+    case "email":
+      return immediateOpen
+        ? `mailto:${encodeURIComponent((match as EmailMatch).getEmail())}`
+        : (match as EmailMatch).getEmail();
+    case "phone":
+      return immediateOpen
+        ? `tel:${(match as PhoneMatch).getNumber()}`
+        : (match as PhoneMatch).getNumber();
+    default:
+      return match.getAnchorHref();
+  }
+}
+
+export function onLongPressLink(
+  match: Match,
+  bottomTabsVisible: boolean,
+  formatMessage: (message: MessageDescriptor) => string,
+): void {
+  const linkUrl = getUrl(match, false);
+
+  const toastConfig = {
+    message: formatMessage(messages[`${match.getType() as LinkType}Copied`]),
+    bottomTabsVisible,
+  };
+  copyTextToClipboard(linkUrl, toastConfig);
+}
+
+export function onPressLink(match: Match): void {
+  const linkUrl = getUrl(match);
+  Linking.openURL(linkUrl);
+}

package/src/FormatFile/FormatFile.style.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  thumbnailContainer: {
+    backgroundColor: tokens["color-surface--background"],
+    borderWidth: tokens["border-base"],
+    borderColor: tokens["color-border"],
+    borderRadius: tokens["radius-base"],
+    marginBottom: tokens["space-small"],
+  },
+  thumbnailContainerGrid: {
+    width: tokens["space-extravagant"],
+    height: tokens["space-extravagant"],
+    marginRight: tokens["space-small"],
+  },
+});