@jobber/components-native 0.34.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/InputTime/InputTime.js

@@ -0,0 +1,83 @@
+import React, { useMemo, useState } from "react";
+import DateTimePicker from "react-native-modal-datetime-picker";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { utcToZonedTime } from "date-fns-tz";
+import { format as formatTime } from "date-fns";
+import { styles } from "./InputTime.style";
+import { messages } from "./messages";
+import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
+import { useAtlantisContext } from "../AtlantisContext";
+import { InputPressable } from "../InputPressable";
+import { FormField } from "../FormField";
+const LOCALE_24_HOURS = "en_GB";
+const LOCALE_12_HOURS = "en_US";
+function formatInvalidState(error, invalid) {
+    if (invalid)
+        return invalid;
+    if (error && error.message) {
+        return error.message;
+    }
+    return Boolean(error);
+}
+export function InputTime(props) {
+    if (props.name) {
+        return (React.createElement(FormField, { name: props.name, validations: props.validations }, (field, error) => (React.createElement(InternalInputTime, Object.assign({}, props, { value: field.value, onChange: (newValue) => {
+                var _a;
+                field.onChange(newValue);
+                field.onBlur();
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+            }, invalid: formatInvalidState(error, props.invalid) })))));
+    }
+    return React.createElement(InternalInputTime, Object.assign({}, props));
+}
+function InternalInputTime({ clearable = "always", disabled, emptyValueLabel, invalid, placeholder, value, name, type = "scheduling", onChange, showIcon = true, }) {
+    const [showPicker, setShowPicker] = useState(false);
+    const { formatMessage } = useIntl();
+    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 emptyValueLabel;
+    }, [dateTime, emptyValueLabel, timeZone, timeFormat]);
+    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 : formatMessage(messages.time), prefix: showIcon ? { icon: "timer" } : undefined, value: formattedTime, onClear: handleClear, onPress: showDatePicker }),
+        React.createElement(DateTimePicker, { testID: "inputTime-Picker", minuteInterval: getMinuteInterval(type), date: getInitialPickerDate(dateTime), timeZoneOffsetInMinutes: getTimeZoneOffsetInMinutes(timeZone, dateTime), isVisible: showPicker, mode: "time", onCancel: handleCancel, onConfirm: handleConfirm, is24Hour: is24Hour, locale: is24Hour ? LOCALE_24_HOURS : LOCALE_12_HOURS })));
+    function showDatePicker() {
+        setShowPicker(true);
+    }
+    function handleConfirm(newValue) {
+        setShowPicker(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }
+    function handleCancel() {
+        setShowPicker(false);
+        // Call onChange with the current value to trigger form's validation.
+        onChange === null || onChange === void 0 ? void 0 : onChange(dateTime);
+    }
+    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);
+        }
+    }
+}
+function getInitialPickerDate(date) {
+    if (date)
+        return date;
+    return roundUpToNearestMinutes(new Date(), 30);
+}
+function getMinuteInterval(type) {
+    if (type === "granular")
+        return 1;
+    return 5;
+}

package/dist/src/InputTime/InputTime.style.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        justifyContent: "center",
+    },
+});

package/dist/src/InputTime/index.js

@@ -0,0 +1,2 @@
+export { InputTime } from "./InputTime";
+export { roundUpToNearestMinutes } from "./utils";

package/dist/src/InputTime/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    time: {
+        id: "timeLabel",
+        defaultMessage: "Time",
+        description: "Label for DateTimePicker with time variant",
+    },
+});

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

@@ -0,0 +1,16 @@
+import { getTimezoneOffset } from "date-fns-tz";
+/**
+ * Rounds up the time by increment.
+ * - 15 mins - rounds to the next quarter time of `00:15`, `00:30`, `00:45`,
+ *   and `01:00`
+ * - 30 mins - rounds to the next half hour be it `00:30` or `01:00`
+ * - 60 mins - rounds to the next hour. I.e., `02:01` gets rounded up
+ *   to `03:00`.
+ */
+export function roundUpToNearestMinutes(date, minutes) {
+    const ms = 1000 * 60 * minutes;
+    return new Date(Math.ceil(date.getTime() / ms) * ms);
+}
+export function getTimeZoneOffsetInMinutes(timeZone, date) {
+    return getTimezoneOffset(timeZone, date) / 1000 / 60;
+}

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,10 +19,12 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputCurrency";
+export * from "./InputDate";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
+export * from "./InputTime";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";

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";