jrs-react 1.2.36 → 1.2.37

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 ?? '',
@@ -4925,7 +4927,7 @@ z-index:1;
 }) => $x}px;
     width: ${({
   $width = 300
-}) => `${$width}px`};
+}) => typeof $width === 'string' ? '50%' : `${$width}px`};
     height: ${({
   $height = 300
 }) => `${$height}px`};
@@ -5014,18 +5016,22 @@ 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;
+    po('window', window.innerWidth);
+    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;
   }
   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 ?? ''}`,
@@ -5039,8 +5045,9 @@ class JRWindow extends JRFrame {
       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 +6461,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 ?? '',
@@ -4952,7 +4954,7 @@ z-index:1;
 }) => $x}px;
     width: ${({
   $width = 300
-}) => `${$width}px`};
+}) => typeof $width === 'string' ? '50%' : `${$width}px`};
     height: ${({
   $height = 300
 }) => `${$height}px`};
@@ -5041,18 +5043,22 @@ 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;
+    po('window', window.innerWidth);
+    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;
   }
   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 ?? ''}`,
@@ -5066,8 +5072,9 @@ class JRWindow extends JRFrame {
       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 +6488,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.37",
 	"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

@@ -21,7 +21,7 @@ z-index:1;
 
     top: ${({$y})=>$y}px;
     left: ${({$x})=>$x}px;
-    width: ${({$width=300})=>`${$width}px`};
+    width: ${({$width=300})=>typeof $width === 'string'? '50%' : `${$width}px`};
     height: ${({$height=300})=>`${$height}px`};
     overflow: hidden;
 
@@ -120,21 +120,26 @@ 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
+        po('window',window.innerWidth)
+        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
     }
 
     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??''}`}
@@ -151,17 +156,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>