react-native-better-html 1.0.9 → 1.0.10

package/dist/index.d.mts

@@ -3,7 +3,7 @@ export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme,
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_native from 'react-native';
-import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent, NativeSyntheticEvent, NativeTouchEvent, TextInputSubmitEditingEvent } from 'react-native';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
 type AppConfig = {};
@@ -332,20 +332,34 @@ type InputFieldProps = {
     keyboardType?: React.ComponentProps<typeof TextInput>["keyboardType"];
     /** @default false */
     secureTextEntry?: boolean;
+    returnKeyLabel?: React.ComponentProps<typeof TextInput>["enterKeyHint"];
+    returnKeyType?: React.ComponentProps<typeof TextInput>["returnKeyType"];
+    height?: number;
+    /** @default 16 */
+    fontSize?: number;
+    /** @default 400 */
+    fontWeight?: TextStyle["fontWeight"];
+    /** @default 20 */
+    lineHeight?: number;
+    textAlign?: React.ComponentProps<typeof TextInput>["textAlign"];
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onChange?: (text: string) => void;
-};
-type InputFieldRef = {};
+    onPress?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
+    onPressEnter?: (event: TextInputSubmitEditingEvent) => void;
+} & Pick<ComponentPaddingProps, "paddingHorizontal" | "paddingVertical">;
+type InputFieldRef = TextInput;
 type InputFieldComponentType = {
-    (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>): React.ReactElement;
-    email: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+    (props: ComponentPropWithRef<TextInput, InputFieldProps>): React.ReactElement;
+    email: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    code: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
     email: typeof InputFieldComponent.email;
     password: typeof InputFieldComponent.password;
+    code: typeof InputFieldComponent.code;
 };
 
 type StatusBarProps = {
@@ -360,4 +374,4 @@ type AsyncStoragePluginOptions = {};
 declare const defaultAsyncStoragePluginOptions: Required<AsyncStoragePluginOptions>;
 declare const asyncStoragePlugin: BetterComponentsPluginConstructor<AsyncStoragePluginOptions>;
 
-export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme,
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_native from 'react-native';
-import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent } from 'react-native';
+import { ViewStyle, GestureResponderEvent, ViewProps as ViewProps$1, TextProps as TextProps$1, TextStyle, ColorValue, ImageSourcePropType, ImageProps as ImageProps$1, ImageStyle, TextInput, FocusEvent, NativeSyntheticEvent, NativeTouchEvent, TextInputSubmitEditingEvent } from 'react-native';
 import { EaseFunction, PropsTransforms } from '@legendapp/motion';
 
 type AppConfig = {};
@@ -332,20 +332,34 @@ type InputFieldProps = {
     keyboardType?: React.ComponentProps<typeof TextInput>["keyboardType"];
     /** @default false */
     secureTextEntry?: boolean;
+    returnKeyLabel?: React.ComponentProps<typeof TextInput>["enterKeyHint"];
+    returnKeyType?: React.ComponentProps<typeof TextInput>["returnKeyType"];
+    height?: number;
+    /** @default 16 */
+    fontSize?: number;
+    /** @default 400 */
+    fontWeight?: TextStyle["fontWeight"];
+    /** @default 20 */
+    lineHeight?: number;
+    textAlign?: React.ComponentProps<typeof TextInput>["textAlign"];
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
     onChange?: (text: string) => void;
-};
-type InputFieldRef = {};
+    onPress?: (event: NativeSyntheticEvent<NativeTouchEvent>) => void;
+    onPressEnter?: (event: TextInputSubmitEditingEvent) => void;
+} & Pick<ComponentPaddingProps, "paddingHorizontal" | "paddingVertical">;
+type InputFieldRef = TextInput;
 type InputFieldComponentType = {
-    (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>): React.ReactElement;
-    email: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<InputFieldRef, InputFieldProps>) => React.ReactElement;
+    (props: ComponentPropWithRef<TextInput, InputFieldProps>): React.ReactElement;
+    email: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
+    code: (props: ComponentPropWithRef<TextInput, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
 declare const InputField: typeof InputFieldComponent & {
     email: typeof InputFieldComponent.email;
     password: typeof InputFieldComponent.password;
+    code: typeof InputFieldComponent.code;
 };
 
 type StatusBarProps = {
@@ -360,4 +374,4 @@ type AsyncStoragePluginOptions = {};
 declare const defaultAsyncStoragePluginOptions: Required<AsyncStoragePluginOptions>;
 declare const asyncStoragePlugin: BetterComponentsPluginConstructor<AsyncStoragePluginOptions>;
 
-export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };
+export { Animate, type AnimateTextProps, type AnimateViewProps, type AppConfig, type AsyncStoragePluginOptions, type BetterComponentsConfig, type BetterComponentsPlugin, _default$1 as BetterComponentsProvider, type BetterComponentsProviderConfig, Button, type ButtonProps, type ComponentMarginProps, type ComponentPaddingProps, type FooterProps, Image, type ImageProps, InputField, type InputFieldProps, type InputFieldRef, Loader, type LoaderProps, type LoaderSize, type PluginName, ScreenHolder, type ScreenHolderProps, _default as StatusBar, type StatusBarProps, Text, type TextProps, View, type ViewProps, asyncStoragePlugin, defaultAsyncStoragePluginOptions, generateAsyncStorage, pressStrength, useBetterComponentsContext, useDevice, useKeyboard };

package/dist/index.js

@@ -1194,19 +1194,30 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     keyboardAppearance = "default",
     keyboardType,
     secureTextEntry,
+    returnKeyLabel,
+    returnKeyType,
+    height,
+    fontSize = 16,
+    fontWeight = 400,
+    lineHeight = 20,
+    textAlign,
+    paddingHorizontal,
+    paddingVertical,
     onFocus,
     onBlur,
-    onChange
+    onChange,
+    onPress,
+    onPressEnter
   }, ref) => {
     const theme2 = (0, import_react_better_core9.useTheme)();
     const { colorTheme } = (0, import_react_better_core9.useBetterCoreContext)();
+    const textInputRef = (0, import_react10.useRef)(null);
     const [internalValue, setInternalValue] = (0, import_react10.useState)(value?.toString() || defaultValue || "");
     const [isFocused, setIsFocused] = (0, import_react_better_core9.useBooleanState)();
     const borderWidth = 1;
-    const lineHeight = 20;
-    const paddingHorizontal = theme2.styles.space;
-    const paddingVertical = (theme2.styles.space + theme2.styles.gap) / 2;
-    const height = borderWidth + paddingVertical + lineHeight + paddingVertical + borderWidth;
+    const readyPaddingHorizontal = paddingHorizontal ?? theme2.styles.space;
+    const readyPaddingVertical = paddingVertical ? parseFloat(paddingVertical.toString()) : (theme2.styles.space + theme2.styles.gap) / 2;
+    const readyHeight = height ?? borderWidth + readyPaddingVertical + lineHeight + readyPaddingVertical + borderWidth;
     const onFocusElement = (0, import_react10.useCallback)((event) => {
       setIsFocused.setTrue();
       onFocus?.(event);
@@ -1225,13 +1236,14 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     const textInputStyle = (0, import_react10.useMemo)(
       () => ({
         flex: 1,
-        fontSize: 16,
+        fontSize,
+        fontWeight,
         lineHeight,
         color: theme2.colors.textPrimary,
-        paddingHorizontal,
-        paddingVertical
+        paddingHorizontal: readyPaddingHorizontal,
+        paddingVertical: readyPaddingVertical
       }),
-      [theme2.colors, lineHeight, paddingHorizontal, paddingVertical]
+      [theme2.colors, fontSize, fontWeight, lineHeight, readyPaddingHorizontal, readyPaddingVertical]
     );
     (0, import_react10.useEffect)(() => {
       if (value === void 0) return;
@@ -1240,12 +1252,12 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
     (0, import_react10.useImperativeHandle)(
       ref,
       () => {
-        return {};
+        return textInputRef.current;
       },
       []
     );
     const prefixSuffixBackgroundColor = colorTheme === "light" ? (0, import_react_better_core9.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core9.lightenColor)(theme2.colors.backgroundContent, 0.1);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", height, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View_default, { isRow: true, position: "relative", alignItems: "center", flex: 1, height: readyHeight, children: [
       prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         View_default,
         {
@@ -1258,7 +1270,7 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
           borderTopLeftRadius: theme2.styles.borderRadius,
           borderBottomLeftRadius: theme2.styles.borderRadius,
           borderColor: theme2.colors.border,
-          paddingHorizontal,
+          paddingHorizontal: readyPaddingHorizontal,
           children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: prefix })
         }
       ),
@@ -1287,7 +1299,11 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
               autoFocus,
               placeholder,
               placeholderTextColor: theme2.colors.textSecondary + "80",
+              enterKeyHint: returnKeyLabel,
+              returnKeyType,
+              onSubmitEditing: onPressEnter,
               readOnly: !editable,
+              textAlign,
               keyboardAppearance,
               keyboardType,
               cursorColor: theme2.colors.primary,
@@ -1295,7 +1311,9 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
               secureTextEntry,
               onFocus: onFocusElement,
               onBlur: onBlurElement,
-              onChangeText
+              onChangeText,
+              onPress,
+              ref: textInputRef
             }
           )
         }
@@ -1312,7 +1330,7 @@ var InputFieldComponent = (0, import_react10.forwardRef)(
           borderTopRightRadius: theme2.styles.borderRadius,
           borderBottomRightRadius: theme2.styles.borderRadius,
           borderColor: theme2.colors.border,
-          paddingHorizontal,
+          paddingHorizontal: readyPaddingHorizontal,
           children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontWeight: 700, children: suffix })
         }
       )
@@ -1347,9 +1365,25 @@ InputFieldComponent.password = (0, import_react10.forwardRef)(function Password(
     }
   );
 });
+InputFieldComponent.code = (0, import_react10.forwardRef)(function Password2(props, ref) {
+  const theme2 = (0, import_react_better_core9.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    InputFieldComponent,
+    {
+      fontSize: 42,
+      fontWeight: 900,
+      lineHeight: 50,
+      paddingVertical: theme2.styles.space * 2,
+      textAlign: "center",
+      ...props,
+      ref
+    }
+  );
+});
 var InputField = (0, import_react10.memo)(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
+InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
 // src/components/StatusBar.tsx