jrs-react 1.2.38 → 1.2.40

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;
@@ -4986,15 +4996,22 @@ 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);
-    }
+    // if(this.props.backdrop && this.props.open){
+    //     this.backdropOn(this.props.open)
+    // }
+
     if (this.props.open) {
       this.open();
     }
@@ -5003,7 +5020,6 @@ class JRWindow extends JRFrame {
     this.props.onOpen?.bind(this)();
   }
   close() {
-    // this.init()
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5013,27 +5029,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 +5059,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 && /*#__PURE__*/React__default.createElement(StyledBackdrop, {
+      $zIndex: this.props.zIndex
+    }))) : '' : super.renderer();
   }
 }
 
@@ -5705,8 +5710,6 @@ styled.div`
 `;
 
 const StyleJRFields = styled.main`
-
-
     --column-bd-color:#cccccc;
     --column-b-color:unset;
     --column-b-hover-color:#ffffff;
@@ -6139,7 +6142,11 @@ class JRFields extends JRWindow {
   renderMe() {
     return /*#__PURE__*/React__default.createElement(StyleJRFields, {
       className: `jr-fields`,
-      style: this.props.typeStyle
+      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;
@@ -5013,15 +5023,22 @@ 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);
-    }
+    // if(this.props.backdrop && this.props.open){
+    //     this.backdropOn(this.props.open)
+    // }
+
     if (this.props.open) {
       this.open();
     }
@@ -5030,7 +5047,6 @@ class JRWindow extends JRFrame {
     this.props.onOpen?.bind(this)();
   }
   close() {
-    // this.init()
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5040,27 +5056,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 +5086,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 && /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
+      $zIndex: this.props.zIndex
+    }))) : '' : super.renderer();
   }
 }
 
@@ -5732,8 +5737,6 @@ styled__default["default"].div`
 `;
 
 const StyleJRFields = styled__default["default"].main`
-
-
     --column-bd-color:#cccccc;
     --column-b-color:unset;
     --column-b-hover-color:#ffffff;
@@ -6166,7 +6169,11 @@ class JRFields extends JRWindow {
   renderMe() {
     return /*#__PURE__*/React__default["default"].createElement(StyleJRFields, {
       className: `jr-fields`,
-      style: this.props.typeStyle
+      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.38",
+	"version": "1.2.40",
 	"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}>
+        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/JRFields/StyleJRFields.jsx

@@ -1,8 +1,6 @@
 import styled from "styled-components";
 
 export const StyleJRFields=styled.main`
-
-
     --column-bd-color:#cccccc;
     --column-b-color:unset;
     --column-b-hover-color:#ffffff;

package/src/components/JRWindow/JRWindow.jsx

@@ -6,9 +6,18 @@ import { po } from "../JRUtils";
 import Sliders from "./Slider";
 import style from './Style.module.css'
 
+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 +33,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;
@@ -80,20 +88,20 @@ 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)
-        }
+        // if(this.props.backdrop && this.props.open){
+        //     this.backdropOn(this.props.open)
+        // }
 
         if(this.props.open){
             this.open()
@@ -104,7 +112,6 @@ export default class JRWindow extends JRFrame {
         this.props.onOpen?.bind(this)()
     }
     close(){
-        // this.init()
         this.props.onClose?.bind(this)()
     }
 
@@ -115,26 +122,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 +157,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 && <StyledBackdrop $zIndex={this.props.zIndex}/>}
+                    </StyledJRWindow>
+                </>
                 :''
             :super.renderer()
     }