jrs-react 1.2.24 → 1.2.25

package/package.json

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

package/src/components/JRFrame/JRFrame.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import JRSubmit from "../JRSubmit";
+import { po, random } from "../JRUtils";
 
 export const FreeType=({tag:Tag,config,me,className})=>{
     if(typeof config==='function'){
@@ -17,6 +18,7 @@ export const FreeType=({tag:Tag,config,me,className})=>{
 }
 
 const StyledJRFrame=styled.div`
+    position:relative;
     display:flex;
     flex:1;
     overflow:hidden;
@@ -58,10 +60,24 @@ const StyledJRFrame=styled.div`
 
     }
 `
-
 export default class JRFrame extends JRSubmit {
+    rid=random(99999,10000)
+    mask=this.props.mask
+        ?()=>{
+            const {type,props}=this.props.mask
+            this.maskId=`mask-${this.rid}`
+            return React.createElement(
+                type
+                ,{
+                    ...props
+                    ,id:this.maskId
+                }
+            ) 
+        }
+        :null
     renderer(){
         return <StyledJRFrame  id={this.props.id} style={this.props.style} className={`jr-frame`} >
+            {this.mask?.()}
             <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
             <main>
                 <FreeType tag='header' config={this.props.top} me={this}/>

package/src/components/JRMask/JRMask.jsx

@@ -3,36 +3,15 @@ import { JRHTML } from "jrs-js"
 import { po } from "../JRUtils"
 import styled from "styled-components"
 
-const StyledMask = styled.dialog`
-
-
+const css=`
     display:none;
-    &:open{
-        display:flex;
-    }
-
-    &:modal  {
-        outline: 0;
-        background-color: #000000aa;
-    }
-
     #jr-mask-msg{
         padding: 10px;
     }
-    
-    max-width: 100vw;
-    max-height: 100vh;
-
-    width: 100vw;
-    height: 100vh;
-
-    border:0;
-    margin: 0;
-    top: 0;
-    left: 0;
-    color: ${({theme})=>theme?.colorPrimary??'whilte'};
     user-select: none;
     cursor: wait;
+    background-color: #000000aa;
+    color: ${({theme})=>theme?.colorPrimary??'whilte'};
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -47,7 +26,6 @@ const StyledMask = styled.dialog`
         
 	}
 
-
     animation: opc .4s ;
     @keyframes opc {
         0%   {opacity: 0;background: transparent;visibility:hidden;}
@@ -128,9 +106,39 @@ const StyledMask = styled.dialog`
         animation: lol 3s 500ms infinite ease-in-out;
     }
 `
+const StyledDialogMask = styled.dialog`
+    ${css}
+    &:open{
+        display:flex;
+    }
+
+    &:modal  {
+        outline: 0;
+        background-color: #000000aa;
+    }
 
-export default function JRMask({id='jr-mask'}){
-    return <StyledMask id={id} className={'jr-mask'}>
+    max-width: 100vw;
+    max-height: 100vh;
+    width: 100vw;
+    height: 100vh;
+    border:0;
+    margin: 0;
+    top: 0;
+    left: 0;
+
+`
+
+const StyledDivMask = styled.div`
+    ${css}
+    width:100%;
+    height:100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+`
+
+export default function JRDialogMask({id='jr-mask'}){
+    return <StyledDialogMask id={id} className={'jr-mask'}>
         <div id={`${id}-msg`} ></div>
         <div className="cs-loader-inner">
             <label>●</label>
@@ -140,11 +148,22 @@ export default function JRMask({id='jr-mask'}){
             <label>●</label>
             <label>●</label>
         </div>
-    </StyledMask>
+    </StyledDialogMask>
 }
 
-
-
+export function JRDivMask({id='jr-mask'}){
+    return <StyledDivMask id={id}>
+        <div id={`${id}-msg`} >MSG</div>
+        <div className="cs-loader-inner">
+            <label>●</label>
+            <label>●</label>
+            <label>●</label>
+            <label>●</label>
+            <label>●</label>
+            <label>●</label>
+        </div>
+    </StyledDivMask>
+}
 
 class Mask extends JRHTML{
     msg=[]
@@ -158,11 +177,10 @@ class Mask extends JRHTML{
         const index=this.msgIndex
         this.msg.push({
             i:index
-            ,msg
+            ,msg:msg!==true?msg:null
         })
         this.renderMsg()
         return ()=>{
-            po('remove function', index)
             this.removeMsg(index)
         }
     }
@@ -171,35 +189,41 @@ class Mask extends JRHTML{
         this.renderMsg()
     }
     renderMsg(){
-        this.msgDiv.removeAllHijos()
-        if(this.msg.length){
-            this.msgDiv.html=this.msg[this.msg.length-1].msg
-            // this.msgDiv.agregarHijo(
-            //     new JRHTML({
-            //         yo:'div'
-            //         ,textContent:this.msg[this.msg.length-1].msg
-            //     })
-            // )
-            if(!this.yo.open){
-                this.yo.showModal()
-            }
+        this.msgDiv?.removeAllHijos()
+        if(this.msg.length ){
+            if(this.msgDiv) this.msgDiv.html=this.msg[this.msg.length-1].msg
+            this.run()
         }else{
-            this.yo.close()
+            this.stop()
         }
     }
+    run=()=>{
+        this.yo.showModal?.() ?? this.display()
+    }
+    display(){
+        this.yo.style.display='flex'
+    }
+    stop(){
+        this.yo.close?.() ?? this.hide()
+    }
+    hide(){
+        this.yo.style.display='none'
+    }
 }
 
-export function showMask(msg,maskTarget,whichMask){
-    const jrMask=document.getElementById('jr-mask')
-    const jrMaskMsg=document.getElementById('jr-mask-msg')
-
-    if((jrMask && jrMaskMsg)){
+export function showMask(msg,maskId='jr-mask'){
+    const jrMask=document.getElementById(maskId)
+    
+    if((jrMask)){
+        const jrMaskMsg=document.getElementById(`${maskId}-msg`)
         if(!jrMask.maskDiv){
             jrMask.maskDiv=new Mask({
                 yo:jrMask
-                ,msgDiv:new JRHTML({
-                    yo:jrMaskMsg
-                })
+                ,msgDiv:jrMaskMsg
+                    ?new JRHTML({
+                        yo:jrMaskMsg
+                    })
+                    :null
                 ,listeners:{
                     keydown(e){
                         if (e.key === 'Escape') {

package/src/components/JRSubmit.jsx

@@ -217,8 +217,9 @@ export default class JRSubmit extends React.Component {
     }
 
     submit(config){
-        this.setState({loading:true})
-        if(config.mask) config.removeMaskFunction=showMask(config.mask,null,'jr-mask')
+        if(config.mask) {
+            config.removeMaskFunction=showMask(config.mask,this.maskId??'jr-mask')
+        }
             
         let _payload
         ;(()=>{
@@ -248,6 +249,7 @@ export default class JRSubmit extends React.Component {
                 this.handleResponse(res,_payload,config)
             })
             .finally(()=> {
+                // setTimeout(config.removeMaskFunction??avoid,random(4000,1000))
                 config.removeMaskFunction?.()
             })
     }
@@ -271,7 +273,6 @@ export default class JRSubmit extends React.Component {
         
         this.setRes(isSuccess,response,config)
         this.showMessage(isSuccess,isSuccess?config.successMessage:config.failedMessage)
-
     
         config.callback?.bind(this)(isSuccess,response,payload)
     }

package/src/index.js

@@ -10,7 +10,7 @@ import JRSelect from './components/JRInput/JRSelect'
 import JRCheckbox from './components/JRInput/JRCheckbox'
 import JRRadio from './components/JRInput/JRRadio'
 import JRText from './components/JRInput/JRText'
-import JRMask,{showMask} from './components/JRMask/JRMask'
+import JRMask,{JRDivMask,showMask} from './components/JRMask/JRMask'
 import {random} from './components/JRUtils'
 export {
     JRTestReact