@maif/react-forms 1.1.3 → 1.1.4

package/lib/esm/index.js

@@ -178,13 +178,18 @@ const BooleanInput = React__default.forwardRef(({ onChange, value, readOnly }, r
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
         }
     };
-    return (React__default.createElement("div", { className: classNames({ ['mrf-cursor_pointer']: !readOnly, ['mrf-cursor_not_allowed']: readOnly }) },
-        !!value && React__default.createElement("div", { className: classNames('mrf-content_switch_button_on'), onClick: () => handleClick(false) },
-            React__default.createElement("div", { className: classNames('mrf-switch_button_on') })),
-        !value && value !== null && React__default.createElement("div", { className: classNames('mrf-content_switch_button_off'), onClick: () => handleClick(true) },
-            React__default.createElement("div", { className: classNames('mrf-switch_button_off') })),
-        value === null && React__default.createElement("div", { className: classNames('mrf-content_switch_button_null'), onClick: () => handleClick(true) },
-            React__default.createElement("div", { className: classNames('mrf-switch_button_null') }))));
+    let className = classNames("mrf-content_switch", {
+        "mrf-content_switch_button_on": !!value,
+        "mrf-content_switch_button_off": !value && value !== null,
+        "mrf-content_switch_button_null": value === null,
+        "mrf-cursor_pointer": !readOnly,
+        "mrf-cursor_not_allowed": readOnly,
+    });
+    let callback = () => handleClick(true);
+    if (!!value) {
+        callback = () => handleClick(false);
+    }
+    return React__default.createElement("input", { type: "checkbox", className: className, onChange: callback });
 });
 
 const Collapse = (props) => {

package/lib/index.css

@@ -294,6 +294,10 @@
   margin-left: 5px;
 }
 
+.mrf-content_switch {
+  appearance: none;
+}
+
 .mrf-content_switch_button_on {
   width: 35px;
   height: 22px;
@@ -305,6 +309,18 @@
   justify-content: flex-end;
 }
 
+.mrf-content_switch_button_on::before {
+  content: "";
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  background-color: var(--form-bg-color, #fff);
+  border-radius: 20px;
+  border: 1px solid var(--success-hover-color, #1e7e34);
+  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
+  margin-top: -1px;
+}
+
 .mrf-content_switch_button_off {
   width: 35px;
   height: 22px;
@@ -316,6 +332,18 @@
   justify-content: flex-start;
 }
 
+.mrf-content_switch_button_off::before {
+  content: "";
+  background-color: var(--form-bg-color, #fff);
+  border-radius: 20px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--error-hover-color, #bd2130);
+  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
+  margin-top: -1px;
+}
+
 .mrf-content_switch_button_null {
   width: 35px;
   height: 22px;
@@ -327,34 +355,16 @@
   justify-content: flex-start;
 }
 
-.mrf-switch_button_on {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  background-color: var(--form-bg-color, #fff);
-  border-radius: 20px;
-  border: 1px solid var(--success-hover-color, #1e7e34);
-  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
-}
-
-.mrf-switch_button_off {
+.mrf-content_switch_button_null::before {
+  content: "";
   background-color: var(--form-bg-color, #fff);
   border-radius: 20px;
   cursor: pointer;
   width: 20px;
   height: 20px;
-  border: 1px solid var(--error-hover-color, #bd2130);
-  box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
-}
-
-.mrf-switch_button_null {
-  background-color: var(--form-bg-color, #fff);
-  border-radius: 20px;
-  cursor: pointer;
-  width: 22px;
-  height: 22px;
   margin-top: -1px;
   margin-left: -1px;
   border: 1px solid var(--neutral-hover-color, #5c636a);
   box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.3);
+  margin-top: -1px;
 }

package/lib/index.js

@@ -214,13 +214,18 @@ const BooleanInput = React__default["default"].forwardRef(({ onChange, value, re
             onChange === null || onChange === void 0 ? void 0 : onChange(value);
         }
     };
-    return (React__default["default"].createElement("div", { className: classNames__default["default"]({ ['mrf-cursor_pointer']: !readOnly, ['mrf-cursor_not_allowed']: readOnly }) },
-        !!value && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_on'), onClick: () => handleClick(false) },
-            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_on') })),
-        !value && value !== null && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_off'), onClick: () => handleClick(true) },
-            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_off') })),
-        value === null && React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-content_switch_button_null'), onClick: () => handleClick(true) },
-            React__default["default"].createElement("div", { className: classNames__default["default"]('mrf-switch_button_null') }))));
+    let className = classNames__default["default"]("mrf-content_switch", {
+        "mrf-content_switch_button_on": !!value,
+        "mrf-content_switch_button_off": !value && value !== null,
+        "mrf-content_switch_button_null": value === null,
+        "mrf-cursor_pointer": !readOnly,
+        "mrf-cursor_not_allowed": readOnly,
+    });
+    let callback = () => handleClick(true);
+    if (!!value) {
+        callback = () => handleClick(false);
+    }
+    return React__default["default"].createElement("input", { type: "checkbox", className: className, onChange: callback });
 });
 
 const Collapse = (props) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/index.d.ts",