jrs-react 1.2.23 → 1.2.25

package/package.json

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

package/src/components/JRFields/StyleJRFields.jsx

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 
 export const StyleJRFields=styled.main`
+
+
     --column-bd-color:#cccccc;
     --column-b-color:unset;
     --column-b-hover-color:#ffffff;
@@ -10,12 +12,13 @@ export const StyleJRFields=styled.main`
     overflow: overlay;
     
     color:#525252;
+    height: 100%;
     
     >.jr-grid{
         padding: 10px;
         .jr-column{
             > .label{
-                color:#525252;
+                color:#2e2e2e;
                 text-wrap: nowrap;
                 font-weight: bold;
             }

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;
@@ -44,8 +46,9 @@ const StyledJRFrame=styled.div`
             overflow:hidden;
 
             >main{
-                display:flex;
-                flex:1;
+                width:100%;
+                xdisplay:flex;
+                xflex:1;
                 overflow: overlay;
             }
 
@@ -57,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={`${this.props.className} jr-frame`} >
+        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,34 +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;
@@ -42,8 +23,15 @@ const StyledMask = styled.dialog`
     .cs-loader-inner {
 		transform: translateY(-30%);
 		width: calc(100% - 200xpx);
+        
 	}
 
+    animation: opc .4s ;
+    @keyframes opc {
+        0%   {opacity: 0;background: transparent;visibility:hidden;}
+        20% {opacity: 1;background: #000000aa;    visibility: visible;}
+    }
+
 	.cs-loader-inner label {
 		font-size: 20px;
 		opacity: 0;
@@ -118,10 +106,40 @@ 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;
+    }
+
+    max-width: 100vw;
+    max-height: 100vh;
+    width: 100vw;
+    height: 100vh;
+    border:0;
+    margin: 0;
+    top: 0;
+    left: 0;
+
+`
 
-export default function JRMask({id='jr-mask'}){
-    return <StyledMask id={id} className={'jr-mask'}>
-        <div id={'jr-mask-msg'} ></div>
+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>
             <label>●</label>
@@ -130,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=[]
@@ -148,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)
         }
     }
@@ -161,41 +189,50 @@ class Mask extends JRHTML{
         this.renderMsg()
     }
     renderMsg(){
-        this.msgDiv.removeAllHijos()
-        if(this.msg.length){
-            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.maskDiv){
-        jrMask.maskDiv=new Mask({
-            yo:jrMask
-            ,msgDiv:new JRHTML({
-                yo:jrMaskMsg
-            })
-            ,listeners:{
-                keydown(e){
-                    if (e.key === 'Escape') {
-                        e.preventDefault();
+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:jrMaskMsg
+                    ?new JRHTML({
+                        yo:jrMaskMsg
+                    })
+                    :null
+                ,listeners:{
+                    keydown(e){
+                        if (e.key === 'Escape') {
+                            e.preventDefault();
+                        }
                     }
                 }
-            }
-        })
+            })
+        }
+        return jrMask.maskDiv.addMsg(msg)
     }
-    return jrMask.maskDiv.addMsg(msg)
 }

package/src/components/JRSubmit.jsx

@@ -142,7 +142,6 @@ export default class JRSubmit extends React.Component {
             const fullnamList=fullname.split('.')
             return this.#getValueByName(fullnamList,this[this.from]?.value)
         }else{
-            // po('ssssssssssssssssssssssssssssssssssssssssss')
             // 忘記為甚麼這樣寫了 XDD
             return flexType(this[this.from]?.value,this,null,null)
         }
@@ -218,10 +217,9 @@ export default class JRSubmit extends React.Component {
     }
 
     submit(config){
-        // const me=this
-        // displaySpinner({mask:config.mask})
-        // 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
         ;(()=>{
@@ -251,11 +249,8 @@ export default class JRSubmit extends React.Component {
                 this.handleResponse(res,_payload,config)
             })
             .finally(()=> {
-                // this.setState({loading:false})
-                // displaySpinner({mask:false})
-                // setTimeout(()=>{
-                    config.removeMaskFunction?.()
-                // },random(4000,1000))
+                // setTimeout(config.removeMaskFunction??avoid,random(4000,1000))
+                config.removeMaskFunction?.()
             })
     }
 
@@ -278,14 +273,13 @@ 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)
     }
 
     showMessage(success,message){
-        // po('success',success)
-        // po('message',message)
+        po('success',success)
+        po('message',message)
     }
     
     renderer(){
@@ -293,8 +287,6 @@ export default class JRSubmit extends React.Component {
     }
     
     render() {
-        return this.props.cover!=null && this.state?.lodaing
-            ?<Cover>{flexType(this.props.cover,this,null,null)}</Cover>
-            :this.renderer()
+        return this.renderer()
     }
 }

package/src/components/JRTable/JRTable.jsx

@@ -207,7 +207,7 @@ export default class JRTable extends JRWindow {
     renderMe(){
         
         return<StyledJRTable
-            className={`${this.props.className??''} jr-table ${this.props.onRowClick?'row-highlightable':''}`}
+            className={`jr-table ${this.props.onRowClick?'row-highlightable':''}`}
         >
             <table className={'jr-table-table'}>
                 <TBodies 

package/src/components/JRTable/StyledJRTable.jsx

@@ -2,8 +2,8 @@ import styled from "styled-components";
 
 export const StyledJRTable=styled.div`
     --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
-    --column-b-hover-color:#ffffff;
+    --column-b-color:#ffffff;
+    --column-b-hover-color:#eeeeee;
 
     position: relative;
     background: var(--column-b-color);
@@ -13,7 +13,7 @@ export const StyledJRTable=styled.div`
     flex-direction: column;
     flex:1;
     overflow: overlay;
-
+    height:100%;
 
 
 
@@ -43,7 +43,7 @@ export const StyledJRTable=styled.div`
             top: 0;
 
             th{
-                position: relative;
+                xposition: relative;
                 padding: 2px 6px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;

package/src/components/JRWindow/JRWindow.jsx

@@ -8,6 +8,8 @@ import style from './Style.module.css'
 
 
 const StyledJRWindow=styled.div`
+z-index:1;
+
     --jr-window-radius:3px;
     --padding-child:8px;
     --transition-x-y:height .05s ease-in, width .05s ease-in;
@@ -15,36 +17,35 @@ const StyledJRWindow=styled.div`
     position: fixed;
     padding: ${({$thick})=>$thick}px;
     border-radius: var(--jr-window-radius);
-user-select: text;
+    user-select: text;
 
     top: ${({$y})=>$y}px;
     left: ${({$x})=>$x}px;
     width: ${({$width=300})=>`${$width}px`};
     height: ${({$height=300})=>`${$height}px`};
     overflow: hidden;
-    z-index: 2;
 
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    color:#2e2e2e;
     
     > main{
         border-radius: var(--jr-window-radius);
+        background:#ffffff;;
         box-shadow: 0px 0px 5px 1px gray;
         display: flex;
         flex-direction: column;
         overflow: hidden;
         flex:1;
         > main {
-            Xpadding:var(--padding-child);
             overflow: overlay;
             flex:1;
             display: flex;
-            min-height:32px;
         }
     }
-
 `
+
 export default class JRWindow extends JRFrame {
     x=0
     y=0
@@ -80,12 +81,11 @@ export default class JRWindow extends JRFrame {
         this.mask.remove()
     }
 
-    maskOnTarget(on){
-        po('typeof this.props.maskOn',typeof this.props.maskOn)
-        const target=(typeof this.props.maskOn)==='object'
-            ?this.props.maskOn
-            :typeof this.props.maskOn ==='string'
-                ?document.getElementById(this.props.maskOn)
+    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)
@@ -94,8 +94,8 @@ export default class JRWindow extends JRFrame {
 
     componentDidMount(){
         super.componentDidMount()
-        if(this.props.maskOn && this.props.open){
-            this.maskOnTarget(this.props.open)
+        if(this.props.backdrop && this.props.open){
+            this.backdropOn(this.props.open)
         }
 
         if(this.props.open){
@@ -117,8 +117,8 @@ export default class JRWindow extends JRFrame {
             }else if(this.props.open===false  && prevProps.open){
                 this.close()
             }
-            if(this.props.maskOn && this.props.open!=prevProps.open){
-                this.maskOnTarget(this.props.open)
+            if(this.props.backdrop && this.props.open!=prevProps.open){
+                this.backdropOn(this.props.open)
             }
         }
     }
@@ -133,6 +133,12 @@ export default class JRWindow extends JRFrame {
         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}

package/src/components/JRWindow/Slider.jsx

@@ -236,7 +236,8 @@ class Slider extends React.Component {
         
         this.props.windowRef.current.style.transition='var(--transition-x-y)'
         if(y==0 && this.data.direction.indexOf('n')>-1){
-            this.props.window.orgHeight=height
+            this.props.window.orgSHeight=height
+            
             this.props.windowRef.current.style.height=`${window.innerHeight}px`
         }
         if(y>window.innerHeight)this.props.windowRef.current.style.top = `${window.innerHeight-titleBarHeight}px`
@@ -263,10 +264,11 @@ class Slider extends React.Component {
     }
     preMove=()=>{
         if(this.props.direction.indexOf('n')>-1){
-            this.props.windowRef.current.style.height=`${this.props.window.orgHeight}px`
-            this.data.height=this.props.window.orgHeight
-            this.props.window.orgHeight=null
+            this.props.windowRef.current.style.height=`${this.props.window.orgSHeight}px`
+            this.data.height=this.props.window.orgSHeight
+            this.props.window.orgSHeight=null
         }
+        
         window.removeEventListener('mousemove',this.preMove)
         setTimeout(()=>{
             window.addEventListener('mousemove',this.move)
@@ -276,9 +278,9 @@ class Slider extends React.Component {
         e.preventDefault()
         const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
         let {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
-
+        this.props.window.orgHeight=height
         if(this.props.direction.indexOf('s')>-1){
-            this.props.window.orgHeight=null
+            this.props.window.orgSHeight=null
         }
         this.data={
             x,y
@@ -288,7 +290,7 @@ class Slider extends React.Component {
             ,direction
         }
         document.body.style.cursor=this.directions[this.props.direction].cursor
-        if(this.props.window.orgHeight){
+        if(this.props.window.orgSHeight){
             window.addEventListener('mousemove',this.preMove)
         }else{
             window.addEventListener('mousemove',this.move)

package/src/components/JRWindow/TitleBar.jsx

@@ -190,7 +190,7 @@ export default class TitleBar extends React.Component{
         }else{
             this.remember(e)
         }
-
+        this.props.window.orgSHeight=null
         document.body.style.cursor='grabbing'
         document.body.style.overflow=this.props.window.orgBodyOverflow
 

package/src/index.js

@@ -5,12 +5,12 @@ import JRTable from './components/JRTable/JRTable'
 import JRFields from './components/JRFields/JRFields'
 import JRTestReact from './components/JRTest'
 import JRButton from './components/JRInput/JRButton'
-import JRAlert from './components/JRAlert'
+import JRAlert from './components/JRAlert/JRAlert'
 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