@jobber/components-native 0.49.2 → 0.50.0

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
-import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { Clearable } from "@jobber/hooks";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
 interface BaseInputDateProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
     /**
      * Defaulted to "always" so user can clear the dates whenever there's a value.

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

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

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

@@ -2,7 +2,7 @@ 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";
+import { Clearable } from "@jobber/hooks";
 export interface InputPressableProps {
     /**
      * Current value of the component

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

@@ -2,8 +2,8 @@ import React, { SyntheticEvent } from "react";
 import { NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, TextInputProps, TextStyle } from "react-native";
 import { RegisterOptions } from "react-hook-form";
 import { IconNames } from "@jobber/design";
+import { Clearable } from "@jobber/hooks";
 import { InputFieldStyleOverride } from "../InputFieldWrapper/InputFieldWrapper";
-import { Clearable } from "../InputFieldWrapper";
 export interface InputTextProps {
     /**
      * Highlights the field red and shows message below (if string) to indicate an error

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
-import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { Clearable } from "@jobber/hooks";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
 interface InputTimeBaseProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
     /**
      * Defaulted to "always" so user can clear the time whenever there's a value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.49.2",
+  "version": "0.50.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@jobber/design": "^0.51.0",
-    "@jobber/hooks": "^2.7.3",
+    "@jobber/hooks": "^2.8.0",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-picker/picker": "^2.4.10",
     "autolinker": "^4.0.0",
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "5bf46b3890aeddd4a75751f82ad9c48bf4774f96"
+  "gitHead": "300688dd8bf005f2d0f6fb06a0f913f0a208a937"
 }

package/src/InputDate/InputDate.tsx

@@ -3,7 +3,8 @@ import DateTimePicker from "react-native-modal-datetime-picker";
 import { Platform } from "react-native";
 import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
-import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { Clearable } from "@jobber/hooks";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { FormField } from "../FormField";
 import { InputPressable } from "../InputPressable";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
@@ -154,6 +155,7 @@ function InternalInputDate({
 
   const date = useMemo(() => {
     if (typeof value === "string") return new Date(value);
+
     return value;
   }, [value]);
 

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -228,6 +228,7 @@ function getLabelVariation(
   } else if (focused) {
     return "interactive";
   }
+
   return "subdued";
 }
 
@@ -278,10 +279,10 @@ function Placeholder({
   labelVariation,
   hasMiniLabel,
 }: {
-  placeholder?: string;
-  styleOverride: StyleProp<TextStyle>;
-  labelVariation: TextVariation;
-  hasMiniLabel: boolean;
+  readonly placeholder?: string;
+  readonly styleOverride: StyleProp<TextStyle>;
+  readonly labelVariation: TextVariation;
+  readonly hasMiniLabel: boolean;
 }) {
   return (
     <>

package/src/InputFieldWrapper/index.ts

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

package/src/InputPressable/InputPressable.tsx

@@ -2,13 +2,9 @@ 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 { Clearable, useShowClear } from "@jobber/hooks";
 import { styles } from "./InputPressable.style";
-import {
-  Clearable,
-  InputFieldWrapper,
-  commonInputStyles,
-  useShowClear,
-} from "../InputFieldWrapper";
+import { InputFieldWrapper, commonInputStyles } from "../InputFieldWrapper";
 
 export interface InputPressableProps {
   /**

package/src/InputText/InputText.tsx

@@ -25,15 +25,12 @@ import {
 } from "react-hook-form";
 import { IconNames } from "@jobber/design";
 import identity from "lodash/identity";
+import { Clearable, useShowClear } from "@jobber/hooks";
 import { styles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";
 import { InputFieldStyleOverride } from "../InputFieldWrapper/InputFieldWrapper";
-import {
-  Clearable,
-  InputFieldWrapper,
-  useShowClear,
-} from "../InputFieldWrapper";
+import { InputFieldWrapper } from "../InputFieldWrapper";
 import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 
 export interface InputTextProps {

package/src/InputTime/InputTime.tsx

@@ -3,12 +3,13 @@ import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
 import DateTimePicker from "react-native-modal-datetime-picker";
 import { View } from "react-native";
+import { Clearable } from "@jobber/hooks";
 import { styles } from "./InputTime.style";
 import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
 import { useAtlantisContext } from "../AtlantisContext";
 import { InputPressable } from "../InputPressable";
 import { FormField } from "../FormField";
-import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+import { InputFieldWrapperProps } from "../InputFieldWrapper";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 interface InputTimeBaseProps
@@ -208,10 +209,12 @@ function InternalInputTime({
 
 function getInitialPickerDate(date?: Date | null): Date {
   if (date) return date;
+
   return roundUpToNearestMinutes(new Date(), 30);
 }
 
 function getMinuteInterval(type: InputTimeBaseProps["type"]) {
   if (type === "granular") return 1;
+
   return 5;
 }

package/dist/src/InputFieldWrapper/hooks/useShowClear.js

@@ -1,15 +0,0 @@
-export function useShowClear({ clearable, multiline, focused, hasValue, disabled = false, }) {
-    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/dist/types/src/InputFieldWrapper/hooks/useShowClear.d.ts

@@ -1,10 +0,0 @@
-import { Clearable } from "../InputFieldWrapper";
-interface UseShowClearParameters {
-    clearable: Clearable;
-    multiline: boolean;
-    focused: boolean;
-    hasValue: boolean;
-    disabled?: boolean;
-}
-export declare function useShowClear({ clearable, multiline, focused, hasValue, disabled, }: UseShowClearParameters): boolean | undefined;
-export {};

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

@@ -1,158 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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;
-  }
-}