react-js-switch - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
   "name": "react-js-switch",
-  "version": "1.0.3",
+  "version": "1.0.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.d.ts

@@ -233,2 +233,8 @@ type NamedColor =
     /**
+     * - Value of the switch on the first render, true means 'on', false means 'off'.
+     * - **Note:** this prop will be overwritten by the `value` prop.
+     */
+    initialValue?: boolean;
+
+    /**
      * - Disable toggling the switch.
@@ -235,0 +241,0 @@ *

react-js-switch.js

@@ -19,6 +19,7 @@ "use strict";
 function Switch(props) {
-  var _props$disabled, _props$size, _props$duration, _props$backgroundColo, _props$backgroundColo2, _props$borderColor, _props$borderColor2, _props$value;
+  var _props$disabled, _props$initialValue, _props$size, _props$duration, _props$backgroundColo, _props$backgroundColo2, _props$borderColor, _props$borderColor2, _props$value;
 
   let handle = (0, _react.useRef)();
   const disabled = (_props$disabled = props.disabled) !== null && _props$disabled !== void 0 ? _props$disabled : false;
+  const initialValue = (_props$initialValue = props.initialValue) !== null && _props$initialValue !== void 0 ? _props$initialValue : false;
   const width = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 40;
@@ -44,2 +45,3 @@ const height = width / 2;
     if (typeof disabled !== 'boolean') console.error('react-js-switch: props.disabled has invalid value.');
+    if (typeof initialValue !== 'boolean') console.error('react-js-switch: props.initialValue has invalid value.');
     if (typeof width !== 'number' || width < 0) console.error('react-js-switch: props.size has invalid value.');
@@ -53,2 +55,10 @@ if (typeof duration !== 'number' || duration < 0) console.error('react-js-switch: props.duration has invalid value.');
     if (typeof borderColorOff !== 'string') console.error('react-js-switch: props.borderColor.off has invalid value.');
+    if (props.onChange && typeof props.onChange !== 'function') console.error('react-js-switch: props.onChange has invalid value.');
+    const allProps = new Set(['disabled', 'initialValue', 'value', 'size', 'duration', 'ease', 'color', 'backgroundColor', 'borderColor', 'onChange']);
+
+    for (const key in props) {
+      if (Object.hasOwnProperty.call(props, key)) {
+        if (!allProps.has(key)) console.error("react-js-pager: can't recognize props.".concat(key, " it's not a valid prop."));
+      }
+    }
   };
@@ -58,7 +68,9 @@
   const expand_handle_by = width / 2 / 4;
-  const [isOn, setIsOn] = (0, _react.useState)((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : false);
+  const [isOn, setIsOn] = (0, _react.useState)((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : initialValue);
 
   const click_handle = () => {
-    var _props$value2, _props$onChange;
+    var _props$value2, _props$onChange, _props$value3, _props$value4;
 
+    console.log(props.value, isOn, initialValue);
+    if (props.value === isOn) return;
     setIsOn((_props$value2 = props.value) !== null && _props$value2 !== void 0 ? _props$value2 : !isOn);
@@ -68,4 +80,4 @@ (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, !isOn);
     (0, _requestAnimationNumber.requestNum)({
-      from: isOn ? handleWidth - expand_handle_by : 0,
-      to: isOn ? 0 : handleWidth,
+      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,
       duration,
@@ -111,3 +123,3 @@ easingFunction
   (0, _react.useEffect)(() => {
-    setIsOn(props.value);
+    if (typeof props.value === 'boolean') setIsOn(props.value);
   }, [props.value]);
@@ -124,3 +136,3 @@ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       height: height + 'px',
-      border: 'solid ' + 2 + 'px' + (isOn ? border_color.on : border_color.off),
+      border: 'solid ' + 2 + 'px ' + (isOn ? border_color.on : border_color.off),
       borderRadius: height + 'px',
@@ -127,0 +139,0 @@ backgroundColor: isOn ? background_color.on : background_color.off,

README.md

@@ -38,6 +38,10 @@ # react-js-switch
 
-### value : _[Boolean]_
+### value : _[Boolean] [optional]_
 
 - Value of the switch, `true` means 'on', `false` means 'off'.
+### initialValue : _[Boolean] [optional]_
 
+- Value of the switch on the first render, true means 'on', false means 'off'.
+- **Note:** this prop will be overwritten by the `value` prop.
+
 ### size : _[Number] [optional]_
@@ -56,6 +60,4 @@
 - Switch On/Off animation timing function.
-- Easing functions specify the rate of change of the number over time.
+- Check [easings.net](https://easings.net/) to learn more.
 - **Default Value** `easeOutExpo`
-- Avaliable Easing functions :
-  `"linear", "easeInSine", "easeOutSine", "easeInOutSine", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInBack", "easeOutBack", "easeInOutBack", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBounce", "easeOutBounce", "easeInOutBounce"`
 - If you want to provide your own timing-function make sure that the function takes one parameter and returns one value.
@@ -62,0 +64,0 @@

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

18031

increased by5.82%

Lines of code

387

increased by4.31%

Number of lines in readme file

92

increased by2.22%

No dependency changes