@jobber/components-native 0.31.0 → 0.32.0

package/dist/types/src/InputNumber/InputNumber.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { InputTextProps, InputTextRef } from "../InputText";
+type NumberKeyboard = "decimal-pad" | "numbers-and-punctuation";
+export interface InputNumberProps extends Omit<InputTextProps, "keyboard" | "onChangeText" | "value" | "defaultValue"> {
+    readonly value?: number;
+    readonly defaultValue?: number;
+    readonly onChange: (newValue?: number | string | undefined) => void;
+    readonly keyboard?: NumberKeyboard;
+    /**
+     * Used to locate this view in end-to-end tests
+     */
+    readonly testID?: string;
+}
+export declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<InputTextRef>>;
+export declare function shouldShowUserValue(value: string): boolean;
+export declare function useNumberTransform(controlledValue: number | undefined): {
+    inputTransform: (internalValue?: number) => string | undefined;
+    outputTransform: (value: string) => string | number;
+};
+export {};

package/dist/types/src/InputNumber/index.d.ts

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

package/dist/types/src/InputNumber/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    notANumberError: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/src/index.d.ts

@@ -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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -37,6 +37,7 @@
   "dependencies": {
     "@jobber/design": "^0.41.3",
     "@react-native-picker/picker": "^2.4.10",
+    "lodash": "^4.17.21",
     "lodash.chunk": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "lodash.identity": "^3.0.0",
@@ -72,5 +73,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "af99db94db46063487cedd6ddb3200674c9ce8e9"
+  "gitHead": "01fed020a3fe4466db91b66e0e7204b2f9f39e1d"
 }

package/src/InputNumber/InputNumber.test.tsx

@@ -0,0 +1,323 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { useIntl } from "react-intl";
+import { InputNumber } from ".";
+import { messages } from "./messages";
+
+type OS = "ios" | "android";
+let Platform: { OS: OS };
+beforeEach(() => {
+  Platform = require("react-native").Platform;
+});
+
+const platforms: OS[] = ["ios", "android"];
+it.each(platforms)("renders an InputNumber on %s", platform => {
+  Platform.OS = platform;
+  const label = "My Accessible label";
+  const { getByLabelText } = render(<InputNumber accessibilityLabel={label} />);
+  expect(getByLabelText(label)).toBeTruthy();
+});
+
+it.each(platforms)(
+  "renders an InputNumber with defaultValue on %s",
+  platform => {
+    Platform.OS = platform;
+    const value = 200;
+    const { getByDisplayValue } = render(<InputNumber value={value} />);
+    expect(getByDisplayValue(value.toString())).toBeTruthy();
+  },
+);
+
+it("Displays a validation message when the value is not a number", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { getByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+  const inputValue = "this";
+  fireEvent.changeText(getByLabelText(a11yLabel), inputValue);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(
+    getByText(formatMessage(messages.notANumberError), {
+      includeHiddenElements: true,
+    }),
+  ).toBeDefined();
+  expect(onChange).toHaveBeenCalledWith(inputValue);
+});
+
+it("When onChange is called it returns a number", async () => {
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  fireEvent.changeText(getByLabelText(a11yLabel), "100");
+  expect(onChange).toHaveBeenCalledWith(100);
+});
+
+it("doesn't change the value when the input is controlled without an onChange", async () => {
+  const a11yLabel = "InputNumberTest";
+  const initialValue = 12;
+  const changeValue = 100;
+  const { queryByText, getByLabelText, getByDisplayValue } = render(
+    <InputNumber accessibilityLabel={a11yLabel} value={initialValue} />,
+  );
+
+  fireEvent.changeText(getByLabelText(a11yLabel), changeValue.toString());
+  expect(queryByText(changeValue.toString())).toBeNull();
+  expect(getByDisplayValue(initialValue.toString())).toBeDefined();
+});
+
+it("passes validation when decimal value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+  const numInput = "13.5";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+it("passes validation when negative value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "-15";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseInt(numInput, 10));
+});
+
+it("passes validation when negative decimal value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+  const numInput = "-15.123";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+it("passes validation when explicit positive value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "+15";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseInt(numInput, 10));
+});
+
+it("passes validation when e notation value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "6e10";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+it("passes validation when e notation decimal value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "6.456e10";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+it("passes validation when e notation for representing decimal value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "6e-10";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+describe("when the value ends with period", () => {
+  const values = [".", "0.", "12.", "+1.", "-0."];
+
+  it.each(values)("doesn't convert the value %s", value => {
+    const a11yLabel = "InputNumberTest";
+    const onChange = jest.fn();
+    const { getByLabelText, getByDisplayValue } = render(
+      <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+    );
+
+    fireEvent.changeText(getByLabelText(a11yLabel), value);
+    expect(getByDisplayValue(value)).toBeDefined();
+  });
+});
+
+describe("when the value ends with scientific notation", () => {
+  const values = ["1e", "+2e", "1.2e", "-3e"];
+
+  it.each(values)("doesn't convert the value %s", value => {
+    const a11yLabel = "InputNumberTest";
+    const onChange = jest.fn();
+    const { getByLabelText, getByDisplayValue } = render(
+      <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+    );
+
+    fireEvent.changeText(getByLabelText(a11yLabel), value);
+    expect(getByDisplayValue(value)).toBeDefined();
+  });
+});
+
+describe("when the value ends with + or -", () => {
+  const values = ["+", "-"];
+
+  it.each(values)("doesn't convert the value %s", value => {
+    const a11yLabel = "InputNumberTest";
+    const onChange = jest.fn();
+    const { getByLabelText, getByDisplayValue } = render(
+      <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+    );
+
+    fireEvent.changeText(getByLabelText(a11yLabel), value);
+    expect(getByDisplayValue(value)).toBeDefined();
+  });
+});
+
+describe("when the value ends with zero decimal", () => {
+  const values = ["0.0", "+0.00000", "-3.00000", "2.100", ".0", ".00000"];
+
+  it.each(values)("doesn't convert the value %s", value => {
+    const a11yLabel = "InputNumberTest";
+    const onChange = jest.fn();
+    const { getByLabelText, getByDisplayValue } = render(
+      <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+    );
+
+    fireEvent.changeText(getByLabelText(a11yLabel), value);
+    expect(getByDisplayValue(value)).toBeDefined();
+  });
+});
+
+describe("when the OS is iOS", () => {
+  const a11yLabel = "InputNumberTest";
+  beforeEach(() => {
+    Platform.OS = "ios";
+  });
+  it("uses the decimal-pad keyboard when keyboard is 'decimal-pad'", () => {
+    const { getByLabelText } = render(
+      <InputNumber accessibilityLabel={a11yLabel} keyboard={"decimal-pad"} />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual("decimal-pad");
+  });
+
+  it("uses the default numbers-and-punctuation keyboard when missing keyboard prop", () => {
+    const { getByLabelText } = render(
+      <InputNumber accessibilityLabel={a11yLabel} />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual(
+      "numbers-and-punctuation",
+    );
+  });
+
+  it("uses the numbers-and-punctuation keyboard when keyboard is 'numbers-and-punctuation'", () => {
+    const { getByLabelText } = render(
+      <InputNumber
+        accessibilityLabel={a11yLabel}
+        keyboard={"numbers-and-punctuation"}
+      />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual(
+      "numbers-and-punctuation",
+    );
+  });
+});
+
+describe("when the OS is android", () => {
+  const a11yLabel = "InputNumberTest";
+  beforeEach(() => {
+    Platform.OS = "android";
+  });
+
+  it("uses the numeric keyboard when missing keyboard prop", () => {
+    const { getByLabelText } = render(
+      <InputNumber accessibilityLabel={a11yLabel} />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual("numeric");
+  });
+
+  it("uses the numeric keyboard when keyboard is 'decimal-pad'", () => {
+    const { getByLabelText } = render(
+      <InputNumber accessibilityLabel={a11yLabel} keyboard={"decimal-pad"} />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual("numeric");
+  });
+
+  it("uses the numeric keyboard when keyboard is 'numbers-and-punctuation'", () => {
+    const { getByLabelText } = render(
+      <InputNumber
+        accessibilityLabel={a11yLabel}
+        keyboard={"numbers-and-punctuation"}
+      />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual("numeric");
+  });
+});

package/src/InputNumber/InputNumber.tsx

@@ -0,0 +1,126 @@
+import React, { Ref, 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, InputTextProps, InputTextRef } from "../InputText";
+
+type NumberKeyboard = "decimal-pad" | "numbers-and-punctuation";
+export interface InputNumberProps
+  extends Omit<
+    InputTextProps,
+    "keyboard" | "onChangeText" | "value" | "defaultValue"
+  > {
+  readonly value?: number;
+  readonly defaultValue?: number;
+  readonly onChange: (newValue?: number | string | undefined) => void;
+  readonly keyboard?: NumberKeyboard;
+  /**
+   * Used to locate this view in end-to-end tests
+   */
+  readonly testID?: string;
+}
+
+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: InputNumberProps, ref: Ref<InputTextRef>) {
+  const getKeyboard = () => {
+    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 props.keyboard ?? "numbers-and-punctuation";
+    } else {
+      return "numeric";
+    }
+  };
+  const { formatMessage } = useIntl();
+  const handleChange = (newValue: number | string | undefined) => {
+    props.onChange?.(newValue);
+  };
+
+  const { inputTransform: convertToString, outputTransform: convertToNumber } =
+    useNumberTransform(props.value);
+  return (
+    <InputText
+      {...props}
+      keyboard={getKeyboard()}
+      transform={{
+        input: flow(convertToString, props.transform?.input || identity),
+        output: flow(convertToNumber, props.transform?.output || identity),
+      }}
+      ref={ref}
+      value={props.value?.toString()}
+      defaultValue={props.defaultValue?.toString()}
+      onChangeText={handleChange}
+      validations={{
+        pattern: {
+          value: NUMBER_VALIDATION_REGEX,
+          message: formatMessage(messages.notANumberError),
+        },
+        ...props.validations,
+      }}
+    />
+  );
+}
+
+function hasPeriodAtEnd(value: string) {
+  // matches patterns like ".", "0.", "12.", "+1.", and "-0."
+  return !!value?.match(/^[-+]?[0-9]*\.$/);
+}
+function hasScientificNotationAtEnd(value: string) {
+  // matches patterns like "1e", "+2e", "1.2e" and "-3e"
+  return !!value?.match(/^[-+]?[0-9]+(\.?[0-9]+)?e$/);
+}
+function hasPlusMinusAtEnd(value: string) {
+  // matches "+" and "-"
+  return !!value?.match(/^[-+]+$/);
+}
+
+function hasZeroDecimalAtEnd(value: string) {
+  // matches patterns like "0.0", "+0.00000", "-3.00000", "2.100", ".0", and ".00000"
+  return !!value?.match(/^[-+]?[0-9]*\.[0-9]*0+$/);
+}
+
+export function shouldShowUserValue(value: string): boolean {
+  const specialCasesFn = [
+    hasPeriodAtEnd,
+    hasScientificNotationAtEnd,
+    hasPlusMinusAtEnd,
+    hasZeroDecimalAtEnd,
+  ];
+  const isSpecial = (v: string) =>
+    specialCasesFn.reduce((acc, fn) => acc || fn(v), false);
+  return isSpecial(value);
+}
+
+export function useNumberTransform(controlledValue: number | undefined): {
+  inputTransform: (internalValue?: number) => string | undefined;
+  outputTransform: (value: string) => string | number;
+} {
+  const [typedValue, setTypedValue] = useState<string>(
+    controlledValue?.toString() || "",
+  );
+
+  const convertToNumber = (newValue: string) => {
+    setTypedValue(newValue);
+    if (newValue?.match?.(NUMBER_VALIDATION_REGEX)) {
+      return parseFloat(newValue);
+    }
+    return newValue;
+  };
+
+  const convertToString = (internalValue: number | undefined) => {
+    if (shouldShowUserValue(typedValue)) {
+      return typedValue;
+    }
+    return internalValue?.toString() || undefined;
+  };
+
+  return {
+    inputTransform: convertToString,
+    outputTransform: convertToNumber,
+  };
+}

package/src/InputNumber/index.ts

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

package/src/InputNumber/messages.ts

@@ -0,0 +1,10 @@
+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/src/index.ts

@@ -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";