jrs-react 1.2.22 → 1.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.22",
+	"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()
             }
@@ -176,29 +187,28 @@ class Mask extends JRHTML{
             this.yo.close()
         }
     }
-    get msg(){
-        return 'msg'
-    }
 }
 
 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'

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en" id="html">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body id="body" style="background: black;color:white;">
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

package/public/alert.json

@@ -1,4 +0,0 @@
-{
-    "title":"I am from server title"
-    ,"message":"I am from server message"
-}

package/public/data.json

@@ -1,29 +0,0 @@
-{
-    "name":"Joren"
-    ,"phone":[
-         {"phone":"0948272834","name":"中華電信"}
-        ,{"phone":"0987304555","name":"遠傳"}
-    ]
-    ,"dataUrl":"data.json"
-    ,"account":"jorenlai"
-    ,"email":"joren.lai@gmail.com"
-    ,"address":{
-        "no":"53-102"
-        ,"street":"Jalan Indah"
-        ,"postcode":"86000"
-        ,"state":"Johor"
-        ,"country":"Malaysia"
-    }
-    ,"father":"Lai"
-    ,"mother":"Wong"
-
-    ,"checkbox": [
-        1,
-        3,
-        5
-    ],
-    "select": [
-        2
-    ]
-    ,"radio":1
-}

package/public/data2.json

@@ -1,19 +0,0 @@
-{
-    "name":"Joren 2"
-    ,"phone":[
-         {"phone":"0948272834","name":"中華電信"}
-        ,{"phone":"0987304555","name":"遠傳"}
-    ]
-    ,"dataUrl":"data.json"
-    ,"account":"jorenlai"
-    ,"email":"joren.lai@gmail.com"
-    ,"address":{
-        "no":"53-102"
-        ,"street":"Jalan Indah"
-        ,"postcode":"86000"
-        ,"state":"Johor"
-        ,"country":"Malaysia"
-    }
-    ,"father":"Lai"
-    ,"mother":"Wong"
-}

package/public/list.json

@@ -1,132 +0,0 @@
-[
-    {
-        "name":"Joren"
-        ,"id":1
-        ,"phone":"097459999"
-        ,"address":{
-            "no":"23"
-            ,"street":"Jalan Indah"
-            ,"country":"Malaysia"
-        }
-    }
-    ,{
-        "name":"John"
-        ,"id":2
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"Oliver"
-        ,"id":3
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"Harry"
-        ,"id":4
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"Jacob"
-        ,"id":5
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"Charlie"
-        ,"id":6
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"Thomas"
-        ,"id":7
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"George"
-        ,"id":8
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"Oscar"
-        ,"id":9
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"James"
-        ,"id":10
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"William"
-        ,"id":11
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"Emily"
-        ,"id":12
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-    ,{
-        "name":"Isla"
-        ,"id":13
-        ,"phone":"0124873737"
-        ,"address":{
-            "no":"36"
-            ,"street":"景興路"
-            ,"country":"台灣"
-        }
-    }
-]

package/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/app/App.css

@@ -1,42 +0,0 @@
-
-
-html,*,*:before,*:after {
-    box-sizing: border-box;
-}
-  
-
-.withMask{
-    position: relative;
-    overflow: hidden !important;
-    user-select: none;
-    &::after{
-        content:'' ;
-        background : #868686cc; 
-        a:#868686cc;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: inherit;
-        height: 10000px;
-        width: 10000px;
-    }
-}
-
-#jr-alert-div{
-    >div:not(:last-child){
-        display: none;
-    }
-}
-
-
-
-Xdialog.jr-mask::backdrop {
-    background: #000c6e;
-    opacity: .3;
-}
-
-dialog:modal {
-    max-width: 100vw;
-  }