@jobber/components-native 0.33.1 → 0.35.0

package/dist/src/AtlantisContext/AtlantisContext.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { createContext, useContext } from "react";
 import RNLocalize from "react-native-localize";
+import { DEFAULT_CURRENCY_SYMBOL } from "../InputCurrency/constants";
 export const defaultValues = {
     // The system time is "p"
     timeFormat: "p",
@@ -10,6 +11,7 @@ export const defaultValues = {
         return;
     },
     floatSeparators: { group: ",", decimal: "." },
+    currencySymbol: DEFAULT_CURRENCY_SYMBOL,
 };
 export const AtlantisContext = createContext(defaultValues);
 export function useAtlantisContext() {

package/dist/src/InputCurrency/InputCurrency.js

@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import { useIntl } from "react-intl";
+import { Platform } from "react-native";
+import { NUMBER_VALIDATION_REGEX, checkLastChar, configureDecimal, convertToNumber, isValidNumber, limitInputWholeDigits, parseGivenInput, } from "./utils";
+import { messages } from "./messages";
+import { useAtlantisContext } from "../AtlantisContext";
+import { InputText } from "../InputText";
+import { useFormController } from "../hooks/useFormController";
+export const getInternalValue = (props, field, formatNumber) => {
+    var _a, _b;
+    if (!props.value && !field.value)
+        return "";
+    return ((_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : formatNumber(field.value, {
+        maximumFractionDigits: props.maxDecimalPlaces,
+    }));
+};
+const getKeyboard = (props) => {
+    var _a;
+    if (Platform.OS === "ios") {
+        //since we are checking for which keyboard to use here, just implement default keyboard here instead of in params
+        return (_a = props.keyboard) !== null && _a !== void 0 ? _a : "numbers-and-punctuation";
+    }
+    else {
+        return "numeric";
+    }
+};
+export function InputCurrency(props) {
+    var _a, _b;
+    const { showCurrencySymbol = true, maxDecimalPlaces = 5, decimalPlaces = 2, maxLength = 10, } = props;
+    const intl = useIntl();
+    const { floatSeparators, currencySymbol } = useAtlantisContext();
+    const { field } = useFormController({
+        name: props.name,
+        value: props.value,
+    });
+    const internalValue = getInternalValue(props, field, intl.formatNumber);
+    const [displayValue, setDisplayValue] = useState(internalValue);
+    const setOnChangeAndDisplayValues = (onChangeValue, valueToDisplay) => {
+        var _a;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, onChangeValue);
+        setDisplayValue(valueToDisplay);
+    };
+    const checkDecimalAndI18nOfDisplayValue = (numberedValue, decimalNumbers, decimalCount) => {
+        const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
+        const stringValue = decimalNumbers !== ""
+            ? transformedValue.toString() + "." + decimalNumbers.slice(1)
+            : transformedValue.toString();
+        if (checkLastChar(stringValue)) {
+            const roundedDecimal = configureDecimal(decimalCount, maxDecimalPlaces, stringValue, decimalPlaces);
+            const internationalizedValueToDisplay = intl.formatNumber(roundedDecimal, {
+                maximumFractionDigits: maxDecimalPlaces,
+            });
+            setOnChangeAndDisplayValues(roundedDecimal, internationalizedValueToDisplay);
+        }
+        else {
+            const internationalizedValueToDisplay = intl.formatNumber(transformedValue, {
+                maximumFractionDigits: maxDecimalPlaces,
+            }) + decimalNumbers;
+            setOnChangeAndDisplayValues(transformedValue.toString() + "." + decimalNumbers.slice(1), internationalizedValueToDisplay);
+        }
+    };
+    const handleChange = (newValue) => {
+        const [decimalCount, wholeIntegerValue, decimalNumbers] = parseGivenInput(newValue, floatSeparators.decimal);
+        const numberedValue = wholeIntegerValue
+            ? convertToNumber(wholeIntegerValue)
+            : wholeIntegerValue;
+        if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
+            checkDecimalAndI18nOfDisplayValue(numberedValue, decimalNumbers, decimalCount);
+        }
+        else {
+            const value = (numberedValue === null || numberedValue === void 0 ? void 0 : numberedValue.toString()) + decimalNumbers;
+            setOnChangeAndDisplayValues(value, value);
+        }
+    };
+    const { formatMessage } = useIntl();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputText, Object.assign({}, props, { prefix: showCurrencySymbol ? { label: currencySymbol } : undefined, keyboard: getKeyboard(props), value: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.toString()) || displayValue, defaultValue: (_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.toString(), onChangeText: handleChange, transform: {
+                output: val => {
+                    return val === null || val === void 0 ? void 0 : val.split(floatSeparators.group).join("").replace(floatSeparators.decimal, ".");
+                },
+            }, validations: Object.assign({ pattern: {
+                    value: NUMBER_VALIDATION_REGEX,
+                    message: formatMessage(messages.notANumberError),
+                } }, props.validations), onBlur: () => {
+                var _a;
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+                if (field.value === 0 ||
+                    field.value === "" ||
+                    field.value === undefined) {
+                    setDisplayValue("0");
+                }
+            } }))));
+}

package/dist/src/InputCurrency/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_CURRENCY_SYMBOL = "$";

package/dist/src/InputCurrency/index.js

@@ -0,0 +1,3 @@
+export { InputCurrency } from "./InputCurrency";
+export * from "./utils";
+export * from "./constants";

package/dist/src/InputCurrency/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    notANumberError: {
+        id: "notANumberError",
+        defaultMessage: "Enter a number",
+        description: "Error message shown when a non-numeric value is typed in number input",
+    },
+});

package/dist/src/InputCurrency/utils.js

@@ -0,0 +1,58 @@
+export function countDecimal(value) {
+    const convertedValue = value.toString();
+    if (convertedValue.includes(".")) {
+        return convertedValue.split(".")[1].length;
+    }
+    return 0;
+}
+export function limitInputWholeDigits(value, maxInputLength) {
+    let convertedValue = value.toString();
+    if (convertedValue.length > maxInputLength) {
+        convertedValue = convertedValue.slice(0, maxInputLength);
+        return parseFloat(convertedValue);
+    }
+    return value;
+}
+export function configureDecimal(decimalCount, maxDecimalPlaces, transformedValue, decimalPlaces) {
+    const targetDecimalPlaces = Math.min(Math.max(decimalCount, decimalPlaces), maxDecimalPlaces);
+    const precision = Math.pow(10, targetDecimalPlaces);
+    const convertedValue = Math.round(parseFloat(transformedValue) * precision) / precision;
+    return convertedValue;
+}
+export function convertToNumber(value) {
+    var _a;
+    const regexValidation = /^[0-9]*$/;
+    if ((_a = value === null || value === void 0 ? void 0 : value.match) === null || _a === void 0 ? void 0 : _a.call(value, regexValidation)) {
+        return parseFloat(value);
+    }
+    return value;
+}
+export const checkLastChar = (stringValue) => {
+    const lastChar = stringValue[stringValue.length - 1];
+    return Boolean(Number(stringValue)) && lastChar !== "0" && lastChar !== ".";
+};
+export const isValidNumber = (numberedValue) => {
+    return (typeof numberedValue === "number" &&
+        !isNaN(numberedValue) &&
+        numberedValue !== 0);
+};
+export const getDecimalNumbers = (value, decimalSeparator) => {
+    const decimalValue = value.split(".")[1];
+    if (!decimalValue) {
+        return decimalSeparator;
+    }
+    return `${decimalSeparator}${decimalValue}`;
+};
+export const parseGivenInput = (value, decimalSeparator) => {
+    let decimalCount = 0;
+    let decimalNumbers = "";
+    let wholeIntegerValue = value;
+    if (value === null || value === void 0 ? void 0 : value.includes(".")) {
+        const splittedValue = value === null || value === void 0 ? void 0 : value.split(".");
+        decimalCount = splittedValue[1].length;
+        wholeIntegerValue = splittedValue[0];
+        decimalNumbers = getDecimalNumbers(value, decimalSeparator);
+    }
+    return [decimalCount, wholeIntegerValue, decimalNumbers];
+};
+export const NUMBER_VALIDATION_REGEX = /^[-+]?(([0-9]*\.[0-9]+)|([0-9]+)|([0-9]+(\.?[0-9]+)?e[-+]?[0-9]+))$/;

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

@@ -18,10 +18,12 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputCurrency";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
+export * from "./InputTime";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";