@jobber/components-native 0.45.1 → 0.46.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.45.1",
+    "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": "8764198c93cfc2812f504b6f6509595ad6b3195c"
+    "gitHead": "6ff59b16b38fdf784fa15bcfa41eb97181d2f6b0"
 }

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