jrs-react 1.2.12 → 1.2.14

package/src/app/fields/fieldsConfig.jsx

@@ -4,9 +4,11 @@ import JRSelect from "../../components/JRInput/JRSelect";
 import JRText from "../../components/JRInput/JRText";
 import JRTable from "../../components/JRTable/JRTable";
 import { po } from "../../components/JRUtils";
+import styled from "styled-components";
 
 export const fieldsConfig={
         popup:true
+        ,open:true
         ,mask:true
         ,width:'700px'
         ,height:'500px'
@@ -129,9 +131,233 @@ export const fieldsConfig={
                 <pre>
                 {JSON.stringify(this.getValue(),4,4)}
                 </pre>
-                <pre>
+                <pre>rawValue
                 {JSON.stringify(this.rawValue,4,4)}
                 </pre>
             </div>
         }
+}
+//////////////////////////////////////////////////////
+export const normalFields={
+    get:{
+        url:'data.json'
+        ,autoRun:true
+    }
+    ,columns:[
+        {name:'name',label:'Name',type:JRText,required:true}
+        ,{name:'account',label:'Account',type:JRText
+            ,validators:[
+                function(){
+                    return 'Account always error'
+                }
+            ]
+        }
+        ,{name:'email',label:'Email',type:JRText}
+        ,{name:'birthday',label:'Birthday',type:JRText}
+        ,{name:'address',label:'Address',type:JRFields
+            ,columns:[
+                {name:'no',label:'No',type:JRText,required:true}
+                ,{name:'street',label:'Street',type:JRText}
+                ,{name:'country',label:'Country',type:JRText}
+            ]
+            ,labelProps:{
+                layout:'h'
+                ,colon:":"
+            }
+            ,style:{
+                // border:'1px solid red'
+            }
+            ,typeStyle:{
+                // border:'1px solid blue'
+            }
+            ,columnStyle:{
+                padding:'0 10px 0 0'
+                ,marginTop: '4px'
+                ,border:'1px solid gray'
+                ,borderRadius: '3px'
+            }
+            ,gridStyle:{
+                padding:'unset'
+                // ,border:'1px solid black'
+            }
+        }
+        ,{
+            label:''
+            ,columns:[
+                {name:'father',label:'Father',type:JRText,required:true}
+                ,{name:'mother',label:'Mother',type:JRText,required:true}
+            ]
+            ,cols:2
+            ,columnStyle:{
+                padding:'6px'
+                ,marginTop: '4px'
+                ,border:'1px solid black'
+                ,borderRadius: '3px'
+            }
+        }
+        
+        ,{name:'phone',label:'Phone',colSpan:2,type:JRTable
+            ,columns:[
+                {name:'name',label:'Name',type:JRText,width:'160px'}
+                ,{name:'phone',label:'Number',type:JRText}
+            ]
+            ,validators:[
+                function(value,column){
+                    po(value,column)
+                    return 'Validate table'
+                }
+            ]
+        }
+    ]
+    ,cols:2
+    ,style:{
+        border:'1px solid gray'
+    }
+}
+////////////////////////////////////////////////////////////
+const StyledDiv=styled.div`
+    display: flex;
+    gap: 10px;
+    padding: 5px;
+`
+export const withSomeButton={
+    top:function({setStyle}){
+        return <StyledDiv>
+            <button
+                onClick={()=>{
+                    this.get({
+                        url:'data2.json'
+                        ,value:{
+                            abc:123
+                        }
+                    })
+                }}
+            >Get</button>
+
+            <button
+                onClick={()=>{
+
+                    this.setValue(null,true)
+                }}
+            >Clear</button>
+
+            <button
+                onClick={()=>{
+                    this.reset()
+                }}
+            >Reset</button>
+
+            <button
+                onClick={()=>{
+                    this.validate()
+                        .then(()=>{
+
+                        })
+                        .catch(()=>{
+
+                        })
+                }}
+            >Validate</button>
+
+            <button
+                onClick={()=>{
+                    this.validate()
+                        .then(()=>{
+                            po('submit this',this)
+                            this.post()
+                        })
+                        .catch(()=>{
+                            po('submit this',this)
+                        })
+                }}
+            >Submit</button>
+        </StyledDiv>
+    }
+    ,bottom({setStyle}){
+        setStyle({color:'gray',border:'1px solid blue',whiteSpace:'pre',overflow: 'overlay'})
+        return <div style={{
+            display: 'flex'
+            ,justifyContent: 'space-around'
+            // ,maxHeight:'300px'
+        }}>
+            <pre>
+            {JSON.stringify(this.getValue(),4,4)}
+            </pre>
+            <pre>rawValue=
+            {JSON.stringify(this.getTestValue(),4,4)}
+            </pre>
+        </div>
+    }
+}
+
+///////////////////////////////////////////////////////////////////////
+export const labelLayout={
+    ...normalFields
+    ,labelProps:{
+        layout:'v'
+        ,colon:null
+        ,gap:'10px'
+    }
+    ,gap:'16px'
+}
+
+///////////////////////////////////////////////////////////////////////
+export const devFields={
+    get:{
+        url:'data.json'
+        ,autoRun:true
+        ,callback(success,res){
+            po('success,data',success,res)
+            // setTimeout(()=>{
+            //     po('callback setTimeout',this.getValue())
+                this.validate(res.data)
+                    .then(()=>{
+                        po('+++++++++++++++++++')
+                    })
+                    .catch(()=>{
+                        po('-------------------')
+                    })
+            // },1)
+        }
+        ,xformatValue(data){
+            po('formatValue',data)
+            return {aaa:'111'}
+        }
+    }
+    ,post:{
+        url:'post'
+        ,method:'get'
+        ,callback(){
+            this.setValue(null,true)
+        }
+    }
+    ,columns:[
+        {name:'name',label:'Name',type:JRText,Xrequired:true
+            ,validators:[
+                function(value){
+                    if(value=='Joren'){
+                        return Promise.reject('Test cannot be Joren')
+                    }else{
+                        return Promise.resolve('Test')
+                    }
+                }
+            ]
+        }
+        ,{name:'email',label:'Email',type:JRText,required:true}
+        ,{
+            label:'Parents'
+            ,columns:[
+                {name:'father',label:'Father',type:JRText,required:true}
+                ,{name:'mother',label:'Mother',type:JRText,required:true}
+            ]
+            ,cols:2
+            ,columnStyle:{
+                padding:'6px'
+                ,marginTop: '4px'
+                ,border:'1px solid black'
+                ,borderRadius: '3px'
+            }
+        }
+    ]
+    ,cols:1
 }

package/src/app/fields/tryHOC.jsx

@@ -0,0 +1,21 @@
+import JRText from "../../components/JRInput/JRText";
+import { po } from "../../components/JRUtils";
+
+export const tryHOC={
+    open:true
+    ,popup:true
+    ,title:'HOC window'
+    ,columns:[
+        {name:'name',label:'電信公司',type:JRText,required:true}
+    ]
+    ,bottom(){
+        return <div>
+            <button
+                onClick={()=>{
+                    po(this)
+                    // this.validate()
+                }}
+            >Validate</button>
+        </div>
+    }
+}

package/src/app/fields/validator.jsx

@@ -0,0 +1,217 @@
+import axios from "axios";
+import JRText from "../../components/JRInput/JRText";
+import {po} from '../../components/JRUtils'
+
+
+// axios.interceptors.response.use(
+//     (Response) => {
+//         po('interceptors++++++++++++++++++++++++++',Response,Response)
+//         if(Response?.status!=200){
+//             po('fffffffffffffffff')
+//             return Promise.reject(Error);
+//         }
+//         return Promise.resolve(Response);
+//     },
+//     (Error) => {
+//         po('interceptors---------------------------',Error)
+//         return Promise.reject(Error);
+//     }
+// );
+
+export const fields={
+    open:true
+    ,popup:true
+    ,title:'Firelds'
+    ,cols:2
+    ,width:600
+    ,height:220
+    ,columns:[
+         {name:'a',label:'A',type:JRText}
+        ,{name:'b',label:'B',type:JRText}
+        ,{name:'c',label:'C',type:JRText}
+        ,{name:'d',label:'D',type:JRText}
+        ,{name:'e',label:'E',type:JRText}
+        ,{name:'f',label:'F',type:JRText}
+        ,{name:'g',label:'G',type:JRText}
+        ,{name:'h',label:'H',type:JRText}
+        ,{name:'i',label:'I',type:JRText}
+        ,{name:'j',label:'G',type:JRText}
+        ,{name:'k',label:'K',type:JRText}
+    ]
+}
+
+export const fieldsValidator={
+    get:{
+        url:'data.json'
+        ,autoRun:true
+    }
+    ,columns:[
+        {name:'name'
+            ,label:'Name'
+            ,type:JRText
+            ,required:true
+            ,max:5
+            ,min:3
+            ,xvalidators:[
+                function(value){
+                    // return Promise.reject('value cannot be 1')
+                    if(value=='Joren'){
+                        return Promise.reject('value cannot be Joren')
+                    }else{
+                        return Promise.resolve()
+                    }
+                }
+                ,function(value){
+                    if(value=='11'){
+                        return Promise.reject('value cannot be 11')
+                    }else{
+                        return Promise.resolve()
+                    }
+                }
+            ]
+        }
+        // ,{
+        //     columns:[
+        //         {name:'housePhone',label:'House phone'
+        //             ,columns:[
+        //                 {name:'h1',label:'H1',type:JRText}
+        //                 ,{name:'h2',label:'H2',type:JRText
+        //                     ,validators:[
+        //                         function(value){
+        //                             // po('validators b2 1')
+        //                             if(value==2)
+        //                                 return Promise.resolve('H2 2 is 2 good')
+        //                             else{
+        //                                 return Promise.reject('H2 1 is not 2 bad')
+        //                             }
+        //                         }
+        //                         ,function(){
+        //                             // po('validators b2 2')
+        //                             return Promise.resolve('H2 2 is good')
+        //                         }
+        //                     ]
+        //                 }
+        //             ]
+
+        //         }
+        //         ,{name:'handPhone',label:'Hand phone',type:JRText
+
+        //             ,validators:[
+        //                 function(){
+        //                     // po('validators b2 1')
+        //                     return Promise.resolve('b2 1 bad')
+        //                 }
+        //             ]
+        //         }
+        //     ]
+        // }
+        // ,{name:'account',label:'Account',type:JRText
+        //     ,validators:[
+        //         function(){
+        //             // po('validators c1',this)
+        //             return Promise.resolve('c1 good')
+        //         }
+        //         ,function(){
+        //             // po('validators c2')
+        //             return Promise.resolve('c2 good')
+        //         }
+        //     ]
+        // }
+        ,{name:'dataUrl',label:'data2',type:JRText
+            ,validators:[
+                function(value){
+                    return axios.get(value
+                        , {
+                            params:{
+                                name: "2",
+                                parts: "4"
+                            }
+                        }
+                    ).then((Response)=>{
+                        po('JRText ++++++++++++++++++++++++++',Response)
+                        if(Response.data?.dataUrl=='data.json'){
+                            po('fffffffffffffffff')
+                            return Promise.resolve(Response);
+                        }
+                        return Promise.reject('Url error');
+                    })
+                    .catch(()=>{
+                        po('JRText ffffffffffffff')
+                        return Promise.reject('url false 2')
+                    })
+                }
+            ]
+        }
+
+    ]
+    ,typeStyle:{
+        // background: 'white'
+        border:'5px solid green'
+    }
+    ,debugMode:true
+    ,top:function({setStyle}){
+        setStyle({
+            placeSelf: 'end'
+            ,padding:'10px'
+        })
+
+        return <div>
+            <button
+                onClick={()=>{
+                    this.get({value:{a:'111x'}})
+                }}
+            >Get</button>
+
+            <button
+                onClick={()=>{
+                    this.setValue(null,true)
+                }}
+            >Clear</button>
+
+            <button
+                onClick={()=>{
+                    this.reset()
+                }}
+            >Reset</button>
+
+            <button
+                onClick={()=>{
+                    // this.validateFields()
+                    this.validate()
+                        .then(()=>{
+                            po('success',this.state.testValue)
+                        })
+                        .catch(()=>{
+                            po('failed',this.state.testValue)
+                        })
+                }}
+            >Validate</button>
+        </div>
+    }
+    ,bottom:function({setStyle}){
+        setStyle({
+            border:'1px solid red'
+            ,maxHeight:'100px'
+        })
+        return <div style={{
+            display: 'flex'
+            ,justifyContent: 'space-around'
+        }}>
+            <pre>Value=
+                {JSON.stringify(this.getValue(),4,4)}
+            </pre>
+            <pre>testValue=
+                {JSON.stringify(this.getTestValue(),4,4)}
+            </pre>
+        </div>    
+    }
+    ,left:function({setStyle}){
+        setStyle({
+            border:'4px solid blue'
+        })
+        return 'Left'
+    }
+    ,open:true
+    ,popup:true
+    ,title:'Firelds'
+}

package/src/app/index.css

@@ -1,5 +1,5 @@
 :root {
-
+  color-scheme: dark;
 }
 
 a {

package/src/app/table/tableConfig.jsx

@@ -2,8 +2,10 @@ import JRText from "../../components/JRInput/JRText";
 
 export const tableConfig={
     popup:true
+	,open:true
 	,height:500
 	,width:600
+	,title:'HOC table'
 	,get:{
 		url:'list.json'
 		,autoRun:true
@@ -11,7 +13,8 @@ export const tableConfig={
 		,mask:'Loading'
     }
 	,columns:[
-		{name:'Test',label:'1'
+		{name:'name',label:'Name'}
+		,{name:'Test',label:'1'
 			,rowSpan:4
 			,columns:[
 				{name:'Test21',label:'1_1'

package/src/app/test/index.jsx

@@ -0,0 +1,8 @@
+import React, { useEffect } from "react"
+
+
+export default function TestApp(){
+    useEffect(()=>{
+    },[])
+    return <div>Test</div>
+}