@devexpress/dx-react-core - npm Package Compare versions

Comparing version 1.7.2 to 1.8.0-beta.1

dist/dx-react-core.es.js

 /**
  * Bundle of @devexpress/dx-react-core
- * Generated: 2018-08-31
- * Version: 1.7.2
+ * Generated: 2018-09-07
+ * Version: 1.8.0-beta.1
  * License: https://js.devexpress.com/Licensing
@@ -1690,2 +1690,4 @@ */
 
+/* globals document:true */
+
 var styles = {
@@ -1695,3 +1697,3 @@ root: {
   },
-  triggers: {
+  triggersRoot: {
     position: 'absolute',
@@ -1707,3 +1709,3 @@ top: 0,
   },
-  expand: {
+  expandTrigger: {
     position: 'absolute',
@@ -1716,3 +1718,3 @@ top: 0,
   },
-  contract: {
+  contractTrigger: {
     position: 'absolute',
@@ -1723,5 +1725,7 @@ top: 0,
     width: '100%',
-    overflow: 'auto'
+    overflow: 'auto',
+    minHeight: '1px',
+    minWidth: '1px'
   },
-  contractTrigger: {
+  contractNotifier: {
     position: 'absolute',
@@ -1743,6 +1747,2 @@ top: 0,
 
-    _this.state = {
-      size: { width: 0, height: 0 }
-    };
-
     _this.setupListeners = _this.setupListeners.bind(_this);
@@ -1755,2 +1755,3 @@ return _this;
     value: function componentDidMount() {
+      this.createListeners();
       this.setupListeners();
@@ -1765,13 +1766,42 @@ }
 
-      this.contract.scrollTop = size.height;
-      this.contract.scrollLeft = size.width;
+      this.contractTrigger.scrollTop = size.height;
+      this.contractTrigger.scrollLeft = size.width;
 
-      this.expandTrigger.style.width = size.width + 1 + 'px';
-      this.expandTrigger.style.height = size.height + 1 + 'px';
-      this.expand.scrollTop = 1;
-      this.expand.scrollLeft = 1;
+      this.expandNotifier.style.width = size.width + 1 + 'px';
+      this.expandNotifier.style.height = size.height + 1 + 'px';
+      this.expandTrigger.scrollTop = 1;
+      this.expandTrigger.scrollLeft = 1;
 
-      this.setState({ size: size });
+      var onSizeChange = this.props.onSizeChange;
+
+      onSizeChange(size);
     }
   }, {
+    key: 'createListeners',
+    value: function createListeners() {
+      // eslint-disable-next-line react/no-find-dom-node
+      var rootNode = findDOMNode(this.root);
+
+      this.triggersRoot = document.createElement('div');
+      Object.assign(this.triggersRoot.style, styles.triggersRoot);
+      rootNode.appendChild(this.triggersRoot);
+
+      this.expandTrigger = document.createElement('div');
+      Object.assign(this.expandTrigger.style, styles.expandTrigger);
+      this.expandTrigger.addEventListener('scroll', this.setupListeners);
+      this.triggersRoot.appendChild(this.expandTrigger);
+
+      this.expandNotifier = document.createElement('div');
+      this.expandTrigger.appendChild(this.expandNotifier);
+
+      this.contractTrigger = document.createElement('div');
+      Object.assign(this.contractTrigger.style, styles.contractTrigger);
+      this.contractTrigger.addEventListener('scroll', this.setupListeners);
+      this.triggersRoot.appendChild(this.contractTrigger);
+
+      this.contractNotifier = document.createElement('div');
+      Object.assign(this.contractNotifier.style, styles.contractNotifier);
+      this.contractTrigger.appendChild(this.contractNotifier);
+    }
+  }, {
     key: 'render',
@@ -1781,8 +1811,7 @@ value: function render() {
 
-      var size = this.state.size;
       var _props = this.props,
+          onSizeChange = _props.onSizeChange,
           Container = _props.containerComponent,
-          children = _props.children,
           style = _props.style,
-          restProps = objectWithoutProperties(_props, ['containerComponent', 'children', 'style']);
+          restProps = objectWithoutProperties(_props, ['onSizeChange', 'containerComponent', 'style']);
 
@@ -1797,41 +1826,5 @@
         },
-        createElement(
-          Container,
-          _extends({
-            style: _extends({}, styles.root, style)
-          }, restProps),
-          children(size),
-          createElement(
-            'div',
-            { style: styles.triggers },
-            createElement(
-              'div',
-              {
-                ref: function ref(node$$1) {
-                  _this2.expand = node$$1;
-                },
-                style: styles.expand,
-                onScroll: this.setupListeners
-              },
-              createElement('div', {
-                ref: function ref(node$$1) {
-                  _this2.expandTrigger = node$$1;
-                }
-              })
-            ),
-            createElement(
-              'div',
-              {
-                ref: function ref(node$$1) {
-                  _this2.contract = node$$1;
-                },
-                style: styles.contract,
-                onScroll: this.setupListeners
-              },
-              createElement('div', {
-                style: styles.contractTrigger
-              })
-            )
-          )
-        )
+        createElement(Container, _extends({
+          style: _extends({}, styles.root, style)
+        }, restProps))
       );
@@ -1844,4 +1837,4 @@ }
 process.env.NODE_ENV !== "production" ? Sizer.propTypes = {
+  onSizeChange: func.isRequired,
   containerComponent: oneOfType([string, func]),
-  children: func.isRequired,
   style: object
@@ -1848,0 +1841,0 @@ } : void 0;

dist/dx-react-core.umd.js

 /**
  * Bundle of @devexpress/dx-react-core
- * Generated: 2018-08-31
- * Version: 1.7.2
+ * Generated: 2018-09-07
+ * Version: 1.8.0-beta.1
  * License: https://js.devexpress.com/Licensing
@@ -1693,2 +1693,4 @@ */
 
+/* globals document:true */
+
 var styles = {
@@ -1698,3 +1700,3 @@ root: {
   },
-  triggers: {
+  triggersRoot: {
     position: 'absolute',
@@ -1710,3 +1712,3 @@ top: 0,
   },
-  expand: {
+  expandTrigger: {
     position: 'absolute',
@@ -1719,3 +1721,3 @@ top: 0,
   },
-  contract: {
+  contractTrigger: {
     position: 'absolute',
@@ -1726,5 +1728,7 @@ top: 0,
     width: '100%',
-    overflow: 'auto'
+    overflow: 'auto',
+    minHeight: '1px',
+    minWidth: '1px'
   },
-  contractTrigger: {
+  contractNotifier: {
     position: 'absolute',
@@ -1746,6 +1750,2 @@ top: 0,
 
-    _this.state = {
-      size: { width: 0, height: 0 }
-    };
-
     _this.setupListeners = _this.setupListeners.bind(_this);
@@ -1758,2 +1758,3 @@ return _this;
     value: function componentDidMount() {
+      this.createListeners();
       this.setupListeners();
@@ -1768,13 +1769,42 @@ }
 
-      this.contract.scrollTop = size.height;
-      this.contract.scrollLeft = size.width;
+      this.contractTrigger.scrollTop = size.height;
+      this.contractTrigger.scrollLeft = size.width;
 
-      this.expandTrigger.style.width = size.width + 1 + 'px';
-      this.expandTrigger.style.height = size.height + 1 + 'px';
-      this.expand.scrollTop = 1;
-      this.expand.scrollLeft = 1;
+      this.expandNotifier.style.width = size.width + 1 + 'px';
+      this.expandNotifier.style.height = size.height + 1 + 'px';
+      this.expandTrigger.scrollTop = 1;
+      this.expandTrigger.scrollLeft = 1;
 
-      this.setState({ size: size });
+      var onSizeChange = this.props.onSizeChange;
+
+      onSizeChange(size);
     }
   }, {
+    key: 'createListeners',
+    value: function createListeners() {
+      // eslint-disable-next-line react/no-find-dom-node
+      var rootNode = reactDom.findDOMNode(this.root);
+
+      this.triggersRoot = document.createElement('div');
+      Object.assign(this.triggersRoot.style, styles.triggersRoot);
+      rootNode.appendChild(this.triggersRoot);
+
+      this.expandTrigger = document.createElement('div');
+      Object.assign(this.expandTrigger.style, styles.expandTrigger);
+      this.expandTrigger.addEventListener('scroll', this.setupListeners);
+      this.triggersRoot.appendChild(this.expandTrigger);
+
+      this.expandNotifier = document.createElement('div');
+      this.expandTrigger.appendChild(this.expandNotifier);
+
+      this.contractTrigger = document.createElement('div');
+      Object.assign(this.contractTrigger.style, styles.contractTrigger);
+      this.contractTrigger.addEventListener('scroll', this.setupListeners);
+      this.triggersRoot.appendChild(this.contractTrigger);
+
+      this.contractNotifier = document.createElement('div');
+      Object.assign(this.contractNotifier.style, styles.contractNotifier);
+      this.contractTrigger.appendChild(this.contractNotifier);
+    }
+  }, {
     key: 'render',
@@ -1784,8 +1814,7 @@ value: function render() {
 
-      var size = this.state.size;
       var _props = this.props,
+          onSizeChange = _props.onSizeChange,
           Container = _props.containerComponent,
-          children = _props.children,
           style = _props.style,
-          restProps = objectWithoutProperties(_props, ['containerComponent', 'children', 'style']);
+          restProps = objectWithoutProperties(_props, ['onSizeChange', 'containerComponent', 'style']);
 
@@ -1800,41 +1829,5 @@
         },
-        React.createElement(
-          Container,
-          _extends({
-            style: _extends({}, styles.root, style)
-          }, restProps),
-          children(size),
-          React.createElement(
-            'div',
-            { style: styles.triggers },
-            React.createElement(
-              'div',
-              {
-                ref: function ref(node$$1) {
-                  _this2.expand = node$$1;
-                },
-                style: styles.expand,
-                onScroll: this.setupListeners
-              },
-              React.createElement('div', {
-                ref: function ref(node$$1) {
-                  _this2.expandTrigger = node$$1;
-                }
-              })
-            ),
-            React.createElement(
-              'div',
-              {
-                ref: function ref(node$$1) {
-                  _this2.contract = node$$1;
-                },
-                style: styles.contract,
-                onScroll: this.setupListeners
-              },
-              React.createElement('div', {
-                style: styles.contractTrigger
-              })
-            )
-          )
-        )
+        React.createElement(Container, _extends({
+          style: _extends({}, styles.root, style)
+        }, restProps))
       );
@@ -1847,4 +1840,4 @@ }
 process.env.NODE_ENV !== "production" ? Sizer.propTypes = {
+  onSizeChange: PropTypes.func.isRequired,
   containerComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  children: PropTypes.func.isRequired,
   style: PropTypes.object
@@ -1851,0 +1844,0 @@ } : void 0;

package.json

 {
   "name": "@devexpress/dx-react-core",
-  "version": "1.7.2",
+  "version": "1.8.0-beta.1",
   "description": "Core library for DevExtreme React Components",
@@ -43,3 +43,3 @@ "author": {
   "devDependencies": {
-    "@devexpress/dx-testing": "^1.7.2",
+    "@devexpress/dx-testing": "^1.8.0-beta.1",
     "babel-core": "^6.26.3",
@@ -73,3 +73,3 @@ "babel-jest": "^23.4.2",
   "dependencies": {
-    "@devexpress/dx-core": "^1.7.2",
+    "@devexpress/dx-core": "^1.8.0-beta.1",
     "prop-types": "^15.6.2"
@@ -81,3 +81,3 @@ },
   },
-  "gitHead": "729b6fc94cb43b3ef1537cb4775d390261882a87"
+  "gitHead": "8fb5dc5f32b4a02a8922917f07398b48902ecc5c"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

254886

increased by1.16%

Worsened metrics

Lines of code

3264

decreased by-0.79%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@devexpress/dx-core@^1.8.0-beta.1