jrs-react 1.2.47 → 1.2.48

package/src/components/JRWindow/JRWindow.jsx

@@ -4,9 +4,7 @@ import styled from "styled-components";
 import TitleBar from "./TitleBar";
 import Sliders from "./Slider";
 import { JRHTML } from "jrs-js";
-import { po, random } from "../JRUtils";
-
-
+import { po } from "../JRUtils";
 
 const StyledBackdrop=styled.div`
     ${({$zIndex})=>$zIndex!=null?`z-index:${$zIndex};`:null}
@@ -58,8 +56,6 @@ const StyledJRWindow=styled.div`
     }
 `
 
-
-
 class Backdrop extends JRHTML{
     backdropConfig={   
         yo:'div'
@@ -73,51 +69,108 @@ class Backdrop extends JRHTML{
         }
     }
 
-    constructor({zIndex,fullScreen,...params}){
+    constructor(params){
         super(params)
-        this.backdropConfig.style.zIndex=zIndex
-        this.backdropConfig.personajes={
-            id:params.backdropId
-        }
         Object.assign(this.backdropConfig.style,params.backdropStyle)
 	}
+
+
     show(){
-        this.agregarHijo(this.backdropConfig)
+        this.backdrop=this.agregarHijo(this.backdropConfig)
     }
     hide(){
-        const backdrop=document.getElementById(this.backdropId)
-        if(backdrop){
-            backdrop.parentNode.removeChild(backdrop);
-        }
+        this.yo.removeChild(this.yo.children[this.yo.children.length-1])
         this.hijos=[]
     }
 }
 
-
-
-class RWindow extends React.Component {
+export default class JRWindow extends JRFrame {
+    // x=0
+    // y=0
+    // width=300
+    // height=300
     padding=1
     thick=5
+    
     constructor(props){
         super(props)
+        this.ref=React.createRef()
         this.titleBarRef=React.createRef()
     }
 
-    componentDidMount(){
-        if(this.props.open){
-            this.props.jrWindow.backdropTarget?.show()
-            this.props.onOpen?.bind(this.props.jrWindow)()
+    createBackdrop(){
+        if(typeof this.props.backdrop === 'string'){
+            const target=document.getElementById(this.props.backdrop)
+            if(target){
+                this.backdropTarget=new Backdrop({
+                    yo:target
+                    ,style:{
+                        position: 'relative'
+                    }
+                    ,backdropStyle:this.props.backdropStyle
+                })
+            }
         }
     }
-    componentWillUnmount(){
+
+    addMaskToTarget=(target)=>{
+        this.mask=document.createElement('div')
+        this.mask.style.background='#868686cc'
+        this.mask.style.position='absolute'
+        this.mask.style.top='0'
+        this.mask.style.left='0'
+        this.mask.style.right='0'
+        this.mask.style.bottom='0'
+        this.mask.style.borderRadius='inherit'
+        this.mask.style.height='10000px'
+        this.mask.style.width='10000px'
+        target.appendChild(this.mask)
+    }
+    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')
+    // }
+
+    componentDidMount(){
+        super.componentDidMount()
+        this.createBackdrop()
         if(this.props.open){
-            this.props.jrWindow.backdropTarget?.hide()
+            this.open()
         }
     }
 
+    open(){
+        this.backdropTarget?.show()
+        this.props.onOpen?.bind(this)()
+    }
+    close(){
+        this.backdropTarget?.hide()
+        this.props.onClose?.bind(this)()
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot){
+        if(this.props.popup===true){
+            if(this.props.open && prevProps.open===false){
+                this.open()
+            }else if(this.props.open===false  && prevProps.open){
+                this.close()
+            }
+            // if(this.props.backdrop && this.props.open!=prevProps.open){
+            //     this.backdropOn(this.props.open)
+            // }
+        }
+    }
 
     get xw(){
-        let width=700
+        let width
         if(this.props.width?.indexOf?.('%')>-1){
             width=(this.props.width.split('%')[0]*window.innerWidth)/100
         }else{
@@ -130,7 +183,7 @@ class RWindow extends React.Component {
     }
 
     get yh(){
-        let height=400
+        let height
         if(this.props.height?.indexOf?.('%')>-1){
             height=(this.props.height.split('%')[0]*window.innerHeight)/100
         }else{
@@ -142,89 +195,43 @@ class RWindow extends React.Component {
         }
     }
 
-    render(){
-        const {children,title,resizable,jrWindow,...props}=this.props
-        return <StyledJRWindow 
-            $zIndex={this.props.zIndex?this.props.zIndex+1:null}
-            className={`jr-window ${this.props.className??''}`}
-            ref={this.props.windowRef}
-            $xw={this.xw}
-            $yh={this.yh}
-            $thick={this.thick}
-        >
-            <main style={{zIndex:this.props.zIndex?this.props.zIndex+1:null}} >
-                <TitleBar 
-                    titleBarRef={this.titleBarRef}
-                    jrWindow={jrWindow}
-                    windowRef={this.props.windowRef} 
-                    window={this}
-                    title={title}
-                    thick={this.thick} 
-                    resizable={resizable}
-                    />
-                {children}
-                {this.props.resizable !== false
-                    && <Sliders 
-                    thick={this.thick} 
-                    windowRef={this.props.windowRef} 
-                    window={this} 
-                    titleBarRef={this.titleBarRef}
-                    />
-                }
-            </main>
-            {this.props.backdrop===true && <StyledBackdrop $zIndex={this.props.zIndex}/>}
-        </StyledJRWindow>
-    } 
-}
-
-export default class JRWindow extends JRFrame {
-    constructor(props){
-        super(props)
-        this.windowRef=React.createRef()
-        this.backdropId=`backdropId-${random(10000,99999)}`
-    }
-    
-    componentDidMount(){
-        super.componentDidMount()
-        this.createBackdrop()
-    }
-    componentWillUnmount(){
-        if(this.props.open){
-            this.backdropTarget?.hide()
-        }
-    }
-    componentDidUpdate(prevProps, prevState){
-        if(prevProps.open && prevProps.open!=this.props.open){
-            this.props.onClose?.bind(this)()
-        }
-    }
-
-    componentWillUpdate
-    createBackdrop(){
-        if(typeof this.props.backdrop === 'string'){
-            const target=document.getElementById(this.props.backdrop)
-            if(target){
-                this.backdropTarget=new Backdrop({
-                    yo:target
-                    ,backdropId:this.backdropId
-                    ,fullScreen:this.props.backdrop===true
-                    ,zIndex:this.props.zIndex
-                    ,backdropStyle:this.props.backdropStyle
-                })
-                if(this.props.open){
-                    this.backdropTarget.show()
-                }
-            }
-        }
-    }
-
     renderer(){
-        const {popup,open,xzIndex=1,...props}=this.props
-        return popup===true
-            ?open
-                ?<RWindow {...props}  jrWindow={this} open={open} windowRef={this.windowRef}>
-                    {super.renderer()}
-                </RWindow>
+        return this.props.popup===true
+            ?this.props.open
+                ?<>
+                    <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>
+                        {this.props.backdrop!==false && typeof this.props.backdrop!=='string' && <StyledBackdrop $zIndex={this.props.zIndex}/>}
+                    </StyledJRWindow>
+                </>
                 :''
             :super.renderer()
     }

package/src/components/JRWindow/TitleBar.jsx

@@ -199,8 +199,6 @@ export default class TitleBar extends React.Component{
         window.removeEventListener('mousemove',this.preMove)
     }
     start(e){
-        po('start',this)
-        po('this.props.windowRef',this.props.windowRef)
         e.preventDefault()
         this.moved=false
         this.pos3 = e.clientX
@@ -228,7 +226,7 @@ export default class TitleBar extends React.Component{
                 {/* <JRButton icon={<IconMinus />}/>
                 <JRButton icon={<IconSquare />}/> */}
                 {
-                    this.props.jrWindow.props.close
+                    this.props.window.props.setOpen
                         ?<JRButton icon={<IconX />} 
                             className={'danger'}
                             onClick={(e)=>{
@@ -236,7 +234,7 @@ export default class TitleBar extends React.Component{
                                 if(this.props.window.orgBodyOverflow!=null){
                                     document.body.style.overflow=this.props.window.orgBodyOverflow
                                 }
-                                this.props.jrWindow.props.close()
+                                this.props.window.props.setOpen(false)
                             }}
                             onMouseDown={(e)=>{
                                 e.stopPropagation()