@jobber/components-native 0.21.1 → 0.22.0

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

@@ -0,0 +1,165 @@
+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 { 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
+     */
+    readonly invalid?: boolean | string;
+    /**
+     * Disable the input
+     */
+    readonly disabled?: boolean;
+    /**
+     * Name of the input.
+     */
+    readonly name?: string;
+    /**
+     * Hint text that goes above the value once the field is filled out
+     */
+    readonly placeholder?: string;
+    /**
+     * Text that helps the user understand the input
+     */
+    readonly assistiveText?: string;
+    /**
+     * Determines what keyboard is shown
+     */
+    keyboard?: "default" | "numeric" | "phone-pad" | "email-address" | "numbers-and-punctuation" | "decimal-pad";
+    /**
+     * Set the component to a given value
+     */
+    readonly value?: string;
+    /**
+     * Default value for when component is uncontrolled
+     */
+    readonly defaultValue?: string;
+    /**
+     * Automatically focus the input after it is rendered
+     */
+    readonly autoFocus?: boolean;
+    /**
+     * Shows an error message below the field and highlight the field red when value is invalid
+     */
+    readonly validations?: RegisterOptions;
+    /**
+     * Simplified callback that only provides the new value
+     * @param newValue
+     */
+    onChangeText?: (newValue: string) => void;
+    /**
+     * Callback that is called when the text input's submit button is pressed
+     * @param event
+     */
+    onSubmitEditing?: (event?: SyntheticEvent) => void;
+    /**
+     * Callback that is called when the text input is focused
+     * @param event
+     */
+    onFocus?: (event?: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+    /**
+     * Callback that is called when the text input is blurred
+     */
+    onBlur?: () => void;
+    /**
+     * VoiceOver will read this string when a user selects the associated element
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * An accessibility hint helps users understand what will happen when they perform an action on the
+     * accessibility element when that result is not clear from the accessibility label
+     */
+    readonly accessibilityHint?: string;
+    /**
+     * Turn off autocorrect
+     */
+    readonly autoCorrect?: boolean;
+    /**
+     *  Determines where to autocapitalize
+     */
+    readonly autoCapitalize?: "characters" | "words" | "sentences" | "none";
+    /**
+     * Determines which content to suggest on auto complete, e.g.`username`.
+     * Default is `off` which disables auto complete
+     *
+     * *Android Only*
+     *
+     */
+    readonly autoComplete?: TextInputProps["autoComplete"];
+    /**
+     * Determines which content to suggest on auto complete, e.g.`username`.
+     * Default is `none` which disables auto complete
+     *
+     * *iOS Only*
+     */
+    readonly textContentType?: TextInputProps["textContentType"];
+    /**
+     * Determines if inputText will span multiple lines.
+     * Default is `false`
+     *
+     * https://reactnative.dev/docs/textinput#multiline
+     */
+    readonly multiline?: TextInputProps["multiline"];
+    /**
+     * 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;
+        onPress?: () => void;
+    };
+    /**
+     * transform object is used to transform the internal TextInput value
+     * It's useful for components like InputNumber where we want to transform
+     * the internal value to a number.
+     * "input" is a function that transform the value to the string format that should be shown to the user
+     * "output" is a function that transform the string representation of the value to the value that is sent to onChange and the form
+     */
+    transform?: {
+        input?: (v: any) => string | undefined;
+        output?: (v: string | undefined) => any;
+    };
+    /**
+     * Add a clear action on the input that clears the value.
+     *
+     * You should always use `while-editing` if you want the input to be
+     * clearable. if the input value isn't editable (i.e. `InputDateTime`) you can
+     * set it to `always`.
+     */
+    readonly clearable?: Clearable;
+    /**
+     * Used to locate this view in end-to-end tests
+     */
+    testID?: string;
+    /**
+     * Use secure text entry
+     */
+    readonly secureTextEntry?: boolean;
+    /**
+     * Determines whether spell check is used. Turn it off to hide empty autoCorrect
+     * suggestions when autoCorrect is off.
+     *
+     * *iOS Only*
+     */
+    readonly spellCheck?: boolean;
+    /**
+     * Custom styling to override default style of the input text
+     */
+    readonly styleOverride?: InputTextStyleOverride;
+}
+interface InputTextStyleOverride extends InputFieldStyleOverride {
+    inputText?: StyleProp<TextStyle>;
+}
+export type InputTextRef = Pick<TextInput, "clear" | "focus" | "blur">;
+export declare const InputText: React.ForwardRefExoticComponent<InputTextProps & React.RefAttributes<InputTextRef>>;
+export {};

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

@@ -0,0 +1,16 @@
+export declare const styles: {
+    inputPaddingTop: {
+        paddingTop: number | undefined;
+    };
+    multiLineInput: {
+        paddingTop: number;
+        paddingBottom: number;
+        lineHeight: number | undefined;
+    };
+    multiLineInputWithMini: {
+        paddingTop: number;
+    };
+    multilineInputiOS: {
+        paddingTop: number;
+    };
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { InputAccessoriesContextProps } from "./types";
+export declare const InputAccessoriesContext: import("react").Context<InputAccessoriesContextProps>;
+export declare function useInputAccessoriesContext(): InputAccessoriesContextProps;

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

@@ -0,0 +1,4 @@
+import { ReactNode } from "react";
+export declare function InputAccessoriesProvider({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

package/dist/types/src/InputText/context/InputAccessoriesProvider.style.d.ts

@@ -0,0 +1,17 @@
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        justifyContent: "flex-end";
+        alignItems: "center";
+        paddingHorizontal: number;
+        borderTopWidth: number;
+        borderTopColor: string;
+        height: number;
+    };
+    lightTheme: {
+        backgroundColor: string;
+    };
+    darkTheme: {
+        backgroundColor: import("react-native").OpaqueColorValue;
+    };
+};

package/dist/types/src/InputText/context/InputAccessory.style.d.ts

@@ -0,0 +1,14 @@
+export declare const styles: {
+    container: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        paddingHorizontal: number;
+        backgroundColor: string;
+        borderTopWidth: number;
+        borderTopColor: string;
+    };
+    buttonContainer: {
+        flexDirection: "row";
+    };
+};

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

@@ -0,0 +1,2 @@
+export * from "./InputAccessoriesContext";
+export * from "./InputAccessoriesProvider";

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

@@ -0,0 +1,23 @@
+type Name = string;
+export interface InputAccessoriesContextProps {
+    /**
+     * Registered elements.
+     */
+    readonly elements: Record<Name, () => void>;
+    readonly focusedInput: string;
+    readonly canFocusNext: boolean;
+    readonly canFocusPrevious: boolean;
+    readonly inputAccessoryID?: string;
+    /**
+     * Registers the element to the context.
+     */
+    readonly register: (name: Name, onFocus: () => void) => void;
+    /**
+     * Un-registers the element from the context.
+     */
+    readonly unregister: (name: Name) => void;
+    readonly onFocusNext: () => void;
+    readonly onFocusPrevious: () => void;
+    readonly setFocusedInput: (name: string) => void;
+}
+export {};

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

@@ -0,0 +1,3 @@
+export { InputText } from "./InputText";
+export type { InputTextRef, InputTextProps } from "./InputText";
+export * from "./context";

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

@@ -0,0 +1 @@
+export * from "./useFormController";

package/dist/types/src/hooks/useFormController.d.ts

@@ -0,0 +1,12 @@
+import { FieldError, RegisterOptions, UseControllerReturn } from "react-hook-form";
+interface UseFormControllerProps<T> {
+    name?: string;
+    value?: T;
+    validations?: RegisterOptions;
+}
+interface UseFormController {
+    error?: FieldError;
+    field: UseControllerReturn["field"];
+}
+export declare function useFormController<T>({ name, value, validations, }: UseFormControllerProps<T>): UseFormController;
+export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "license": "MIT",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@jobber/design": "^0.41.2",
     "lodash.chunk": "^4.2.0",
+    "lodash.identity": "^3.0.0",
     "react-hook-form": "^7.30.0",
     "react-intl": "^6.4.2",
     "react-native-gesture-handler": "^2.5.0",
@@ -37,6 +38,7 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/react-native": "^12.0.1",
     "@types/lodash.chunk": "^4.2.7",
+    "@types/lodash.identity": "^3.0.7",
     "@types/react": "^18.0.28",
     "@types/react-native": "^0.71.6",
     "@types/react-native-uuid": "^1.4.0",
@@ -49,5 +51,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "b983e8889a634678e467f4d1e8b66513dc1eb1d2"
+  "gitHead": "4924f4190c152e4d11b9f52adcd8dd91a727ae16"
 }

package/src/InputText/InputText.style.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+import { typographyStyles } from "../Typography";
+
+export const styles = StyleSheet.create({
+  inputPaddingTop: {
+    paddingTop: typographyStyles.smallSize.fontSize,
+  },
+
+  multiLineInput: {
+    paddingTop: tokens["space-base"] - tokens["space-smallest"],
+    paddingBottom: tokens["space-smaller"],
+    lineHeight: typographyStyles.defaultSize.lineHeight,
+  },
+
+  multiLineInputWithMini: {
+    paddingTop: tokens["space-large"],
+  },
+
+  multilineInputiOS: {
+    // for placeholder
+    paddingTop:
+      (typographyStyles.smallSize.fontSize || 0) + tokens["space-smallest"],
+  },
+});