jrs-react 1.2.22 → 1.2.23

package/src/app/fields/validator.jsx

@@ -1,217 +0,0 @@
-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,42 +0,0 @@
-:root {
-  color-scheme: dark;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-}
-
-h1 {
-  line-height: 1.1;
-}
-
-button {
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/src/app/input/InputApp.jsx

@@ -1,43 +0,0 @@
-import { useEffect, useState } from "react";
-import JRFields from "../../components/JRFields/JRFields";
-import { required } from "../../components/JRFields/Validators";
-import JRSelect from "../../components/JRInput/JRSelect";
-export default function InputApp() {
-    const [selectedValue,setSelectedValue]=useState()
-    return <div>
-        <JRSelect
-            get={{
-                url:'list.json'
-                ,autoRun:true
-            }}
-            value={selectedValue}
-            onChange={(value)=>{
-                setSelectedValue(value)
-            }}
-            size={6}
-            multiple={true}
-            valueName={'name'}
-        />
-        [{selectedValue}]
-        <JRFields
-            valueName={'phone'}
-            columns={[
-                {name:'name',label:'Name'
-                    ,type:JRSelect
-                    ,get:{
-                        url:'list.json'
-                        ,autoRun:true
-                    }
-                    ,showBlank:true
-                    ,multiple:true
-                    ,valueName:'name'
-                    // ,size:5
-                    ,required:true
-                }
-            ]}
-            bottom={function(){
-                return JSON.stringify(this.getValue())
-            }}
-        />
-    </div>
-}

package/src/app/table/TableApp.jsx

@@ -1,10 +0,0 @@
-import JRFields from "../../components/JRFields/JRFields";
-import JRText from "../../components/JRInput/JRText";
-import JRTable from "../../components/JRTable/JRTable";
-import { tableConfig } from "./tableConfig";
-
-export default function TableApp() {
-	return <JRTable
-        {...tableConfig}
-    />
-}

package/src/app/table/tableConfig.jsx

@@ -1,89 +0,0 @@
-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
-		,successMessage:'YES'
-		,mask:'Loading'
-    }
-	,columns:[
-		{name:'name',label:'Name'}
-		,{name:'Test',label:'1'
-			,rowSpan:4
-			,columns:[
-				{name:'Test21',label:'1_1'
-					,columns:[
-						{name:'Test21',label:'1_1_1',xdescribewidth:'20%'}
-						,{name:'Test21',label:'1_1_2',xwidth:'20%'}
-						,{name:'Test21',label:'1_1_3',xwidth:'20%'}
-					]
-
-				}
-				,{name:'Test22',label:'1_2',xwidth:'30%'}
-				,{name:'Test22',label:'1_3',xwidth:'30%'}
-			]
-		}
-
-		,{name:'Test2',label:'2'
-			,columns:[
-				{name:'Test21',label:'2_1'}
-				,{name:'Test21',label:'2_2'
-					,rowSpan:4
-					,columns:[
-						{name:'Test21',label:'2_2_1'}
-						,{name:'Test21',label:'2_2_2'}
-					]
-				}
-			]
-		}
-
-		,{name:'Test',label:'3'
-			,columns:[
-				{name:'Test21',label:'3_1'}
-				,{name:'Test22',label:'3_2'}
-				,{name:'Test22',label:'3_3'
-					,columns:[
-						{name:'Test21',label:'3_3_1'}
-						,{name:'Test21',label:'3_3_2'
-							,columns:[
-								{name:'Test21',label:'3_3_2_1'}
-								,{name:'Test21',label:'3_3_2_2'
-									,columns:[
-										{name:'Test21',label:'3_3_2_2_1'
-											,columns:[
-												{name:'Test21',label:'3_3_2_2_1_1'}
-											]
-										}
-									]
-								}
-							]
-						}
-					]
-
-				}
-			]
-		}
-
-		,{name:'Test2',label:'4'
-			,columns:[
-				{name:'Test21',label:'4_1'}
-				,{name:'Test21',label:'4_2'
-					,columns:[
-						{name:'Test21',label:'4_2_1'}
-					]
-				}
-			]
-		}
-		,{name:'Test2',label:'5'}
-		// ,{name:'Test2',label:'6'}
-		// ,{name:'Test2',label:'7'}
-		// ,{name:'Test2',label:'8'}
-	]
-	,resizableColumns:true
-}

package/src/app/test/index.jsx

@@ -1,48 +0,0 @@
-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(()=>{
-        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/app/window/WindowApp.jsx

@@ -1,165 +0,0 @@
-import JRWindow from "../../components/JRWindow/JRWindow";
-import JRTable from "../../components/JRTable/JRTable";
-import JRFields from "../../components/JRFields/JRFields";
-import JRText from "../../components/JRInput/JRText";
-import { po } from "../../components/JRUtils";
-import { useEffect, useState } from "react";
-import { createRoot } from 'react-dom/client'
-import styled from "styled-components";
-
-
-const StyledDiv=styled.div`
-	border:10px solid gray;
-	width:400px;
-	height:400px;
-	margin:80px;
-	padding:20px;
-	border-radius: 5px;
-	overflow: overlay;
-`
-
-const Window=styled(JRWindow)`
-	.body{
-		padding:10px;
-	}
-`
-
-export default function WindowApp() {
-	const [popup,setPopup]=useState(true)
-	const [open,setOpen]=useState(true)
-
-	// useEffect(()=>{
-	// 	const w1=500
-    //     const x1=250
-    //     const w2=200
-    //     const x2=(w1/x1)
-    //     po('xp'   , ((x1/w1)*100) * (w2/100))
-	// },[])
-	return <>
-
-	<div>
-		<button
-			onClick={()=>{
-				const textnode = document.createTextNode("Water");
-				document.getElementById('root').appendChild(textnode)
-			}}	
-		>
-			Add
-		</button>
-
-
-	</div>
-
-		<button
-			onClick={()=>{
-				setPopup(!popup)
-			}}
-		>Popup</button>
-
-
-
-	<JRTable id={'info'}
-		// title={'Info'}
-		// open={true}
-		// popup={true}
-		columns={[
-			{name:'name',label:'Name'}
-		]}
-		get={{
-			url:'list.json'
-			,autoRun:true
-		}}
-		onRowClick={({record},b,c)=>{
-			setOpen({
-				value:record
-			})
-		}}
-		xstyle={{
-			height:'200px'
-			,width:'500px'
-		}}
-	>
-	</JRTable>
-
-	
-	<JRFields
-		maskOn={'info'}
-		style={{
-			background:'black'
-		}}
-		title={function(){
-			return this.getValue()?.name
-		}}
-		width={200}
-		height={200}
-		// y={100}
-		popup={popup}
-		open={open}
-		setOpen={setOpen}
-		get={{
-			url:'data.json'
-			// ,autoRun:true
-		}}
-		onOpen={function(){
-			this.get(open)
-		}}
-		onClose={function(){
-			this.setValue(null,true)
-		}}
-		columns={[
-			{name:'name',label:'姓名',type:JRText}
-		]}
-		bottom={()=>{
-			return <button>Get</button>
-		}}
-		xleft={function(){
-			return <>Left fsd gsdf gdf g</>
-		}}
-		xright={function(){
-			return <div>right</div>
-		}}
-	>
-		JRWindow<br/>
-		1<br/>
-		2<br/>
-		3<br/>
-		4<br/>
-		5<br/>
-		6<br/>
-		7<br/>
-		8<br/>9<br/>10<br/>
-	</JRFields>
-
-	<StyledDiv id='div'>
-		something here
-		<input/>
-		<button
-			style={{
-				zIndex:100
-			}}
-			onClick={()=>{
-				setOpen(!open)
-			}}
-		>Open ({open?'opend':'closed'})</button>
-		.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>
-		<button
-			style={{
-				zIndex:100
-			}}
-			onClick={()=>{
-				setOpen(!open)
-			}}
-		>Open ({open?'opend':'closed'})</button>
-		
-	</StyledDiv>
-	.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>
-	<button
-			style={{
-				zIndex:100
-			}}
-			onClick={()=>{
-				setOpen(!open)
-			}}
-		>Open ({open?'opend':'closed'})</button>
-	</>	
-}

package/vite.config.js

@@ -1,15 +0,0 @@
-import { defineConfig } from 'vite'
-import svgr from 'vite-plugin-svgr'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-	plugins: [
-		react()
-		,svgr({
-			include: '**/*.svg',
-			svgrOptions: {
-			  	exportType: 'default',
-			}
-		})
-	]
-})