jrs-react 1.2.40 → 1.2.42

package/build/index.es.js

@@ -4875,41 +4875,11 @@ class Slider$1 extends React__default.Component {
   }
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-module_withMask__LPcai{overflow:hidden!important;position:relative;user-select:none;&:after{a:#868686cc;background:#868686cc;border-radius:inherit;bottom:0;content:\"\";height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}}mask{background:#868686cc;border-radius:inherit;bottom:0;height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}";
-styleInject(css_248z);
-
 const StyledBackdrop = styled.div`
     ${({
   $zIndex
 }) => $zIndex != null ? `z-index:${$zIndex};` : null}
-    background : #868686cc; 
+    background : rgba(0, 0, 0, 0.25);
     height:100vh;
     width:100vw;
     position: fixed;
@@ -4967,6 +4937,26 @@ const StyledJRWindow = styled.div`
         }
     }
 `;
+class Backdrop extends JRHTML {
+  backdropConfig = {
+    yo: 'div',
+    style: {
+      background: 'rgba(0, 0, 0, 0.25)',
+      height: '100%',
+      width: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }
+  };
+  show() {
+    this.backdrop = this.agregarHijo(this.backdropConfig);
+  }
+  hide() {
+    this.yo.removeChild(this.yo.children[this.yo.children.length - 1]);
+    this.hijos = [];
+  }
+}
 class JRWindow extends JRFrame {
   // x=0
   // y=0
@@ -4978,7 +4968,19 @@ 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') {
+      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,18 +5010,17 @@ class JRWindow extends JRFrame {
 
   componentDidMount() {
     super.componentDidMount();
-    // if(this.props.backdrop && this.props.open){
-    //     this.backdropOn(this.props.open)
-    // }
-
+    this.createBackdrop();
     if (this.props.open) {
       this.open();
     }
   }
   open() {
+    this.backdropTarget?.show();
     this.props.onOpen?.bind(this)();
   }
   close() {
+    this.backdropTarget?.hide();
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5083,7 +5084,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

@@ -4902,41 +4902,11 @@ class Slider$1 extends React__default["default"].Component {
   }
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-module_withMask__LPcai{overflow:hidden!important;position:relative;user-select:none;&:after{a:#868686cc;background:#868686cc;border-radius:inherit;bottom:0;content:\"\";height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}}mask{background:#868686cc;border-radius:inherit;bottom:0;height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}";
-styleInject(css_248z);
-
 const StyledBackdrop = styled__default["default"].div`
     ${({
   $zIndex
 }) => $zIndex != null ? `z-index:${$zIndex};` : null}
-    background : #868686cc; 
+    background : rgba(0, 0, 0, 0.25);
     height:100vh;
     width:100vw;
     position: fixed;
@@ -4994,6 +4964,26 @@ const StyledJRWindow = styled__default["default"].div`
         }
     }
 `;
+class Backdrop extends JRHTML {
+  backdropConfig = {
+    yo: 'div',
+    style: {
+      background: 'rgba(0, 0, 0, 0.25)',
+      height: '100%',
+      width: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }
+  };
+  show() {
+    this.backdrop = this.agregarHijo(this.backdropConfig);
+  }
+  hide() {
+    this.yo.removeChild(this.yo.children[this.yo.children.length - 1]);
+    this.hijos = [];
+  }
+}
 class JRWindow extends JRFrame {
   // x=0
   // y=0
@@ -5005,7 +4995,19 @@ 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') {
+      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,18 +5037,17 @@ class JRWindow extends JRFrame {
 
   componentDidMount() {
     super.componentDidMount();
-    // if(this.props.backdrop && this.props.open){
-    //     this.backdropOn(this.props.open)
-    // }
-
+    this.createBackdrop();
     if (this.props.open) {
       this.open();
     }
   }
   open() {
+    this.backdropTarget?.show();
     this.props.onOpen?.bind(this)();
   }
   close() {
+    this.backdropTarget?.hide();
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5110,7 +5111,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.42",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",

package/src/components/JRWindow/JRWindow.jsx

@@ -2,13 +2,12 @@ import React from "react";
 import JRFrame from "../JRFrame/JRFrame";
 import styled from "styled-components";
 import TitleBar from "./TitleBar";
-import { po } from "../JRUtils";
 import Sliders from "./Slider";
-import style from './Style.module.css'
+import { JRHTML } from "jrs-js";
 
 const StyledBackdrop=styled.div`
     ${({$zIndex})=>$zIndex!=null?`z-index:${$zIndex};`:null}
-    background : #868686cc; 
+    background : rgba(0, 0, 0, 0.25);
     height:100vh;
     width:100vw;
     position: fixed;
@@ -56,6 +55,28 @@ const StyledJRWindow=styled.div`
     }
 `
 
+class Backdrop extends JRHTML{
+    backdropConfig={   
+        yo:'div'
+        ,style:{
+            background:'rgba(0, 0, 0, 0.25)'
+            ,height: '100%'
+            ,width: '100%'
+            ,position: 'absolute'
+            ,top: 0
+            ,left: 0
+        }
+    }
+
+    show(){
+        this.backdrop=this.agregarHijo(this.backdropConfig)
+    }
+    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 +89,20 @@ 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'){
+            const target=document.getElementById(this.props.backdrop)
+            if(target){
+                this.backdropTarget=new Backdrop({
+                    yo:target
+                    ,style:{
+                        position: 'relative'
+                    }
+                })
+            }
+        }
     }
 
     addMaskToTarget=(target)=>{
@@ -99,19 +133,18 @@ export default class JRWindow extends JRFrame {
 
     componentDidMount(){
         super.componentDidMount()
-        // if(this.props.backdrop && this.props.open){
-        //     this.backdropOn(this.props.open)
-        // }
-
+        this.createBackdrop()
         if(this.props.open){
             this.open()
         }
     }
 
     open(){
+        this.backdropTarget?.show()
         this.props.onOpen?.bind(this)()
     }
     close(){
+        this.backdropTarget?.hide()
         this.props.onClose?.bind(this)()
     }
 
@@ -188,7 +221,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>
                 </>
                 :''