@jobber/components-native 0.9.0 → 0.11.0

package/src/InputFieldWrapper/hooks/useShowClear.test.ts

@@ -0,0 +1,158 @@
+import { useShowClear } from "./useShowClear";
+import { Clearable } from "..";
+
+interface UseShowClearParameters {
+  clearable: Clearable;
+  hasValue: boolean;
+  focused: boolean;
+  multiline: boolean;
+  disabled: boolean;
+  expected: boolean;
+}
+
+describe("useShowClear", () => {
+  describe.each<UseShowClearParameters>([
+    {
+      clearable: "always",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: false,
+      expected: true,
+    },
+    {
+      clearable: "always",
+      hasValue: true,
+      focused: true,
+      multiline: false,
+      disabled: false,
+      expected: true,
+    },
+    {
+      clearable: "always",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "always",
+      hasValue: false,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "while-editing",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: false,
+      expected: false,
+    },
+    {
+      clearable: "while-editing",
+      hasValue: true,
+      focused: true,
+      multiline: false,
+      disabled: false,
+      expected: true,
+    },
+    {
+      clearable: "while-editing",
+      hasValue: false,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "while-editing",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "never",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: false,
+      expected: false,
+    },
+    {
+      clearable: "never",
+      hasValue: true,
+      focused: true,
+      multiline: false,
+      disabled: false,
+      expected: false,
+    },
+    {
+      clearable: "never",
+      hasValue: false,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+    {
+      clearable: "never",
+      hasValue: true,
+      focused: false,
+      multiline: false,
+      disabled: true,
+      expected: false,
+    },
+  ])(
+    "%j",
+    ({
+      clearable,
+      hasValue,
+      focused,
+      multiline,
+      disabled,
+      expected,
+    }: UseShowClearParameters) => {
+      it(`returns ${expected}`, () => {
+        expect(
+          useShowClear({ clearable, multiline, focused, hasValue, disabled }),
+        ).toEqual(expected);
+      });
+    },
+  );
+
+  it("throws an error if multiline is true and clearable isn't never", () => {
+    expect(() => {
+      useShowClear({
+        clearable: "always",
+        multiline: true,
+        focused: true,
+        hasValue: true,
+        disabled: false,
+      });
+    }).toThrow();
+    expect(() => {
+      useShowClear({
+        clearable: "while-editing",
+        multiline: true,
+        focused: true,
+        hasValue: true,
+        disabled: false,
+      });
+    }).toThrow();
+    expect(() => {
+      useShowClear({
+        clearable: "never",
+        multiline: true,
+        focused: true,
+        hasValue: true,
+        disabled: false,
+      });
+    }).not.toThrow();
+  });
+});

package/src/InputFieldWrapper/hooks/useShowClear.ts

@@ -0,0 +1,31 @@
+import { Clearable } from "../InputFieldWrapper";
+
+interface UseShowClearParameters {
+  clearable: Clearable;
+  multiline: boolean;
+  focused: boolean;
+  hasValue: boolean;
+  disabled?: boolean;
+}
+
+export function useShowClear({
+  clearable,
+  multiline,
+  focused,
+  hasValue,
+  disabled = false,
+}: UseShowClearParameters): boolean | undefined {
+  if (multiline && clearable !== "never") {
+    throw new Error("Multiline inputs can not be clearable");
+  }
+  // Do not show if there is no value
+  if (!hasValue || clearable === "never" || disabled) {
+    return false;
+  }
+  switch (clearable) {
+    case "while-editing":
+      return focused;
+    case "always":
+      return true;
+  }
+}

package/src/InputFieldWrapper/index.ts

@@ -0,0 +1,4 @@
+export { commonInputStyles } from "./CommonInputStyles.style";
+export { InputFieldWrapper } from "./InputFieldWrapper";
+export type { InputFieldWrapperProps, Clearable } from "./InputFieldWrapper";
+export { useShowClear } from "./hooks/useShowClear";

package/src/index.ts

@@ -9,3 +9,5 @@ export * from "./ActivityIndicator";
 export * from "./Card";
 export * from "./StatusLabel";
 export * from "./AtlantisContext";
+export * from "./Button";
+export * from "./InputFieldWrapper";