jrs-react 1.2.37 → 1.2.39

package/build/index.es.js

@@ -4906,7 +4906,7 @@ var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-
 styleInject(css_248z);
 
 const StyledJRWindow = styled.div`
-z-index:1;
+    z-index:1;
 
     --jr-window-radius:3px;
     --padding-child:8px;
@@ -4919,18 +4919,22 @@ z-index:1;
     border-radius: var(--jr-window-radius);
     user-select: text;
 
-    top: ${({
-  $y
-}) => $y}px;
     left: ${({
-  $x
-}) => $x}px;
+  $xw
+}) => $xw.x}px;
     width: ${({
+  $xw
+}) => $xw.width}px;
+    top: ${({
+  $yh
+}) => $yh.y}px;
+    height: ${({
+  $yh
+}) => $yh.height}px;
+
+    xxxwidth: ${({
   $width = 300
 }) => typeof $width === 'string' ? '50%' : `${$width}px`};
-    height: ${({
-  $height = 300
-}) => `${$height}px`};
     overflow: hidden;
 
     display: flex;
@@ -4954,17 +4958,17 @@ z-index:1;
     }
 `;
 class JRWindow extends JRFrame {
-  x = 0;
-  y = 0;
-  width = 300;
-  height = 300;
+  // x=0
+  // y=0
+  // width=300
+  // height=300
   padding = 1;
   thick = 5;
   constructor(props) {
     super(props);
     this.ref = /*#__PURE__*/React__default.createRef();
     this.titleBarRef = /*#__PURE__*/React__default.createRef();
-    this.init();
+    // this.init()
   }
   addMaskToTarget = target => {
     this.mask = document.createElement('div');
@@ -4984,8 +4988,6 @@ class JRWindow extends JRFrame {
   };
   backdropOn(on) {
     const target = typeof this.props.backdrop === 'object' ? this.props.backdrop : typeof this.props.backdrop === 'string' ? document.getElementById(this.props.backdrop) : document.body;
-
-    // this[on?'addMaskToTarget':'removeMaskFromTarget'](target)
     target?.classList[on ? 'add' : 'remove']('withMask');
   }
   componentDidMount() {
@@ -5001,6 +5003,7 @@ class JRWindow extends JRFrame {
     this.props.onOpen?.bind(this)();
   }
   close() {
+    // this.init()
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5015,31 +5018,56 @@ class JRWindow extends JRFrame {
       }
     }
   }
-  init() {
-    po('window', window.innerWidth);
+  // 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) {
-      this.width = this.props.width.split('%')[0] * window.innerWidth / 100;
+      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;
+      width = window.innerWidth >= (this.props.width ?? width) ? this.props.width ?? width : window.innerWidth;
     }
-    this.x = this.props.x ?? (window.innerWidth - this.width) / 2;
+    return {
+      x: this.props.x ?? (window.innerWidth - width) / 2,
+      width
+    };
+  }
+  get yh() {
+    let height;
     if (this.props.height?.indexOf?.('%') > -1) {
-      this.height = this.props.height.split('%')[0] * window.innerHeight / 100;
+      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;
+      height = window.innerHeight >= (this.props.height ?? height) ? this.props.height ?? height : window.innerHeight;
     }
-    this.y = this.props.y ?? (window.innerHeight - this.height) / 2;
+    return {
+      y: this.props.y ?? (window.innerHeight - height) / 2,
+      height
+    };
   }
   renderer() {
     return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default.createElement(StyledJRWindow, {
       rule: 'dialog',
       ref: this.ref,
       className: `jr-window ${this.props.className ?? ''}`,
-      $x: this.x,
-      $y: this.y,
-      $width: this.width,
-      $height: this.height,
+      $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, {
       titleBarRef: this.titleBarRef,
       windowRef: this.ref,
@@ -5677,8 +5705,6 @@ styled.div`
 `;
 
 const StyleJRFields = styled.main`
-
-
     --column-bd-color:#cccccc;
     --column-b-color:unset;
     --column-b-hover-color:#ffffff;
@@ -6111,7 +6137,10 @@ 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
+      }
     }, /*#__PURE__*/React__default.createElement(StyledGrid, {
       cols: this.props.cols,
       style: this.props.gridStyle,

package/build/index.js

@@ -4933,7 +4933,7 @@ var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-
 styleInject(css_248z);
 
 const StyledJRWindow = styled__default["default"].div`
-z-index:1;
+    z-index:1;
 
     --jr-window-radius:3px;
     --padding-child:8px;
@@ -4946,18 +4946,22 @@ z-index:1;
     border-radius: var(--jr-window-radius);
     user-select: text;
 
-    top: ${({
-  $y
-}) => $y}px;
     left: ${({
-  $x
-}) => $x}px;
+  $xw
+}) => $xw.x}px;
     width: ${({
+  $xw
+}) => $xw.width}px;
+    top: ${({
+  $yh
+}) => $yh.y}px;
+    height: ${({
+  $yh
+}) => $yh.height}px;
+
+    xxxwidth: ${({
   $width = 300
 }) => typeof $width === 'string' ? '50%' : `${$width}px`};
-    height: ${({
-  $height = 300
-}) => `${$height}px`};
     overflow: hidden;
 
     display: flex;
@@ -4981,17 +4985,17 @@ z-index:1;
     }
 `;
 class JRWindow extends JRFrame {
-  x = 0;
-  y = 0;
-  width = 300;
-  height = 300;
+  // x=0
+  // y=0
+  // width=300
+  // height=300
   padding = 1;
   thick = 5;
   constructor(props) {
     super(props);
     this.ref = /*#__PURE__*/React__default["default"].createRef();
     this.titleBarRef = /*#__PURE__*/React__default["default"].createRef();
-    this.init();
+    // this.init()
   }
   addMaskToTarget = target => {
     this.mask = document.createElement('div');
@@ -5011,8 +5015,6 @@ class JRWindow extends JRFrame {
   };
   backdropOn(on) {
     const target = typeof this.props.backdrop === 'object' ? this.props.backdrop : typeof this.props.backdrop === 'string' ? document.getElementById(this.props.backdrop) : document.body;
-
-    // this[on?'addMaskToTarget':'removeMaskFromTarget'](target)
     target?.classList[on ? 'add' : 'remove']('withMask');
   }
   componentDidMount() {
@@ -5028,6 +5030,7 @@ class JRWindow extends JRFrame {
     this.props.onOpen?.bind(this)();
   }
   close() {
+    // this.init()
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5042,31 +5045,56 @@ class JRWindow extends JRFrame {
       }
     }
   }
-  init() {
-    po('window', window.innerWidth);
+  // 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) {
-      this.width = this.props.width.split('%')[0] * window.innerWidth / 100;
+      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;
+      width = window.innerWidth >= (this.props.width ?? width) ? this.props.width ?? width : window.innerWidth;
     }
-    this.x = this.props.x ?? (window.innerWidth - this.width) / 2;
+    return {
+      x: this.props.x ?? (window.innerWidth - width) / 2,
+      width
+    };
+  }
+  get yh() {
+    let height;
     if (this.props.height?.indexOf?.('%') > -1) {
-      this.height = this.props.height.split('%')[0] * window.innerHeight / 100;
+      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;
+      height = window.innerHeight >= (this.props.height ?? height) ? this.props.height ?? height : window.innerHeight;
     }
-    this.y = this.props.y ?? (window.innerHeight - this.height) / 2;
+    return {
+      y: this.props.y ?? (window.innerHeight - height) / 2,
+      height
+    };
   }
   renderer() {
     return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default["default"].createElement(StyledJRWindow, {
       rule: 'dialog',
       ref: this.ref,
       className: `jr-window ${this.props.className ?? ''}`,
-      $x: this.x,
-      $y: this.y,
-      $width: this.width,
-      $height: this.height,
+      $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, {
       titleBarRef: this.titleBarRef,
       windowRef: this.ref,
@@ -5704,8 +5732,6 @@ styled__default["default"].div`
 `;
 
 const StyleJRFields = styled__default["default"].main`
-
-
     --column-bd-color:#cccccc;
     --column-b-color:unset;
     --column-b-hover-color:#ffffff;
@@ -6138,7 +6164,10 @@ 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
+      }
     }, /*#__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.37",
+	"version": "1.2.39",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",

package/src/components/JRFields/JRFields.jsx

@@ -450,7 +450,7 @@ 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}}>
             <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

@@ -8,7 +8,7 @@ import style from './Style.module.css'
 
 
 const StyledJRWindow=styled.div`
-z-index:1;
+    z-index:1;
 
     --jr-window-radius:3px;
     --padding-child:8px;
@@ -19,10 +19,12 @@ z-index:1;
     border-radius: var(--jr-window-radius);
     user-select: text;
 
-    top: ${({$y})=>$y}px;
-    left: ${({$x})=>$x}px;
-    width: ${({$width=300})=>typeof $width === 'string'? '50%' : `${$width}px`};
-    height: ${({$height=300})=>`${$height}px`};
+    left: ${({$xw})=>$xw.x}px;
+    width: ${({$xw})=>$xw.width}px;
+    top: ${({$yh})=>$yh.y}px;
+    height: ${({$yh})=>$yh.height}px;
+
+    xxxwidth: ${({$width=300})=>typeof $width === 'string'? '50%' : `${$width}px`};
     overflow: hidden;
 
     display: flex;
@@ -47,10 +49,10 @@ z-index:1;
 `
 
 export default class JRWindow extends JRFrame {
-    x=0
-    y=0
-    width=300
-    height=300
+    // x=0
+    // y=0
+    // width=300
+    // height=300
     padding=1
     thick=5
     
@@ -58,7 +60,7 @@ export default class JRWindow extends JRFrame {
         super(props)
         this.ref=React.createRef()
         this.titleBarRef=React.createRef()
-        this.init()
+        // this.init()
     }
 
     addMaskToTarget=(target)=>{
@@ -84,8 +86,6 @@ export default class JRWindow extends JRFrame {
             :typeof this.props.backdrop ==='string'
                 ?document.getElementById(this.props.backdrop)
                 :document.body
-
-        // this[on?'addMaskToTarget':'removeMaskFromTarget'](target)
         target?.classList[on?'add':'remove']('withMask')
     }
 
@@ -104,6 +104,7 @@ export default class JRWindow extends JRFrame {
         this.props.onOpen?.bind(this)()
     }
     close(){
+        // this.init()
         this.props.onClose?.bind(this)()
     }
 
@@ -119,21 +120,46 @@ export default class JRWindow extends JRFrame {
             }
         }
     }
-    init(){
-        po('window',window.innerWidth)
+    // 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){
-            this.width=(this.props.width.split('%')[0]*window.innerWidth)/100
+            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
+            width=window.innerWidth>=(this.props.width??width)?(this.props.width??width):window.innerWidth
+        }
+        return {
+            x:this.props.x??((window.innerWidth-(width))/2)
+            ,width
         }
-        this.x=this.props.x??((window.innerWidth-(this.width))/2)
+    }
 
+    get yh(){
+        let height
         if(this.props.height?.indexOf?.('%')>-1){
-            this.height=(this.props.height.split('%')[0]*window.innerHeight)/100
+            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
+            height=window.innerHeight>=(this.props.height??height)?(this.props.height??height):window.innerHeight
+        }
+        return {
+            y:this.props.y??(window.innerHeight-(height))/2
+            ,height
         }
-        this.y=this.props.y??(window.innerHeight-(this.height))/2
     }
 
     renderer(){
@@ -143,11 +169,11 @@ export default class JRWindow extends JRFrame {
                     rule={'dialog'}
                     ref={this.ref}
                     className={`jr-window ${this.props.className??''}`}
-                    $x={this.x}
-                    $y={this.y}
-                    $width={this.width}
-                    $height={this.height}
+                    $xw={this.xw}
+                    $yh={this.yh}
                     $thick={this.thick}
+                    // $width={this.width}
+                    // $height={this.height}
                 >
                     <main>
                         <TitleBar