@jobber/components-native 0.41.0 → 0.42.0

package/dist/src/AutoLink/AutoLink.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Text as RNText } from "react-native";
+import { ComposeTextWithLinks } from "./components";
+import { useCreateLinkedText } from "./hooks/useCreateLinkedText";
+import { TypographyGestureDetector } from "../Typography";
+import { tokens } from "../utils/design";
+export function AutoLink(_a) {
+    var { children: text = "", bottomTabsVisible = true, selectable = true } = _a, rest = __rest(_a, ["children", "bottomTabsVisible", "selectable"]);
+    const { splitText, matches } = useCreateLinkedText(Object.assign({ text }, rest));
+    return (React.createElement(TypographyGestureDetector, null,
+        React.createElement(RNText, { selectable: selectable, selectionColor: tokens["color-brand--highlight"] }, splitText.map((part, index) => (React.createElement(ComposeTextWithLinks, { key: index, part: part, index: index, match: matches[part], bottomTabsVisible: bottomTabsVisible, selectable: selectable }))))));
+}

package/dist/src/AutoLink/clipboard.js

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

package/dist/src/AutoLink/components/ComposeTextWithLinks/ComposeTextWithLinks.js

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

package/dist/src/AutoLink/components/Link/Link.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { Text as RNText } from "react-native";
+import { Text } from "../../../Text";
+export function Link({ children, onPress, onLongPress, }) {
+    return (React.createElement(RNText, { onPress: onPress, onLongPress: onLongPress },
+        React.createElement(Text, { variation: "interactive" }, children)));
+}

package/dist/src/AutoLink/components/index.js

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

package/dist/src/AutoLink/hooks/useCreateLinkedText.js

@@ -0,0 +1,24 @@
+import Autolinker 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 = {};
+    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, tokenRegexp) {
+    return linkedText.split(tokenRegexp).filter(part => Boolean(part));
+}

package/dist/src/AutoLink/hooks/useTokenGenerator.js

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

package/dist/src/AutoLink/index.js

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

package/dist/src/AutoLink/messages.js

@@ -0,0 +1,18 @@
+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/dist/src/AutoLink/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/AutoLink/utils.js

@@ -0,0 +1,45 @@
+import { Linking } from "react-native";
+import { messages } from "./messages";
+import { copyTextToClipboard } from "./clipboard";
+function hasPrefix(text, prefixes) {
+    return prefixes.some(prefix => text.includes(prefix));
+}
+export function shouldIgnoreURL(text, match) {
+    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, immediateOpen = true) {
+    const matchType = match.getType();
+    switch (matchType) {
+        case "email":
+            return immediateOpen
+                ? `mailto:${encodeURIComponent(match.getEmail())}`
+                : match.getEmail();
+        case "phone":
+            return immediateOpen
+                ? `tel:${match.getNumber()}`
+                : match.getNumber();
+        default:
+            return match.getAnchorHref();
+    }
+}
+export function onLongPressLink(match, bottomTabsVisible, formatMessage) {
+    const linkUrl = getUrl(match, false);
+    const toastConfig = {
+        message: formatMessage(messages[`${match.getType()}Copied`]),
+        bottomTabsVisible,
+    };
+    copyTextToClipboard(linkUrl, toastConfig);
+}
+export function onPressLink(match) {
+    const linkUrl = getUrl(match);
+    Linking.openURL(linkUrl);
+}

package/dist/src/index.js

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AutoLink";
 export * from "./Banner";
 export * from "./BottomSheet";
 export * from "./Button";