@jobber/components-native 0.34.0 → 0.35.0

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/index.js

@@ -23,6 +23,7 @@ export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
+export * from "./InputTime";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";