@artsy/palette-mobile 13.2.17 → 13.2.19

package/dist/elements/Input/Input.d.ts

@@ -4,7 +4,7 @@ import { EventEmitter } from "events";
 import { TextInput, TextInputProps } from "react-native";
 export declare const inputEvents: EventEmitter;
 export declare const emitInputClearEvent: () => void;
-export interface InputProps extends Omit<TextInputProps, "placeholder"> {
+export interface InputProps extends Omit<TextInputProps, "placeholder" | "onChangeText"> {
     addClearListener?: boolean;
     /**
      * We are applying some optimisations to make sure the UX is smooth
@@ -22,6 +22,7 @@ export interface InputProps extends Omit<TextInputProps, "placeholder"> {
     onHintPress?: () => void;
     onSelectTap?: () => void;
     optional?: boolean;
+    onChangeText?: (text: string, unmaskedText?: string) => void;
     /**
      * The placeholder can be an array of string, specifically for android, because of a bug.
      * On ios, the longest string will always be picked, as ios can add ellipsis.
@@ -49,6 +50,16 @@ export interface InputProps extends Omit<TextInputProps, "placeholder"> {
     showLimit?: boolean;
     title?: string;
     unit?: string | undefined | null;
+    /**
+     * A mask to apply to the input value.
+     * Make sure to use mask values using only the digit 9 and non-digit characters.
+     *
+     * @example
+     * <Input mask="999-99-9999" />
+     * <Input mask="(999)-99-9999 999-99-9999" />
+     * <Input mask="999-99-9999 999-99-9999 999-99-9999" />
+     */
+    mask?: string | string[] | undefined;
 }
 export declare const HORIZONTAL_PADDING = 15;
 export declare const INPUT_BORDER_RADIUS = 4;

package/dist/elements/Input/Input.js

@@ -38,6 +38,7 @@ const react_native_1 = require("react-native");
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const helpers_1 = require("./helpers");
+const maskValue_1 = require("./maskValue");
 const svgs_1 = require("../../svgs");
 const hooks_1 = require("../../utils/hooks");
 const useMeasure_1 = require("../../utils/hooks/useMeasure");
@@ -58,11 +59,14 @@ exports.MULTILINE_INPUT_MAX_HEIGHT = 300;
 exports.LABEL_HEIGHT = 25;
 exports.LEFT_COMPONENT_WIDTH = 40;
 exports.SELECT_COMPONENT_WIDTH = 120;
-exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValue, disabled = false, enableClearButton = false, fixedRightPlaceholder, hintText = "What's this?", icon, leftComponentWidth = exports.LEFT_COMPONENT_WIDTH, selectComponentWidth = exports.SELECT_COMPONENT_WIDTH, loading = false, onBlur, onChangeText, onClear, onFocus, onSelectTap, placeholder, secureTextEntry = false, style: styleProp = {}, unit, value: propValue, selectDisplayLabel, ...props }, ref) => {
+exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValue, disabled = false, enableClearButton = false, fixedRightPlaceholder, hintText = "What's this?", icon, leftComponentWidth = exports.LEFT_COMPONENT_WIDTH, mask, selectComponentWidth = exports.SELECT_COMPONENT_WIDTH, loading = false, onBlur, onChangeText, onClear, onFocus, onSelectTap, placeholder, secureTextEntry = false, style: styleProp = {}, unit, value: propValue, selectDisplayLabel, ...props }, ref) => {
     const { color, theme, space } = (0, hooks_1.useTheme)();
     const [focused, setIsFocused] = (0, react_1.useState)(false);
     const [delayedFocused, setDelayedFocused] = (0, react_1.useState)(false);
-    const [value, setValue] = (0, react_1.useState)(propValue ?? defaultValue);
+    const [value, setValue] = (0, react_1.useState)((0, maskValue_1.maskValue)({
+        currentValue: propValue ?? defaultValue,
+        mask: mask,
+    }));
     const [showPassword, setShowPassword] = (0, react_1.useState)(!secureTextEntry);
     const [inputWidth, setInputWidth] = (0, react_1.useState)(0);
     const placeholderWidths = (0, react_1.useRef)([]);
@@ -82,9 +86,14 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         // If the prop value changes, update the local state
         // This optimisation is not needed if no propValue has been specified
         if (propValue !== undefined && propValue !== value) {
-            setValue(propValue);
+            setValue((0, maskValue_1.maskValue)({ currentValue: propValue || "", mask }));
         }
-    }, [propValue, value]);
+    }, [propValue, value, mask]);
+    (0, react_1.useEffect)(() => {
+        // If the mask value changes, update the value state to be formatted again
+        setValue((0, maskValue_1.maskValue)({ currentValue: value, mask }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mask]);
     const fontFamily = theme.fonts.sans.regular;
     (0, react_1.useEffect)(() => {
         /* to make the font work for secure text inputs,
@@ -112,9 +121,16 @@ exports.Input = (0, react_1.forwardRef)(({ addClearListener = false, defaultValu
         };
     }, [focused, delayedFocused]);
     const handleChangeText = (0, react_1.useCallback)((text) => {
-        setValue(text);
-        onChangeText?.(text);
-    }, [onChangeText]);
+        if (mask) {
+            const newText = (0, maskValue_1.maskValue)({ currentValue: text, mask: mask, previousValue: value }) || "";
+            setValue(newText);
+            onChangeText?.(newText, (0, maskValue_1.unmaskText)(text));
+        }
+        else {
+            setValue(text);
+            onChangeText?.(text);
+        }
+    }, [onChangeText, value, mask]);
     const handleClear = (0, react_1.useCallback)(() => {
         react_native_1.LayoutAnimation.configureNext({ ...react_native_1.LayoutAnimation.Presets.easeInEaseOut, duration: 200 });
         inputRef.current?.clear();

package/dist/elements/Input/maskValue.d.ts

@@ -0,0 +1,6 @@
+export declare const maskValue: ({ currentValue, mask, previousValue, }: {
+    currentValue: string | undefined;
+    mask: string | string[] | undefined;
+    previousValue?: string | undefined;
+}) => string | undefined;
+export declare const unmaskText: (mask: string) => string;

package/dist/elements/Input/maskValue.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unmaskText = exports.maskValue = void 0;
+const maskString = (value, mask) => {
+    let result = mask.replace(/9/g, "_");
+    for (const digit of value.replace(/\D/g, "")) {
+        if (result.includes("_")) {
+            result = result.replace("_", digit);
+        }
+        else {
+            result = result + digit;
+        }
+    }
+    if (result.includes("_")) {
+        result = result.slice(0, result.indexOf("_"));
+    }
+    return result;
+};
+const maskValue = ({ currentValue, mask, previousValue = "", }) => {
+    if (!currentValue || !mask || mask.length === 0) {
+        return currentValue;
+    }
+    const value = (0, exports.unmaskText)(currentValue);
+    if (previousValue && previousValue.length > currentValue.length) {
+        // user is deleting, don't mess with the format
+        return currentValue;
+    }
+    if (typeof mask === "string") {
+        return maskString(currentValue, mask);
+    }
+    else {
+        if (value.length <= (0, exports.unmaskText)(mask[0]).length) {
+            return maskString(value, mask[0]);
+        }
+        else {
+            const nearestMask = [...mask].reverse().find((m) => {
+                if (value.length >= (0, exports.unmaskText)(m).length) {
+                    return true;
+                }
+                return false;
+            }) || mask[0];
+            return maskString(value, nearestMask);
+        }
+    }
+};
+exports.maskValue = maskValue;
+// Helper method to clean the mask and remove all non-digits and spaces
+const unmaskText = (mask) => mask.replace(/\W/g, "");
+exports.unmaskText = unmaskText;

package/dist/elements/Input/maskValue.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Input/maskValue.tests.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const maskValue_1 = require("./maskValue");
+const GERMANY_PHONE_MASKS = [
+    "999 999",
+    "999 9999",
+    "999 99999",
+    "999 999999",
+    "999 9999999",
+    "999 99999999",
+    "9999 99999999",
+];
+const TUNISIA_PHONE_MASK = "99 999 999";
+const UNITED_STATES_PHONE_MASK = "999 999 9999";
+describe(maskValue_1.maskValue, () => {
+    it("leaves the value value alone if the user is deleting characters", () => {
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "017672458053",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("0176 72458053");
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "17672458053",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("176 72458053");
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "030901820",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("030 901820");
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "901820",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("901 820");
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "20335902",
+            mask: TUNISIA_PHONE_MASK,
+        })).toBe("20 335 902");
+    });
+    it("works with empty strings", () => {
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "",
+            mask: GERMANY_PHONE_MASKS,
+        })).toBe("");
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "",
+            mask: "",
+        })).toBe("");
+    });
+    it("formats a given phone number to the given country's default format", () => {
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "7825577664",
+            mask: UNITED_STATES_PHONE_MASK,
+        })).toBe("782 557 7664");
+        expect((0, maskValue_1.maskValue)({
+            currentValue: "782557766",
+            mask: UNITED_STATES_PHONE_MASK,
+        })).toBe("782 557 766");
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.2.17",
+  "version": "13.2.19",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",