jrs-react 1.2.41 → 1.2.43

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.4);
     height:100vh;
     width:100vw;
     position: fixed;
@@ -4971,7 +4941,7 @@ class Backdrop extends JRHTML {
   backdropConfig = {
     yo: 'div',
     style: {
-      background: '#ff000029',
+      background: 'rgba(0, 0, 0, 0.4)',
       height: '100%',
       width: '100%',
       position: 'absolute',
@@ -4979,9 +4949,12 @@ class Backdrop extends JRHTML {
       left: 0
     }
   };
+  constructor(params) {
+    super(params);
+    Object.assign(this.backdropConfig.style, params.backdropStyle);
+  }
   show() {
     this.backdrop = this.agregarHijo(this.backdropConfig);
-    po('this.hijos', this.hijos);
   }
   hide() {
     this.yo.removeChild(this.yo.children[this.yo.children.length - 1]);
@@ -5002,14 +4975,14 @@ class JRWindow extends JRFrame {
   }
   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'
-          }
+          },
+          backdropStyle: this.props.backdropStyle
         });
       }
     }
@@ -5042,22 +5015,17 @@ class JRWindow extends JRFrame {
 
   componentDidMount() {
     super.componentDidMount();
-    po('-------------------------componentDidMount-------------------------');
     this.createBackdrop();
-    // if(this.props.backdrop && this.props.open){
-    //     this.backdropTarget.show()
-    // }
-
     if (this.props.open) {
       this.open();
     }
   }
   open() {
-    this.backdropTarget.show();
+    this.backdropTarget?.show();
     this.props.onOpen?.bind(this)();
   }
   close() {
-    this.backdropTarget.hide();
+    this.backdropTarget?.hide();
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {

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.4);
     height:100vh;
     width:100vw;
     position: fixed;
@@ -4998,7 +4968,7 @@ class Backdrop extends JRHTML {
   backdropConfig = {
     yo: 'div',
     style: {
-      background: '#ff000029',
+      background: 'rgba(0, 0, 0, 0.4)',
       height: '100%',
       width: '100%',
       position: 'absolute',
@@ -5006,9 +4976,12 @@ class Backdrop extends JRHTML {
       left: 0
     }
   };
+  constructor(params) {
+    super(params);
+    Object.assign(this.backdropConfig.style, params.backdropStyle);
+  }
   show() {
     this.backdrop = this.agregarHijo(this.backdropConfig);
-    po('this.hijos', this.hijos);
   }
   hide() {
     this.yo.removeChild(this.yo.children[this.yo.children.length - 1]);
@@ -5029,14 +5002,14 @@ class JRWindow extends JRFrame {
   }
   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'
-          }
+          },
+          backdropStyle: this.props.backdropStyle
         });
       }
     }
@@ -5069,22 +5042,17 @@ class JRWindow extends JRFrame {
 
   componentDidMount() {
     super.componentDidMount();
-    po('-------------------------componentDidMount-------------------------');
     this.createBackdrop();
-    // if(this.props.backdrop && this.props.open){
-    //     this.backdropTarget.show()
-    // }
-
     if (this.props.open) {
       this.open();
     }
   }
   open() {
-    this.backdropTarget.show();
+    this.backdropTarget?.show();
     this.props.onOpen?.bind(this)();
   }
   close() {
-    this.backdropTarget.hide();
+    this.backdropTarget?.hide();
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {

package/package.json

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

package/src/components/JRWindow/JRWindow.jsx

@@ -2,15 +2,13 @@ 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";
-import { background } from "storybook/internal/theming";
+import { po } from "../JRUtils";
 
 const StyledBackdrop=styled.div`
     ${({$zIndex})=>$zIndex!=null?`z-index:${$zIndex};`:null}
-    background : #868686cc; 
+    background : rgba(0, 0, 0, 0.4);
     height:100vh;
     width:100vw;
     position: fixed;
@@ -62,7 +60,7 @@ class Backdrop extends JRHTML{
     backdropConfig={   
         yo:'div'
         ,style:{
-            background:'#ff000029'
+            background:'rgba(0, 0, 0, 0.4)'
             ,height: '100%'
             ,width: '100%'
             ,position: 'absolute'
@@ -71,9 +69,14 @@ class Backdrop extends JRHTML{
         }
     }
 
+    constructor(params){
+        super(params)
+        Object.assign(this.backdropConfig.style,params.backdropStyle)
+	}
+
+
     show(){
         this.backdrop=this.agregarHijo(this.backdropConfig)
-        po('this.hijos',this.hijos)
     }
     hide(){
         this.yo.removeChild(this.yo.children[this.yo.children.length-1])
@@ -97,7 +100,6 @@ export default class JRWindow extends JRFrame {
 
     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({
@@ -105,10 +107,9 @@ export default class JRWindow extends JRFrame {
                     ,style:{
                         position: 'relative'
                     }
+                    ,backdropStyle:this.props.backdropStyle
                 })
-                
             }
-
         }
     }
 
@@ -140,23 +141,18 @@ export default class JRWindow extends JRFrame {
 
     componentDidMount(){
         super.componentDidMount()
-        po('-------------------------componentDidMount-------------------------')
         this.createBackdrop()
-        // if(this.props.backdrop && this.props.open){
-        //     this.backdropTarget.show()
-        // }
-
         if(this.props.open){
             this.open()
         }
     }
 
     open(){
-        this.backdropTarget.show()
+        this.backdropTarget?.show()
         this.props.onOpen?.bind(this)()
     }
     close(){
-        this.backdropTarget.hide()
+        this.backdropTarget?.hide()
         this.props.onClose?.bind(this)()
     }