jrs-react 1.2.40 → 1.2.41

package/build/index.es.js

@@ -4967,6 +4967,27 @@ const StyledJRWindow = styled.div`
         }
     }
 `;
+class Backdrop extends JRHTML {
+  backdropConfig = {
+    yo: 'div',
+    style: {
+      background: '#ff000029',
+      height: '100%',
+      width: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }
+  };
+  show() {
+    this.backdrop = this.agregarHijo(this.backdropConfig);
+    po('this.hijos', this.hijos);
+  }
+  hide() {
+    this.yo.removeChild(this.yo.children[this.yo.children.length - 1]);
+    this.hijos = [];
+  }
+}
 class JRWindow extends JRFrame {
   // x=0
   // y=0
@@ -4978,7 +4999,20 @@ class JRWindow extends JRFrame {
     super(props);
     this.ref = /*#__PURE__*/React__default.createRef();
     this.titleBarRef = /*#__PURE__*/React__default.createRef();
-    // this.init()
+  }
+  createBackdrop() {
+    if (typeof this.props.backdrop === 'string') {
+      po('find and create backdrop', this.props.backdrop);
+      const target = document.getElementById(this.props.backdrop);
+      if (target) {
+        this.backdropTarget = new Backdrop({
+          yo: target,
+          style: {
+            position: 'relative'
+          }
+        });
+      }
+    }
   }
   addMaskToTarget = target => {
     this.mask = document.createElement('div');
@@ -5008,8 +5042,10 @@ class JRWindow extends JRFrame {
 
   componentDidMount() {
     super.componentDidMount();
+    po('-------------------------componentDidMount-------------------------');
+    this.createBackdrop();
     // if(this.props.backdrop && this.props.open){
-    //     this.backdropOn(this.props.open)
+    //     this.backdropTarget.show()
     // }
 
     if (this.props.open) {
@@ -5017,9 +5053,11 @@ class JRWindow extends JRFrame {
     }
   }
   open() {
+    this.backdropTarget.show();
     this.props.onOpen?.bind(this)();
   }
   close() {
+    this.backdropTarget.hide();
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5083,7 +5121,7 @@ class JRWindow extends JRFrame {
       windowRef: this.ref,
       window: this,
       titleBarRef: this.titleBarRef
-    })), this.props.backdrop !== false && /*#__PURE__*/React__default.createElement(StyledBackdrop, {
+    })), this.props.backdrop !== false && typeof this.props.backdrop !== 'string' && /*#__PURE__*/React__default.createElement(StyledBackdrop, {
       $zIndex: this.props.zIndex
     }))) : '' : super.renderer();
   }

package/build/index.js

@@ -4994,6 +4994,27 @@ const StyledJRWindow = styled__default["default"].div`
         }
     }
 `;
+class Backdrop extends JRHTML {
+  backdropConfig = {
+    yo: 'div',
+    style: {
+      background: '#ff000029',
+      height: '100%',
+      width: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }
+  };
+  show() {
+    this.backdrop = this.agregarHijo(this.backdropConfig);
+    po('this.hijos', this.hijos);
+  }
+  hide() {
+    this.yo.removeChild(this.yo.children[this.yo.children.length - 1]);
+    this.hijos = [];
+  }
+}
 class JRWindow extends JRFrame {
   // x=0
   // y=0
@@ -5005,7 +5026,20 @@ class JRWindow extends JRFrame {
     super(props);
     this.ref = /*#__PURE__*/React__default["default"].createRef();
     this.titleBarRef = /*#__PURE__*/React__default["default"].createRef();
-    // this.init()
+  }
+  createBackdrop() {
+    if (typeof this.props.backdrop === 'string') {
+      po('find and create backdrop', this.props.backdrop);
+      const target = document.getElementById(this.props.backdrop);
+      if (target) {
+        this.backdropTarget = new Backdrop({
+          yo: target,
+          style: {
+            position: 'relative'
+          }
+        });
+      }
+    }
   }
   addMaskToTarget = target => {
     this.mask = document.createElement('div');
@@ -5035,8 +5069,10 @@ class JRWindow extends JRFrame {
 
   componentDidMount() {
     super.componentDidMount();
+    po('-------------------------componentDidMount-------------------------');
+    this.createBackdrop();
     // if(this.props.backdrop && this.props.open){
-    //     this.backdropOn(this.props.open)
+    //     this.backdropTarget.show()
     // }
 
     if (this.props.open) {
@@ -5044,9 +5080,11 @@ class JRWindow extends JRFrame {
     }
   }
   open() {
+    this.backdropTarget.show();
     this.props.onOpen?.bind(this)();
   }
   close() {
+    this.backdropTarget.hide();
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5110,7 +5148,7 @@ class JRWindow extends JRFrame {
       windowRef: this.ref,
       window: this,
       titleBarRef: this.titleBarRef
-    })), this.props.backdrop !== false && /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
+    })), this.props.backdrop !== false && typeof this.props.backdrop !== 'string' && /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
       $zIndex: this.props.zIndex
     }))) : '' : super.renderer();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.40",
+	"version": "1.2.41",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",

package/src/components/JRWindow/JRWindow.jsx

@@ -5,6 +5,8 @@ import TitleBar from "./TitleBar";
 import { po } from "../JRUtils";
 import Sliders from "./Slider";
 import style from './Style.module.css'
+import { JRHTML } from "jrs-js";
+import { background } from "storybook/internal/theming";
 
 const StyledBackdrop=styled.div`
     ${({$zIndex})=>$zIndex!=null?`z-index:${$zIndex};`:null}
@@ -56,6 +58,29 @@ const StyledJRWindow=styled.div`
     }
 `
 
+class Backdrop extends JRHTML{
+    backdropConfig={   
+        yo:'div'
+        ,style:{
+            background:'#ff000029'
+            ,height: '100%'
+            ,width: '100%'
+            ,position: 'absolute'
+            ,top: 0
+            ,left: 0
+        }
+    }
+
+    show(){
+        this.backdrop=this.agregarHijo(this.backdropConfig)
+        po('this.hijos',this.hijos)
+    }
+    hide(){
+        this.yo.removeChild(this.yo.children[this.yo.children.length-1])
+        this.hijos=[]
+    }
+}
+
 export default class JRWindow extends JRFrame {
     // x=0
     // y=0
@@ -68,7 +93,23 @@ export default class JRWindow extends JRFrame {
         super(props)
         this.ref=React.createRef()
         this.titleBarRef=React.createRef()
-        // this.init()
+    }
+
+    createBackdrop(){
+        if(typeof this.props.backdrop === 'string'){
+            po('find and create backdrop',this.props.backdrop)
+            const target=document.getElementById(this.props.backdrop)
+            if(target){
+                this.backdropTarget=new Backdrop({
+                    yo:target
+                    ,style:{
+                        position: 'relative'
+                    }
+                })
+                
+            }
+
+        }
     }
 
     addMaskToTarget=(target)=>{
@@ -99,8 +140,10 @@ export default class JRWindow extends JRFrame {
 
     componentDidMount(){
         super.componentDidMount()
+        po('-------------------------componentDidMount-------------------------')
+        this.createBackdrop()
         // if(this.props.backdrop && this.props.open){
-        //     this.backdropOn(this.props.open)
+        //     this.backdropTarget.show()
         // }
 
         if(this.props.open){
@@ -109,9 +152,11 @@ export default class JRWindow extends JRFrame {
     }
 
     open(){
+        this.backdropTarget.show()
         this.props.onOpen?.bind(this)()
     }
     close(){
+        this.backdropTarget.hide()
         this.props.onClose?.bind(this)()
     }
 
@@ -188,7 +233,7 @@ export default class JRWindow extends JRFrame {
                                 />
                             }
                         </main>
-                        {this.props.backdrop!==false && <StyledBackdrop $zIndex={this.props.zIndex}/>}
+                        {this.props.backdrop!==false && typeof this.props.backdrop!=='string' && <StyledBackdrop $zIndex={this.props.zIndex}/>}
                     </StyledJRWindow>
                 </>
                 :''