af-react-grid - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

example_src/Grid/index.js

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

package.json

 {
   "name": "af-react-grid",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "sideEffects": false,
@@ -43,8 +43,10 @@ "browserslist": [
     "eventemitter3": "^4.0.0",
-    "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
     "react-draggable": "^3.3.0"
   },
+  "peerDependencies": {
+    "lodash": "^4.17.15",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
   "devDependencies": {
@@ -51,0 +53,0 @@ "@babel/core": "^7.5.5",

src/Cell/index.js

@@ -38,2 +38,3 @@ import {
 
+    const cellRef = useRef();
     const GridModel = useContext( RootContext );
@@ -54,2 +55,9 @@ const type = useContext( TypeContext );
 
+    useEffect(() => {
+        GridModel.registerCell( finalCellKey, type, cellRef );
+        return () => {
+            GridModel.unregisterCell( finalCellKey );
+        }
+    }, [ type, finalCellKey ]);
+
     const style = useMemo(() => {
@@ -68,3 +76,3 @@
 
-    return cloneElement( SingleChild, { [ElementRefProp]: finalCellKey, style });
+    return cloneElement( SingleChild, { [ElementRefProp]: finalCellKey, style, ref: cellRef });
 }

src/Container/index.js

@@ -0,1 +1,3 @@
+
+import { forwardRef } from "react";
 import { TypeContext } from "../contexts";
@@ -16,10 +18,8 @@ import styled from "@emotion/styled";
 
-const Container = ({ children, type, ...props }) => (
+const Container = forwardRef(({ type, ...props }, ref ) => (
     <TypeContext.Provider value={type}>
-        <StyledContainer {...props} flexDirection={TypesMap[type]}>
-            {children}
-        </StyledContainer>
+        <StyledContainer {...props} flexDirection={TypesMap[type]} ref={ref} />
     </TypeContext.Provider>
-);
+));
 
 export default Container;

src/GridRoot/index.js

@@ -1,4 +0,5 @@
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import EventEmitter from "eventemitter3";
 import { RootContext } from "../contexts";
+import { ByType } from "../constants";
 
@@ -8,2 +9,3 @@ class CellDimensions {
     Dimensions = {};
+    Cells = new Map();
 
@@ -22,5 +24,24 @@ Events = new EventEmitter();
     }
+
+    registerCell( id, type, ref ){
+        this.Cells.set( id, { type, ref });
+    }
+
+    unregisterCell( id ){
+        this.Cells.delete( id );
+    }
+
+    fixDimensions(){
+        for( let [ id, { type, ref }] of this.Cells ){
+            const { offsetDim } = ByType[ type ];
+            this.Dimensions[ id ] = ref.current[ offsetDim ];
+        }
+
+        for( let [ id ] of this.Cells ){
+            this.Events.emit( `@cell/${id}` );
+        }
+    }
 }
 
-const GridRoot = ({ children }) => {
+const GridRoot = ({ children, fixDimensionsAfterMount }) => {
     const modelRef = useRef();
@@ -32,2 +53,8 @@
 
+    useEffect(() => {
+        if( fixDimensionsAfterMount ){
+            modelRef.current.fixDimensions();
+        }
+    }, [ fixDimensionsAfterMount ])
+
     return (
@@ -37,5 +64,5 @@ <RootContext.Provider value={modelRef.current}>
         </RootContext.Provider>
-    )
+    );
 }
 
 export default GridRoot;

No alert changes

Improved metrics

Total package byte prevSize

39096

increased by2.67%

Lines of code

955

increased by3.02%

Dependency changes

• - Removedlodash@^4.17.15

• - Removedreact@^16.8.6

• - Removedreact-dom@^16.8.6