af-react-grid - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

example_src/Grid/index.js

@@ -72,3 +72,3 @@ import React from "react";
         return (
-            <GridRoot fixDimensionsAfterMount>
+            <GridRoot fixDimensionsDelay={1000}>
                 <Container type="row" css={css`height: 70vh; width:80vw;`}>
@@ -75,0 +75,0 @@ <Cell>

package.json

 {
   "name": "af-react-grid",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "sideEffects": false,
@@ -38,9 +38,9 @@ "browserslist": [
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
     "classnames": "^2.2.6",
-    "emotion": "^10.0.14",
+    "emotion": "^10.0.23",
     "eventemitter3": "^4.0.0",
     "prop-types": "^15.7.2",
-    "react-draggable": "^3.3.0"
+    "react-draggable": "^4.1.0"
   },
@@ -53,15 +53,15 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/core": "^7.5.5",
+    "@babel/core": "^7.7.2",
     "@babel/plugin-external-helpers": "^7.0.0",
-    "@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-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-do-expressions": "^7.6.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.5.5",
-    "@emotion/babel-preset-css-prop": "^10.0.14",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/preset-react": "^7.7.0",
+    "@babel/runtime": "^7.7.2",
+    "@emotion/babel-preset-css-prop": "^10.0.23",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.8.0",
+    "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
@@ -73,17 +73,17 @@ "babel-preset-env": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^3.0.2",
-    "jest": "^24.8.0",
+    "husky": "^3.1.0",
+    "jest": "^24.9.0",
     "jest-mock-console": "^1.0.0",
     "npm-run-all": "^4.1.3",
     "path": "^0.12.7",
-    "react-test-renderer": "^16.8.6",
+    "react-test-renderer": "^16.12.0",
     "regenerator-runtime": "^0.13.3",
-    "rollup": "^1.17.0",
+    "rollup": "^1.27.2",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-strip-prop-types": "^1.0.2",
-    "webpack": "^4.38.0",
-    "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.7.2"
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   }
 }

src/Container/index.js

 
 import { forwardRef } from "react";
 import { TypeContext } from "../contexts";
-import styled from "@emotion/styled";
+import { css } from "@emotion/core";
 
-const StyledContainer = styled.div`
+const containerBaseCss = css`
     display: flex;
-    flex-direction: ${props=>props.flexDirection};
     flex-wrap: nowrap;
 `;
 
-const TypesMap = {
-    col: "column",
-    row: "row"
-};
+const colCss = css`
+    ${containerBaseCss};
+    flex-direction: column;
+`;
 
+const rowCss = css`
+    ${containerBaseCss};
+    flex-direction: row;
+`;
 
+
 const Container = forwardRef(({ type, ...props }, ref ) => (
     <TypeContext.Provider value={type}>
-        <StyledContainer {...props} flexDirection={TypesMap[type]} ref={ref} />
+        <div css={type==="col"?colCss:rowCss} {...props} ref={ref} />
     </TypeContext.Provider>
@@ -22,0 +26,0 @@ ));

src/GridRoot/index.js

@@ -44,3 +44,3 @@ import { useRef, useEffect } from "react";
 
-const GridRoot = ({ children, fixDimensionsAfterMount }) => {
+const GridRoot = ({ children, fixDimensionsDelay = -1 }) => {
     const modelRef = useRef();
@@ -53,6 +53,12 @@
     useEffect(() => {
-        if( fixDimensionsAfterMount ){
-            modelRef.current.fixDimensions();
+        if( fixDimensionsDelay >= 0 ){
+            const timer = setTimeout(() => {
+                modelRef.current.fixDimensions();
+            }, fixDimensionsDelay );
+
+            return () => {
+                clearTimeout( timer );
+            }
         }
-    }, [ fixDimensionsAfterMount ])
+    }, [ fixDimensionsDelay ])
 
@@ -59,0 +65,0 @@ return (

No alert changes

Improved metrics

Total package byte prevSize

39288

increased by0.49%

Lines of code

963

increased by0.84%

Dependency changes

• + Addedclsx@1.2.1(transitive)

• + Addedreact-draggable@4.4.6(transitive)

• - Removedreact-draggable@3.3.2(transitive)

• Updated@emotion/core@^10.0.22

• Updated@emotion/styled@^10.0.23

• Updatedemotion@^10.0.23

• Updatedreact-draggable@^4.1.0