react-switch - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

@@ -7,2 +7,11 @@ # Changelog
 
+## [1.2.0 - 2017-09-29]
+### Fixed
+- Removed react and react-dom from dependencies.
+- Css-file replaced with inline styles to avoid webpack style-loader dependence.
+
+### Changed
+- Cursor style of handle changed to pointer instead of grabbing.
+
+
 ## [1.1.0] - 2017-09-26
@@ -9,0 +18,0 @@ ### Fixed

dist/index.js

@@ -19,4 +19,2 @@ 'use strict';
 
-require('../styles.css');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -48,3 +46,4 @@
       startX: null,
-      isDragging: false
+      isDragging: false,
+      focused: false
     };
@@ -174,2 +173,4 @@ return _this;
     value: function render() {
+      var _this2 = this;
+
       var _props6 = this.props,
@@ -193,6 +194,49 @@ checked = _props6.checked,
           isDragging = _state2.isDragging,
-          startX = _state2.startX;
+          startX = _state2.startX,
+          focused = _state2.focused;
 
       var checkedLeft = width - height + 1;
 
+      var backgroundStyle = {
+        height: height,
+        width: width,
+        background: offColor,
+        borderRadius: height / 2,
+        display: 'inline-block',
+        position: 'relative',
+        opacity: disabled ? 0.5 : 1,
+        WebkitTransition: 'all 0.2s',
+        MozTransition: 'all 0.2s',
+        transition: 'all 0.2s',
+        cursor: disabled ? 'default' : 'pointer'
+      };
+
+      var foregroundStyle = {
+        height: height,
+        width: width,
+        opacity: (left - 1) / (checkedLeft - 1),
+        background: onColor,
+        WebkitTransition: isDragging ? null : 'opacity 0.2s ease-out',
+        MozTransition: isDragging ? null : 'opacity 0.2s ease-out',
+        transition: isDragging ? null : 'opacity 0.2s ease-out',
+        borderRadius: height / 2
+      };
+
+      var handleStyle = {
+        height: height - 2,
+        width: height - 2,
+        background: startX ? activeHandleColor : handleColor,
+        WebkitTransition: isDragging ? null : 'left 0.2s ease-out',
+        MozTransition: isDragging ? null : 'left 0.2s ease-out',
+        transition: isDragging ? null : 'left 0.2s ease-out',
+        display: 'inline-block',
+        borderRadius: '50%',
+        position: 'absolute',
+        left: left,
+        top: 1,
+        border: 0,
+        outline: 0,
+        boxShadow: focused ? '0px 0px 1px 2px #4D90FE' : null
+      };
+
       return _react2.default.createElement(
@@ -202,28 +246,7 @@ 'div',
           className: className,
-          style: {
-            height: height,
-            width: width,
-            background: offColor,
-            borderRadius: height / 2,
-            display: 'inline-block',
-            position: 'relative',
-            opacity: disabled ? 0.5 : 1,
-            WebkitTransition: 'all 0.2s',
-            MozTransition: 'all 0.2s',
-            transition: 'all 0.2s'
-          }
+          style: backgroundStyle
         },
         _react2.default.createElement('div', {
           className: 'react-switch-fg',
-          style: {
-            height: height,
-            width: width,
-            opacity: (left - 1) / (checkedLeft - 1),
-            background: onColor,
-            WebkitTransition: isDragging ? null : 'opacity 0.2s ease-out',
-            MozTransition: isDragging ? null : 'opacity 0.2s ease-out',
-            transition: isDragging ? null : 'opacity 0.2s ease-out',
-            borderRadius: height / 2,
-            cursor: disabled ? 'default' : 'pointer'
-          },
+          style: foregroundStyle,
           onClick: disabled ? null : this.handleClick
@@ -246,13 +269,10 @@ }),
             onKeyDown: this.handleKeyDown,
+            onFocus: function onFocus() {
+              return _this2.setState({ focused: true });
+            },
+            onBlur: function onBlur() {
+              return _this2.setState({ focused: false });
+            },
             className: 'react-switch-handle',
-            style: {
-              left: left,
-              height: height - 2,
-              width: height - 2,
-              background: startX ? activeHandleColor : handleColor,
-              WebkitTransition: isDragging ? null : 'left 0.2s ease-out',
-              MozTransition: isDragging ? null : 'left 0.2s ease-out',
-              transition: isDragging ? null : 'left 0.2s ease-out',
-              cursor: disabled ? 'default' : null
-            },
+            style: handleStyle,
             id: id,
@@ -259,0 +279,0 @@ name: name,

package.json

 {
   "name": "react-switch",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Draggable toggle-switch component for react",
@@ -9,3 +9,3 @@ "main": "dist/index.js",
     "build:watch": "babel src -w -d dist",
-    "build-examples": "webpack -p",
+    "push-examples": "webpack -p && git subtree push --prefix examples/dist origin gh-pages",
     "lint": "eslint --ext .js,.jsx src/",
@@ -48,2 +48,5 @@ "prepublishOnly": "npm run build",
     "jest": "^21.1.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-test-renderer": "^15.6.1",
@@ -55,6 +58,10 @@ "style-loader": "^0.18.2",
   "dependencies": {
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
     "react-draggable": "^3.0.3"
-  }
+  },
+  "keywords": [
+    "switch",
+    "toggle",
+    "react",
+    "react-component"
+  ]
 }

README.md

 # react-switch
-A draggable, customizable and accessible toggle-switch component for React. 
+[![npm](https://img.shields.io/npm/v/react-switch.svg)]()
+[![npm](https://img.shields.io/npm/dm/react-switch.svg)]()
 
+A draggable, customizable and accessible toggle-switch component for React.
+
+<img src="https://media.giphy.com/media/l1J9OD7acbBrtYrWU/giphy.gif" />
+
+
 ## Demo
@@ -5,0 +11,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3645779

increased by0.02%

Dependency count

4

decreased by-33.33%

Number of lines in readme file

70

increased by9.38%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

22

increased by15.79%

Number of package files

7

decreased by-12.5%

Lines of code

30466

decreased by-0.02%

Dependency changes

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• - Removedreact@^15.6.1

• - Removedreact-dom@^15.6.1

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedreact-dom@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)