react-js-switch - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "react-js-switch",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Switch is a visual toggle between two mutually exclusive states — on and off.",
@@ -13,2 +13,5 @@ "main": "react-js-switch.js",
   },
+  "dependencies": {
+    "request-animation-number": "^1.0.6"
+  },
   "keywords": [
@@ -15,0 +18,0 @@ "react",

react-js-switch.d.ts

@@ -152,2 +152,4 @@ type NamedColor =
 
+type requestFrameEasing = "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";
+
 interface backgroundColor {
@@ -183,3 +185,4 @@ /**
     /**
-     * The size of the switch in pixels.
+     * - The size of the switch in pixels.
+     * 
      * **Default Value** 40
@@ -190,4 +193,5 @@ */
     /**
-     * Switch On/Off animation duration in ms.
-     * **Default Value** 250
+     * - Switch On/Off animation duration in ms.
+     * 
+     * - **Default Value** 250
      */
@@ -197,10 +201,14 @@ duration?: number
     /**
-     * Switch On/Off animation timing function.
-     * **Default Value** ease
+     * - Switch On/Off animation timing function.
+     * 
+     * - Easing functions specify the rate of change of the number over time.
+     * 
+     * - **Default Value** 'easeOutExpo'
      */
-    ease?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'cubic-bezier(0, 0, 0, 0)';
+    ease?: requestFrameEasing | Function;
 
     /**
-     * Custom color for switch circle button.
-     * **Default Value** '#fff'
+     * - Custom color for switch circle button.
+     * 
+     * - **Default Value** '#fff'
      */
@@ -210,4 +218,5 @@ color?: NamedColor;
     /**
-     * Switch container background color when it's on or off.
-     * **Default Value** { on: '#fc3f7f', off: '#f9f9f9' }
+     * - Switch container background color when it's on or off.
+     * 
+     * - **Default Value** { on: '#fc3f7f', off: '#f9f9f9' }
      */
@@ -217,4 +226,5 @@ backgroundColor?: backgroundColor;
     /**
-     * Switch container border color when it's on or off.
-     * **Default Value** { on: '#fc3f7f', off: '#e6e6e6' }
+     * - Switch container border color when it's on or off.
+     * 
+     * - **Default Value** { on: '#fc3f7f', off: '#e6e6e6' }
      */
@@ -224,3 +234,3 @@ borderColor?: borderColor;
     /**
-     * Value of the switch, true means 'on', false means 'off'.
+     * - Value of the switch, true means 'on', false means 'off'.
      */
@@ -230,4 +240,5 @@ value?: boolean;
     /**
-     * Disable toggling the switch.
-     * **Default Value** false
+     * - Disable toggling the switch.
+     * 
+     * - **Default Value** false
      */
@@ -237,3 +248,3 @@ disabled?: boolean;
     /**
-     * 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.
      */
@@ -240,0 +251,0 @@ onChange: Function;

react-js-switch.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _requestAnimationNumber = require("request-animation-number");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -20,2 +22,3 @@
 
+  let handle = (0, _react.useRef)();
   const disabled = (_props$disabled = props.disabled) !== null && _props$disabled !== void 0 ? _props$disabled : false;
@@ -25,3 +28,3 @@ const width = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 40;
   const duration = (_props$duration = props.duration) !== null && _props$duration !== void 0 ? _props$duration : 250;
-  const ease = props.ease || 'ease';
+  const easingFunction = props.ease || 'easeOutExpo';
   const color = props.color || '#fff';
@@ -36,2 +39,3 @@ const background_color = {
   };
+  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);
@@ -44,4 +48,45 @@
     (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, !isOn);
+    const handleWidth = width / 2;
+    (0, _requestAnimationNumber.requestNum)({
+      from: isOn ? handleWidth - expand_handle_by : 0,
+      to: isOn ? 0 : handleWidth,
+      duration,
+      easingFunction
+    }, (p, x) => {
+      handle.current.style.left = p + 'px';
+    });
   };
 
+  const handle_animation_mousDown = () => {
+    const handleWidth = width / 2;
+    const handleExpand = handleWidth + expand_handle_by;
+    (0, _requestAnimationNumber.requestNum)({
+      from: [handleWidth, handleWidth],
+      to: [handleExpand, handleWidth - expand_handle_by],
+      duration: duration / 2,
+      easingFunction: 'easeOutCirc'
+    }, (w, l) => {
+      handle.current.style.width = "".concat(w, "px");
+      if (isOn) handle.current.style.left = l + 'px';
+    });
+    document.body.addEventListener('mouseup', handle_animation_mousUp);
+    document.body.addEventListener('touchend', handle_animation_mousUp);
+  };
+
+  const handle_animation_mousUp = () => {
+    document.body.removeEventListener('mouseup', handle_animation_mousUp);
+    document.body.removeEventListener('touchend', handle_animation_mousUp);
+    const handleWidth = width / 2;
+    const handleExpand = handleWidth + expand_handle_by;
+    (0, _requestAnimationNumber.requestNum)({
+      to: [handleWidth, handleWidth],
+      from: [handleExpand, handleWidth - expand_handle_by],
+      duration: duration / 2,
+      easingFunction: 'easeOutCirc'
+    }, (w, l) => {
+      handle.current.style.width = "".concat(w, "px");
+      if (isOn) handle.current.style.left = l + 'px';
+    });
+  };
+
   (0, _react.useEffect)(() => {
@@ -52,2 +97,4 @@ setIsOn(props.value);
     onClick: disabled ? null : click_handle,
+    onMouseDown: handle_animation_mousDown,
+    onTouchStart: handle_animation_mousDown,
     style: {
@@ -62,7 +109,10 @@ display: 'flex',
       backgroundColor: isOn ? background_color.on : background_color.off,
+      cursor: 'pointer',
+      WebkitTapHighlightColor: 'transparent',
       transitionDuration: duration + 'ms',
       transitionProperty: 'background-color, border-color',
-      transitionTimingFunction: ease
+      transitionTimingFunction: 'ease'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: handle,
     style: {
@@ -73,8 +123,5 @@ position: 'absolute',
       height: height + 'px',
-      borderRadius: '50%',
+      borderRadius: width / 4 + 'px',
       backgroundColor: color,
-      boxShadow: '#00000050 0px 1px 1px 0px',
-      transitionDuration: duration + 'ms',
-      transitionProperty: 'left',
-      transitionTimingFunction: ease
+      boxShadow: '#00000050 0px 1px 1px 0px'
     }
@@ -81,0 +128,0 @@ }), /*#__PURE__*/_react.default.createElement("div", {

README.md

@@ -54,4 +54,8 @@ # react-js-switch
 
-- Switch On/Off animation timing function (CSS Value).
-- **Default Value** 'ease'
+- Switch On/Off animation timing function.
+- Easing functions specify the rate of change of the number over time.
+- 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.
+- **Default Value** 'easeOutExpo'
 
@@ -58,0 +62,0 @@ ### color : _[String] [optional]_

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

15071

increased by27.57%

Lines of code

353

increased by18.46%

Number of lines in readme file

84

increased by5%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedrequest-animation-number@^1.0.6

• + Addedrequest-animation-number@1.0.8(transitive)