@jobber/components-native 0.31.0 → 0.32.0

package/dist/src/InputNumber/InputNumber.js

@@ -0,0 +1,82 @@
+import React, { forwardRef, useState } from "react";
+import { Platform } from "react-native";
+import { useIntl } from "react-intl";
+import flow from "lodash/flow";
+import identity from "lodash/identity";
+import { messages } from "./messages";
+import { InputText } from "../InputText";
+const NUMBER_VALIDATION_REGEX = /^[-+]?(([0-9]*\.[0-9]+)|([0-9]+)|([0-9]+(\.?[0-9]+)?e[-+]?[0-9]+))$/;
+export const InputNumber = forwardRef(InputNumberInternal);
+function InputNumberInternal(props, ref) {
+    var _a, _b, _c, _d;
+    const getKeyboard = () => {
+        var _a;
+        if (Platform.OS === "ios") {
+            //since we are checking for which keyboard to use here 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";
+        }
+    };
+    const { formatMessage } = useIntl();
+    const handleChange = (newValue) => {
+        var _a;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+    };
+    const { inputTransform: convertToString, outputTransform: convertToNumber } = useNumberTransform(props.value);
+    return (React.createElement(InputText, Object.assign({}, props, { keyboard: getKeyboard(), transform: {
+            input: flow(convertToString, ((_a = props.transform) === null || _a === void 0 ? void 0 : _a.input) || identity),
+            output: flow(convertToNumber, ((_b = props.transform) === null || _b === void 0 ? void 0 : _b.output) || identity),
+        }, ref: ref, value: (_c = props.value) === null || _c === void 0 ? void 0 : _c.toString(), defaultValue: (_d = props.defaultValue) === null || _d === void 0 ? void 0 : _d.toString(), onChangeText: handleChange, validations: Object.assign({ pattern: {
+                value: NUMBER_VALIDATION_REGEX,
+                message: formatMessage(messages.notANumberError),
+            } }, props.validations) })));
+}
+function hasPeriodAtEnd(value) {
+    // matches patterns like ".", "0.", "12.", "+1.", and "-0."
+    return !!(value === null || value === void 0 ? void 0 : value.match(/^[-+]?[0-9]*\.$/));
+}
+function hasScientificNotationAtEnd(value) {
+    // matches patterns like "1e", "+2e", "1.2e" and "-3e"
+    return !!(value === null || value === void 0 ? void 0 : value.match(/^[-+]?[0-9]+(\.?[0-9]+)?e$/));
+}
+function hasPlusMinusAtEnd(value) {
+    // matches "+" and "-"
+    return !!(value === null || value === void 0 ? void 0 : value.match(/^[-+]+$/));
+}
+function hasZeroDecimalAtEnd(value) {
+    // matches patterns like "0.0", "+0.00000", "-3.00000", "2.100", ".0", and ".00000"
+    return !!(value === null || value === void 0 ? void 0 : value.match(/^[-+]?[0-9]*\.[0-9]*0+$/));
+}
+export function shouldShowUserValue(value) {
+    const specialCasesFn = [
+        hasPeriodAtEnd,
+        hasScientificNotationAtEnd,
+        hasPlusMinusAtEnd,
+        hasZeroDecimalAtEnd,
+    ];
+    const isSpecial = (v) => specialCasesFn.reduce((acc, fn) => acc || fn(v), false);
+    return isSpecial(value);
+}
+export function useNumberTransform(controlledValue) {
+    const [typedValue, setTypedValue] = useState((controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.toString()) || "");
+    const convertToNumber = (newValue) => {
+        var _a;
+        setTypedValue(newValue);
+        if ((_a = newValue === null || newValue === void 0 ? void 0 : newValue.match) === null || _a === void 0 ? void 0 : _a.call(newValue, NUMBER_VALIDATION_REGEX)) {
+            return parseFloat(newValue);
+        }
+        return newValue;
+    };
+    const convertToString = (internalValue) => {
+        if (shouldShowUserValue(typedValue)) {
+            return typedValue;
+        }
+        return (internalValue === null || internalValue === void 0 ? void 0 : internalValue.toString()) || undefined;
+    };
+    return {
+        inputTransform: convertToString,
+        outputTransform: convertToNumber,
+    };
+}

package/dist/src/InputNumber/index.js

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

package/dist/src/InputNumber/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/index.js

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