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

@@ -1,6 +1,6 @@
 import React, { Children } from "react";
 import { View } from "react-native";
-import chunk from "lodash.chunk";
+import chunk from "lodash/chunk";
 import { columnStyles, gapStyles, styles } from "./Flex.styles";
 import { Content } from "../Content";
 export function Flex({ template = [], align = "center", gap = "base", children, }) {

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef, useEffect } from "react";
 import { View } from "react-native";
-import debounce from "lodash.debounce";
+import debounce from "lodash/debounce";
 import { styles } from "./InputSearch.style";
 import { InputText } from "../InputText";
 export const InputSearch = forwardRef(SearchInputInternal);

package/dist/src/InputText/InputText.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { Platform, TextInput, } from "react-native";
-import identity from "lodash.identity";
+import identity from "lodash/identity";
 import { styles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";

package/dist/src/index.js

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