react-native-better-html 1.0.17 → 1.0.18

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/index.ts
 import {
-  useTheme as useTheme11,
+  useTheme as useTheme13,
   useLoader as useLoader2,
   useLoaderControls,
   countries,
@@ -14,7 +14,7 @@ import {
   eventStopPropagation,
   eventPreventStop,
   getPluralWord,
-  useBooleanState as useBooleanState5,
+  useBooleanState as useBooleanState6,
   useDebounceState,
   loaderControls,
   colorThemeControls
@@ -535,6 +535,22 @@ function useForm(options) {
     },
     [values, setFieldValue, errors, requiredFields, additional, onSubmitFunction]
   );
+  const getSwitchProps = useCallback(
+    (field, insideListItem) => {
+      return insideListItem ? {
+        switchIsEnabled: values[field],
+        switchOnChange: (value) => {
+          setFieldValue(field, value);
+        }
+      } : {
+        isEnabled: values[field],
+        onChange: (value) => {
+          setFieldValue(field, value);
+        }
+      };
+    },
+    [values, setFieldValue]
+  );
   const reset = useCallback(() => {
     setValues(defaultValues);
     setErrors({});
@@ -558,6 +574,7 @@ function useForm(options) {
     setFieldValue,
     setFieldsValue,
     getInputFieldProps,
+    getSwitchProps,
     focusField,
     inputFieldRefs: inputFieldRefs.current,
     validate: validateForm,
@@ -1407,7 +1424,7 @@ var InputFieldComponent = forwardRef(
     autoCapitalize,
     autoComplete,
     autoCorrect,
-    keyboardAppearance = "default",
+    keyboardAppearance,
     keyboardType,
     secureTextEntry,
     returnKeyLabel,
@@ -1611,6 +1628,7 @@ var InputFieldComponent = forwardRef(
                   mode: type,
                   display: iOSDateTimeFullSize ? type === "date" ? "inline" : "spinner" : "default",
                   accentColor: theme2.colors.primary,
+                  themeVariant: colorTheme === "dark" ? "dark" : "light",
                   style: rnDateTimePickerStyle,
                   onChange: onChangeRNDateTimePicker
                 }
@@ -1673,7 +1691,7 @@ var InputFieldComponent = forwardRef(
                           readOnly: !editable || disabled || type === "date" || type === "time",
                           textAlign,
                           editable: !disabled,
-                          keyboardAppearance,
+                          keyboardAppearance: keyboardAppearance ?? colorTheme === "dark" ? "dark" : "light",
                           keyboardType,
                           cursorColor: theme2.colors.primary,
                           selectionColor: theme2.colors.primary,
@@ -1831,23 +1849,148 @@ InputField.search = InputFieldComponent.search;
 InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
-// src/components/StatusBar.tsx
-import { memo as memo11 } from "react";
-import { useTheme as useTheme10 } from "react-better-core";
-import { StatusBar as NativeStatusBar, Platform as Platform6 } from "react-native";
+// src/components/Switch.tsx
+import { memo as memo11, useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo9 } from "react";
+import { Switch as NativeSwitch, Platform as Platform6 } from "react-native";
+import { useBooleanState as useBooleanState5, useTheme as useTheme10 } from "react-better-core";
 import { jsx as jsx11 } from "react/jsx-runtime";
-function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
   const theme2 = useTheme10();
-  return /* @__PURE__ */ jsx11(
+  const [enabled, setEnabled] = useBooleanState5(isEnabled ?? defaultIsEnabled);
+  const onPressElement = useCallback4(() => {
+    onChange?.(!enabled);
+    setEnabled.toggle();
+  }, [onChange, enabled]);
+  const trackColor = useMemo9(
+    () => ({
+      false: theme2.colors.border,
+      true: theme2.colors.primary
+    }),
+    [theme2.colors]
+  );
+  useEffect6(() => {
+    if (isEnabled === void 0) return;
+    setEnabled.setState(isEnabled);
+  }, [isEnabled]);
+  const ballSize = 26;
+  const ballGap = 3;
+  const holderWidth = ballSize * 2.1;
+  return Platform6.OS === "ios" ? /* @__PURE__ */ jsx11(
+    NativeSwitch,
+    {
+      trackColor,
+      ios_backgroundColor: theme2.colors.border,
+      onValueChange: onPressElement,
+      value: enabled,
+      disabled
+    }
+  ) : /* @__PURE__ */ jsx11(
+    View_default,
+    {
+      width: holderWidth,
+      borderRadius: 999,
+      pressStrength: pressStrength().p05,
+      disabled,
+      onPress: !disabled ? onPressElement : void 0,
+      children: /* @__PURE__ */ jsx11(
+        Animate_default.View,
+        {
+          width: "100%",
+          height: ballGap + ballSize + ballGap,
+          borderRadius: 999,
+          initialOpacity: 1,
+          animateOpacity: disabled ? 0.6 : 1,
+          initialBackgroundColor: theme2.colors.border,
+          animateBackgroundColor: enabled ? theme2.colors.primary : theme2.colors.border,
+          children: /* @__PURE__ */ jsx11(
+            Animate_default.View,
+            {
+              width: ballSize,
+              height: ballSize,
+              top: ballGap,
+              borderRadius: 999,
+              backgroundColor: theme2.colors.backgroundContent,
+              initialX: ballGap,
+              animateX: enabled ? holderWidth - ballGap - ballSize : ballGap
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var Switch_default = memo11(Switch);
+
+// src/components/StatusBar.tsx
+import { memo as memo12 } from "react";
+import { useTheme as useTheme11 } from "react-better-core";
+import { StatusBar as NativeStatusBar, Platform as Platform7 } from "react-native";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
+  const theme2 = useTheme11();
+  return /* @__PURE__ */ jsx12(
     NativeStatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
-      barStyle: barStyle ?? (Platform6.OS === "android" ? androidBarStyle : iOSBarStyle),
+      barStyle: barStyle ?? (Platform7.OS === "android" ? androidBarStyle : iOSBarStyle),
       hidden
     }
   );
 }
-var StatusBar_default = memo11(StatusBar);
+var StatusBar_default = memo12(StatusBar);
+
+// src/components/ListItem.tsx
+import { memo as memo13 } from "react";
+import { useTheme as useTheme12 } from "react-better-core";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function ListItem({
+  icon,
+  iconIOS,
+  title,
+  description,
+  rightElement,
+  backgroundColor,
+  insideScreenHolder,
+  onPress,
+  rightArrowValue,
+  switchIsEnabled,
+  switchOnChange
+}) {
+  const theme2 = useTheme12();
+  const device = useDevice();
+  const sideSpace = theme2.styles.space;
+  return /* @__PURE__ */ jsx13(
+    View_default,
+    {
+      width: insideScreenHolder ? device.windowDimensions.width : "100%",
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
+      marginHorizontal: insideScreenHolder ? -sideSpace : void 0,
+      paddingVertical: theme2.styles.gap,
+      paddingHorizontal: sideSpace,
+      pressStrength: pressStrength().p05,
+      onPress,
+      children: /* @__PURE__ */ jsxs5(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        icon && /* @__PURE__ */ jsx13(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ jsx13(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ jsxs5(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ jsx13(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ jsx13(Text_default.body, { children: description })
+        ] }) }),
+        rightElement ? /* @__PURE__ */ jsx13(Fragment4, { children: rightElement === "arrow" ? /* @__PURE__ */ jsxs5(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
+          rightArrowValue !== void 0 && /* @__PURE__ */ jsx13(Text_default, { fontSize: 14, fontWeight: 700, children: rightArrowValue }),
+          /* @__PURE__ */ jsx13(
+            Icon_default,
+            {
+              name: "chevronRight",
+              nameIOS: "chevron.right",
+              color: rightArrowValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
+            }
+          )
+        ] }) : rightElement === "switch" ? /* @__PURE__ */ jsx13(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : void 0 }) : void 0
+      ] })
+    }
+  );
+}
+var ListItem_default = memo13(ListItem);
 
 // src/plugins/asyncStorage.ts
 var defaultAsyncStoragePluginOptions = {};
@@ -1868,9 +2011,11 @@ export {
   Icon_default as Icon,
   Image_default as Image,
   InputField_default as InputField,
+  ListItem_default as ListItem,
   Loader_default as Loader,
   ScreenHolder_default as ScreenHolder,
   StatusBar_default as StatusBar,
+  Switch_default as Switch,
   Text_default as Text,
   View_default as View,
   asyncStoragePlugin,
@@ -1892,7 +2037,7 @@ export {
   pressStrength,
   saturateColor,
   useBetterComponentsContext,
-  useBooleanState5 as useBooleanState,
+  useBooleanState6 as useBooleanState,
   useDebounceState,
   useDevice,
   useEventEmitter,
@@ -1900,6 +2045,6 @@ export {
   useKeyboard,
   useLoader2 as useLoader,
   useLoaderControls,
-  useTheme11 as useTheme
+  useTheme13 as useTheme
 };
 //# sourceMappingURL=index.mjs.map