jrs-react 1.2.19 → 1.2.20

package/src/app/dev/devApp.jsx

@@ -0,0 +1,146 @@
+import { JRHTML } from "jrs-js"
+import { useEffect, useRef } from "react"
+import { po, random } from "../../components/JRUtils"
+import MyFunction from "./tobeimport"
+import JRMask, { showMask } from "../../components/JRMask/JRMask"
+import JRFields from "../../components/JRFields/JRFields"
+import JRTable from "../../components/JRTable/JRTable"
+import JRSelect from "../../components/JRInput/JRSelect"
+
+
+
+const removeFunctions={}
+export default function DevApp() {
+    const tRef=useRef()
+    const fRef=useRef()
+    const sRef=useRef()
+    const no=5
+
+    useEffect(()=>{
+        // showMask('JRMask',null,'jr-mask')
+    },[])
+    return <div id={'dev'}>
+        <JRMask />
+
+        <button
+            onClick={()=>{
+                po(random())
+            }}
+        >
+            Random
+        </button>
+
+        <button
+            onClick={()=>{
+                const removeFunction=showMask('JRMask',null,'jr-mask')
+                removeFunction()
+            }}
+        >
+            JRMask
+        </button>
+
+        <button
+            onClick={()=>{
+                const removeFunction=showMask('Default')
+                removeFunction()
+            }}
+        >
+            Default
+        </button>
+        <br/>
+
+        <button
+            onClick={()=>{
+                setTimeout(()=>{tRef.current.get({mask:random(2000,100)})},random(4000,100))
+                setTimeout(()=>{fRef.current.get()},random(3000,100))
+                setTimeout(()=>{sRef.current.get()},random(2000,100))
+            }}
+        >
+            Get all
+        </button>
+        <br/>
+        {
+            Array(no).fill().map((f,a,i)=>{
+                return  <button
+                    key={a}
+                    onClick={()=>{
+                        removeFunctions[a]=showMask(`message ${a}`,null,'jr-mask')
+                        
+                    }}
+                >
+                    Add {a}
+                </button>
+            })
+        }
+        <br/>
+        {
+            Array(no).fill().map((f,a,i)=>{
+                return  <button
+                    key={a}
+                    onClick={()=>{
+                        removeFunctions[a]?.()
+                    }}
+                >
+                    del {a}
+                </button>
+            })
+        }
+        <JRFields
+            ref={fRef}
+            get={{
+                url:'data.json'
+                // ,autoRun:true
+                ,mask:'JRFields loading'
+            }}
+            columns={[
+                {name:'name'}
+            ]}
+            left={function(){
+                return <div>
+                    <button
+                        onClick={()=>{
+                            this.get({
+                                mask:'Field is loading'
+                            })
+                        }}
+                    >Get</button>
+                </div>
+            }}
+        />
+        <JRTable
+            ref={tRef}
+            get={{
+                url:'list.json'
+                // ,autoRun:true
+                ,mask:'JRTable loading'
+            }}
+            style={{
+                height:'50px'
+            }}
+            columns={[
+                {name:'name'}
+            ]}
+            left={function(){
+                return <div>
+                    <button
+                        onClick={()=>{
+                            this.get({
+                                mask:'Table is loading'
+                            })
+                        }}
+                    >Get</button>
+                </div>
+            }}
+        />
+        <JRSelect
+            ref={sRef}
+            get={{
+                url:'list.json'
+                ,autoRun:true
+                ,mask:'JRSelect is loading'
+            }}
+            labelName={'name'}
+            valueName={'id'}
+        />
+    </div>
+}

package/src/app/dev/tobeimport.js

@@ -0,0 +1,7 @@
+import { po } from "../../components/JRUtils"
+
+export default function MyFunction(){
+    return 'MyFunction'
+}
+
+po('import -----------------')

package/src/app/test/index.jsx

@@ -1,8 +1,48 @@
-import React, { useEffect } from "react"
-
+import React, { useEffect, useRef, useState } from "react"
+import { po } from "../../components/JRUtils"
+import JRFields from "../../components/JRFields/JRFields"
+import JRFrame from "../../components/JRFrame/JRFrame"
+import styled from "styled-components"
 
+const StyledDialog=styled.dialog`
+`
+class JRDialog extends JRFrame {
+    renderer(){
+        return <StyledDialog open>
+            Dialog
+            {super.renderer()}
+        </StyledDialog>
+    }
+}
 export default function TestApp(){
+    const ref=useRef()
+    const [open,setOpen]=useState(false)
     useEffect(()=>{
-    },[])
-    return <div>Test</div>
+        if(open){
+            po('open',open)
+            ref.current.showModal()
+        }else{
+            po('close',open)
+            ref.current.close()
+        }
+    },[open])
+    return <div>
+        isOpen={open+''}
+        <button onClick={()=>{
+            // ref.current.showModal();
+            po(true)
+            setOpen(true)
+        }}>open dialog</button>
+
+        <StyledDialog id="dialog" ref={ref} >
+            <JRFields/>
+            <p>I'm a dialog.</p>
+                <button
+                    onClick={()=>{
+                        // ref.current.close();
+                        setOpen(false)
+                    }}
+                >Close</button>
+        </StyledDialog>
+    </div>
 }

package/src/components/JRMask/JRMask.jsx

@@ -0,0 +1,204 @@
+import { JRHTML } from "jrs-js"
+import { po } from "../JRUtils"
+import styled from "styled-components"
+
+const StyledMask = styled.dialog`
+    display:none;
+    &:open{
+        display:flex;
+    }
+
+    &:modal  {
+        outline: 0;
+        background: #000c6e77;
+    }
+
+    #jr-mask-msg{
+        padding: 10px;
+    }
+    
+    max-width: 100vw;
+    max-height: 100vh;
+
+    width: 100vw;
+    height: 100vh;
+
+    border:0;
+    margin: 0;
+    top: 0;
+    left: 0;
+
+    user-select: none;
+    cursor: wait;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+
+    z-index: 20000;
+    overflow: hidden;
+    
+    .cs-loader-inner {
+		transform: translateY(-30%);
+		width: calc(100% - 200xpx);
+	}
+
+	.cs-loader-inner label {
+		font-size: 20px;
+		opacity: 0;
+		display:inline-block;
+		color:white;
+	}
+
+    @keyframes lol {
+        0% {
+            opacity: 0;
+            transform: translateX(-300px);
+        }
+        33% {
+            opacity: 1;
+            transform: translateX(0px);
+        }
+        66% {
+            opacity: 1;
+            transform: translateX(0px);
+        }
+        100% {
+            opacity: 0;
+            transform: translateX(300px);
+        }
+    }
+
+    @-webkit-keyframes lol {
+        0% {
+            opacity: 0;
+            -webkit-transform: translateX(-300px);
+        }
+        33% {
+            opacity: 1;
+            -webkit-transform: translateX(0px);
+        }
+        66% {
+            opacity: 1;
+            -webkit-transform: translateX(0px);
+        }
+        100% {
+            opacity: 0;
+            -webkit-transform: translateX(300px);
+        }
+    }
+
+    .cs-loader-inner label:nth-child(6) {
+        -webkit-animation: lol 3s infinite ease-in-out;
+        animation: lol 3s infinite ease-in-out;
+    }
+
+    .cs-loader-inner label:nth-child(5) {
+        -webkit-animation: lol 3s 100ms infinite ease-in-out;
+        animation: lol 3s 100ms infinite ease-in-out;
+    }
+
+    .cs-loader-inner label:nth-child(4) {
+        -webkit-animation: lol 3s 200ms infinite ease-in-out;
+        animation: lol 3s 200ms infinite ease-in-out;
+    }
+
+    .cs-loader-inner label:nth-child(3) {
+        -webkit-animation: lol 3s 300ms infinite ease-in-out;
+        animation: lol 3s 300ms infinite ease-in-out;
+    }
+
+    .cs-loader-inner label:nth-child(2) {
+        -webkit-animation: lol 3s 400ms infinite ease-in-out;
+        animation: lol 3s 400ms infinite ease-in-out;
+    }
+
+    .cs-loader-inner label:nth-child(1) {
+        -webkit-animation: lol 3s 500ms infinite ease-in-out;
+        animation: lol 3s 500ms infinite ease-in-out;
+    }
+`
+
+export default function JRMask({id='jr-mask'}){
+    return <StyledMask id={id} className={'jr-mask'}>
+        <div id={'jr-mask-msg'} ></div>
+        <div className="cs-loader-inner">
+            <label>●</label>
+            <label>●</label>
+            <label>●</label>
+            <label>●</label>
+            <label>●</label>
+            <label>●</label>
+        </div>
+    </StyledMask>
+}
+
+
+
+
+class Mask extends JRHTML{
+    msg=[]
+    #msgIndex=0
+    #mask
+    get msgIndex(){
+        return this.#msgIndex++
+    }
+
+    addMsg(msg){
+        const index=this.msgIndex
+        this.msg.push({
+            i:index
+            ,msg
+        })
+        this.renderMsg()
+        return ()=>{
+            po('remove function', index)
+            this.removeMsg(index)
+        }
+    }
+    removeMsg(index){
+        this.msg=this.msg.filter(r=>r.i!=index)
+        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()
+            }
+        }else{
+            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();
+                    }
+                }
+            }
+        })
+    }
+    return jrMask.maskDiv.addMsg(msg)
+}

package/src/components/JRSubmit.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import axios from 'axios'
-import { colonValueString, flexType, po } from './JRUtils'
-import { displaySpinner } from './LoadingBar'
+import { colonValueString, flexType, po, random } from './JRUtils'
 import styled from 'styled-components'
+import { showMask } from './JRMask/JRMask'
 
 const axiosSubmit = axios.create({
     authorization: `Bearer ${localStorage.getItem("accessToken")}`
@@ -218,9 +218,11 @@ export default class JRSubmit extends React.Component {
     }
 
     submit(config){
-        const me=this
-        displaySpinner({mask:config.mask})
-        this.setState({loading:true})
+        // const me=this
+        // displaySpinner({mask:config.mask})
+        // this.setState({loading:true})//拿掉可能會有問題, 先觀察看看
+        if(config.mask) config.removeMaskFunction=showMask(config.mask,null,'jr-mask')
+            
         let _payload
         ;(()=>{
             if (Array.isArray(config.url)) {
@@ -248,9 +250,12 @@ export default class JRSubmit extends React.Component {
             .catch((res)=>{
                 this.handleResponse(res,_payload,config)
             })
-            .finally(function (a,b,c) {
-                me.setState({loading:false})
-                displaySpinner({mask:false})
+            .finally(()=> {
+                // this.setState({loading:false})
+                // displaySpinner({mask:false})
+                // setTimeout(()=>{
+                    config.removeMaskFunction?.()
+                // },random(4000,1000))
             })
     }
 

package/src/components/JRUtils.jsx

@@ -76,4 +76,8 @@ export const whatType=(
         return doElse
     }
     return 'what type'
+}
+
+export function random(max=100, min=0){
+    return Math.floor(Math.random() * (max+1-min)) + min;
 }

package/src/components/JRWindow/TitleBar.jsx

@@ -107,7 +107,6 @@ export default class TitleBar extends React.Component{
         }
     }
     floatScreen=(e)=>{
-        po('floatScreen')
         const w=this.props.windowRef.current
         const {clientX,clientY}=e
 
@@ -119,8 +118,6 @@ export default class TitleBar extends React.Component{
         document.body.style.overflow=this.props.window.orgBodyOverflow
     }
     fullScreen=(e)=>{
-        po('fullScreen',this.props.thick)
-
         this.props.windowRef.current.style.transition='var(--transition-x-y), left .05s ease-in'
         this.props.windowRef.current.style.left=`${-this.props.thick}px`
         this.props.windowRef.current.style.top=`${-this.props.thick}px`
@@ -134,7 +131,6 @@ export default class TitleBar extends React.Component{
 
     }
     stop=(e)=>{
-        po('stop')
         e.preventDefault()
         if(this.moved){
             const {clientX,clientY}=e
@@ -155,7 +151,6 @@ export default class TitleBar extends React.Component{
 
     }
     move=(e)=>{
-        po('move')
         e.preventDefault()
         this.moved=true
         const {clientX,clientY}=e
@@ -169,32 +164,18 @@ export default class TitleBar extends React.Component{
         this.y=w.offsetTop - this.pos2
         this.x=w.offsetLeft - this.pos1
 
-        // if(this.props.window.orgWidth){
-        //     w.style.width=`${this.props.window.orgWidth}px`
-        //     this.props.window.orgWidth=null
-        // }
-
         this.y=this.y<-this.props.thick?-this.props.thick:this.y
         w.style.transition='unset'
         w.style.top = `${this.y}px`
         w.style.left = `${this.x}px`
     }
     preMove=(e)=>{
-        console.clear()
-        po('preMove')
-        
         const w=this.props.windowRef.current
         const {clientX,clientY,...oe}=e
-        po('e',e)
 
         const {x,y,width,height}=w.getBoundingClientRect()
-        po('width',width)
 
-        if(y<=-this.props.thick){
-
-
-        }
-w.style.transition='left .05s ease-in, height .05s ease-in'
+        w.style.transition='left .05s ease-in, height .05s ease-in'
         if(y<=0){
             // contt browserWidth=
             const w1=window.innerWidth-(this.props.thick*2)
@@ -220,7 +201,6 @@ w.style.transition='left .05s ease-in, height .05s ease-in'
         window.removeEventListener('mousemove',this.preMove)
     }
     start(e){
-        po('start')
         e.preventDefault()
         this.moved=false
         this.pos3 = e.clientX

package/src/index.js

@@ -10,11 +10,14 @@ 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 {random} from './components/JRUtils'
 export {
     JRTestReact
     ,JRSubmit,JRFrame,JRWindow,JRTable,JRFields,JRAlert
     ,JRButton
     ,JRText,JRSelect,JRCheckbox,JRRadio
+    ,JRMask,showMask
+    ,random
 
 }