af-react-grid - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/bundle.esm.js

@@ -129,5 +129,5 @@ import t, { Children as i } from "react";
     }
-    componentDidUpdate({children: t}) {
-        const {children: s} = this.props, e = i.count(t), r = i.count(s);
-        e !== r && (e > r && this.t.splice(r), this.n());
+    componentDidUpdate() {
+        const t = this.t.length - this.d;
+        t && (this.t.splice(this.d, t), this.n());
     }
@@ -134,0 +134,0 @@ componentWillUnmount() {

dist/bundle.js

@@ -214,5 +214,5 @@ "use strict";
         key: "componentDidUpdate",
-        value: function(e) {
-            var t = e.children, r = this.props.children, n = React.Children.count(t), i = React.Children.count(r);
-            n !== i && (n > i && this.refsArr.splice(i), this.setExactDimensions());
+        value: function() {
+            var e = this.refsArr.length - this._refsArrIterator;
+            e && (this.refsArr.splice(this._refsArrIterator, e), this.setExactDimensions());
         }
@@ -219,0 +219,0 @@ }, {

example_src/Grid/index.js

@@ -6,34 +6,63 @@ import React from "react";
 
-const Grid = () => (
-    <Container style={{ height: "80vh" }}>
-        <Container resizerChildren={<span>Hello</span>} type="col">
-            <Resizer>This resizer is placed in wrong place, so it is useless</Resizer>
-            <div style={{ background: "violet" }}>1</div>
-            <Resizer>Yes, it can handle 2 resizers</Resizer>
-            <Resizer>As if it was one</Resizer>
-            <Container resizerChildren={null} style={{ minHeight: 200, flexGrow: 1 }}>
-                <div style={{flexGrow: 1, background: "red" }}>2</div>
-                <Resizer />
-                <div style={{ background: "blue", width: 200 }}>3</div>
-                <Resizer />
-                <div style={{ background: "pink", padding: "1em", border: "3px solid black" }}>Paddings and borders also work</div>
-                <div style={{ background: "orange" }}>No resizer goes here</div>
-                <Container type="col" style={{ flexGrow: 1 }}>
-                    <div style={{flexGrow: 1, background: "red" }}>5</div>
+class Grid extends React.Component{
+
+    state = {
+        added: 0
+    }
+
+    add = () => this.setState( s => ({
+        added: s.added + 1
+    }))
+
+    remove = () => this.setState( s => ({
+        added: Math.max( s.added - 1, 0 )
+    }))
+
+    render(){
+
+        const { added } = this.state;
+
+        return (
+            <React.Fragment>
+                <div>
+                    <button onClick={this.add}>Add</button>
+                    <button onClick={this.remove}>Remove</button>
+                </div>
+                <Container style={{ height: "80vh" }}>
+                    <Container resizerChildren={<span>Hello</span>} type="col">
+                        <Resizer>This resizer is placed in wrong place, so it is useless</Resizer>
+                        <div style={{ background: "violet" }}>1</div>
+                        <Resizer>Yes, it can handle 2 resizers</Resizer>
+                        <Resizer>As if it was one</Resizer>
+                        <Container resizerChildren={null} style={{ minHeight: 200, flexGrow: 1 }}>
+                            <div style={{flexGrow: 1, background: "red" }}>2</div>
+                            <Resizer />
+                            <div style={{ background: "blue", width: 200 }}>3</div>
+                            <Resizer />
+                            <div style={{ background: "pink", padding: "1em", border: "3px solid black" }}>Paddings and borders also work</div>
+                            <div style={{ background: "orange" }}>No resizer goes here</div>
+                            <Container type="col" style={{ flexGrow: 1 }}>
+                                <div style={{flexGrow: 1, background: "red" }}>5</div>
+                                <Resizer />
+                                <div style={{ background: "blue", overflow: "scroll", padding: "2em" }}>A little overflow with big padding</div>
+                                <Resizer />
+                                <div style={{ background: "pink" }}>7</div>
+                            </Container>
+                        </Container>
+                        <Resizer />
+                        <div style={{ background: "yellow", overflow: "scroll" }}>Just overflow</div>
+                        <Resizer>One more useless resizer</Resizer>
+                    </Container>
                     <Resizer />
-                    <div style={{ background: "blue", overflow: "scroll", padding: "2em" }}>A little overflow with big padding</div>
-                    <Resizer />
-                    <div style={{ background: "pink" }}>7</div>
+                    <div style={{ background: "aqua", flexGrow: 1 }}>Hello</div>
+                    {Array.from({ length: added }, ( el, i ) => (
+                        <div key={i}>ADDED {i}</div>
+                    ))}
                 </Container>
-            </Container>
-            <Resizer />
-            <div style={{ background: "yellow", overflow: "scroll" }}>Just overflow</div>
-            <Resizer>One more useless resizer</Resizer>
-        </Container>
-        <Resizer />
-        <div style={{ background: "aqua", flexGrow: 1 }}>Hello</div>
-    </Container>
-    
-);
+            </React.Fragment>
+            
+        );
+    }
+}
 
 export default Grid;

package.json

 {
   "name": "af-react-grid",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "sideEffects": [
@@ -5,0 +5,0 @@ "*.css"

README.md

 # af-react-grid
-Resizable flexbox grid for React.
-
+Resizable and customizable flexbox grid for React.
 [Usage example](https://nowaalex.github.io/af-react-grid/example_dist)
 
+![Demo image](https://i.postimg.cc/8z2tj91T/aaa.gif)
+
 ## Code example: 
@@ -55,6 +56,16 @@ ```javascript
 
+disabled: ?bool
+
 ```
-Resizers are also given data-resizer-index and data-resizer-type, so their styling could be customized easily.
+Resizers are also given `data-resizer-index` and `data-resizer-type`, so their styling could be customized easily.
 
-##Tooltips
-* If tou want overflow: auto on containers, you must either set it globally( add overflow rule to default container class ), or individually.
+## Tooltips
+* If tou want `overflow: auto` on containers, you must either set it globally( add overflow rule to default container class ), or individually.
+* Want to have a super-highly customized `Resizer`? `resizerChildren` prop allows you to render custom child elements, which could be easily styled.
+* `React.Fragment` and `Array` children are not yet supported
+* `Resizer`, which is first or last child, does nothing( see example )
+
+## TODO
+* localStorage integration
+* Support `React.Fragment` and `Array` children.
+* Add types

src/Container/index.js

@@ -245,13 +245,8 @@ import React, { Children } from "react";
 
-    componentDidUpdate({ children: prevChildren }){
+    componentDidUpdate(){
+        
+        const diff = this.refsArr.length - this._refsArrIterator;
 
-        const { children } = this.props;
-
-        const prevChildrenLen = Children.count( prevChildren );
-        const curChildrenLen =  Children.count( children );
-
-        if( prevChildrenLen !== curChildrenLen ){
-            if( prevChildrenLen > curChildrenLen ){
-                this.refsArr.splice( curChildrenLen );
-            }
+        if( diff ){
+            this.refsArr.splice( this._refsArrIterator, diff );
             this.setExactDimensions();
@@ -258,0 +253,0 @@ }

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

837724

increased by24%

Number of package files

29

increased by3.57%

Lines of code

3973

increased by18.63%

Number of lines in readme file

71

increased by20.34%

No dependency changes