af-react-grid - npm Package Compare versions

Comparing version 1.0.12 to 1.1.0

dist/bundle.esm.js

@@ -1,1 +0,1 @@
-import t,{Children as s}from"react";import i from"prop-types";import{DraggableCore as e}from"react-draggable";import r from"react-dom";import o from"classnames";const n=t.memo(({className:s,type:i,style:r,index:o,onDrag:n,onStart:a,disabled:h,children:c})=>t.createElement(e,{onStart:a,onDrag:n,disabled:h},t.createElement("div",{"data-resizer-index":o,"data-resizer-type":i,className:s,style:r,children:c})));n.propTypes={type:i.oneOf(["row","col"]),onDrag:i.func,onStart:i.func,index:i.number,disabled:i.bool,children:i.node,style:i.object,className:i.string};const a=(t,s=Object.create(null))=>i=>s[i]||(s[i]=t(i)),h=(t,s,i)=>t>i?i:t<s?s:t,c={row:{t:"react-rsz-grid-row",s:"pageX",i:"offsetWidth",e:"clientWidth",r:"width",o:"minWidth",n:"maxWidth",a:["Left","Right"]},col:{t:"react-rsz-grid-col",s:"pageY",i:"offsetHeight",e:"clientHeight",r:"height",o:"minHeight",n:"maxHeight",a:["Top","Bottom"]}},m=(t,s,i)=>t.hasOwnProperty(s)?t[s]:i;function l(s){if(!t.isValidElement(s))return s;const{type:i,props:e}=s,{resizerChildren:r,type:o}=this.props,a=m(this.props,"resizerClassName","react-rsz-grid-default-resizer");if(i===n)return t.cloneElement(s,{index:this.h,onDrag:this.c,onStart:this.m,type:o,className:m(e,"className",a)},m(e,"children",r));const h=this.state[this.h],c={style:e.style?Object.assign({},e.style,h):h,ref:this.l(this.h++)};return i===d&&(c.resizerClassName=m(e,"resizerClassName",a),c.resizerChildren=m(e,"resizerChildren",r)),t.cloneElement(s,c)}class d extends t.Component{constructor(...t){super(...t),this.state={},this.d=[],this.m=(t=>{const s=this.p=+t.currentTarget.dataset.resizerIndex,i=this.d[s-1],e=this.d[s];if(this.f=!(!i||!e)){const{s}=c[this.props.type];this.u=t[s],this.g(i,1),this.g(e,2);const r=this._curD1+this._curD2;this._maxD1||(this._maxD1=r-this._minD2),this._maxD2||(this._maxD2=r-this._minD1),this.D()}else"production"!==process.env.NODE_ENV&&console.warn("Resizer must be between other components. It is inactive during this drag.")}),this.c=(t=>{if(this.f){const{s,r:i}=c[this.props.type],e=t[s]-this.u;this.setState(t=>this.y(t,i,e))}}),this.l=a(t=>s=>{this.d[t]=r.findDOMNode(s),"production"===process.env.NODE_ENV||!this.d[t]||this.d[t]instanceof Element||__JEST__||console.error("af-react-grid: can't find ref for component:",s,"ReactDOM.findDomNode must return element for all children of Container.")}),this.z=((t,{type:s})=>{const{r:i,i:e}=c[s];return this.d.reduce((s,r,o)=>(r&&(s[o]=Object.assign({},t[o],{[i]:r[e],flexBasis:"auto",boxSizing:"border-box"})),s),{})}),this.D=(()=>this.setState(this.z))}g(t,s){const{type:i}=this.props,{n:e,o:r,i:o,e:n,a}=c[i],h=getComputedStyle(t),m=(this["_curD"+s]=t[o])-t[n]+a.reduce((t,s)=>t+parseFloat(h[`padding${s}`]),0);this["_minD"+s]=m+(parseFloat(h[r])||0),this["_maxD"+s]=parseFloat(h[e])||0}y(t,s,i){const e=this.p;return{[e-1]:Object.assign({},t[e-1],{[s]:h(this._curD1+i,this._minD1,this._maxD1)}),[e]:Object.assign({},t[e],{[s]:h(this._curD2-i,this._minD2,this._maxD2)})}}render(){const{type:i,className:e,children:r,style:n}=this.props;return this.h=0,t.createElement("div",{style:n,className:o(e,c[i].t),children:s.map(r,l,this)})}componentDidMount(){this._st=setTimeout(this.D,50),window.addEventListener("resize",this.D)}componentDidUpdate(){const t=this.d.length-this.h;t&&this.d.splice(this.h,t)}componentWillUnmount(){window.removeEventListener("resize",this.D),clearTimeout(this._st)}}d.propTypes={type:i.oneOf(["row","col"]),className:i.string,style:i.object,children:(i,e)=>{if(s.toArray(i[e]).some(s=>t.isValidElement(s)&&(s.type===t.Fragment||Array.isArray(s))))throw new Error("Fragments and arrays are not allowed inside Container")},resizerChildren:i.node,resizerClassName:i.string},d.defaultProps={type:"row"};export{n as Resizer,d as Container};
+import t,{Children as e}from"react";import s from"prop-types";import{DraggableCore as i}from"react-draggable";import r from"react-dom";import o from"classnames";const n=t.memo(({className:e,type:s,style:r,index:o,onDrag:n,onStart:a,disabled:h,children:c})=>t.createElement(i,{onStart:a,onDrag:n,disabled:h},t.createElement("div",{"data-resizer-index":o,"data-resizer-type":s,className:e,style:r,children:c})));n.propTypes={type:s.oneOf(["row","col"]),onDrag:s.func,onStart:s.func,index:s.number,disabled:s.bool,children:s.node,style:s.object,className:s.string};const a="aFrCtGrD";class h{constructor(){const t=localStorage.getItem(a);this.t=t?JSON.parse(t):{},window.addEventListener("beforeunload",()=>{Object.keys(this.t).length>1&&localStorage.setItem(a,JSON.stringify(this.t))})}e(t,e){this.t[t]=e}s(t){return this.t[t]||{}}}var c=new h;const l=(t,e=Object.create(null))=>s=>e[s]||(e[s]=t(s)),m=(t,e,s)=>t>s?s:t<e?e:t,d={row:{i:"react-rsz-grid-row",r:"pageX",o:"offsetWidth",n:"clientWidth",a:"width",h:"minWidth",c:"maxWidth",l:["Left","Right"]},col:{i:"react-rsz-grid-col",r:"pageY",o:"offsetHeight",n:"clientHeight",a:"height",h:"minHeight",c:"maxHeight",l:["Top","Bottom"]}},p=(t,e,s)=>t.hasOwnProperty(e)?t[e]:s;function f(e){if(!t.isValidElement(e))return e;const{type:s,props:i}=e,{resizerChildren:r,type:o,localStorageKey:a}=this.props,h=p(this.props,"resizerClassName","react-rsz-grid-default-resizer"),c=this.m;if(s===n)return t.cloneElement(e,{index:c,onDrag:this.d,onStart:this.p,type:o,className:p(i,"className",h)},p(i,"children",r));const l=this.state[c],m={style:i.style?Object.assign({},i.style,l):l,ref:this.f(c)};return s===g&&(m.resizerClassName=p(i,"resizerClassName",h),m.resizerChildren=p(i,"resizerChildren",r),m.localStorageKey=p(i,"localStorageKey",a+"_"+c)),this.m++,t.cloneElement(e,m)}class g extends t.Component{constructor(...t){super(...t),this.state=c.s(this.props.localStorageKey),this.g=[],this.p=(t=>{const e=this.u=+t.currentTarget.dataset.resizerIndex,s=this.g[e-1],i=this.g[e];if(this.y=!(!s||!i)){const{r:e}=d[this.props.type];this.D=t[e],this.S(s,1),this.S(i,2);const r=this._curD1+this._curD2;this._maxD1||(this._maxD1=r-this._minD2),this._maxD2||(this._maxD2=r-this._minD1),this.N()}else"production"!==process.env.NODE_ENV&&console.warn("Resizer must be between other components. It is inactive during this drag.")}),this.d=(t=>{if(this.y){const{r:e,a:s}=d[this.props.type],i=t[e]-this.D;this.setState(t=>this.z(t,s,i))}}),this.f=l(t=>e=>{this.g[t]=r.findDOMNode(e),"production"===process.env.NODE_ENV||!this.g[t]||this.g[t]instanceof Element||__JEST__||console.error("af-react-grid: can't find ref for component:",e,"ReactDOM.findDomNode must return element for all children of Container.")}),this.w=((t,{type:e})=>{const{a:s,o:i}=d[e];return this.g.reduce((e,r,o)=>(r&&(e[o]=Object.assign({},t[o],{[s]:r[i],flexBasis:"auto",boxSizing:"border-box"})),e),{})}),this.N=(()=>this.setState(this.w))}S(t,e){const{type:s}=this.props,{c:i,h:r,o,n,l:a}=d[s],h=getComputedStyle(t),c=(this["_curD"+e]=t[o])-t[n]+a.reduce((t,e)=>t+parseFloat(h[`padding${e}`]),0);this["_minD"+e]=c+(parseFloat(h[r])||0),this["_maxD"+e]=parseFloat(h[i])||0}b(){const{localStorageKey:t}=this.props;t&&c.e(t,this.state)}z(t,e,s){const i=this.u;return{[i-1]:Object.assign({},t[i-1],{[e]:m(this._curD1+s,this._minD1,this._maxD1)}),[i]:Object.assign({},t[i],{[e]:m(this._curD2-s,this._minD2,this._maxD2)})}}render(){const{type:s,className:i,children:r,style:n}=this.props;return this.m=0,t.createElement("div",{style:n,className:o(i,d[s].i),children:e.map(r,f,this)})}componentDidMount(){this._st=setTimeout(this.N,50),window.addEventListener("resize",this.N)}componentDidUpdate(){this.b();const t=this.g.length-this.m;t&&this.g.splice(this.m,t)}componentWillUnmount(){window.removeEventListener("resize",this.N),clearTimeout(this._st)}}g.propTypes={type:s.oneOf(["row","col"]),className:s.string,style:s.object,children:(s,i)=>{if(e.toArray(s[i]).some(e=>t.isValidElement(e)&&(e.type===t.Fragment||Array.isArray(e))))throw new Error("Fragments and arrays are not allowed inside Container")},resizerChildren:s.node,resizerClassName:s.string,localStorageKey:s.string},g.defaultProps={type:"row"};export{n as Resizer,g as Container};

dist/bundle.js

@@ -1,1 +0,1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=e(require("prop-types")),i=require("react-draggable"),o=e(require("react-dom")),s=e(require("classnames")),a=r.memo(function(e){var t=e.className,n=e.type,o=e.style,s=e.index,a=e.onDrag,c=e.onStart,u=e.disabled,l=e.children;return r.createElement(i.DraggableCore,{onStart:c,onDrag:a,disabled:u},r.createElement("div",{"data-resizer-index":s,"data-resizer-type":n,className:t,style:o,children:l}))});function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function l(e,t,r){return t&&u(e.prototype,t),r&&u(e,r),e}function f(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}function d(e){return(d=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function v(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?p(e):t}a.propTypes={type:n.oneOf(["row","col"]),onDrag:n.func,onStart:n.func,index:n.number,disabled:n.bool,children:n.node,style:n.object,className:n.string};var b=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Object.create(null);return function(r){return t[r]||(t[r]=e(r))}},g=function(e,t,r){return e>r?r:e<t?t:e},y={row:{e:"react-rsz-grid-row",t:"pageX",r:"offsetWidth",n:"clientWidth",i:"width",o:"minWidth",s:"maxWidth",a:["Left","Right"]},col:{e:"react-rsz-grid-col",t:"pageY",r:"offsetHeight",n:"clientHeight",i:"height",o:"minHeight",s:"maxHeight",a:["Top","Bottom"]}},w=function(e,t,r){return e.hasOwnProperty(t)?e[t]:r};function D(e){if(!r.isValidElement(e))return e;var t=e.type,n=e.props,i=this.props,o=i.resizerChildren,s=i.type,c=w(this.props,"resizerClassName","react-rsz-grid-default-resizer");if(t===a)return r.cloneElement(e,{index:this.c,onDrag:this.u,onStart:this.l,type:s,className:w(n,"className",c)},w(n,"children",o));var u=this.state[this.c],l={style:n.style?Object.assign({},n.style,u):u,ref:this.f(this.c++)};return t===z&&(l.resizerClassName=w(n,"resizerClassName",c),l.resizerChildren=w(n,"resizerChildren",o)),r.cloneElement(e,l)}var z=function(e){function n(){var e,t;c(this,n);for(var r=arguments.length,i=new Array(r),s=0;s<r;s++)i[s]=arguments[s];return(t=v(this,(e=d(n)).call.apply(e,[this].concat(i)))).state={},t.h=[],t.l=function(e){var r=t.d=+e.currentTarget.dataset.resizerIndex,n=t.h[r-1],i=t.h[r];if(t.m=!(!n||!i)){var o=y[t.props.type].t;t.p=e[o],t.v(n,1),t.v(i,2);var s=t._curD1+t._curD2;t._maxD1||(t._maxD1=s-t._minD2),t._maxD2||(t._maxD2=s-t._minD1),t.b()}else"production"!==process.env.NODE_ENV&&console.warn("Resizer must be between other components. It is inactive during this drag.")},t.u=function(e){if(t.m){var r=y[t.props.type],n=r.t,i=r.i,o=e[n]-t.p;t.setState(function(e){return t.g(e,i,o)})}},t.f=b(function(e){return function(r){t.h[e]=o.findDOMNode(r),"production"===process.env.NODE_ENV||!t.h[e]||t.h[e]instanceof Element||__JEST__||console.error("af-react-grid: can't find ref for component:",r,"ReactDOM.findDomNode must return element for all children of Container.")}}),t.y=function(e,r){var n=r.type,i=y[n],o=i.i,s=i.r;return t.h.reduce(function(t,r,n){var i;r&&(t[n]=Object.assign({},e[n],(f(i={},o,r[s]),f(i,"flexBasis","auto"),f(i,"boxSizing","border-box"),i)));return t},{})},t.b=function(){return t.setState(t.y)},t}return h(n,r.Component),l(n,[{key:"_setInitialDimensionsCache",value:function(e,t){var r=this.props.type,n=y[r],i=n.s,o=n.o,s=n.r,a=n.n,c=n.a,u=getComputedStyle(e),l=(this["_curD"+t]=e[s])-e[a]+c.reduce(function(e,t){return e+parseFloat(u["padding".concat(t)])},0);this["_minD"+t]=l+(parseFloat(u[o])||0),this["_maxD"+t]=parseFloat(u[i])||0}},{key:"_getChangedState",value:function(e,t,r){var n,i=this.d;return f(n={},i-1,Object.assign({},e[i-1],f({},t,g(this._curD1+r,this._minD1,this._maxD1)))),f(n,i,Object.assign({},e[i],f({},t,g(this._curD2-r,this._minD2,this._maxD2)))),n}},{key:"render",value:function(){var e=this.props,n=e.type,i=e.className,o=e.children,a=e.style;return this.c=0,r.createElement("div",{style:a,className:s(i,y[n].e),children:t.Children.map(o,D,this)})}},{key:"componentDidMount",value:function(){this._st=setTimeout(this.b,50),window.addEventListener("resize",this.b)}},{key:"componentDidUpdate",value:function(){var e=this.h.length-this.c;e&&this.h.splice(this.c,e)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.b),clearTimeout(this._st)}}]),n}();z.propTypes={type:n.oneOf(["row","col"]),className:n.string,style:n.object,children:function(e,n){if(t.Children.toArray(e[n]).some(function(e){return r.isValidElement(e)&&(e.type===r.Fragment||Array.isArray(e))}))throw new Error("Fragments and arrays are not allowed inside Container")},resizerChildren:n.node,resizerClassName:n.string},z.defaultProps={type:"row"},exports.Resizer=a,exports.Container=z;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=e(require("prop-types")),i=require("react-draggable"),o=e(require("react-dom")),a=e(require("classnames")),s=r.memo(function(e){var t=e.className,n=e.type,o=e.style,a=e.index,s=e.onDrag,c=e.onStart,u=e.disabled,l=e.children;return r.createElement(i.DraggableCore,{onStart:c,onDrag:s,disabled:u},r.createElement("div",{"data-resizer-index":a,"data-resizer-type":n,className:t,style:o,children:l}))});function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function l(e,t,r){return t&&u(e.prototype,t),r&&u(e,r),e}function f(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}function d(e){return(d=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function v(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?p(e):t}s.propTypes={type:n.oneOf(["row","col"]),onDrag:n.func,onStart:n.func,index:n.number,disabled:n.bool,children:n.node,style:n.object,className:n.string};var y="aFrCtGrD",b=function(){function e(){var t=this;c(this,e);var r=localStorage.getItem(y);this.e=r?JSON.parse(r):{},window.addEventListener("beforeunload",function(){Object.keys(t.e).length>1&&localStorage.setItem(y,JSON.stringify(t.e))})}return l(e,[{key:"addStylesInfo",value:function(e,t){this.e[e]=t}},{key:"getStylesInfo",value:function(e){return this.e[e]||{}}}]),e}(),g=new b,w=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Object.create(null);return function(r){return t[r]||(t[r]=e(r))}},D=function(e,t,r){return e>r?r:e<t?t:e},S={row:{t:"react-rsz-grid-row",r:"pageX",n:"offsetWidth",i:"clientWidth",o:"width",a:"minWidth",s:"maxWidth",c:["Left","Right"]},col:{t:"react-rsz-grid-col",r:"pageY",n:"offsetHeight",i:"clientHeight",o:"height",a:"minHeight",s:"maxHeight",c:["Top","Bottom"]}},z=function(e,t,r){return e.hasOwnProperty(t)?e[t]:r};function N(e){if(!r.isValidElement(e))return e;var t=e.type,n=e.props,i=this.props,o=i.resizerChildren,a=i.type,c=i.localStorageKey,u=z(this.props,"resizerClassName","react-rsz-grid-default-resizer"),l=this.u;if(t===s)return r.cloneElement(e,{index:l,onDrag:this.l,onStart:this.f,type:a,className:z(n,"className",u)},z(n,"children",o));var f=this.state[l],h={style:n.style?Object.assign({},n.style,f):f,ref:this.h(l)};return t===O&&(h.resizerClassName=z(n,"resizerClassName",u),h.resizerChildren=z(n,"resizerChildren",o),h.localStorageKey=z(n,"localStorageKey",c+"_"+l)),this.u++,r.cloneElement(e,h)}var O=function(e){function n(){var e,t;c(this,n);for(var r=arguments.length,i=new Array(r),a=0;a<r;a++)i[a]=arguments[a];return(t=v(this,(e=d(n)).call.apply(e,[this].concat(i)))).state=g.d(t.props.localStorageKey),t.m=[],t.f=function(e){var r=t.p=+e.currentTarget.dataset.resizerIndex,n=t.m[r-1],i=t.m[r];if(t.v=!(!n||!i)){var o=S[t.props.type].r;t.y=e[o],t.b(n,1),t.b(i,2);var a=t._curD1+t._curD2;t._maxD1||(t._maxD1=a-t._minD2),t._maxD2||(t._maxD2=a-t._minD1),t.g()}else"production"!==process.env.NODE_ENV&&console.warn("Resizer must be between other components. It is inactive during this drag.")},t.l=function(e){if(t.v){var r=S[t.props.type],n=r.r,i=r.o,o=e[n]-t.y;t.setState(function(e){return t.w(e,i,o)})}},t.h=w(function(e){return function(r){t.m[e]=o.findDOMNode(r),"production"===process.env.NODE_ENV||!t.m[e]||t.m[e]instanceof Element||__JEST__||console.error("af-react-grid: can't find ref for component:",r,"ReactDOM.findDomNode must return element for all children of Container.")}}),t.D=function(e,r){var n=r.type,i=S[n],o=i.o,a=i.n;return t.m.reduce(function(t,r,n){var i;r&&(t[n]=Object.assign({},e[n],(f(i={},o,r[a]),f(i,"flexBasis","auto"),f(i,"boxSizing","border-box"),i)));return t},{})},t.g=function(){return t.setState(t.D)},t}return h(n,r.Component),l(n,[{key:"_setInitialDimensionsCache",value:function(e,t){var r=this.props.type,n=S[r],i=n.s,o=n.a,a=n.n,s=n.i,c=n.c,u=getComputedStyle(e),l=(this["_curD"+t]=e[a])-e[s]+c.reduce(function(e,t){return e+parseFloat(u["padding".concat(t)])},0);this["_minD"+t]=l+(parseFloat(u[o])||0),this["_maxD"+t]=parseFloat(u[i])||0}},{key:"sendToStateSaverIfNeeded",value:function(){var e=this.props.localStorageKey;e&&g.S(e,this.state)}},{key:"_getChangedState",value:function(e,t,r){var n,i=this.p;return f(n={},i-1,Object.assign({},e[i-1],f({},t,D(this._curD1+r,this._minD1,this._maxD1)))),f(n,i,Object.assign({},e[i],f({},t,D(this._curD2-r,this._minD2,this._maxD2)))),n}},{key:"render",value:function(){var e=this.props,n=e.type,i=e.className,o=e.children,s=e.style;return this.u=0,r.createElement("div",{style:s,className:a(i,S[n].t),children:t.Children.map(o,N,this)})}},{key:"componentDidMount",value:function(){this._st=setTimeout(this.g,50),window.addEventListener("resize",this.g)}},{key:"componentDidUpdate",value:function(){this.z();var e=this.m.length-this.u;e&&this.m.splice(this.u,e)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.g),clearTimeout(this._st)}}]),n}();O.propTypes={type:n.oneOf(["row","col"]),className:n.string,style:n.object,children:function(e,n){if(t.Children.toArray(e[n]).some(function(e){return r.isValidElement(e)&&(e.type===r.Fragment||Array.isArray(e))}))throw new Error("Fragments and arrays are not allowed inside Container")},resizerChildren:n.node,resizerClassName:n.string,localStorageKey:n.string},O.defaultProps={type:"row"},exports.Resizer=s,exports.Container=O;

example_src/Grid/index.js

@@ -30,3 +30,3 @@ import React from "react";
                 </div>
-                <Container style={{ height: "80vh" }}>
+                <Container localStorageKey="haha" style={{ height: "80vh" }}>
                     <Container resizerChildren={<span>Hello</span>} type="col">
@@ -33,0 +33,0 @@ <Resizer>This resizer is placed in wrong place, so it is useless</Resizer>

package.json

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

README.md

@@ -17,3 +17,3 @@ # af-react-grid
 
-<Containter type="row">
+<Containter localStorageKey="someGridName" type="row">
     <div>Child 1</div>
@@ -45,4 +45,6 @@ <Resizer />
 
-resizerClassName: ?string = "react-rsz-grid-default-resizer"
+resizerClassName: ?string = "react-rsz-grid-default-resizer",
 
+localStorageKey: ?string
+
 ```
@@ -68,2 +70,3 @@
 * Want to have a super-highly customized `Resizer`? `resizerChildren` prop allows you to render custom child elements, which could be easily styled;
+* `localStorageKey` prop is passed down to children with child index added, like `someGridName_0_2`, until overriden;
 
@@ -78,5 +81,5 @@
 ## TODO
-* localStorage integration
 * Support `React.Fragment` and `Array` children.
 * Add types
 * `findDomNode` refuse ( maybe? ) 
+* Add keyed children support

rollup.config.js

@@ -26,3 +26,7 @@ import resolve from "rollup-plugin-node-resolve";
     "_initPtrPageDist",
-    "_getSaveRef"
+    "_getSaveRef",
+    "StorageObject",
+    "addStylesInfo",
+    "getStylesInfo",
+    "sendToStateSaverIfNeeded"
 ].join( "|" ));
@@ -29,0 +33,0 @@

src/Container/index.js

@@ -6,2 +6,3 @@ import React, { Children } from "react";
 import Resizer from "../Resizer";
+import StateSaver from "./StateSaver";
 
@@ -31,4 +32,6 @@ import { memoizeOneNumericArg, clamp } from "../utils";
     }
-}
+};
 
+
+
 const getCorrectProperty = ( obj, prop, fallbackProp ) => obj.hasOwnProperty( prop ) ? obj[ prop ] : fallbackProp;
@@ -44,3 +47,3 @@
 
-    const { resizerChildren, type: curType } = this.props;
+    const { resizerChildren, type: curType, localStorageKey } = this.props;
 
@@ -50,5 +53,7 @@ /* If we just use defaultProps, resizerClassName will not be passed down to nested Containers proprly */
 
+    const curIndex = this._refsArrIterator;
+
     if( type === Resizer ){
         return React.cloneElement( el, {
-            index: this._refsArrIterator,
+            index: curIndex,
             onDrag: this.dragHandler,
@@ -61,7 +66,7 @@ onStart: this.dragStartHandler,
 
-    const calculatedElementStyle = this.state[ this._refsArrIterator ];
+    const calculatedElementStyle = this.state[ curIndex ];
 
     const passProps = {
         style: props.style ? { ...props.style, ...calculatedElementStyle } : calculatedElementStyle,
-        ref: this._getSaveRef( this._refsArrIterator++ )
+        ref: this._getSaveRef( curIndex )
     }
@@ -73,4 +78,7 @@
         passProps.resizerChildren = getCorrectProperty( props, "resizerChildren", resizerChildren );
+        passProps.localStorageKey = getCorrectProperty( props, "localStorageKey", localStorageKey + "_" + curIndex );
     }
 
+    this._refsArrIterator++;
+
     return React.cloneElement( el, passProps );
@@ -92,3 +100,4 @@ }
         resizerChildren:        PropTypes.node,
-        resizerClassName:       PropTypes.string
+        resizerClassName:       PropTypes.string,
+        localStorageKey:        PropTypes.string
     }
@@ -100,3 +109,3 @@
 
-    state = {}
+    state = StateSaver.getStylesInfo( this.props.localStorageKey );
 
@@ -145,2 +154,9 @@ /*
 
+    sendToStateSaverIfNeeded(){
+        const { localStorageKey } = this.props;
+        if( localStorageKey ){
+            StateSaver.addStylesInfo( localStorageKey, this.state );
+        }
+    }
+
     dragStartHandler = e => {
@@ -226,4 +242,2 @@
 
-    
-
     render(){
@@ -282,3 +296,5 @@
     componentDidUpdate(){
-        
+
+        this.sendToStateSaverIfNeeded();
+
         const diff = this.refsArr.length - this._refsArrIterator;
@@ -285,0 +301,0 @@

No alert changes

Improved metrics

Total package byte prevSize

206108

increased by1.68%

Number of package files

30

increased by3.45%

Lines of code

1420

increased by2.97%

Number of lines in readme file

82

increased by3.8%

No dependency changes