af-react-grid - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

package.json

 {
   "name": "af-react-grid",
-  "version": "1.1.7",
-  "sideEffects": [
-    "*.css"
-  ],
+  "version": "1.1.8",
+  "sideEffects": false,
   "browserslist": [
@@ -12,10 +10,4 @@ "last 1 version",
   ],
-  "module": "dist/bundle.esm.js",
-  "husky": {
-    "hooks": {
-      "pre-commit": "node scripts/commit.js pre",
-      "post-commit": "node scripts/commit.js post",
-      "pre-push": "npm run test"
-    }
-  },
+  "module": "src/",
+  "main": "src/",
   "repository": {
@@ -48,42 +40,42 @@ "type": "git",
     "classnames": "^2.2.6",
-    "emotion": "^10.0.7",
+    "emotion": "^10.0.14",
     "prop-types": "^15.7.2",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-draggable": "^3.2.1"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-draggable": "^3.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
+    "@babel/core": "^7.5.5",
     "@babel/plugin-external-helpers": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-do-expressions": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-do-expressions": "^7.5.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.3.4",
+    "@babel/runtime": "^7.5.5",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.1.0",
-    "babel-loader": "^8.0.4",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.6",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "clean-webpack-plugin": "^1.0.1",
+    "clean-webpack-plugin": "^3.0.0",
     "fs": "^0.0.1-security",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.1.3",
-    "jest": "^24.1.0",
-    "jest-mock-console": "^0.4.0",
+    "husky": "^3.0.1",
+    "jest": "^24.8.0",
+    "jest-mock-console": "^1.0.0",
     "npm-run-all": "^4.1.3",
     "path": "^0.12.7",
-    "react-test-renderer": "^16.8.3",
-    "regenerator-runtime": "^0.13.1",
-    "rollup": "^1.4.0",
-    "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-node-resolve": "^4.0.1",
+    "react-test-renderer": "^16.8.6",
+    "regenerator-runtime": "^0.13.3",
+    "rollup": "^1.17.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-strip-prop-types": "^1.0.2",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1"
+    "webpack": "^4.36.1",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
   }
 }

src/Container/index.js

@@ -1,10 +0,8 @@
-import React, { Children } from "react";
-import ReactDOM from "react-dom";
+import React, { createRef, isValidElement, Children, useReducer, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
-import cn from "classnames";
 import Resizer from "../Resizer";
 import StateSaver from "./StateSaver";
-import { css } from "emotion";
+import { css, cx } from "emotion";
 
-import { memoizeOneNumericArg, clamp, getCorrectProperty } from "../utils";
+import { memoizeOneNumericArg, clamp, getCorrectProperty, getNodeFromRef } from "../utils";
 import { ByType, UNIQUE_HASH, DEFAULT_RESIZER_STYLES } from "../constants";
@@ -14,3 +12,3 @@
 
-    if( !React.isValidElement( el ) ){
+    if( !isValidElement( el ) ){
         return el;
@@ -176,4 +174,4 @@ }
         
-        const prevElement = this.refsArr[ index - 1 ];
-        const nextElement = this.refsArr[ index ];
+        const prevElement = getNodeFromRef( this.refsArr[ index - 1 ] );
+        const nextElement = getNodeFromRef( this.refsArr[ index ] );
 
@@ -230,3 +228,3 @@ if( prevElement && nextElement ){
         /* It is better to always check children here, because they could be unmounted while dragging */
-        if( this.refsArr[ index ] && this.refsArr[ index - 1 ] ){
+        if( getNodeFromRef( this.refsArr[ index ] ) && getNodeFromRef( this.refsArr[ index - 1 ] ) ){
 
@@ -244,19 +242,4 @@ const { cursorPropName, cssSizeProp } = ByType[ this.props.type ];
 
-    _getSaveRef = memoizeOneNumericArg( index => node => {
+    _getSaveRef = memoizeOneNumericArg( index => this.refsArr[ index ] = createRef());
 
-        this.refsArr[ index ] = ReactDOM.findDOMNode( node );
-
-        /* findDOMNode may return text, so using instanceof check */
-        if( process.env.NODE_ENV !== "production" && this.refsArr[ index ] && !( this.refsArr[ index ] instanceof Element ) ){
-
-            if( !__JEST__ ){
-                /* I don't know how to mock refs instanceof in jest, so.... */
-                console.error(
-                    "af-react-grid: can't find ref for component:", node,
-                    "ReactDOM.findDomNode must return element for all children of Container."
-                );
-            }
-        }
-    });
-
     render(){
@@ -277,3 +260,3 @@
                 style={style}
-                className={cn(className,ByType[type].colClassName)}
+                className={cx(className,ByType[type].colClassName)}
                 children={Children.map( children, childrenMapper, this )}
@@ -295,6 +278,8 @@ />
 
-            if( ref ){
+            const node = getNodeFromRef( ref );
+
+            if( node ){
                 res[ stateKey ] = {
                     ...curState[ stateKey ],
-                    [cssSizeProp]: ref[ offsetDim ],
+                    [cssSizeProp]: node[ offsetDim ],
     
@@ -301,0 +286,0 @@ /* If exact width/height is known, flexBasis may be erased */

src/utils/index.js

@@ -0,1 +1,3 @@
+import { findDOMNode } from "react-dom";
+
 export const memoizeOneNumericArg = ( fn, cache = Object.create( null ) ) => arg => cache[ arg ] || ( cache[ arg ] = fn( arg ) );
@@ -5,2 +7,12 @@
 
-export const getCorrectProperty = ( obj, prop, fallbackProp ) => obj.hasOwnProperty( prop ) ? obj[ prop ] : fallbackProp;
+export const getCorrectProperty = ( obj, prop, fallbackProp ) => obj.hasOwnProperty( prop ) ? obj[ prop ] : fallbackProp;
+
+export const getNodeFromRef = ref => {
+    if( !ref ){
+        return null;
+    }
+
+    const { current } = ref;
+
+    return current instanceof Element ? current : findDOMNode( current );
+}

webpack.config.js

 const path = require( "path" );
 const HtmlWebpackPlugin = require( "html-webpack-plugin" );
-const CleanPlugin = require( "clean-webpack-plugin" );
+const CleanPlugin = require( "clean-webpack-plugin" ).CleanWebpackPlugin;
 
@@ -24,3 +24,3 @@ module.exports = {
     plugins: [
-        new CleanPlugin([ "example_dist" ]),
+        new CleanPlugin(),
         new HtmlWebpackPlugin({
@@ -27,0 +27,0 @@ title: "Examples"

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

Number of low supply chain risk alerts

4

decreased by-20%

Worsened metrics

Total package byte prevSize

50487

decreased by-77.3%

Number of package files

24

decreased by-7.69%

Lines of code

1201

decreased by-32.38%

Dependency changes

• Updatedemotion@^10.0.14

• Updatedreact@^16.8.6

• Updatedreact-dom@^16.8.6

• Updatedreact-draggable@^3.3.0