af-react-grid - npm Package Compare versions

Comparing version 1.0.9 to 1.0.11

dist/bundle.esm.js

@@ -1,150 +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: h, disabled: a, children: c}) => t.createElement(e, {
-    onStart: h,
-    onDrag: n,
-    disabled: a
-}, 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 h = (t, s = Object.create(null)) => i => s[i] || (s[i] = t(i)), a = (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",
-        h: [ "Left", "Right" ]
-    },
-    col: {
-        t: "react-rsz-grid-col",
-        s: "pageY",
-        i: "offsetHeight",
-        e: "clientHeight",
-        r: "height",
-        o: "minHeight",
-        n: "maxHeight",
-        h: [ "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, h = m(this.props, "resizerClassName", "react-rsz-grid-default-resizer");
-    if (i === n) return t.cloneElement(s, {
-        index: this.a,
-        onDrag: this.c,
-        onStart: this.m,
-        type: o,
-        className: m(e, "className", h)
-    }, m(e, "children", r));
-    const a = this.state[this.a], c = {
-        style: e.style ? Object.assign({}, e.style, a) : a,
-        ref: this.l(this.a++)
-    };
-    return i === d && (c.resizerClassName = m(e, "resizerClassName", h), 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.g = t[s], this.u(i, 1), this.u(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.g;
-                this.setState(t => this.y(t, i, e));
-            }
-        }), this.l = h(t => s => {
-            this.d[t] = r.findDOMNode(s);
-        }), this.z = ((t, {type: s}) => {
-            const {r: i, i: e} = c[s];
-            return this.d.reduce((s, r, o) => (s[o] = Object.assign({}, t[o], {
-                [i]: r[e],
-                flexBasis: "auto",
-                boxSizing: "border-box"
-            }), s), {});
-        }), this.D = (() => this.setState(this.z));
-    }
-    u(t, s) {
-        const {type: i} = this.props, {n: e, o: r, i: o, e: n, h} = c[i], a = getComputedStyle(t), m = (this["_curD" + s] = t[o]) - t[n] + h.reduce((t, s) => t + parseFloat(a[`padding${s}`]), 0);
-        this["_minD" + s] = m + (parseFloat(a[r]) || 0), this["_maxD" + s] = parseFloat(a[e]) || 0;
-    }
-    y(t, s, i) {
-        const e = this.p;
-        return {
-            [e - 1]: Object.assign({}, t[e - 1], {
-                [s]: a(this._curD1 + i, this._minD1, this._maxD1)
-            }),
-            [e]: Object.assign({}, t[e], {
-                [s]: a(this._curD2 - i, this._minD2, this._maxD2)
-            })
-        };
-    }
-    render() {
-        const {type: i, className: e, children: r, style: n} = this.props;
-        return this.a = 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.a;
-        t && this.d.splice(this.a, 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 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};

dist/bundle.js

@@ -1,238 +0,1 @@
-"use strict";
-
-function _interopDefault(e) {
-    return e && "object" == typeof e && "default" in e ? e.default : e;
-}
-
-Object.defineProperty(exports, "__esModule", {
-    value: !0
-});
-
-var React = require("react"), React__default = _interopDefault(React), PropTypes = _interopDefault(require("prop-types")), reactDraggable = require("react-draggable"), ReactDOM = _interopDefault(require("react-dom")), cn = _interopDefault(require("classnames")), Resizer = React__default.memo(function(e) {
-    var t = e.className, r = e.type, n = e.style, i = e.index, o = e.onDrag, s = e.onStart, a = e.disabled, c = e.children;
-    return React__default.createElement(reactDraggable.DraggableCore, {
-        onStart: s,
-        onDrag: o,
-        disabled: a
-    }, React__default.createElement("div", {
-        "data-resizer-index": i,
-        "data-resizer-type": r,
-        className: t,
-        style: n,
-        children: c
-    }));
-});
-
-function _classCallCheck(e, t) {
-    if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
-}
-
-function _defineProperties(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 _createClass(e, t, r) {
-    return t && _defineProperties(e.prototype, t), r && _defineProperties(e, r), e;
-}
-
-function _defineProperty(e, t, r) {
-    return t in e ? Object.defineProperty(e, t, {
-        value: r,
-        enumerable: !0,
-        configurable: !0,
-        writable: !0
-    }) : e[t] = r, e;
-}
-
-function _inherits(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 && _setPrototypeOf(e, t);
-}
-
-function _getPrototypeOf(e) {
-    return (_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function(e) {
-        return e.__proto__ || Object.getPrototypeOf(e);
-    })(e);
-}
-
-function _setPrototypeOf(e, t) {
-    return (_setPrototypeOf = Object.setPrototypeOf || function(e, t) {
-        return e.__proto__ = t, e;
-    })(e, t);
-}
-
-function _assertThisInitialized(e) {
-    if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return e;
-}
-
-function _possibleConstructorReturn(e, t) {
-    return !t || "object" != typeof t && "function" != typeof t ? _assertThisInitialized(e) : t;
-}
-
-Resizer.propTypes = {
-    type: PropTypes.oneOf([ "row", "col" ]),
-    onDrag: PropTypes.func,
-    onStart: PropTypes.func,
-    index: PropTypes.number,
-    disabled: PropTypes.bool,
-    children: PropTypes.node,
-    style: PropTypes.object,
-    className: PropTypes.string
-};
-
-var memoizeOneNumericArg = 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));
-    };
-}, clamp = function(e, t, r) {
-    return e > r ? r : e < t ? t : e;
-}, ByType = {
-    row: {
-        colClassName: "react-rsz-grid-row",
-        cursorPropName: "pageX",
-        offsetDim: "offsetWidth",
-        clientDim: "clientWidth",
-        cssSizeProp: "width",
-        minDim: "minWidth",
-        maxDim: "maxWidth",
-        minProps: [ "Left", "Right" ]
-    },
-    col: {
-        colClassName: "react-rsz-grid-col",
-        cursorPropName: "pageY",
-        offsetDim: "offsetHeight",
-        clientDim: "clientHeight",
-        cssSizeProp: "height",
-        minDim: "minHeight",
-        maxDim: "maxHeight",
-        minProps: [ "Top", "Bottom" ]
-    }
-}, getCorrectProperty = function(e, t, r) {
-    return e.hasOwnProperty(t) ? e[t] : r;
-};
-
-function childrenMapper(e) {
-    if (!React__default.isValidElement(e)) return e;
-    var t = e.type, r = e.props, n = this.props, i = n.resizerChildren, o = n.type, s = getCorrectProperty(this.props, "resizerClassName", "react-rsz-grid-default-resizer");
-    if (t === Resizer) return React__default.cloneElement(e, {
-        index: this._refsArrIterator,
-        onDrag: this.dragHandler,
-        onStart: this.dragStartHandler,
-        type: o,
-        className: getCorrectProperty(r, "className", s)
-    }, getCorrectProperty(r, "children", i));
-    var a = this.state[this._refsArrIterator], c = {
-        style: r.style ? Object.assign({}, r.style, a) : a,
-        ref: this._getSaveRef(this._refsArrIterator++)
-    };
-    return t === Container && (c.resizerClassName = getCorrectProperty(r, "resizerClassName", s), 
-    c.resizerChildren = getCorrectProperty(r, "resizerChildren", i)), React__default.cloneElement(e, c);
-}
-
-var Container = function(e) {
-    function t() {
-        var e, r;
-        _classCallCheck(this, t);
-        for (var n = arguments.length, i = new Array(n), o = 0; o < n; o++) i[o] = arguments[o];
-        return (r = _possibleConstructorReturn(this, (e = _getPrototypeOf(t)).call.apply(e, [ this ].concat(i)))).state = {}, 
-        r.refsArr = [], r.dragStartHandler = function(e) {
-            var t = r._curRszIndex = +e.currentTarget.dataset.resizerIndex, n = r.refsArr[t - 1], i = r.refsArr[t];
-            if (r._canDrag = !(!n || !i)) {
-                var o = ByType[r.props.type].cursorPropName;
-                r._initPtrPageDist = e[o], r._setInitialDimensionsCache(n, 1), r._setInitialDimensionsCache(i, 2);
-                var s = r._curD1 + r._curD2;
-                r._maxD1 || (r._maxD1 = s - r._minD2), r._maxD2 || (r._maxD2 = s - r._minD1), r.setExactDimensions();
-            } else "production" !== process.env.NODE_ENV && console.warn("Resizer must be between other components. It is inactive during this drag.");
-        }, r.dragHandler = function(e) {
-            if (r._canDrag) {
-                var t = ByType[r.props.type], n = t.cursorPropName, i = t.cssSizeProp, o = e[n] - r._initPtrPageDist;
-                r.setState(function(e) {
-                    return r._getChangedState(e, i, o);
-                });
-            }
-        }, r._getSaveRef = memoizeOneNumericArg(function(e) {
-            return function(t) {
-                r.refsArr[e] = ReactDOM.findDOMNode(t);
-            };
-        }), r._dimensionsStateModifier = function(e, t) {
-            var n = t.type, i = ByType[n], o = i.cssSizeProp, s = i.offsetDim;
-            return r.refsArr.reduce(function(t, r, n) {
-                var i;
-                return t[n] = Object.assign({}, e[n], (_defineProperty(i = {}, o, r[s]), _defineProperty(i, "flexBasis", "auto"), 
-                _defineProperty(i, "boxSizing", "border-box"), i)), t;
-            }, {});
-        }, r.setExactDimensions = function() {
-            return r.setState(r._dimensionsStateModifier);
-        }, r;
-    }
-    return _inherits(t, React__default.Component), _createClass(t, [ {
-        key: "_setInitialDimensionsCache",
-        value: function(e, t) {
-            var r = this.props.type, n = ByType[r], i = n.maxDim, o = n.minDim, s = n.offsetDim, a = n.clientDim, c = n.minProps, p = getComputedStyle(e), l = (this["_curD" + t] = e[s]) - e[a] + c.reduce(function(e, t) {
-                return e + parseFloat(p["padding".concat(t)]);
-            }, 0);
-            this["_minD" + t] = l + (parseFloat(p[o]) || 0), this["_maxD" + t] = parseFloat(p[i]) || 0;
-        }
-    }, {
-        key: "_getChangedState",
-        value: function(e, t, r) {
-            var n, i = this._curRszIndex;
-            return _defineProperty(n = {}, i - 1, Object.assign({}, e[i - 1], _defineProperty({}, t, clamp(this._curD1 + r, this._minD1, this._maxD1)))), 
-            _defineProperty(n, i, Object.assign({}, e[i], _defineProperty({}, t, clamp(this._curD2 - r, this._minD2, this._maxD2)))), 
-            n;
-        }
-    }, {
-        key: "render",
-        value: function() {
-            var e = this.props, t = e.type, r = e.className, n = e.children, i = e.style;
-            return this._refsArrIterator = 0, React__default.createElement("div", {
-                style: i,
-                className: cn(r, ByType[t].colClassName),
-                children: React.Children.map(n, childrenMapper, this)
-            });
-        }
-    }, {
-        key: "componentDidMount",
-        value: function() {
-            this._st = setTimeout(this.setExactDimensions, 50), window.addEventListener("resize", this.setExactDimensions);
-        }
-    }, {
-        key: "componentDidUpdate",
-        value: function() {
-            var e = this.refsArr.length - this._refsArrIterator;
-            e && this.refsArr.splice(this._refsArrIterator, e);
-        }
-    }, {
-        key: "componentWillUnmount",
-        value: function() {
-            window.removeEventListener("resize", this.setExactDimensions), clearTimeout(this._st);
-        }
-    } ]), t;
-}();
-
-Container.propTypes = {
-    type: PropTypes.oneOf([ "row", "col" ]),
-    className: PropTypes.string,
-    style: PropTypes.object,
-    children: function(e, t) {
-        if (React.Children.toArray(e[t]).some(function(e) {
-            return React__default.isValidElement(e) && (e.type === React__default.Fragment || Array.isArray(e));
-        })) throw new Error("Fragments and arrays are not allowed inside Container");
-    },
-    resizerChildren: PropTypes.node,
-    resizerClassName: PropTypes.string
-}, Container.defaultProps = {
-    type: "row"
-}, exports.Resizer = Resizer, exports.Container = Container;
+"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;

jest.config.js

@@ -16,3 +16,6 @@ module.exports = {
     "/node_modules/"
-  ]
+  ],
+  globals: {
+    __JEST__: true
+  }
 };

package.json

 {
   "name": "af-react-grid",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "sideEffects": [
@@ -9,2 +9,9 @@ "*.css"
   "module": "dist/bundle.esm.js",
+  "husky": {
+    "hooks": {
+      "pre-commit": "node scripts/commit.js pre",
+      "post-commit": "node scripts/commit.js post",
+      "pre-push": "yarn test"
+    }
+  },
   "repository": {
@@ -30,3 +37,7 @@ "type": "git",
     "live": "webpack-dev-server --mode=development --config webpack.config.js --open",
-    "build": "rollup --config rollup.config.js && webpack --progress --mode=production --config webpack.config.js"
+    "build:library": "rollup --config rollup.config.js",
+    "build:examples": "webpack --progress --mode=production --config webpack.config.js",
+    "build": "npm-run-all -s build:library build:examples",
+    "git:add:build": "git add dist/ example_dist/",
+    "git:amend": "git commit --amend -C HEAD --no-verify"
   },
@@ -58,6 +69,9 @@ "dependencies": {
     "css-loader": "^1.0.0",
+    "fs": "^0.0.1-security",
     "html-webpack-plugin": "^3.2.0",
+    "husky": "^1.1.2",
     "jest": "^23.6.0",
     "jest-mock-console": "^0.4.0",
     "mini-css-extract-plugin": "^0.4.4",
+    "npm-run-all": "^4.1.3",
     "path": "^0.12.7",
@@ -64,0 +78,0 @@ "react-test-renderer": "^16.6.0",

README.md

@@ -60,7 +60,11 @@ # af-react-grid
 
-## Tooltips
+## Features
+* Very small, exported as es modules (own code 3.5kb + react + react-dom + react-draggable + classNames)
 * Resizers are also given `data-resizer-index` and `data-resizer-type`, so their styling could be customized easily;
-* Want to have a super-highly customized `Resizer`? `resizerChildren` prop allows you to render custom child elements, which could be easily styled;
 * `resizerChildren` and `resizerClassName` props are passed deep to all nested `Container`s, so you want to declare these props only on root `Container`. Of course they may be overriden anywhere;
 * `maxHeight`, `minHeight`, `maxWidth`, `minWidth` are considered even if not declared inline, because their values are taken from `getComputedStyle` before drag starts;
+* Want to have a super-highly customized `Resizer`? `resizerChildren` prop allows you to render custom child elements, which could be easily styled;
+
+
+## Tooltips
 * If tou want `overflow: auto` on containers, you must either set it globally( add overflow rule to default container class ), or individually;
@@ -75,1 +79,2 @@ * `React.Fragment` and `Array` children are not yet supported;
 * Add types
+* `findDomNode` refuse ( maybe? ) 

rollup.config.js

@@ -6,2 +6,33 @@ import resolve from "rollup-plugin-node-resolve";
 
+const MANGLE_REGEX = new RegExp([
+    "clientDim",
+    "offsetDim",
+    "minProps",
+    "maxDim",
+    "minDim",
+    "cursorPropName",
+    "cssSizeProp",
+    "colClassName",
+    "dragHandler",
+    "dragStartHandler",
+    "_canDrag",
+    "_refsArrIterator",
+    "_dimensionsStateModifier",
+    "_setInitialDimensionsCache",
+    "_getChangedState",
+    "setExactDimensions",
+    "refsArr",
+    "_curRszIndex",
+    "_initPtrPageDist",
+    "_getSaveRef"
+].join( "|" ));
+
+const RESOLVE_COMMON = resolve({
+    module: true,
+    jsnext: true,
+    main: true,
+    browser: true,
+    preferBuiltins: false
+});
+
 export default [{
@@ -25,9 +56,3 @@ input: "src/index.js",
         }),
-        resolve({
-            module: true,
-            jsnext: true,
-            main: true,
-            browser: true,
-            preferBuiltins: false
-        }),
+        RESOLVE_COMMON,
         babel({
@@ -46,5 +71,2 @@ babelrc: false,
             ecma: 8,
-            output: {
-                beautify: true
-            },
             mangle: {
@@ -54,24 +76,3 @@ module: true,
                     keep_quoted: true,
-                    regex: new RegExp([
-                        "clientDim",
-                        "offsetDim",
-                        "minProps",
-                        "maxDim",
-                        "minDim",
-                        "cursorPropName",
-                        "cssSizeProp",
-                        "colClassName",
-                        "dragHandler",
-                        "dragStartHandler",
-                        "_canDrag",
-                        "_refsArrIterator",
-                        "_dimensionsStateModifier",
-                        "_setInitialDimensionsCache",
-                        "_getChangedState",
-                        "setExactDimensions",
-                        "refsArr",
-                        "_curRszIndex",
-                        "_initPtrPageDist",
-                        "_getSaveRef"
-                    ].join( "|" ))
+                    regex: MANGLE_REGEX
                 }
@@ -95,9 +96,3 @@ }
     plugins: [
-        resolve({
-            module: true,
-            jsnext: true,
-            main: true,
-            browser: true,
-            preferBuiltins: false
-        }),
+        RESOLVE_COMMON,
         babel({
@@ -116,4 +111,8 @@ babelrc: false,
             ecma: 6,
-            output: {
-                beautify: true
+            mangle: {
+                module: true,
+                properties: {
+                    keep_quoted: true,
+                    regex: MANGLE_REGEX
+                }
             }
@@ -120,0 +119,0 @@ })

src/Container/index.js

@@ -201,3 +201,16 @@ import React, { Children } from "react";
     _getSaveRef = memoizeOneNumericArg( index => node => {
+
         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."
+                );
+            }
+        }
     });
@@ -233,12 +246,17 @@
         return this.refsArr.reduce(( res, ref, i ) => {
-            res[ i ] = {
-                ...curState[ i ],
-                [cssSizeProp]: ref[ offsetDim ],
-
-                /* If exact width/height is known, flexBasis may be erased */
-                flexBasis: "auto",
-
-                /* We must take boxSizing into account to render borders, paddings, scrollbars, etc. */
-                boxSizing: "border-box"
-            };
+            /*
+                ReactDOM.findDomNode may be null for some Container children
+            */
+            if( ref ){
+                res[ i ] = {
+                    ...curState[ i ],
+                    [cssSizeProp]: ref[ offsetDim ],
+    
+                    /* If exact width/height is known, flexBasis may be erased */
+                    flexBasis: "auto",
+    
+                    /* We must take boxSizing into account to render borders, paddings, scrollbars, etc. */
+                    boxSizing: "border-box"
+                };
+            }
             return res;
@@ -245,0 +263,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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 package files

29

increased by7.41%

Number of lines in readme file

79

increased by6.76%

Worsened metrics

Total package byte prevSize

202855

decreased by-1.17%

Dev dependency count

37

increased by8.82%

Lines of code

1381

decreased by-16.96%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

8

increased by100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes