jrs-react 1.2.39 → 1.2.41

package/build/index.es.js

@@ -4905,8 +4905,21 @@ function styleInject(css, ref) {
 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; 
+    height:100vh;
+    width:100vw;
+    position: fixed;
+    top:0;
+    left:0;
+`;
 const StyledJRWindow = styled.div`
-    z-index:1;
+    ${({
+  $zIndex
+}) => $zIndex != null ? `z-index:${$zIndex};` : null}
 
     --jr-window-radius:3px;
     --padding-child:8px;
@@ -4932,9 +4945,6 @@ const StyledJRWindow = styled.div`
   $yh
 }) => $yh.height}px;
 
-    xxxwidth: ${({
-  $width = 300
-}) => typeof $width === 'string' ? '50%' : `${$width}px`};
     overflow: hidden;
 
     display: flex;
@@ -4957,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
@@ -4968,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');
@@ -4986,24 +5030,34 @@ class JRWindow extends JRFrame {
   removeMaskFromTarget = () => {
     this.mask.remove();
   };
-  backdropOn(on) {
-    const target = typeof this.props.backdrop === 'object' ? this.props.backdrop : typeof this.props.backdrop === 'string' ? document.getElementById(this.props.backdrop) : document.body;
-    target?.classList[on ? 'add' : 'remove']('withMask');
-  }
+
+  // backdropOn(on){
+  // const target=(typeof this.props.backdrop)==='object'
+  //     ?this.props.backdrop
+  //     :typeof this.props.backdrop ==='string'
+  //         ?document.getElementById(this.props.backdrop)
+  //         :document.body
+  // target?.classList[on?'add':'remove']('withMask')
+  // }
+
   componentDidMount() {
     super.componentDidMount();
-    if (this.props.backdrop && this.props.open) {
-      this.backdropOn(this.props.open);
-    }
+    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.props.onOpen?.bind(this)();
   }
   close() {
-    // this.init()
+    this.backdropTarget.hide();
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5013,27 +5067,11 @@ class JRWindow extends JRFrame {
       } else if (this.props.open === false && prevProps.open) {
         this.close();
       }
-      if (this.props.backdrop && this.props.open != prevProps.open) {
-        this.backdropOn(this.props.open);
-      }
+      // if(this.props.backdrop && this.props.open!=prevProps.open){
+      //     this.backdropOn(this.props.open)
+      // }
     }
   }
-  // init(){
-  //     if(this.props.width?.indexOf?.('%')>-1){
-  //         this.width=(this.props.width.split('%')[0]*window.innerWidth)/100
-  //     }else{
-  //         this.width=window.innerWidth>=(this.props.width??this.width)?(this.props.width??this.width):window.innerWidth
-  //     }
-  //     this.x=this.props.x??((window.innerWidth-(this.width))/2)
-
-  //     if(this.props.height?.indexOf?.('%')>-1){
-  //         this.height=(this.props.height.split('%')[0]*window.innerHeight)/100
-  //     }else{
-  //         this.height=window.innerHeight>=(this.props.height??this.height)?(this.props.height??this.height):window.innerHeight
-  //     }
-  //     this.y=this.props.y??(window.innerHeight-(this.height))/2
-  // }
-
   get xw() {
     let width;
     if (this.props.width?.indexOf?.('%') > -1) {
@@ -5059,28 +5097,33 @@ class JRWindow extends JRFrame {
     };
   }
   renderer() {
-    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default.createElement(StyledJRWindow, {
+    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledJRWindow, {
+      $zIndex: this.props.zIndex,
       rule: 'dialog',
       ref: this.ref,
       className: `jr-window ${this.props.className ?? ''}`,
       $xw: this.xw,
       $yh: this.yh,
       $thick: this.thick
-      // $width={this.width}
-      // $height={this.height}
-    }, /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(TitleBar, {
+    }, /*#__PURE__*/React__default.createElement("main", {
+      style: {
+        zIndex: 1
+      }
+    }, /*#__PURE__*/React__default.createElement(TitleBar, {
       titleBarRef: this.titleBarRef,
       windowRef: this.ref,
       window: this,
       title: this.props.title,
       thick: this.thick,
       resizable: this.props.resizable
-    }), /*#__PURE__*/React__default.createElement("main", null, super.renderer())), this.props.resizable !== false && /*#__PURE__*/React__default.createElement(Sliders, {
+    }), /*#__PURE__*/React__default.createElement("main", null, super.renderer()), this.props.resizable !== false && /*#__PURE__*/React__default.createElement(Sliders, {
       thick: this.thick,
       windowRef: this.ref,
       window: this,
       titleBarRef: this.titleBarRef
-    })) : '' : super.renderer();
+    })), this.props.backdrop !== false && typeof this.props.backdrop !== 'string' && /*#__PURE__*/React__default.createElement(StyledBackdrop, {
+      $zIndex: this.props.zIndex
+    }))) : '' : super.renderer();
   }
 }
 
@@ -6140,7 +6183,8 @@ class JRFields extends JRWindow {
       style: {
         ...this.props.typeStyle,
         ...this.props.fieldsStyle
-      }
+      },
+      xxstyle: this.props.fieldsStyle
     }, /*#__PURE__*/React__default.createElement(StyledGrid, {
       cols: this.props.cols,
       style: this.props.gridStyle,

package/build/index.js

@@ -4932,8 +4932,21 @@ function styleInject(css, ref) {
 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; 
+    height:100vh;
+    width:100vw;
+    position: fixed;
+    top:0;
+    left:0;
+`;
 const StyledJRWindow = styled__default["default"].div`
-    z-index:1;
+    ${({
+  $zIndex
+}) => $zIndex != null ? `z-index:${$zIndex};` : null}
 
     --jr-window-radius:3px;
     --padding-child:8px;
@@ -4959,9 +4972,6 @@ const StyledJRWindow = styled__default["default"].div`
   $yh
 }) => $yh.height}px;
 
-    xxxwidth: ${({
-  $width = 300
-}) => typeof $width === 'string' ? '50%' : `${$width}px`};
     overflow: hidden;
 
     display: flex;
@@ -4984,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
@@ -4995,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');
@@ -5013,24 +5057,34 @@ class JRWindow extends JRFrame {
   removeMaskFromTarget = () => {
     this.mask.remove();
   };
-  backdropOn(on) {
-    const target = typeof this.props.backdrop === 'object' ? this.props.backdrop : typeof this.props.backdrop === 'string' ? document.getElementById(this.props.backdrop) : document.body;
-    target?.classList[on ? 'add' : 'remove']('withMask');
-  }
+
+  // backdropOn(on){
+  // const target=(typeof this.props.backdrop)==='object'
+  //     ?this.props.backdrop
+  //     :typeof this.props.backdrop ==='string'
+  //         ?document.getElementById(this.props.backdrop)
+  //         :document.body
+  // target?.classList[on?'add':'remove']('withMask')
+  // }
+
   componentDidMount() {
     super.componentDidMount();
-    if (this.props.backdrop && this.props.open) {
-      this.backdropOn(this.props.open);
-    }
+    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.props.onOpen?.bind(this)();
   }
   close() {
-    // this.init()
+    this.backdropTarget.hide();
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5040,27 +5094,11 @@ class JRWindow extends JRFrame {
       } else if (this.props.open === false && prevProps.open) {
         this.close();
       }
-      if (this.props.backdrop && this.props.open != prevProps.open) {
-        this.backdropOn(this.props.open);
-      }
+      // if(this.props.backdrop && this.props.open!=prevProps.open){
+      //     this.backdropOn(this.props.open)
+      // }
     }
   }
-  // init(){
-  //     if(this.props.width?.indexOf?.('%')>-1){
-  //         this.width=(this.props.width.split('%')[0]*window.innerWidth)/100
-  //     }else{
-  //         this.width=window.innerWidth>=(this.props.width??this.width)?(this.props.width??this.width):window.innerWidth
-  //     }
-  //     this.x=this.props.x??((window.innerWidth-(this.width))/2)
-
-  //     if(this.props.height?.indexOf?.('%')>-1){
-  //         this.height=(this.props.height.split('%')[0]*window.innerHeight)/100
-  //     }else{
-  //         this.height=window.innerHeight>=(this.props.height??this.height)?(this.props.height??this.height):window.innerHeight
-  //     }
-  //     this.y=this.props.y??(window.innerHeight-(this.height))/2
-  // }
-
   get xw() {
     let width;
     if (this.props.width?.indexOf?.('%') > -1) {
@@ -5086,28 +5124,33 @@ class JRWindow extends JRFrame {
     };
   }
   renderer() {
-    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default["default"].createElement(StyledJRWindow, {
+    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledJRWindow, {
+      $zIndex: this.props.zIndex,
       rule: 'dialog',
       ref: this.ref,
       className: `jr-window ${this.props.className ?? ''}`,
       $xw: this.xw,
       $yh: this.yh,
       $thick: this.thick
-      // $width={this.width}
-      // $height={this.height}
-    }, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(TitleBar, {
+    }, /*#__PURE__*/React__default["default"].createElement("main", {
+      style: {
+        zIndex: 1
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TitleBar, {
       titleBarRef: this.titleBarRef,
       windowRef: this.ref,
       window: this,
       title: this.props.title,
       thick: this.thick,
       resizable: this.props.resizable
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer())), this.props.resizable !== false && /*#__PURE__*/React__default["default"].createElement(Sliders, {
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer()), this.props.resizable !== false && /*#__PURE__*/React__default["default"].createElement(Sliders, {
       thick: this.thick,
       windowRef: this.ref,
       window: this,
       titleBarRef: this.titleBarRef
-    })) : '' : super.renderer();
+    })), this.props.backdrop !== false && typeof this.props.backdrop !== 'string' && /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
+      $zIndex: this.props.zIndex
+    }))) : '' : super.renderer();
   }
 }
 
@@ -6167,7 +6210,8 @@ class JRFields extends JRWindow {
       style: {
         ...this.props.typeStyle,
         ...this.props.fieldsStyle
-      }
+      },
+      xxstyle: this.props.fieldsStyle
     }, /*#__PURE__*/React__default["default"].createElement(StyledGrid, {
       cols: this.props.cols,
       style: this.props.gridStyle,

package/package.json

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

package/src/components/JRFields/JRFields.jsx

@@ -450,7 +450,10 @@ export default class JRFields extends JRWindow {
     }
 
     renderMe(){
-        return <StyleJRFields className={`jr-fields`} style={{...this.props.typeStyle,...this.props.fieldsStyle}}>
+        return <StyleJRFields className={`jr-fields`} 
+            style={{...this.props.typeStyle,...this.props.fieldsStyle}}
+            xxstyle={this.props.fieldsStyle}
+        >
             <StyledGrid cols={this.props.cols} style={this.props.gridStyle} className={'jr-grid'} $gap={this.props.gap}>
                 {
                     this.createColumns(

package/src/components/JRWindow/JRWindow.jsx

@@ -5,10 +5,21 @@ 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}
+    background : #868686cc; 
+    height:100vh;
+    width:100vw;
+    position: fixed;
+    top:0;
+    left:0;
+`
 
 const StyledJRWindow=styled.div`
-    z-index:1;
+    ${({$zIndex})=>$zIndex!=null?`z-index:${$zIndex};`:null}
 
     --jr-window-radius:3px;
     --padding-child:8px;
@@ -24,7 +35,6 @@ const StyledJRWindow=styled.div`
     top: ${({$yh})=>$yh.y}px;
     height: ${({$yh})=>$yh.height}px;
 
-    xxxwidth: ${({$width=300})=>typeof $width === 'string'? '50%' : `${$width}px`};
     overflow: hidden;
 
     display: flex;
@@ -48,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
@@ -60,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)=>{
@@ -80,20 +129,22 @@ export default class JRWindow extends JRFrame {
         this.mask.remove()
     }
 
-    backdropOn(on){
-        const target=(typeof this.props.backdrop)==='object'
-            ?this.props.backdrop
-            :typeof this.props.backdrop ==='string'
-                ?document.getElementById(this.props.backdrop)
-                :document.body
-        target?.classList[on?'add':'remove']('withMask')
-    }
+    // backdropOn(on){
+        // const target=(typeof this.props.backdrop)==='object'
+        //     ?this.props.backdrop
+        //     :typeof this.props.backdrop ==='string'
+        //         ?document.getElementById(this.props.backdrop)
+        //         :document.body
+        // target?.classList[on?'add':'remove']('withMask')
+    // }
 
     componentDidMount(){
         super.componentDidMount()
-        if(this.props.backdrop && this.props.open){
-            this.backdropOn(this.props.open)
-        }
+        po('-------------------------componentDidMount-------------------------')
+        this.createBackdrop()
+        // if(this.props.backdrop && this.props.open){
+        //     this.backdropTarget.show()
+        // }
 
         if(this.props.open){
             this.open()
@@ -101,10 +152,11 @@ export default class JRWindow extends JRFrame {
     }
 
     open(){
+        this.backdropTarget.show()
         this.props.onOpen?.bind(this)()
     }
     close(){
-        // this.init()
+        this.backdropTarget.hide()
         this.props.onClose?.bind(this)()
     }
 
@@ -115,26 +167,11 @@ export default class JRWindow extends JRFrame {
             }else if(this.props.open===false  && prevProps.open){
                 this.close()
             }
-            if(this.props.backdrop && this.props.open!=prevProps.open){
-                this.backdropOn(this.props.open)
-            }
+            // if(this.props.backdrop && this.props.open!=prevProps.open){
+            //     this.backdropOn(this.props.open)
+            // }
         }
     }
-    // init(){
-    //     if(this.props.width?.indexOf?.('%')>-1){
-    //         this.width=(this.props.width.split('%')[0]*window.innerWidth)/100
-    //     }else{
-    //         this.width=window.innerWidth>=(this.props.width??this.width)?(this.props.width??this.width):window.innerWidth
-    //     }
-    //     this.x=this.props.x??((window.innerWidth-(this.width))/2)
-
-    //     if(this.props.height?.indexOf?.('%')>-1){
-    //         this.height=(this.props.height.split('%')[0]*window.innerHeight)/100
-    //     }else{
-    //         this.height=window.innerHeight>=(this.props.height??this.height)?(this.props.height??this.height):window.innerHeight
-    //     }
-    //     this.y=this.props.y??(window.innerHeight-(this.height))/2
-    // }
 
     get xw(){
         let width
@@ -165,38 +202,40 @@ export default class JRWindow extends JRFrame {
     renderer(){
         return this.props.popup===true
             ?this.props.open
-                ?<StyledJRWindow
-                    rule={'dialog'}
-                    ref={this.ref}
-                    className={`jr-window ${this.props.className??''}`}
-                    $xw={this.xw}
-                    $yh={this.yh}
-                    $thick={this.thick}
-                    // $width={this.width}
-                    // $height={this.height}
-                >
-                    <main>
-                        <TitleBar 
-                            titleBarRef={this.titleBarRef}
-                            windowRef={this.ref} 
-                            window={this}
-                            title={this.props.title}
-                            thick={this.thick} 
-                            resizable={this.props.resizable}
-                        />
-                        <main>
-                            {super.renderer()}
+                ?<>
+                    <StyledJRWindow
+                        $zIndex={this.props.zIndex}
+                        rule={'dialog'}
+                        ref={this.ref}
+                        className={`jr-window ${this.props.className??''}`}
+                        $xw={this.xw}
+                        $yh={this.yh}
+                        $thick={this.thick}
+                    >
+                        <main  style={{zIndex:1}}>
+                            <TitleBar 
+                                titleBarRef={this.titleBarRef}
+                                windowRef={this.ref} 
+                                window={this}
+                                title={this.props.title}
+                                thick={this.thick} 
+                                resizable={this.props.resizable}
+                            />
+                            <main>
+                                {super.renderer()}
+                            </main>
+                            {this.props.resizable !== false
+                                && <Sliders 
+                                    thick={this.thick} 
+                                    windowRef={this.ref} 
+                                    window={this} 
+                                    titleBarRef={this.titleBarRef}
+                                />
+                            }
                         </main>
-                    </main>
-                    {this.props.resizable !== false
-                        && <Sliders 
-                            thick={this.thick} 
-                            windowRef={this.ref} 
-                            window={this} 
-                            titleBarRef={this.titleBarRef}
-                        />
-                    }
-                </StyledJRWindow>
+                        {this.props.backdrop!==false && typeof this.props.backdrop!=='string' && <StyledBackdrop $zIndex={this.props.zIndex}/>}
+                    </StyledJRWindow>
+                </>
                 :''
             :super.renderer()
     }