react-native-better-html 1.0.3 → 1.0.4

package/dist/index.mjs

@@ -1,11 +1,11 @@
 // src/index.ts
 import {
-  useTheme as useTheme7,
+  useTheme as useTheme9,
   useLoader as useLoader2,
   useLoaderControls,
   countries,
-  lightenColor,
-  darkenColor,
+  lightenColor as lightenColor2,
+  darkenColor as darkenColor2,
   saturateColor,
   desaturateColor,
   generateRandomString,
@@ -14,7 +14,7 @@ import {
   eventStopPropagation,
   eventPreventStop,
   getPluralWord,
-  useBooleanState as useBooleanState3,
+  useBooleanState as useBooleanState5,
   useDebounceState,
   loaderControls,
   colorThemeControls
@@ -145,10 +145,10 @@ var pressStrength = () => {
 };
 
 // src/utils/hooks.ts
-import { useMemo as useMemo2 } from "react";
-import { Dimensions } from "react-native";
+import { useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
+import { Dimensions, Keyboard } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTheme } from "react-better-core";
+import { useBooleanState as useBooleanState2, useTheme } from "react-better-core";
 
 // src/constants/css.ts
 var cssProps = /* @__PURE__ */ new Set([
@@ -365,6 +365,36 @@ function useDevice() {
     isSmallDevice
   };
 }
+function useKeyboard() {
+  const [keyboardOpened, setKeyboardOpened] = useBooleanState2();
+  const [keyboardWillOpen, setKeyboardWillOpen] = useBooleanState2();
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  useEffect2(() => {
+    const keyboardDidShow = (event) => {
+      setKeyboardOpened.setTrue();
+      setKeyboardHeight(event.endCoordinates.height);
+    };
+    const keyboardDidHide = () => {
+      setKeyboardOpened.setFalse();
+      setKeyboardHeight(0);
+    };
+    const willShowSubscription = Keyboard.addListener("keyboardWillShow", setKeyboardWillOpen.setTrue);
+    const willHideSubscription = Keyboard.addListener("keyboardWillHide", setKeyboardWillOpen.setFalse);
+    const didShowSubscription = Keyboard.addListener("keyboardDidShow", keyboardDidShow);
+    const didHideSubscription = Keyboard.addListener("keyboardDidHide", keyboardDidHide);
+    return () => {
+      willShowSubscription.remove();
+      willHideSubscription.remove();
+      didShowSubscription.remove();
+      didHideSubscription.remove();
+    };
+  }, []);
+  return {
+    isOpened: keyboardOpened,
+    willOpen: keyboardWillOpen,
+    height: keyboardHeight
+  };
+}
 function useComponentPropsGrouper(props, prefix) {
   return useMemo2(() => {
     const style = {};
@@ -683,6 +713,7 @@ var Text_default = Text2;
 
 // src/components/Button.tsx
 import { memo as memo6 } from "react";
+import { Platform as Platform2 } from "react-native";
 import { useLoader, useTheme as useTheme5 } from "react-better-core";
 
 // src/components/Animate.tsx
@@ -844,6 +875,7 @@ var ButtonComponent = function Button({
   const color = textColor ?? theme2.colors.base;
   const paddingVertical = props.paddingVertical ? parseFloat(props.paddingVertical.toString()) : theme2.styles.space;
   const paddingHorizontal = props.paddingHorizontal ? parseFloat(props.paddingHorizontal.toString()) : theme2.styles.space + theme2.styles.gap;
+  const buttonHeight = paddingVertical + lineHeight + paddingVertical;
   return /* @__PURE__ */ jsx6(
     Animate_default.View,
     {
@@ -857,6 +889,7 @@ var ButtonComponent = function Button({
         {
           position: "relative",
           width: !isSmall ? "100%" : void 0,
+          height: Platform2.OS === "android" ? buttonHeight : void 0,
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: theme2.colors.primary,
@@ -884,7 +917,7 @@ var ButtonComponent = function Button({
               {
                 position: "absolute",
                 width: "100%",
-                height: paddingVertical + lineHeight + paddingVertical,
+                height: buttonHeight,
                 left: paddingHorizontal,
                 alignItems: "center",
                 justifyContent: "center",
@@ -942,9 +975,9 @@ Button2.text = ButtonComponent.text;
 var Button_default = Button2;
 
 // src/components/ScreenHolder.tsx
-import { memo as memo7, useCallback } from "react";
-import { RefreshControl, ScrollView } from "react-native";
-import { useBooleanState as useBooleanState2, useTheme as useTheme6 } from "react-better-core";
+import { memo as memo7, useCallback, useMemo as useMemo6 } from "react";
+import { KeyboardAvoidingView, Platform as Platform3, RefreshControl, ScrollView } from "react-native";
+import { useBooleanState as useBooleanState3, useTheme as useTheme6 } from "react-better-core";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var ScreenHolderComponent = ({
   noScroll,
@@ -957,11 +990,19 @@ var ScreenHolderComponent = ({
   insideBottomSafeArea,
   bottomSpace = 0,
   footer,
+  keepFooterOnKeyboardOpened,
   children
 }) => {
   const theme2 = useTheme6();
   const device = useDevice();
-  const [isRefreshing, setIsRefreshing] = useBooleanState2();
+  const keyboard = useKeyboard();
+  const [isRefreshing, setIsRefreshing] = useBooleanState3();
+  const keyboardAvoidingViewStyle = useMemo6(
+    () => ({
+      flex: 1
+    }),
+    []
+  );
   const onRefreshElement = useCallback(() => {
     setIsRefreshing.setTrue();
     onRefresh?.();
@@ -976,21 +1017,29 @@ var ScreenHolderComponent = ({
       flex: 1,
       paddingHorizontal: !noSideSpace ? theme2.styles.space : void 0,
       paddingTop: theme2.styles.gap + (insideTopSafeArea ? device.safeArea.afterCalculations.top : 0),
-      paddingBottom: bottomSpace + (insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : 0),
+      paddingBottom: Platform3.OS === "ios" && keyboard.isOpened ? device.safeArea.afterCalculations.top : bottomSpace + (insideBottomSafeArea ? device.safeArea.afterCalculations.bottom : 0),
       children
     }
   );
   const withRefresh = onRefresh || onRefreshEnd;
-  return /* @__PURE__ */ jsxs3(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: [
-    /* @__PURE__ */ jsx7(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ jsx7(
-      ScrollView,
-      {
-        refreshControl: withRefresh ? /* @__PURE__ */ jsx7(RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
-        children: content
-      }
-    ) }),
-    footer && /* @__PURE__ */ jsx7(View_default, { children: footer })
-  ] });
+  return /* @__PURE__ */ jsx7(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ jsxs3(
+    KeyboardAvoidingView,
+    {
+      style: keyboardAvoidingViewStyle,
+      keyboardVerticalOffset: keepFooterOnKeyboardOpened ? Platform3.OS === "ios" ? device.safeArea.afterCalculations.bottom : theme2.styles.gap : void 0,
+      behavior: Platform3.OS === "ios" ? "padding" : "height",
+      children: [
+        /* @__PURE__ */ jsx7(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ jsx7(
+          ScrollView,
+          {
+            refreshControl: withRefresh ? /* @__PURE__ */ jsx7(RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
+            children: content
+          }
+        ) }),
+        keepFooterOnKeyboardOpened || (Platform3.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ jsx7(View_default, { children: footer }) : /* @__PURE__ */ jsx7(View_default, { width: "100%", height: device.safeArea.afterCalculations.bottom })
+      ]
+    }
+  ) });
 };
 ScreenHolderComponent.footer = function Footer({
   noSideSpace,
@@ -1015,6 +1064,234 @@ var ScreenHolder = memo7(ScreenHolderComponent);
 ScreenHolder.footer = ScreenHolderComponent.footer;
 var ScreenHolder_default = ScreenHolder;
 
+// src/components/Image.tsx
+import { memo as memo8, useEffect as useEffect3, useMemo as useMemo7 } from "react";
+import { useBetterCoreContext as useBetterCoreContext2, useTheme as useTheme7 } from "react-better-core";
+import {
+  Image as NativeImage
+} from "react-native";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ImageComponent = function Image({ name, source, withDevFittingMode, ...props }) {
+  const { assets: assets2 } = useBetterCoreContext2();
+  const style = useMemo7(
+    () => ({
+      width: 100,
+      height: 100,
+      ...withDevFittingMode ? {
+        borderWidth: 1,
+        borderColor: "#eb39f7"
+      } : {},
+      ...props
+    }),
+    [withDevFittingMode, props]
+  );
+  useEffect3(() => {
+    if (!name) return;
+    if (!assets2[name.toString()])
+      console.warn(
+        `The asset \`${name}\` you are trying to use does not exist. Make sure to add it to the \`assets\` object in \`<BetterComponentsProvider>\` config value prop.`
+      );
+  }, [assets2, name]);
+  return /* @__PURE__ */ jsx8(NativeImage, { source: name ? assets2[name.toString()] : source, style, ...props });
+};
+ImageComponent.profileImage = function ProfileImage({ size = 50, letters, backgroundColor, ...props }) {
+  const theme2 = useTheme7();
+  return letters ? /* @__PURE__ */ jsx8(
+    View_default,
+    {
+      width: size,
+      height: size,
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: 999,
+      alignItems: "center",
+      justifyContent: "center",
+      ...props,
+      children: /* @__PURE__ */ jsx8(Text_default, { fontSize: size / 2.5, fontWeight: 700, marginTop: 1, children: letters.toUpperCase().slice(0, 2) })
+    }
+  ) : /* @__PURE__ */ jsx8(
+    ImageComponent,
+    {
+      width: size,
+      height: size,
+      borderWidth: 1,
+      borderColor: theme2.colors.border,
+      borderRadius: 999,
+      objectFit: "cover",
+      ...props
+    }
+  );
+};
+var Image2 = memo8(ImageComponent);
+Image2.profileImage = ImageComponent.profileImage;
+var Image_default = Image2;
+
+// src/components/InputField.tsx
+import { forwardRef, memo as memo9, useCallback as useCallback2, useImperativeHandle, useMemo as useMemo8 } from "react";
+import { TextInput } from "react-native";
+import {
+  darkenColor,
+  lightenColor,
+  useBetterCoreContext as useBetterCoreContext3,
+  useBooleanState as useBooleanState4,
+  useTheme as useTheme8
+} from "react-better-core";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var InputFieldComponent = forwardRef(
+  ({
+    placeholder,
+    prefix,
+    suffix,
+    defaultValue,
+    editable = true,
+    autoFocus,
+    autoCapitalize,
+    autoComplete,
+    autoCorrect,
+    keyboardAppearance = "default",
+    keyboardType,
+    secureTextEntry,
+    onFocus,
+    onBlur
+  }, ref) => {
+    const theme2 = useTheme8();
+    const { colorTheme } = useBetterCoreContext3();
+    const [isFocused, setIsFocused] = useBooleanState4();
+    const paddingHorizontal = theme2.styles.space;
+    const paddingVertical = (theme2.styles.space + theme2.styles.gap) / 2;
+    const onFocusElement = useCallback2((event) => {
+      setIsFocused.setTrue();
+      onFocus?.(event);
+    }, []);
+    const onBlurElement = useCallback2((event) => {
+      setIsFocused.setFalse();
+      onBlur?.(event);
+    }, []);
+    const textInputStyle = useMemo8(
+      () => ({
+        flex: 1,
+        fontSize: 16,
+        lineHeight: 20,
+        color: theme2.colors.textPrimary,
+        paddingHorizontal,
+        paddingVertical
+      }),
+      [theme2.colors, paddingHorizontal, paddingVertical]
+    );
+    useImperativeHandle(
+      ref,
+      () => {
+        return {};
+      },
+      []
+    );
+    const prefixSuffixBackgroundColor = colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1);
+    return /* @__PURE__ */ jsxs4(View_default, { isRow: true, position: "relative", alignItems: "center", children: [
+      prefix && /* @__PURE__ */ jsx9(
+        View_default,
+        {
+          isRow: true,
+          height: "100%",
+          backgroundColor: prefixSuffixBackgroundColor,
+          alignItems: "center",
+          borderWidth: 1,
+          borderRightWidth: 0,
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          borderColor: theme2.colors.border,
+          paddingHorizontal,
+          children: /* @__PURE__ */ jsx9(Text_default, { fontWeight: 700, children: prefix })
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        Animate_default.View,
+        {
+          flex: 1,
+          backgroundColor: theme2.colors.backgroundContent,
+          borderTopLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+          borderBottomLeftRadius: prefix ? 0 : theme2.styles.borderRadius,
+          borderTopRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+          borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
+          borderWidth: 1,
+          initialBorderColor: theme2.colors.border,
+          animateBorderColor: isFocused ? theme2.colors.primary : theme2.colors.border,
+          overflow: "hidden",
+          children: /* @__PURE__ */ jsx9(
+            TextInput,
+            {
+              style: textInputStyle,
+              defaultValue,
+              autoCapitalize,
+              autoComplete,
+              autoCorrect,
+              autoFocus,
+              placeholder,
+              placeholderTextColor: theme2.colors.textSecondary + "80",
+              readOnly: !editable,
+              keyboardAppearance,
+              keyboardType,
+              cursorColor: theme2.colors.primary,
+              selectionColor: theme2.colors.primary,
+              secureTextEntry,
+              onFocus: onFocusElement,
+              onBlur: onBlurElement
+            }
+          )
+        }
+      ),
+      suffix && /* @__PURE__ */ jsx9(
+        View_default,
+        {
+          isRow: true,
+          height: "100%",
+          backgroundColor: prefixSuffixBackgroundColor,
+          alignItems: "center",
+          borderWidth: 1,
+          borderLeftWidth: 0,
+          borderTopRightRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
+          borderColor: theme2.colors.border,
+          paddingHorizontal,
+          children: /* @__PURE__ */ jsx9(Text_default, { fontWeight: 700, children: suffix })
+        }
+      )
+    ] });
+  }
+);
+InputFieldComponent.email = forwardRef(function Email(props, ref) {
+  return /* @__PURE__ */ jsx9(
+    InputFieldComponent,
+    {
+      placeholder: "your@email.here",
+      autoComplete: "email",
+      keyboardType: "email-address",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      ...props,
+      ref
+    }
+  );
+});
+InputFieldComponent.password = forwardRef(function Password(props, ref) {
+  return /* @__PURE__ */ jsx9(
+    InputFieldComponent,
+    {
+      secureTextEntry: true,
+      placeholder: "******",
+      autoCapitalize: "none",
+      autoComplete: "password",
+      autoCorrect: false,
+      ...props,
+      ref
+    }
+  );
+});
+var InputField = memo9(InputFieldComponent);
+InputField.email = InputFieldComponent.email;
+InputField.password = InputFieldComponent.password;
+var InputField_default = InputField;
+
 // src/plugins/asyncStorage.ts
 var defaultAsyncStoragePluginOptions = {};
 var asyncStoragePlugin = (options) => ({
@@ -1031,6 +1308,8 @@ export {
   Animate_default as Animate,
   BetterComponentsProvider_default as BetterComponentsProvider,
   Button_default as Button,
+  Image_default as Image,
+  InputField_default as InputField,
   Loader_default as Loader,
   ScreenHolder_default as ScreenHolder,
   Text_default as Text,
@@ -1038,7 +1317,7 @@ export {
   asyncStoragePlugin,
   colorThemeControls,
   countries,
-  darkenColor,
+  darkenColor2 as darkenColor,
   defaultAsyncStoragePluginOptions,
   desaturateColor,
   eventPreventDefault,
@@ -1048,16 +1327,17 @@ export {
   generateAsyncStorage,
   generateRandomString,
   getPluralWord,
-  lightenColor,
+  lightenColor2 as lightenColor,
   loaderControls,
   pressStrength,
   saturateColor,
   useBetterComponentsContext,
-  useBooleanState3 as useBooleanState,
+  useBooleanState5 as useBooleanState,
   useDebounceState,
   useDevice,
+  useKeyboard,
   useLoader2 as useLoader,
   useLoaderControls,
-  useTheme7 as useTheme
+  useTheme9 as useTheme
 };
 //# sourceMappingURL=index.mjs.map