@jobber/components-native 0.19.0 → 0.20.0

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

@@ -0,0 +1,71 @@
+import React, { Ref } from "react";
+import { IconNames } from "@jobber/design";
+import { FieldError } from "react-hook-form";
+import { Text as NativeText } from "react-native";
+import { Clearable } from "../InputFieldWrapper";
+interface InputPressableProps {
+    /**
+     * Current value of the component
+     */
+    readonly value?: string;
+    /**
+     * Placeholder item shown until a selection is made
+     */
+    readonly placeholder?: string;
+    /**
+     * Disables input selection
+     */
+    readonly disabled?: boolean;
+    /**
+     * Indicates if there is an validation error
+     */
+    readonly error?: FieldError;
+    /**
+     * Indicates the current selection is invalid
+     */
+    readonly invalid?: boolean | string;
+    /**
+     * Callback that is called when the text input is focused
+     * @param event
+     */
+    readonly onPress?: () => void;
+    /**
+     * VoiceOver will read this string when a user selects the element
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Helps users understand what will happen when they perform an action
+     */
+    readonly accessibilityHint?: string;
+    /**
+     * Symbol to display before the text input
+     */
+    readonly prefix?: {
+        icon?: IconNames;
+        label?: string;
+    };
+    /**
+     * Symbol to display after the text input
+     */
+    readonly suffix?: {
+        icon?: IconNames;
+        label?: string;
+    };
+    /**
+     * Add a clear action on the input that clears the value.
+     *
+     * Since the input value isn't editable (i.e. `InputDateTime`) you can
+     * set it to `always`. If you set it to `always` you must also provide an
+     * onClear to clear the input's value
+     */
+    readonly clearable?: Clearable;
+    /**
+     * Callback called when the user clicks the ClearAction button. Should clear
+     * the value passed. To disallow clearing set the clearable prop to never
+     */
+    readonly onClear?: () => void;
+}
+export type InputPressableRef = NativeText;
+export declare const InputPressable: React.ForwardRefExoticComponent<InputPressableProps & React.RefAttributes<NativeText>>;
+export declare function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable, onClear, }: InputPressableProps, ref: Ref<InputPressableRef>): JSX.Element;
+export {};

package/dist/types/src/InputPressable/InputPressable.style.d.ts

@@ -0,0 +1,18 @@
+export declare const styles: {
+    pressable: {
+        flex: number;
+    };
+    inputPressableStyles: {
+        paddingTop: number;
+        lineHeight: number | undefined;
+    };
+    inputEmpty: {
+        paddingTop: number;
+    };
+    inputDisabled: {
+        color: import("react-native").ColorValue | undefined;
+    };
+    inputInvalid: {
+        borderColor: string;
+    };
+};

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

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

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

@@ -13,6 +13,7 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputPressable";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
 export * from "./Text";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -49,5 +49,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "e112ab079fb049e3ef003bb4c27ccae64cd75991"
+  "gitHead": "d9b821d3c4b8557d631813a0199c3d0946d192b9"
 }

package/src/InputPressable/InputPressable.style.ts

@@ -0,0 +1,29 @@
+import { JobberStyle } from "@jobber/design/foundation";
+import { StyleSheet } from "react-native";
+import { typographyStyles } from "../Typography/Typography.style";
+
+const miniLabelFontSize = typographyStyles.smallSize.fontSize || 0;
+const miniLabelPadding = JobberStyle["space-small"];
+
+export const styles = StyleSheet.create({
+  pressable: {
+    flex: 1,
+  },
+
+  inputPressableStyles: {
+    paddingTop: miniLabelPadding + miniLabelFontSize,
+    lineHeight: typographyStyles.defaultSize.lineHeight,
+  },
+
+  inputEmpty: {
+    paddingTop: 0,
+  },
+
+  inputDisabled: {
+    color: typographyStyles.disabled.color,
+  },
+
+  inputInvalid: {
+    borderColor: JobberStyle["color-critical"],
+  },
+});

package/src/InputPressable/InputPressable.test.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { InputPressable } from ".";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
+
+const MockInputFieldWrapper = jest.fn();
+jest.mock("../InputFieldWrapper", () => ({
+  ...jest.requireActual("../InputFieldWrapper"),
+  InputFieldWrapper: function Mock(props: InputFieldWrapperProps) {
+    MockInputFieldWrapper(props);
+    return jest.requireActual("../InputFieldWrapper").InputFieldWrapper(props);
+  },
+}));
+
+describe("InputPressable", () => {
+  describe("InputFieldWrapper gets the expected props", () => {
+    it("renders an invalid InputPressable", () => {
+      const props = { invalid: true };
+      render(<InputPressable {...props} />);
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining(props),
+      );
+    });
+
+    it("renders an invalid InputPressable with text", () => {
+      const props = { invalid: "this test is invalid" };
+      render(<InputPressable {...props} />);
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining(props),
+      );
+    });
+
+    it("renders a valid InputText with empty string", () => {
+      const props = { invalid: "" };
+      render(<InputPressable {...props} />);
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining(props),
+      );
+    });
+    it("renders a disabled InputPressable", () => {
+      const props = { disabled: true };
+      render(<InputPressable {...props} />);
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining(props),
+      );
+    });
+
+    it("renders an InputPressable with a placeholder", () => {
+      const props = { placeholder: "test placeholder" };
+      render(<InputPressable {...props} />);
+      expect(MockInputFieldWrapper).toHaveBeenCalledWith(
+        expect.objectContaining(props),
+      );
+    });
+  });
+
+  it("renders an InputPressable with a value", () => {
+    const value = "test value";
+    const { getByText } = render(<InputPressable value={value} />);
+    expect(getByText(value, { includeHiddenElements: true })).toBeTruthy();
+  });
+
+  it("renders a prefix label when specified", () => {
+    const label = "test label";
+    const { getByText } = render(
+      <InputPressable prefix={{ label }} value="hey" />,
+    );
+    expect(getByText(label)).toBeDefined();
+  });
+
+  it("renders a prefix icon when specified", () => {
+    const { getByTestId } = render(
+      <InputPressable prefix={{ icon: "calendar" }} />,
+    );
+    expect(getByTestId("calendar")).toBeDefined();
+  });
+
+  it("renders a suffix icon when specified", () => {
+    const { getByTestId } = render(
+      <InputPressable suffix={{ icon: "calendar" }} />,
+    );
+    expect(getByTestId("calendar")).toBeDefined();
+  });
+
+  it("calls onPress when pressed", () => {
+    const onPressMock = jest.fn();
+    const a11yLabel = "test InputPressable";
+    const { getByLabelText } = render(
+      <InputPressable
+        onPress={onPressMock}
+        value="test value"
+        accessibilityLabel={a11yLabel}
+      />,
+    );
+
+    fireEvent.press(getByLabelText(a11yLabel));
+    expect(onPressMock).toHaveBeenCalledTimes(1);
+  });
+
+  describe("when given a value", () => {
+    const value = "A value";
+
+    it("renders an InputPressable with the value", () => {
+      const { getByText } = render(<InputPressable value={value} />);
+      expect(getByText(value, { includeHiddenElements: true })).toBeDefined();
+    });
+
+    it("renders a prefix label when specified", () => {
+      const { getByText } = render(
+        <InputPressable prefix={{ label: "test" }} value={value} />,
+      );
+      expect(getByText(value, { includeHiddenElements: true })).toBeDefined();
+    });
+
+    it("renders a suffix label when specified", () => {
+      const { getByText } = render(
+        <InputPressable suffix={{ label: "test" }} value={value} />,
+      );
+      expect(getByText(value, { includeHiddenElements: true })).toBeDefined();
+    });
+  });
+});
+
+describe("accessibilityLabel", () => {
+  it("uses accessibilityLabel if specified", () => {
+    const { getByLabelText } = render(
+      <InputPressable
+        value="test value"
+        placeholder="placeholder"
+        accessibilityLabel="accessibilityLabel"
+      />,
+    );
+
+    expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+  });
+
+  it("uses placeholder if unspecified", () => {
+    const { getByLabelText } = render(
+      <InputPressable value="test value" placeholder="placeholder" />,
+    );
+
+    expect(getByLabelText("placeholder")).toBeTruthy();
+  });
+});

package/src/InputPressable/InputPressable.tsx

@@ -0,0 +1,161 @@
+import React, { Ref, forwardRef, useEffect, useState } from "react";
+import { IconNames } from "@jobber/design";
+import { FieldError } from "react-hook-form";
+import { Text as NativeText, Pressable } from "react-native";
+import { styles } from "./InputPressable.style";
+import {
+  Clearable,
+  InputFieldWrapper,
+  commonInputStyles,
+  useShowClear,
+} from "../InputFieldWrapper";
+
+interface InputPressableProps {
+  /**
+   * Current value of the component
+   */
+  readonly value?: string;
+
+  /**
+   * Placeholder item shown until a selection is made
+   */
+  readonly placeholder?: string;
+
+  /**
+   * Disables input selection
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Indicates if there is an validation error
+   */
+  readonly error?: FieldError;
+
+  /**
+   * Indicates the current selection is invalid
+   */
+  readonly invalid?: boolean | string;
+
+  /**
+   * Callback that is called when the text input is focused
+   * @param event
+   */
+  readonly onPress?: () => void;
+
+  /**
+   * VoiceOver will read this string when a user selects the element
+   */
+  readonly accessibilityLabel?: string;
+
+  /**
+   * Helps users understand what will happen when they perform an action
+   */
+  readonly accessibilityHint?: string;
+
+  /**
+   * Symbol to display before the text input
+   */
+  readonly prefix?: {
+    icon?: IconNames;
+    label?: string;
+  };
+
+  /**
+   * Symbol to display after the text input
+   */
+  readonly suffix?: {
+    icon?: IconNames;
+    label?: string;
+  };
+  /**
+   * Add a clear action on the input that clears the value.
+   *
+   * Since the input value isn't editable (i.e. `InputDateTime`) you can
+   * set it to `always`. If you set it to `always` you must also provide an
+   * onClear to clear the input's value
+   */
+  readonly clearable?: Clearable;
+  /**
+   * Callback called when the user clicks the ClearAction button. Should clear
+   * the value passed. To disallow clearing set the clearable prop to never
+   */
+  readonly onClear?: () => void;
+}
+
+export type InputPressableRef = NativeText;
+export const InputPressable = forwardRef(InputPressableInternal);
+
+export function InputPressableInternal(
+  {
+    value,
+    placeholder,
+    disabled,
+    invalid,
+    error,
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    prefix,
+    suffix,
+    clearable = "never",
+    onClear,
+  }: InputPressableProps,
+  ref: Ref<InputPressableRef>,
+): JSX.Element {
+  const hasValue = !!value;
+  const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(value));
+
+  useEffect(() => {
+    setHasMiniLabel(Boolean(value));
+  }, [value]);
+
+  const showClear = useShowClear({
+    clearable,
+    multiline: false,
+    focused: false,
+    hasValue,
+    disabled,
+  });
+
+  return (
+    <InputFieldWrapper
+      prefix={prefix}
+      suffix={suffix}
+      hasValue={hasValue}
+      hasMiniLabel={hasMiniLabel}
+      focused={false}
+      error={error}
+      invalid={invalid}
+      placeholder={placeholder}
+      disabled={disabled}
+      showClearAction={showClear}
+      onClear={onClear}
+    >
+      <Pressable
+        style={styles.pressable}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel || placeholder}
+        accessibilityHint={accessibilityHint}
+        accessibilityValue={{ text: value }}
+      >
+        <NativeText
+          style={[
+            commonInputStyles.input,
+            styles.inputPressableStyles,
+            !hasMiniLabel && commonInputStyles.inputEmpty,
+            disabled && commonInputStyles.inputDisabled,
+            (Boolean(invalid) || error) && styles.inputInvalid,
+          ]}
+          testID="inputPressableText"
+          ref={ref}
+          accessibilityRole="none"
+          accessible={false}
+          importantForAccessibility="no-hide-descendants"
+        >
+          {value}
+        </NativeText>
+      </Pressable>
+    </InputFieldWrapper>
+  );
+}

package/src/InputPressable/index.ts

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

package/src/index.ts

@@ -13,6 +13,7 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputPressable";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
 export * from "./Text";