react-native-better-html 1.0.26 → 1.0.27

package/dist/index.d.mts

@@ -207,9 +207,11 @@ type CheckBoxProps = {
     required?: boolean;
     /** @default false */
     disabled?: boolean;
+    infoMessage?: string;
+    errorMessage?: string;
     onChange?: (isChecked: boolean) => void;
 };
-declare function CheckBox({ isChecked, defaultIsChecked, size, text, required, disabled, onChange, }: CheckBoxProps): react_jsx_runtime.JSX.Element;
+declare function CheckBox({ isChecked, defaultIsChecked, size, text, required, disabled, infoMessage, errorMessage, onChange, }: CheckBoxProps): react_jsx_runtime.JSX.Element;
 declare const _default$3: react.MemoExoticComponent<typeof CheckBox>;
 
 declare function useDevice(): {

package/dist/index.d.ts

@@ -207,9 +207,11 @@ type CheckBoxProps = {
     required?: boolean;
     /** @default false */
     disabled?: boolean;
+    infoMessage?: string;
+    errorMessage?: string;
     onChange?: (isChecked: boolean) => void;
 };
-declare function CheckBox({ isChecked, defaultIsChecked, size, text, required, disabled, onChange, }: CheckBoxProps): react_jsx_runtime.JSX.Element;
+declare function CheckBox({ isChecked, defaultIsChecked, size, text, required, disabled, infoMessage, errorMessage, onChange, }: CheckBoxProps): react_jsx_runtime.JSX.Element;
 declare const _default$3: react.MemoExoticComponent<typeof CheckBox>;
 
 declare function useDevice(): {

package/dist/index.js

@@ -517,13 +517,15 @@ function useForm(options) {
           setFieldValue(field, value);
         }
       } : {
+        required: requiredFields?.includes(field),
         isChecked: values[field],
+        errorMessage: errors[field],
         onChange: (value) => {
           setFieldValue(field, value);
         }
       };
     },
-    [values, setFieldValue]
+    [values, setFieldValue, errors, requiredFields]
   );
   const reset = (0, import_react.useCallback)(() => {
     setValues(defaultValues);
@@ -538,7 +540,9 @@ function useForm(options) {
     return Object.keys(validationErrors).length === 0;
   }, [validate, values]);
   const canSubmit = (0, import_react.useMemo)(() => {
-    const requiredFieldsHaveValues = requiredFields?.every((field) => values[field] !== void 0 && values[field] !== "") ?? true;
+    const requiredFieldsHaveValues = requiredFields?.every(
+      (field) => values[field] !== void 0 && values[field] !== "" && values[field] !== false
+    ) ?? true;
     return isValid && requiredFieldsHaveValues;
   }, [isValid, requiredFields]);
   return {
@@ -2308,6 +2312,8 @@ function CheckBox({
   text,
   required,
   disabled,
+  infoMessage,
+  errorMessage,
   onChange
 }) {
   const theme2 = (0, import_react_better_core16.useTheme)();
@@ -2368,23 +2374,49 @@ function CheckBox({
       )
     }
   );
-  return text ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap, children: [
-    checkBox,
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      View_default,
+  return text ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { gap: theme2.styles.gap / 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap, children: [
+      checkBox,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        View_default,
+        {
+          width: "100%",
+          flexShrink: 1,
+          pressType: "opacity",
+          pressStrength: pressStrength().p3,
+          onPress: !disabled ? onPressElement : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Animate_default.View, { initialOpacity: 1, animateOpacity: disabled ? 0.6 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "flex-start", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(View_default, { flexShrink: 1, children: typeof text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { children: text }) : text }),
+            required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label_default, { required: true })
+          ] }) })
+        }
+      )
+    ] }),
+    infoMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Animate_default.Text,
+      {
+        fontSize: 14,
+        color: theme2.colors.textSecondary,
+        initialHeight: 0,
+        initialOpacity: 0,
+        animateHeight: 17,
+        animateOpacity: 1,
+        children: infoMessage
+      }
+    ),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Animate_default.Text,
       {
-        width: "100%",
-        flexShrink: 1,
-        pressType: "opacity",
-        pressStrength: pressStrength().p3,
-        onPress: onPressElement,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(View_default, { isRow: true, alignItems: "flex-start", gap: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(View_default, { flexShrink: 1, children: typeof text === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { children: text }) : text }),
-          required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label_default, { required: true })
-        ] })
+        fontSize: 14,
+        color: theme2.colors.error,
+        initialHeight: 0,
+        initialOpacity: 0,
+        animateHeight: 17,
+        animateOpacity: 1,
+        children: errorMessage
       }
     )
-  ] }) }) : checkBox;
+  ] }) : checkBox;
 }
 var CheckBox_default = (0, import_react17.memo)(CheckBox);