@depay/react-dialog-stack - npm Package Compare versions

Comparing version 8.0.3 to 8.1.0

dist/esm/index.js

@@ -80,9 +80,21 @@ import React from 'react';
 
-    this.state = {
-      stack: [props.start],
-      animating: false,
-      animation: null,
-      direction: 'forward',
-      animationSpeed: 200,
-    };
+    if(props.stacked) {
+      const direction = typeof props.stacked === 'string' ? props.stacked : 'forward';
+      this.state = {
+        stack: [],
+        animating: false,
+        animation: null,
+        direction,
+        animationSpeed: 200,
+      };
+      setTimeout(()=>this.navigate(props.start, direction), 10);
+    } else {
+      this.state = {
+        stack: [props.start],
+        animating: false,
+        animation: null,
+        direction: 'forward',
+        animationSpeed: 200,
+      };
+    }
   }
@@ -94,3 +106,12 @@
 
-  navigate(route) {
+  hide(direction = 'forward') {
+    if(direction === 'backward') {
+      this.setState({ stack: [null, ...this.state.stack] });
+      setTimeout(()=>this.navigate('back'), 10);
+    } else {
+      this.navigate(null);
+    }
+  }
+
+  navigate(route, direction = 'forward') {
     if (this.state.stack.indexOf(route) > -1) {
@@ -106,3 +127,3 @@ return
       animating: true,
-      direction: 'forward',
+      direction,
       animation: setTimeout(
@@ -174,2 +195,4 @@ function () {
       }
+    } else if (this.state.animating && this.props.stacked && index === 0) {
+      return 'next'
     }
@@ -201,10 +224,10 @@ }
             className: ['ReactDialogStack'].concat(stackState).join(' '),
-            onClick: this.onClick.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 130}}
+            onClick: this.onClick.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 153}}
           
             , React.createElement(NavigateStackContext.Provider, {
-              value: { navigate: this.navigate.bind(this), set: this.set.bind(this) }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 135}}
+              value: { navigate: this.navigate.bind(this), set: this.set.bind(this), hide: this.hide.bind(this) }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 158}}
             
-              , React.createElement(CloseStackContext.Provider, { value: this.close.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 138}}
-                , React.createElement(StackContext.Provider, { value: this.state.stack, __self: this, __source: {fileName: _jsxFileName, lineNumber: 139}}
-                  , React.createElement('div', { className: "ReactDialogAnimation", __self: this, __source: {fileName: _jsxFileName, lineNumber: 140}}, this.props.dialogs[route])
+              , React.createElement(CloseStackContext.Provider, { value: this.close.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 161}}
+                , React.createElement(StackContext.Provider, { value: this.state.stack, __self: this, __source: {fileName: _jsxFileName, lineNumber: 162}}
+                  , React.createElement('div', { className: "ReactDialogAnimation", __self: this, __source: {fileName: _jsxFileName, lineNumber: 163}}, this.props.dialogs[route])
                 )
@@ -234,8 +257,8 @@ )
 
-  close() {
-    if (this.state.stack.length > 1) {
+  close(force) {
+    if (this.state.stack.length > 1 && !force) {
       this.unstack();
     } else {
-      this.setState({ stack: this.state.stack.slice(0, 1) });
       this.props.close();
+      setTimeout(()=>this.setState({ stack: this.state.stack.slice(0, 1) }), 400);
     }
@@ -251,5 +274,6 @@ }
         container: this.props.container,
-        background: this.props.background, __self: this, __source: {fileName: _jsxFileName, lineNumber: 176}}
+        animate: this.props.stacked ? false : true,
+        background: this.props.background, __self: this, __source: {fileName: _jsxFileName, lineNumber: 199}}
       
-        , React.createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 183}}, ReactDialogStackStyle())
+        , React.createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 207}}, ReactDialogStackStyle())
         , this.renderStack()
@@ -256,0 +280,0 @@ )

dist/umd/index.js

@@ -87,9 +87,21 @@ (function (global, factory) {
 
-      this.state = {
-        stack: [props.start],
-        animating: false,
-        animation: null,
-        direction: 'forward',
-        animationSpeed: 200,
-      };
+      if(props.stacked) {
+        const direction = typeof props.stacked === 'string' ? props.stacked : 'forward';
+        this.state = {
+          stack: [],
+          animating: false,
+          animation: null,
+          direction,
+          animationSpeed: 200,
+        };
+        setTimeout(()=>this.navigate(props.start, direction), 10);
+      } else {
+        this.state = {
+          stack: [props.start],
+          animating: false,
+          animation: null,
+          direction: 'forward',
+          animationSpeed: 200,
+        };
+      }
     }
@@ -101,3 +113,12 @@
 
-    navigate(route) {
+    hide(direction = 'forward') {
+      if(direction === 'backward') {
+        this.setState({ stack: [null, ...this.state.stack] });
+        setTimeout(()=>this.navigate('back'), 10);
+      } else {
+        this.navigate(null);
+      }
+    }
+
+    navigate(route, direction = 'forward') {
       if (this.state.stack.indexOf(route) > -1) {
@@ -113,3 +134,3 @@ return
         animating: true,
-        direction: 'forward',
+        direction,
         animation: setTimeout(
@@ -181,2 +202,4 @@ function () {
         }
+      } else if (this.state.animating && this.props.stacked && index === 0) {
+        return 'next'
       }
@@ -208,10 +231,10 @@ }
               className: ['ReactDialogStack'].concat(stackState).join(' '),
-              onClick: this.onClick.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 130}}
+              onClick: this.onClick.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 153}}
             
               , React__default['default'].createElement(NavigateStackContext.Provider, {
-                value: { navigate: this.navigate.bind(this), set: this.set.bind(this) }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 135}}
+                value: { navigate: this.navigate.bind(this), set: this.set.bind(this), hide: this.hide.bind(this) }, __self: this, __source: {fileName: _jsxFileName, lineNumber: 158}}
               
-                , React__default['default'].createElement(CloseStackContext.Provider, { value: this.close.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 138}}
-                  , React__default['default'].createElement(StackContext.Provider, { value: this.state.stack, __self: this, __source: {fileName: _jsxFileName, lineNumber: 139}}
-                    , React__default['default'].createElement('div', { className: "ReactDialogAnimation", __self: this, __source: {fileName: _jsxFileName, lineNumber: 140}}, this.props.dialogs[route])
+                , React__default['default'].createElement(CloseStackContext.Provider, { value: this.close.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 161}}
+                  , React__default['default'].createElement(StackContext.Provider, { value: this.state.stack, __self: this, __source: {fileName: _jsxFileName, lineNumber: 162}}
+                    , React__default['default'].createElement('div', { className: "ReactDialogAnimation", __self: this, __source: {fileName: _jsxFileName, lineNumber: 163}}, this.props.dialogs[route])
                   )
@@ -241,8 +264,8 @@ )
 
-    close() {
-      if (this.state.stack.length > 1) {
+    close(force) {
+      if (this.state.stack.length > 1 && !force) {
         this.unstack();
       } else {
-        this.setState({ stack: this.state.stack.slice(0, 1) });
         this.props.close();
+        setTimeout(()=>this.setState({ stack: this.state.stack.slice(0, 1) }), 400);
       }
@@ -258,5 +281,6 @@ }
           container: this.props.container,
-          background: this.props.background, __self: this, __source: {fileName: _jsxFileName, lineNumber: 176}}
+          animate: this.props.stacked ? false : true,
+          background: this.props.background, __self: this, __source: {fileName: _jsxFileName, lineNumber: 199}}
         
-          , React__default['default'].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 183}}, ReactDialogStackStyle())
+          , React__default['default'].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 207}}, ReactDialogStackStyle())
           , this.renderStack()
@@ -263,0 +287,0 @@ )

package.json

 {
   "name": "@depay/react-dialog-stack",
   "moduleName": "ReactDialogStack",
-  "version": "8.0.3",
+  "version": "8.1.0",
   "description": "A flexible dialog stack for react widgets.",
@@ -37,3 +37,3 @@ "main": "./dist/umd/index.js",
   "dependencies": {
-    "@depay/react-dialog": "^14.0.6"
+    "@depay/react-dialog": "^14.1.0"
   },
@@ -73,4 +73,5 @@ "peerDependencies": {
     "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-serve": "^1.1.0"
+    "rollup-plugin-serve": "^1.1.0",
+    "webpack": "^5.88.1"
   }
 }

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

23218

increased by7.85%

Lines of code

494

increased by10.27%

Worsened metrics

Dev dependency count

27

increased by3.85%

Dependency changes

• Updated@depay/react-dialog@^14.1.0