jrs-react 1.2.23 → 1.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.23",
+	"version": "1.2.24",
 	"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

@@ -44,8 +44,9 @@ const StyledJRFrame=styled.div`
             overflow:hidden;
 
             >main{
-                display:flex;
-                flex:1;
+                width:100%;
+                xdisplay:flex;
+                xflex:1;
                 overflow: overlay;
             }
 
@@ -60,7 +61,7 @@ const StyledJRFrame=styled.div`
 
 export default class JRFrame extends JRSubmit {
     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`} >
             <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

@@ -4,6 +4,8 @@ import { po } from "../JRUtils"
 import styled from "styled-components"
 
 const StyledMask = styled.dialog`
+
+
     display:none;
     &:open{
         display:flex;
@@ -42,8 +44,16 @@ 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;
@@ -121,7 +131,7 @@ const StyledMask = styled.dialog`
 
 export default function JRMask({id='jr-mask'}){
     return <StyledMask id={id} className={'jr-mask'}>
-        <div id={'jr-mask-msg'} ></div>
+        <div id={`${id}-msg`} ></div>
         <div className="cs-loader-inner">
             <label>●</label>
             <label>●</label>
@@ -163,12 +173,13 @@ class Mask extends JRHTML{
     renderMsg(){
         this.msgDiv.removeAllHijos()
         if(this.msg.length){
-            this.msgDiv.agregarHijo(
-                new JRHTML({
-                    yo:'div'
-                    ,textContent:this.msg[this.msg.length-1].msg
-                })
-            )
+            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()
             }
@@ -182,20 +193,22 @@ 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();
+    if((jrMask && jrMaskMsg)){
+        if(!jrMask.maskDiv){
+            jrMask.maskDiv=new Mask({
+                yo:jrMask
+                ,msgDiv:new JRHTML({
+                    yo:jrMaskMsg
+                })
+                ,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,9 +217,7 @@ export default class JRSubmit extends React.Component {
     }
 
     submit(config){
-        // const me=this
-        // displaySpinner({mask:config.mask})
-        // this.setState({loading:true})//拿掉可能會有問題, 先觀察看看
+        this.setState({loading:true})
         if(config.mask) config.removeMaskFunction=showMask(config.mask,null,'jr-mask')
             
         let _payload
@@ -251,11 +248,7 @@ 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))
+                config.removeMaskFunction?.()
             })
     }
 
@@ -284,8 +277,8 @@ export default class JRSubmit extends React.Component {
     }
 
     showMessage(success,message){
-        // po('success',success)
-        // po('message',message)
+        po('success',success)
+        po('message',message)
     }
     
     renderer(){
@@ -293,8 +286,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,7 +5,7 @@ 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'