react-js-switch - npm Package Compare versions

Comparing version 1.0.4 to 1.1.4

package.json

 {
   "name": "react-js-switch",
-  "version": "1.0.4",
+  "version": "1.1.4",
   "description": "Switch is a visual toggle between two mutually exclusive states — on and off.",
@@ -5,0 +5,0 @@ "main": "react-js-switch.js",

react-js-switch.js

@@ -68,17 +68,19 @@ "use strict";
   const click_handle = () => {
-    var _props$value2, _props$onChange, _props$value3, _props$value4;
+    var _props$onChange2;
 
-    console.log(props.value, isOn, initialValue);
-    if (props.value === isOn) return;
-    setIsOn((_props$value2 = props.value) !== null && _props$value2 !== void 0 ? _props$value2 : !isOn);
-    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, !isOn);
-    const handleWidth = width / 2;
+    if (typeof props.value === 'boolean') {
+      var _props$onChange;
+
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, null);
+      return;
+    }
+
+    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 ? void 0 : _props$onChange2.call(props, !isOn);
+    setIsOn(!isOn);
     (0, _requestAnimationNumber.requestNum)({
-      from: ((_props$value3 = props.value) !== null && _props$value3 !== void 0 ? _props$value3 : isOn) ? handleWidth - expand_handle_by : 0,
-      to: ((_props$value4 = props.value) !== null && _props$value4 !== void 0 ? _props$value4 : isOn) ? 0 : handleWidth,
+      from: !isOn ? 0 : width / 2 - expand_handle_by,
+      to: !isOn ? width / 2 : 0,
       duration,
       easingFunction
-    }, (p, x) => {
-      handle.current.style.left = p + 'px';
-    });
+    }, p => handle.current.style.left = p + 'px');
   };
@@ -119,3 +121,12 @@
   (0, _react.useEffect)(() => {
-    if (typeof props.value === 'boolean') setIsOn(props.value);
+    if (typeof props.value === 'boolean' && props.value !== isOn) {
+      setIsOn(props.value);
+      (0, _requestAnimationNumber.requestNum)({
+        from: props.value ? 0 : width / 2 - expand_handle_by,
+        to: props.value ? width / 2 : 0,
+        duration,
+        easingFunction
+      }, p => handle.current.style.left = p + 'px');
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [props.value]);
@@ -145,3 +156,3 @@ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       position: 'absolute',
-      left: isOn ? width / 2 : '0px',
+      left: isOn ? width / 2 + 'px' : '0px',
       width: width / 2 + 'px',
@@ -148,0 +159,0 @@ height: height + 'px',

README.md

@@ -91,2 +91,3 @@ # react-js-switch
 
-- Callback called with the new value when it changes takes a parameter represents switch state.
+- Callback called with the new value when it changes.
+- Takes a parameter represents switch state, this parameter will return `null` if the switch `value` linked to a state.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18231

increased by1.11%

Lines of code

395

increased by2.07%

Number of lines in readme file

93

increased by1.09%

No dependency changes