@jobber/components-native 0.45.0 → 0.46.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.45.0",
+    "version": "0.46.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -84,5 +84,5 @@
         "react-native-reanimated": "^2.17.0",
         "react-native-safe-area-context": "^4.5.2"
     },
-    "gitHead": "90e9d2a124e1d65d678364063f6ef57e066939af"
+    "gitHead": "6ff59b16b38fdf784fa15bcfa41eb97181d2f6b0"
 }

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

@@ -1,18 +1,18 @@
 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";
+import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
 export function ComposeTextWithLinks({ part, index, match, bottomTabsVisible, selectable = true, }) {
-    const { formatMessage } = useIntl();
+    const { t } = useAtlantisI18n();
     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);
+                onLongPressLink(match, bottomTabsVisible, t);
             } }, match.getAnchorText()));
     }
     return React.createElement(Text, { key: index }, part);

package/dist/src/AutoLink/utils.js

@@ -1,5 +1,4 @@
 import { Linking } from "react-native";
-import { messages } from "./messages";
 import { copyTextToClipboard } from "./clipboard";
 function hasPrefix(text, prefixes) {
     return prefixes.some(prefix => text.includes(prefix));
@@ -31,10 +30,10 @@ export function getUrl(match, immediateOpen = true) {
             return match.getAnchorHref();
     }
 }
-export function onLongPressLink(match, bottomTabsVisible, formatMessage) {
+export function onLongPressLink(match, bottomTabsVisible, t) {
     const linkUrl = getUrl(match, false);
     const toastConfig = {
-        message: formatMessage(messages[`${match.getType()}Copied`]),
+        message: t(getMessageKey(match)),
         bottomTabsVisible,
     };
     copyTextToClipboard(linkUrl, toastConfig);
@@ -43,3 +42,15 @@ export function onPressLink(match) {
     const linkUrl = getUrl(match);
     Linking.openURL(linkUrl);
 }
+function getMessageKey(match) {
+    switch (match.getType()) {
+        case "email":
+            return "AutoLink.emailCopied";
+        case "phone":
+            return "AutoLink.phoneCopied";
+        case "url":
+            return "AutoLink.urlCopied";
+        default:
+            return "copied";
+    }
+}

package/dist/src/InputDate/InputDate.js

@@ -1,11 +1,8 @@
 import React, { useMemo, useState } from "react";
 import DateTimePicker from "react-native-modal-datetime-picker";
 import { Platform } from "react-native";
-import { utcToZonedTime } from "date-fns-tz";
-import { format as formatDate } from "date-fns";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
-import { useAtlantisContext } from "../AtlantisContext";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 function formatInvalidState(error, invalid) {
     if (invalid)
@@ -32,8 +29,7 @@ export function InputDate(props) {
 }
 function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, invalid, maxDate, minDate, placeholder, value, name, onChange, accessibilityLabel, accessibilityHint, }) {
     const [showPicker, setShowPicker] = useState(false);
-    const { t, locale } = useAtlantisI18n();
-    const { timeZone, dateFormat } = useAtlantisContext();
+    const { t, locale, formatDate } = useAtlantisI18n();
     const date = useMemo(() => {
         if (typeof value === "string")
             return new Date(value);
@@ -41,11 +37,10 @@ function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, in
     }, [value]);
     const formattedDate = useMemo(() => {
         if (date) {
-            const zonedTime = utcToZonedTime(date, timeZone);
-            return formatDate(zonedTime, dateFormat);
+            return formatDate(date);
         }
         return emptyValueLabel;
-    }, [date, emptyValueLabel, timeZone, dateFormat]);
+    }, [date, emptyValueLabel]);
     const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
     const placeholderLabel = placeholder !== null && placeholder !== void 0 ? placeholder : t("date");
     return (React.createElement(React.Fragment, null,

package/dist/src/InputTime/InputTime.js

@@ -1,8 +1,6 @@
 import React, { useMemo, useState } from "react";
 import DateTimePicker from "react-native-modal-datetime-picker";
 import { View } from "react-native";
-import { utcToZonedTime } from "date-fns-tz";
-import { format as formatTime } from "date-fns";
 import { styles } from "./InputTime.style";
 import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
 import { useAtlantisContext } from "../AtlantisContext";
@@ -32,17 +30,16 @@ export function InputTime(props) {
 }
 function InternalInputTime({ clearable = "always", disabled, emptyValueLabel, invalid, placeholder, value, name, type = "scheduling", onChange, showIcon = true, }) {
     const [showPicker, setShowPicker] = useState(false);
-    const { t } = useAtlantisI18n();
+    const { t, formatTime } = useAtlantisI18n();
     const { timeZone, timeFormat } = useAtlantisContext();
     const is24Hour = timeFormat === "HH:mm";
     const dateTime = useMemo(() => (typeof value === "string" ? new Date(value) : value), [value]);
     const formattedTime = useMemo(() => {
         if (dateTime) {
-            const zonedTime = utcToZonedTime(dateTime, timeZone);
-            return formatTime(zonedTime, timeFormat);
+            return formatTime(dateTime);
         }
         return emptyValueLabel;
-    }, [dateTime, emptyValueLabel, timeZone, timeFormat]);
+    }, [dateTime, emptyValueLabel]);
     const canClearTime = formattedTime === emptyValueLabel ? "never" : clearable;
     return (React.createElement(View, { style: styles.container },
         React.createElement(InputPressable, { clearable: canClearTime, disabled: disabled, invalid: invalid, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("time"), prefix: showIcon ? { icon: "timer" } : undefined, value: formattedTime, onClear: handleClear, onPress: showDatePicker }),

package/dist/src/hooks/useAtlantisI18n/locales/en.json

@@ -1,6 +1,10 @@
 {
+    "AutoLink.emailCopied": "Email copied",
+    "AutoLink.phoneCopied": "Phone number copied",
+    "AutoLink.urlCopied": "URL copied",
     "cancel": "Cancel",
     "confirm": "Confirm",
+    "copied": "Copied",
     "date": "Date",
     "dismiss": "Dismiss",
     "done": "Done",

package/dist/src/hooks/useAtlantisI18n/locales/es.json

@@ -1,6 +1,10 @@
 {
+    "AutoLink.emailCopied": "Correo electrónico copiado",
+    "AutoLink.phoneCopied": "Número de teléfono copiado",
+    "AutoLink.urlCopied": "URL copiada",
     "cancel": "Cancelar",
     "confirm": "Confirmar",
+    "copied": "Copiado",
     "date": "Fecha",
     "dismiss": "Descartar",
     "done": "Listo",

package/dist/src/hooks/useAtlantisI18n/useAtlantisI18n.js

@@ -1,10 +1,14 @@
+import { useCallback } from "react";
 import en from "./locales/en.json";
 import es from "./locales/es.json";
+import { dateFormatter } from "./utils/dateFormatter";
 import { useAtlantisContext } from "../../AtlantisContext";
 export function useAtlantisI18n() {
-    const { locale } = useAtlantisContext();
-    const t = (messageKey, values) => formatMessage(messageKey, values, locale);
-    return { locale, t };
+    const { locale, dateFormat, timeFormat, timeZone } = useAtlantisContext();
+    const t = useCallback((messageKey, values) => formatMessage(messageKey, values, locale), [formatMessage, locale]);
+    const formatDate = useCallback((date) => dateFormatter(date, dateFormat, { locale, timeZone }), [dateFormatter, locale]);
+    const formatTime = useCallback((date) => dateFormatter(date, timeFormat, { locale, timeZone }), [dateFormatter, locale]);
+    return { locale, t, formatDate, formatTime };
 }
 function getLocalizedStrings(locale) {
     switch (locale) {

package/dist/src/hooks/useAtlantisI18n/utils/dateFormatter.js

@@ -0,0 +1,20 @@
+import { format } from "date-fns";
+import { utcToZonedTime } from "date-fns-tz";
+import { es } from "date-fns/locale";
+export function dateFormatter(date, dateTimeFormat, { locale, timeZone }) {
+    const zonedTime = utcToZonedTime(date, timeZone);
+    return format(zonedTime, dateTimeFormat, {
+        locale: getDateFnsLocale(locale),
+    });
+}
+/**
+ * Change locale string to date-fns locale object.
+ */
+function getDateFnsLocale(locale) {
+    switch (locale) {
+        case "es":
+            return es;
+        default:
+            return;
+    }
+}