dyna-animation - npm Package Compare versions

Comparing version 1.4.3 to 1.5.1

dist/DynaAnimationVerticalContainer.d.ts

@@ -6,2 +6,3 @@ import * as React from "react";
     animationEnabled?: boolean;
+    autoRefresh?: boolean;
     show: boolean;
@@ -14,2 +15,3 @@ showDuration?: number;
     static defaultProps: IDynaAnimationVerticalContainerProps;
+    private observer;
     private readonly baseClassName;
@@ -20,6 +22,7 @@ refs: {
     };
-    refresh(): void;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     componentWillReceiveProps(nextProps: IDynaAnimationVerticalContainerProps): void;
     private className;
+    refresh(): void;
     private show;
@@ -26,0 +29,0 @@ private setContainerHeight;

dist/index.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"));
+		module.exports = factory(require("react"), require("dyna-ui-dom-observer"));
 	else if(typeof define === 'function' && define.amd)
-		define("dyna-animation", ["react"], factory);
+		define("dyna-animation", ["react", "dyna-ui-dom-observer"], factory);
 	else if(typeof exports === 'object')
-		exports["dyna-animation"] = factory(require("react"));
+		exports["dyna-animation"] = factory(require("react"), require("dyna-ui-dom-observer"));
 	else
-		root["dyna-animation"] = factory(root["react"]);
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
+		root["dyna-animation"] = factory(root["react"], root["dyna-ui-dom-observer"]);
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_12__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -878,3 +878,4 @@ /******/ 	// The module cache
 var React = __webpack_require__(0);
-__webpack_require__(12);
+var dyna_ui_dom_observer_1 = __webpack_require__(12);
+__webpack_require__(13);
 var DynaAnimationVerticalContainer = /** @class */ (function (_super) {
@@ -887,11 +888,18 @@ __extends(DynaAnimationVerticalContainer, _super);
     }
-    DynaAnimationVerticalContainer.prototype.refresh = function () {
-        var show = this.props.show;
-        if (!show)
-            return;
-        this.show(true);
-    };
     DynaAnimationVerticalContainer.prototype.componentDidMount = function () {
+        var autoRefresh = this.props.autoRefresh;
         this.show(this.props.show, false);
+        if (autoRefresh) {
+            this.observer = new dyna_ui_dom_observer_1.DynaDomObserver({
+                rootNode: this.refs.container,
+                onChange: this.refresh.bind(this),
+            });
+        }
     };
+    DynaAnimationVerticalContainer.prototype.componentWillUnmount = function () {
+        var autoRefresh = this.props.autoRefresh;
+        if (autoRefresh) {
+            this.observer.dispose();
+        }
+    };
     DynaAnimationVerticalContainer.prototype.componentWillReceiveProps = function (nextProps) {
@@ -906,2 +914,8 @@ if (nextProps.show !== this.props.show) {
     };
+    DynaAnimationVerticalContainer.prototype.refresh = function () {
+        var show = this.props.show;
+        if (!show)
+            return;
+        this.show(true);
+    };
     DynaAnimationVerticalContainer.prototype.show = function (show, animate) {
@@ -949,2 +963,3 @@ if (animate === void 0) { animate = true; }
         animationEnabled: true,
+        autoRefresh: true,
         show: false,
@@ -962,2 +977,8 @@ showDuration: 250,
 /* 12 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_12__;
+
+/***/ }),
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -968,3 +989,3 @@
 // load the styles
-var content = __webpack_require__(13);
+var content = __webpack_require__(14);
 if(typeof content === 'string') content = [[module.i, content, '']];
@@ -994,3 +1015,3 @@ // Prepare cssTransformation
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -997,0 +1018,0 @@

package.json

 {
   "name": "dyna-animation",
-  "version": "1.4.3",
+  "version": "1.5.1",
   "description": "Animations with react",
@@ -34,2 +34,3 @@ "repository": {
   "dependencies": {
+    "dyna-ui-dom-observer": "^1.0.2",
     "react": "^16.4.0",
@@ -36,0 +37,0 @@ "react-dom": "^16.4.0"

README.md

@@ -113,4 +113,5 @@ # About
 
-If the content of the children is modified and the height is changed, the `DynaAnimationVerticalContainer` offers the `refresh()` method to adjust the new height (with animation again).
-_In future this will be supported when `element resize event` proposal comes to life._ 
+If the content of the children is modified and the height is changed this is detected and applied instantly. This is done due to prop `autoRefresh: true`.
+ 
+Alternative you can turn it to false and call the `refresh()` method to refresh the new height according the children height.
 
@@ -117,0 +118,0 @@ ## Example

No alert changes

Improved metrics

Total package byte prevSize

114106

increased by3.34%

Number of package files

57

increased by3.64%

Lines of code

2076

increased by4.48%

Number of lines in readme file

143

increased by0.7%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addeddyna-ui-dom-observer@^1.0.2

• + Addeddyna-ui-dom-observer@1.0.2(transitive)

• + Addedlodash.debounce@4.0.8(transitive)