@jobber/components-native 0.35.0 → 0.35.1-JOB-70282.0

package/dist/src/AtlantisContext/AtlantisContext.js

@@ -3,6 +3,7 @@ import { createContext, useContext } from "react";
 import RNLocalize from "react-native-localize";
 import { DEFAULT_CURRENCY_SYMBOL } from "../InputCurrency/constants";
 export const defaultValues = {
+    dateFormat: "%b %d, %Y",
     // The system time is "p"
     timeFormat: "p",
     timeZone: RNLocalize.getTimeZone(),

package/dist/src/InputDate/InputDate.js

@@ -0,0 +1,68 @@
+import React, { useMemo, useState } from "react";
+import DateTimePicker from "react-native-modal-datetime-picker";
+import { Platform } from "react-native";
+import { useIntl } from "react-intl";
+import { messages } from "./messages";
+import { useFormattedDate } from "../hooks/useFormattedDate";
+import { FormField } from "../FormField";
+import { InputPressable } from "../InputPressable";
+function formatInvalidState(error, invalid) {
+    if (invalid)
+        return invalid;
+    if (error && error.message) {
+        return error.message;
+    }
+    return Boolean(error);
+}
+const display = Platform.OS === "ios" ? "inline" : "default";
+/**
+ * Allow users to select a date using the device date picker.
+ */
+export function InputDate(props) {
+    if (props.name) {
+        return (React.createElement(FormField, { name: props.name, defaultValue: props.defaultValue, validations: props.validations }, ({ value, onChange, onBlur }, error) => (React.createElement(InternalInputDate, Object.assign({}, props, { value: value, onChange: (newValue) => {
+                var _a;
+                onChange(newValue);
+                onBlur();
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+            }, invalid: formatInvalidState(error, props.invalid) })))));
+    }
+    return React.createElement(InternalInputDate, Object.assign({}, props));
+}
+function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, invalid, maxDate, minDate, placeholder, value, name, onChange, accessibilityLabel, accessibilityHint, }) {
+    const [showPicker, setShowPicker] = useState(false);
+    const formatDate = useFormattedDate();
+    const { formatMessage } = useIntl();
+    const date = useMemo(() => {
+        if (typeof value === "string")
+            return new Date(value);
+        return value;
+    }, [value]);
+    const formattedDate = useMemo(() => { var _a; return (_a = (date && formatDate(date, "accountFormat"))) !== null && _a !== void 0 ? _a : emptyValueLabel; }, [date, emptyValueLabel, formatDate]);
+    const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
+    const placeholderLabel = placeholder !== null && placeholder !== void 0 ? placeholder : formatMessage(messages.datePlaceholder);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputPressable, { clearable: canClearDate, disabled: disabled, invalid: invalid, placeholder: placeholderLabel, prefix: { icon: "calendar" }, value: formattedDate, onClear: handleClear, onPress: showDatePicker, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint }),
+        React.createElement(DateTimePicker, { testID: "inputDate-datePicker", date: date || undefined, display: display, isVisible: showPicker, maximumDate: maxDate, minimumDate: minDate, mode: "date", onCancel: handleCancel, onConfirm: handleConfirm })));
+    function showDatePicker() {
+        setShowPicker(true);
+    }
+    function handleConfirm(newVal) {
+        setShowPicker(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
+    }
+    function handleCancel() {
+        setShowPicker(false);
+        // Ensure a change happens so we trigger the validation of one exists
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+    }
+    function handleClear() {
+        // Returns null only for Form controlled scenarios due to a limitation of react-hook-form that doesn't allow passing undefined to form values.
+        if (name) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        }
+    }
+}

package/dist/src/InputDate/index.js

@@ -0,0 +1 @@
+export { InputDate } from "./InputDate";

package/dist/src/InputDate/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    datePlaceholder: {
+        id: "datePlaceholder",
+        defaultMessage: "Date",
+        description: "Default input label for the InputDate component",
+    },
+});

package/dist/src/hooks/useFormattedDate/index.js

@@ -0,0 +1 @@
+export { useFormattedDate } from "./useFormattedDate";

package/dist/src/hooks/useFormattedDate/useFormattedDate.js

@@ -0,0 +1,18 @@
+import { formatInTimeZone } from "date-fns-tz";
+import { useAtlantisContext } from "../../AtlantisContext";
+import { accountFormattedDate, shortFormattedDate, } from "../../utils/format/date";
+function formatDate(date, format, accountTimeZoneName, accountDateFormat) {
+    if (format === "shorthand") {
+        return shortFormattedDate(date, accountTimeZoneName);
+    }
+    else if (format === "ISO8601") {
+        return formatInTimeZone(date, accountTimeZoneName, "yyyy-MM-dd");
+    }
+    else {
+        return accountFormattedDate(date, accountDateFormat, accountTimeZoneName);
+    }
+}
+export function useFormattedDate() {
+    const { timeZone, dateFormat } = useAtlantisContext();
+    return (date, format) => formatDate(date, format, timeZone, dateFormat);
+}

package/dist/src/index.js

@@ -19,6 +19,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputCurrency";
+export * from "./InputDate";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";

package/dist/src/utils/format/date.js

@@ -0,0 +1,46 @@
+import { isValid } from "date-fns";
+import { enUS } from "date-fns/locale";
+import { format } from "date-fns-tz";
+export function accountFormattedDate(date, accountFormat, timeZone) {
+    if (!isValid(date)) {
+        return "";
+    }
+    // must take into account the timezone before obtaining
+    // any of the day/month/year values
+    const formattedDate = format(date, "dd|MM|MMM|y", {
+        locale: enUS,
+        timeZone: timeZone,
+    });
+    const [dd, MM, MMM, y] = formattedDate.split("|");
+    if (accountFormat === "%m/%d/%Y") {
+        return `${MM}/${dd}/${y}`; // 09/30/1992
+    }
+    else if (accountFormat === "%d/%m/%Y") {
+        return `${dd}/${MM}/${y}`; // 30/09/1992
+    }
+    else if (accountFormat === "%Y-%m-%d") {
+        return `${y}-${MM}-${dd}`; // 1992-09-30
+    }
+    else {
+        return `${MMM} ${dd}, ${y}`; // Sep 30, 1992
+    }
+}
+/***
+ * Returns a date in "MMM dd" format (e.g. July 01), using the provided timezone
+ */
+export function shortFormattedDate(date, timeZone) {
+    if (!isValid(date)) {
+        return "";
+    }
+    return format(date, "MMM dd", { locale: enUS, timeZone: timeZone });
+}
+/**
+ *
+ * @param date
+ * Returns a date in true utc time with the timezone offset
+ * @returns Date
+ */
+export function convertDateToUTC(date) {
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), date.getUTCMilliseconds()) +
+        date.getTimezoneOffset() * 60 * 1000);
+}

package/dist/src/utils/format/index.js

@@ -0,0 +1 @@
+export { accountFormattedDate, shortFormattedDate, convertDateToUTC, } from "./date";