jrs-react 1.2.36 → 1.2.38

package/build/index.es.js

@@ -4065,7 +4065,9 @@ const FreeType = /*#__PURE__*/forwardRef(function ({
       style: style,
       ref: ref
     }, content);
-  } else if (typeof config === 'string') {
+    // }else if(typeof config==='string'){
+    //     return <Tag className={className} ref={ref}>{config}</Tag>
+  } else {
     return /*#__PURE__*/React__default.createElement(Tag, {
       className: className,
       ref: ref
@@ -4373,7 +4375,7 @@ class TitleBar extends React__default.Component {
         width,
         height
       } = this.props.windowRef.current.getBoundingClientRect();
-      if (y < 1 - this.props.thick) this.fullScreen(e);
+      if (y < 1 - this.props.thick && this.props.resizable != false) this.fullScreen(e);
       if (y > window.innerHeight - titleBarHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
       if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
       if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
@@ -4457,7 +4459,7 @@ class TitleBar extends React__default.Component {
       onMouseDown: e => {
         this.start(e);
       },
-      onDoubleClick: this.adjustScreen
+      onDoubleClick: this.props.resizable != false ? this.adjustScreen : null
     }, /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "div",
       config: this.props.title ?? '',
@@ -4904,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;
@@ -4917,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: ${({
-  $width = 300
-}) => `${$width}px`};
+  $xw
+}) => $xw.width}px;
+    top: ${({
+  $yh
+}) => $yh.y}px;
     height: ${({
-  $height = 300
-}) => `${$height}px`};
+  $yh
+}) => $yh.height}px;
+
+    xxxwidth: ${({
+  $width = 300
+}) => typeof $width === 'string' ? '50%' : `${$width}px`};
     overflow: hidden;
 
     display: flex;
@@ -4952,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');
@@ -4982,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() {
@@ -4999,6 +5003,7 @@ class JRWindow extends JRFrame {
     this.props.onOpen?.bind(this)();
   }
   close() {
+    // this.init()
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5013,34 +5018,64 @@ class JRWindow extends JRFrame {
       }
     }
   }
-  init() {
-    this.height = window.innerHeight >= (this.props.height ?? this.height) ? this.props.height ?? this.height : window.innerHeight;
-    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 ?? 300)) / 2;
-    this.y = this.props.y ?? (window.innerHeight - (this.height ?? 300)) / 2;
+  // 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) {
+      width = this.props.width.split('%')[0] * window.innerWidth / 100;
+    } else {
+      width = window.innerWidth >= (this.props.width ?? width) ? this.props.width ?? width : window.innerWidth;
+    }
+    return {
+      x: this.props.x ?? (window.innerWidth - width) / 2,
+      width
+    };
+  }
+  get yh() {
+    let height;
+    if (this.props.height?.indexOf?.('%') > -1) {
+      height = this.props.height.split('%')[0] * window.innerHeight / 100;
+    } else {
+      height = window.innerHeight >= (this.props.height ?? height) ? this.props.height ?? height : window.innerHeight;
+    }
+    return {
+      y: this.props.y ?? (window.innerHeight - height) / 2,
+      height
+    };
   }
   renderer() {
-    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default.createElement(StyledJRWindow
-
-    // role="dialog"
-    // aria-labelledby="dialog1Title"
-    // aria-describedby="dialog1Desc"
-    , {
+    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,
       window: this,
       title: this.props.title,
-      thick: this.thick
-    }), /*#__PURE__*/React__default.createElement("main", null, super.renderer())), /*#__PURE__*/React__default.createElement(Sliders, {
+      thick: this.thick,
+      resizable: this.props.resizable
+    }), /*#__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,
@@ -6454,7 +6489,7 @@ function JRAlertWindow({
     },
     width: 440,
     height: 180,
-    maskOn: 'play'
+    maskOn: 'root'
   }, props, {
     open: open,
     setOpen: setOpen,

package/build/index.js

@@ -4092,7 +4092,9 @@ const FreeType = /*#__PURE__*/React.forwardRef(function ({
       style: style,
       ref: ref
     }, content);
-  } else if (typeof config === 'string') {
+    // }else if(typeof config==='string'){
+    //     return <Tag className={className} ref={ref}>{config}</Tag>
+  } else {
     return /*#__PURE__*/React__default["default"].createElement(Tag, {
       className: className,
       ref: ref
@@ -4400,7 +4402,7 @@ class TitleBar extends React__default["default"].Component {
         width,
         height
       } = this.props.windowRef.current.getBoundingClientRect();
-      if (y < 1 - this.props.thick) this.fullScreen(e);
+      if (y < 1 - this.props.thick && this.props.resizable != false) this.fullScreen(e);
       if (y > window.innerHeight - titleBarHeight) this.props.windowRef.current.style.top = `${window.innerHeight - titleBarHeight}px`;
       if (x + width - this.props.thick < 0) this.props.windowRef.current.style.left = 0;
       if (x > window.innerWidth) this.props.windowRef.current.style.left = `${window.innerWidth - width}px`;
@@ -4484,7 +4486,7 @@ class TitleBar extends React__default["default"].Component {
       onMouseDown: e => {
         this.start(e);
       },
-      onDoubleClick: this.adjustScreen
+      onDoubleClick: this.props.resizable != false ? this.adjustScreen : null
     }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.title ?? '',
@@ -4931,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;
@@ -4944,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: ${({
-  $width = 300
-}) => `${$width}px`};
+  $xw
+}) => $xw.width}px;
+    top: ${({
+  $yh
+}) => $yh.y}px;
     height: ${({
-  $height = 300
-}) => `${$height}px`};
+  $yh
+}) => $yh.height}px;
+
+    xxxwidth: ${({
+  $width = 300
+}) => typeof $width === 'string' ? '50%' : `${$width}px`};
     overflow: hidden;
 
     display: flex;
@@ -4979,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');
@@ -5009,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() {
@@ -5026,6 +5030,7 @@ class JRWindow extends JRFrame {
     this.props.onOpen?.bind(this)();
   }
   close() {
+    // this.init()
     this.props.onClose?.bind(this)();
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
@@ -5040,34 +5045,64 @@ class JRWindow extends JRFrame {
       }
     }
   }
-  init() {
-    this.height = window.innerHeight >= (this.props.height ?? this.height) ? this.props.height ?? this.height : window.innerHeight;
-    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 ?? 300)) / 2;
-    this.y = this.props.y ?? (window.innerHeight - (this.height ?? 300)) / 2;
+  // 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) {
+      width = this.props.width.split('%')[0] * window.innerWidth / 100;
+    } else {
+      width = window.innerWidth >= (this.props.width ?? width) ? this.props.width ?? width : window.innerWidth;
+    }
+    return {
+      x: this.props.x ?? (window.innerWidth - width) / 2,
+      width
+    };
+  }
+  get yh() {
+    let height;
+    if (this.props.height?.indexOf?.('%') > -1) {
+      height = this.props.height.split('%')[0] * window.innerHeight / 100;
+    } else {
+      height = window.innerHeight >= (this.props.height ?? height) ? this.props.height ?? height : window.innerHeight;
+    }
+    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
-
-    // role="dialog"
-    // aria-labelledby="dialog1Title"
-    // aria-describedby="dialog1Desc"
-    , {
+    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,
       window: this,
       title: this.props.title,
-      thick: this.thick
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer())), /*#__PURE__*/React__default["default"].createElement(Sliders, {
+      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, {
       thick: this.thick,
       windowRef: this.ref,
       window: this,
@@ -6481,7 +6516,7 @@ function JRAlertWindow({
     },
     width: 440,
     height: 180,
-    maskOn: 'play'
+    maskOn: 'root'
   }, props, {
     open: open,
     setOpen: setOpen,

package/package.json

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

package/src/components/JRAlert/JRAlert.jsx

@@ -30,7 +30,7 @@ function JRAlertWindow({title,message,container,...props}){
         initValue={{message}}
         width={440}
         height={180}
-        maskOn={'play'}
+        maskOn={'root'}
         {...props}
         open={open}
         setOpen={setOpen}

package/src/components/JRFrame/JRFrame.jsx

@@ -15,7 +15,9 @@ export const FreeType=forwardRef(function({tag:Tag,config,me,className}, ref){
     }else if(config?.render){
         const content=config.render.bind(me)({setStyle})
         return <Tag className={className} style={style} ref={ref}>{content}</Tag>
-    }else if(typeof config==='string'){
+    // }else if(typeof config==='string'){
+    //     return <Tag className={className} ref={ref}>{config}</Tag>
+    }else{
         return <Tag className={className} ref={ref}>{config}</Tag>
     }
 })

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})=>`${$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,30 +120,60 @@ export default class JRWindow extends JRFrame {
             }
         }
     }
-    init(){
-        this.height=window.innerHeight>=(this.props.height??this.height)?(this.props.height??this.height):window.innerHeight
-        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??300))/2)
-        this.y=this.props.y??(window.innerHeight-(this.height??300))/2
+    // 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){
+            width=(this.props.width.split('%')[0]*window.innerWidth)/100
+        }else{
+            width=window.innerWidth>=(this.props.width??width)?(this.props.width??width):window.innerWidth
+        }
+        return {
+            x:this.props.x??((window.innerWidth-(width))/2)
+            ,width
+        }
+    }
+
+    get yh(){
+        let height
+        if(this.props.height?.indexOf?.('%')>-1){
+            height=(this.props.height.split('%')[0]*window.innerHeight)/100
+        }else{
+            height=window.innerHeight>=(this.props.height??height)?(this.props.height??height):window.innerHeight
+        }
+        return {
+            y:this.props.y??(window.innerHeight-(height))/2
+            ,height
+        }
     }
 
     renderer(){
         return this.props.popup===true
             ?this.props.open
                 ?<StyledJRWindow
-
-                // role="dialog"
-                // aria-labelledby="dialog1Title"
-                // aria-describedby="dialog1Desc"
-                
                     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 
@@ -151,17 +182,20 @@ export default class JRWindow extends JRFrame {
                             window={this}
                             title={this.props.title}
                             thick={this.thick} 
+                            resizable={this.props.resizable}
                         />
                         <main>
                             {super.renderer()}
                         </main>
                     </main>
-                    <Sliders 
-                        thick={this.thick} 
-                        windowRef={this.ref} 
-                        window={this} 
-                        titleBarRef={this.titleBarRef}
-                    />
+                    {this.props.resizable !== false
+                        && <Sliders 
+                            thick={this.thick} 
+                            windowRef={this.ref} 
+                            window={this} 
+                            titleBarRef={this.titleBarRef}
+                        />
+                    }
                 </StyledJRWindow>
                 :''
             :super.renderer()

package/src/components/JRWindow/TitleBar.jsx

@@ -2,10 +2,8 @@ import styled from "styled-components";
 import { po } from "../JRUtils";
 import React from "react";
 import { FreeType } from "../JRFrame/JRFrame";
-import { IconX,IconCard, IconSquare, IconMinus } from "../../assets/icon";
-import { background } from "storybook/internal/theming";
+import { IconX} from "../../assets/icon";
 import JRButton from "../JRInput/JRButton";
-import { browser } from "globals";
 
 const StyledTitle=styled.div`
     overflow: hidden;
@@ -137,7 +135,7 @@ export default class TitleBar extends React.Component{
             const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
             const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
 
-            if(y<1-this.props.thick)this.fullScreen(e)
+            if(y<1-this.props.thick && this.props.resizable!=false)this.fullScreen(e)
             if(y>window.innerHeight-titleBarHeight)this.props.windowRef.current.style.top = `${window.innerHeight-titleBarHeight}px`
             if(x+width-this.props.thick<0)this.props.windowRef.current.style.left = 0
             if(x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-width}px`
@@ -221,7 +219,7 @@ export default class TitleBar extends React.Component{
             onMouseDown={(e)=>{
                 this.start(e)
             }}
-            onDoubleClick={this.adjustScreen}
+            onDoubleClick={this.props.resizable!=false?this.adjustScreen:null}
         >
             <FreeType tag='div' config={this.props.title??''} me={this.props.window} className={'title'}/>
             <nav>