@jobber/components-native 0.27.0 → 0.28.0

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { InputTextProps, InputTextRef } from "../InputText";
+export declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProps & React.RefAttributes<InputTextRef>>;
+export interface InputSearchProps extends Pick<InputTextProps, "accessibilityHint" | "accessibilityLabel" | "autoFocus" | "placeholder" | "prefix"> {
+    /**
+     * A callback function that handles the update of the new value of the property value.
+     */
+    readonly onChange: (newValue: string) => void;
+    /**
+     * A callback function that handles the API call to search the value. This is where the
+     * wait value is applied to the debounce function to give a delay in each input and API request.
+     */
+    readonly onDebouncedChange: (searchValue: string) => void;
+    /**
+     * Set the component to a given value
+     */
+    readonly value: string;
+    /**
+     * A numeric value to represents the milliseconds in delaying the function to populate
+     * the data source when the 'value' changed.
+     * @default 300
+     */
+    readonly wait?: number;
+}

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

@@ -0,0 +1,6 @@
+export declare const styles: {
+    container: {
+        width: string;
+        paddingHorizontal: number;
+    };
+};

package/dist/types/src/InputSearch/components/FilterButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface FilterButtonProps {
+    readonly accessibilityLabel: string;
+    readonly onClick: () => void;
+}
+export declare function FilterButton({ accessibilityLabel, onClick, }: FilterButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+export { InputSearch } from "./InputSearch";
+export type { InputSearchProps } from "./InputSearch";
+export { FilterButton } from "./components/FilterButton";

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

@@ -17,6 +17,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputPressable";
+export * from "./InputSearch";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@jobber/design": "^0.41.3",
     "lodash.chunk": "^4.2.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.identity": "^3.0.0",
     "react-hook-form": "^7.30.0",
     "react-intl": "^6.4.2",
@@ -42,6 +43,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/react-native": "^12.0.1",
     "@types/lodash.chunk": "^4.2.7",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.identity": "^3.0.7",
     "@types/react": "^18.0.28",
     "@types/react-native": "^0.71.6",
@@ -55,5 +57,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "4cac408646d885509b88823f5186df1a9534b641"
+  "gitHead": "dcb391abbe27fca411efd97be1c7128cde9d749f"
 }

package/src/InputSearch/InputSearch.style.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    paddingHorizontal: tokens["space-base"],
+  },
+});

package/src/InputSearch/InputSearch.test.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+} from "@testing-library/react-native";
+import { useIntl } from "react-intl";
+import { InputSearch } from "./InputSearch";
+import { messages as clearMessages } from "../InputFieldWrapper/components/ClearAction";
+
+const accessibilityLabelSearch = "Search";
+const accessibilityHint = "Search clients, properties, quotes, etc.";
+const mockOnChange = jest.fn();
+const mockOnDebouncedChange = jest.fn();
+let searchValue: string;
+
+beforeEach(() => {
+  mockOnChange.mockReset();
+  mockOnDebouncedChange.mockReset();
+  searchValue = "";
+});
+afterEach(cleanup);
+
+function setup() {
+  return render(
+    <InputSearch
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabelSearch}
+      placeholder={accessibilityHint}
+      value={searchValue}
+      onChange={mockOnChange}
+      onDebouncedChange={mockOnDebouncedChange}
+    />,
+  );
+}
+
+describe("InputSearch", () => {
+  it("renders the search input text", () => {
+    const { getByHintText, getByLabelText } = setup();
+
+    expect(getByLabelText(accessibilityLabelSearch)).toBeDefined();
+    expect(getByHintText(accessibilityHint)).toBeDefined();
+  });
+
+  it("passes the correct search value to onChange when the value changed", () => {
+    const { getByLabelText } = setup();
+    const inputSearch = getByLabelText(accessibilityLabelSearch);
+
+    fireEvent.changeText(inputSearch, "Apollo Client");
+    expect(mockOnChange).toHaveBeenCalledWith("Apollo Client");
+  });
+
+  it("passes the correcet search value to onDebouncedChange when the value changed", async () => {
+    const { getByLabelText } = setup();
+    const inputSearch = getByLabelText(accessibilityLabelSearch);
+
+    await waitFor(() => {
+      fireEvent.changeText(inputSearch, "Update Apollo Client");
+      expect(mockOnDebouncedChange).toHaveBeenCalled();
+    });
+  });
+
+  it("clears the search value when the clear button is pressed", () => {
+    searchValue = "test search value";
+    const { formatMessage } = useIntl();
+    const { getByLabelText } = setup();
+
+    fireEvent(getByLabelText(accessibilityLabelSearch), "focus");
+
+    const inputSearchClearButton = getByLabelText(
+      formatMessage(clearMessages.clearTextLabel),
+    );
+    fireEvent.press(inputSearchClearButton);
+    expect(mockOnChange).toHaveBeenCalledWith("");
+  });
+});

package/src/InputSearch/InputSearch.tsx

@@ -0,0 +1,71 @@
+import React, { Ref, forwardRef, useEffect } from "react";
+import { View } from "react-native";
+import debounce from "lodash.debounce";
+import { styles } from "./InputSearch.style";
+import { InputText, InputTextProps, InputTextRef } from "../InputText";
+
+export const InputSearch = forwardRef(SearchInputInternal);
+
+export interface InputSearchProps
+  extends Pick<
+    InputTextProps,
+    | "accessibilityHint"
+    | "accessibilityLabel"
+    | "autoFocus"
+    | "placeholder"
+    | "prefix"
+  > {
+  /**
+   * A callback function that handles the update of the new value of the property value.
+   */
+  readonly onChange: (newValue: string) => void;
+
+  /**
+   * A callback function that handles the API call to search the value. This is where the
+   * wait value is applied to the debounce function to give a delay in each input and API request.
+   */
+  readonly onDebouncedChange: (searchValue: string) => void;
+
+  /**
+   * Set the component to a given value
+   */
+  readonly value: string;
+
+  /**
+   * A numeric value to represents the milliseconds in delaying the function to populate
+   * the data source when the 'value' changed.
+   * @default 300
+   */
+  readonly wait?: number;
+}
+
+function SearchInputInternal(
+  {
+    onChange,
+    onDebouncedChange,
+    wait = 300,
+    value,
+    ...inputTextProps
+  }: InputSearchProps,
+  ref: Ref<InputTextRef>,
+) {
+  const delayedSearch = debounce(onDebouncedChange, wait);
+  const handleChange = (newValue = "") => onChange(newValue);
+
+  useEffect(() => {
+    delayedSearch(value);
+    return delayedSearch.cancel;
+  }, [value, delayedSearch]);
+
+  return (
+    <View style={styles.container}>
+      <InputText
+        {...inputTextProps}
+        autoCorrect={false}
+        onChangeText={handleChange}
+        ref={ref}
+        value={value}
+      />
+    </View>
+  );
+}

package/src/InputSearch/components/FilterButton.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Keyboard } from "react-native";
+import { IconButton } from "../../IconButton";
+
+interface FilterButtonProps {
+  readonly accessibilityLabel: string;
+  readonly onClick: () => void;
+}
+
+export function FilterButton({
+  accessibilityLabel,
+  onClick,
+}: FilterButtonProps): JSX.Element {
+  return (
+    <IconButton
+      onPress={() => {
+        onClick();
+        Keyboard.dismiss();
+      }}
+      name="filter"
+      accessibilityLabel={accessibilityLabel}
+    />
+  );
+}

package/src/InputSearch/index.ts

@@ -0,0 +1,3 @@
+export { InputSearch } from "./InputSearch";
+export type { InputSearchProps } from "./InputSearch";
+export { FilterButton } from "./components/FilterButton";

package/src/index.ts

@@ -17,6 +17,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputPressable";
+export * from "./InputSearch";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";