jrs-react 1.2.12 → 1.2.14

package/src/components/JRFields/JRFields.jsx

@@ -1,9 +1,13 @@
 import styled from "styled-components";
 import React from "react";
 import { flexType, po } from "../JRUtils";
-import JRFrame from "../JRFrame/JRFrame";
+// import JRFrame from "../JRFrame/JRFrame";
 import {StyleJRFields} from "./StyleJRFields"
 import JRWindow from "../JRWindow/JRWindow";
+import { max, min, required } from "./Validators";
+// import JRSubmit from "../JRSubmit";
+// import { JRWindowHOC } from "../JRWindow/JRWindowHOC";
+// import { JRFrameHOC } from "../JRFrame/JRFrameHOC";
 
 function checkMap(_name,inputValue,mapValue,nameList){
     if(nameList.length) {
@@ -54,7 +58,9 @@ const StyledColumnLabel=styled.div`
         if($layout=='v'){
             return `text-align: start;`
         }else{
-            return `text-align: end;`
+            return `text-align: end;
+                padding: 3px 8px;
+            `
         }
     }}
 
@@ -82,9 +88,9 @@ const StyledColumnLabel=styled.div`
 `
 const StyledColumnValue=styled.main`
     flex:1;
-    Xdisplay:flex;
     flex-direction: column;
     overflow: hidden;
+    padding: 4px 0;
 
     text-align: start;
     ${({$validateValue})=>{
@@ -112,13 +118,19 @@ const valueString=(str='',value = {})=>{
 
 const ColumnMessage=({value={},record})=>{
     if(value.isValid===false){
-        return valueString(value.msg,record)
+        return value.msg?.map((msg)=>{
+            return valueString(msg,record)
+        })
+        
     }    
 }
 const StyledColumnFooter=styled.div`
-    &:empty{
-            display: none;
+    &:has(.left:empty):has(.right:empty)
+    {
+        border:1px solid blue;
+        display: none;
     }
+
     ${({$layout})=>{
         if($layout=='v'){
             return ``
@@ -141,114 +153,142 @@ const StyledColumnFooter=styled.div`
     }
 `
 
- function requiredValidator({value}){
-    if( value==null || value==''){
-        return {
-            msg:this.msg ?? 'This is required'
-        }
-    }
-}
-const maxValidator=({value,max})=>{
-    if(typeof value==='string' && value.length>max){
-        return `Max is ${max}`
-    }else if(value>max){
-        return `Max is ${max}`
-    } 
-}
-
-
-
 export default class JRFields extends JRWindow {
     UNSAFE_componentWillMount(){
-        this.#initValidateValue()
-
+        this.#initValidatorValue()
     }
     reset(){
-        this.clearValidateValue()
+        this.clearTestValue()
         super.reset()
     }
+
     setValue(value,reset){
         super.setValue(value,reset)
         if(reset){
-            this.clearValidateValue()
+            this.clearTestValue()
         }
     }
-    //-----------------------------------------------------------------------------------
-    #findValidator(acc,fullname,{required,...column}){
-        const _required=required
-        if(required==true || required?.value ){
-            acc[fullname]={
-                isValid:null
-                ,validators:[requiredValidator.bind(_required)]
-            }
+    //Validate-----------------------------------------------------------------------------------
+    #initValidatorValue(){
+        if(this.validateValueFrom=='state'){
+            this.setState({
+                validatorValue:{}
+            })
+        }else{
+            // 從props來的先不做
         }
     }
-    #loopColumnsForValidateValue(no,_fullnameList,columns,tab,result){
-        const validateValue= columns?.reduce((acc,{name,type,columns,...column},index)=>{
-            no+=1
-            const fullnameList=name?[..._fullnameList,name]:_fullnameList
-            const fullname=fullnameList.join('.')
-            this.#findValidator(acc,fullname,column)
-            if(type==null&&columns){
-                this.#loopColumnsForValidateValue(no,fullnameList,columns,`${tab}\t`,result)
-            }
-            return acc
-        },result)
-        return validateValue
-    }
-
-    clearValidateValue(){
-        Object.values(this.getValidateValue()).forEach((v)=>v.isValid=null)
+    get testValueFrom(){
+        return this.props.testValue===undefined?'state':'props'
     }
-    #initValidateValue(){
-        const columns=this.getColumns()
-        const validateValue=this.#loopColumnsForValidateValue(0,this.props.dataSourceName?[this.props.dataSourceName]:[],columns,'',{})
-        this.setState({validateValue})
+    clearTestValue(){
+        this.setTestValue({})
     }
-    #exeValidateConfig(validateConfig,value,record){
-        validateConfig.isValid=true
-        for(var i=0;i<validateConfig.validators.length;i++){
-            const result=validateConfig.validators[i]({value,record})
-            if(result){
-                validateConfig.isValid=false
-                validateConfig.msg=result.msg
-                break
+    setTestValue(testValue,name){
+        if(this.testValueFrom=='state'){
+            if(name){
+                const newTestValue=this.getTestValue()
+                newTestValue[name]=testValue
+                this.setState({testValue:{
+                    ...this.getTestValue()
+                    ,...testValue
+                }})
+            }else{
+                this.setState({testValue})
             }
+        }else{
+            // 從props來的先不做
         }
     }
-    validateFields(){
-        console.clear()
-        Object.entries(this.getValidateValue())
-        .filter(([fullname,validateConfig])=>validateConfig.isValid!=true)
-        .forEach(([fullname,validateConfig])=>{
-            this.#exeValidateConfig(validateConfig,this.getValue(fullname),this.getValue())
-        })
-        this.setState({validateValue:this.getValidateValue()})
-    }
-    get validateValueFrom(){
-        return this.props.validateValue===undefined?'state':'props'
-    }
-    getValidateValue(fullname){
-        if(fullname===undefined){
-            return this[this.validateValueFrom]?.validateValue
+    getTestValue(fullname){
+        if(fullname){
+            return this.state?.testValue?.[fullname]
         }else{
-            return this[this.validateValueFrom]?.validateValue?.[fullname]
+            return this.state?.testValue
         }
     }
-    setValidateValue(validateValue){
-        if(this.props.setValidateValue){
-            this.props.setValidateValue(validateValue)
-        }else{
-            this.setState({validateValue})
+
+    #validateField(column,fullNameArray,testValue,value){
+        const {name,validators:_validators,columns,type}=column
+        const fullName=fullNameArray.join('.')
+        const validators=_validators?[..._validators]:[]
+        if(column.required){
+            validators.push(required)
+        }
+        if(column.max){
+            validators.push(max)
+        }
+        if(column.min){
+            validators.push(min)
+        }
+        if(validators.length){
+            testValue[fullName]={
+                isValid:null
+                ,msg:[]
+            }
+
+            const promises=[]
+            for(let i=0;i<validators.length;i++){
+                const validator=validators[i].bind(this)(value,column)
+                    if(validator?.then){
+                        promises.push(validator)
+                    }else if(typeof validator == 'string'){
+                        promises.push(Promise.reject(validator))
+                        break;
+                    }
+            }
+            return Promise.all(promises)
+                .then((reason)=>{
+                    testValue[fullName].isValid=true
+                    return Promise.resolve(reason)
+                })
+                .catch((reason)=>{
+                    testValue[fullName].msg.push(reason)
+                    testValue[fullName].isValid=false
+                    return Promise.reject(reason)
+                })
         }
     }
-    createValidator({required}){
+    #validators(_columns,validators,names,testValue,value){
+        return _columns
+            ?.reduce((aco,column)=>{
+                const {name,validators,columns,type}=column
+                const fullNameArray=name?[...names,name]:names
+                const fullName=fullNameArray.join('.')
+
+                if(true){
+                // 要的 if(this.getTestValue(fullName)?.isValid==null){//執行過的不再執行
+                    const validate=this.#validateField(column,fullNameArray,testValue,name?value?.[name]:value)
+                    if(validate){
+                        aco.push(validate)
+                    }
+                }else if(this.getTestValue(fullName)?.isValid===false){
+                    aco.push(Promise.reject())
+                }
+                if(columns && type==undefined){
+                    this.#validators(columns,aco,fullNameArray,testValue,name?value?.[name]:value)
+                }
+                return aco
+            }
+            ,validators
+        )
+    }
+    validate(value){
+        console.clear()
         const validators=[]
-        if(required===true && required.value){
-            validators.push(requiredValidator)
-        }
-        return validators
+        const testValue=this.getTestValue()??{}
+        this.#validators(this.getColumns(),validators,[],testValue,value!==undefined?value:this.getValue())
+        return Promise.all(validators)
+            .then((msg)=>{
+                this.setTestValue(testValue)
+                return Promise.resolve() 
+            })
+            .catch((msg)=>{
+                this.setTestValue(testValue)
+                return Promise.reject()
+            })
     }
+
     //--------------------------------------------------------------------------------------
     get columnsFrom(){
         return this.props.initColumns!==undefined?'state':'props'
@@ -257,10 +297,6 @@ export default class JRFields extends JRWindow {
         return this[this.columnsFrom]?.columns
     }
     //-------------------------------------------------------------------------------------------
-    
-    get colon(){
-        return this.props.labelProps?.colon===undefined ?':':this.props.labelProps?.colon
-    }
 
     createColumn(
         parentValue
@@ -268,23 +304,23 @@ export default class JRFields extends JRWindow {
             type,name,colSpan,rowSpan
             ,style
             ,typeStyle:_typeStyle
-            ,required
+            ,columnStyle
             ,...column
         }
         ,index
         ,parentName
-        ,fullname
+        ,fullnameArray
+        ,labelProps
     ){
         const value=name?parentValue?.[name]:parentValue
         const gap=column.gap??this.props.gap
         const label=column.label
         const _style=flexType(style,this,{},{})
+        const _columnStyle=flexType(columnStyle,this,{},{})
         if (colSpan) _style.gridColumn = `span ${colSpan}`
         if (rowSpan) _style.gridRow = `span ${rowSpan}`
 
         let content
-        const validators=this.createValidator({required,column})
-        const fn=fullname.join('.')
         const onChange=(inputValue)=>{
             const targetValue=inputValue?.target?.value ?? inputValue
             try{
@@ -295,7 +331,15 @@ export default class JRFields extends JRWindow {
                 checkMap(name,targetValue,_value,[...parentName])
                 this.setValue(_value)
             }
-            if(this.getValidateValue()[fn]) this.#exeValidateConfig(this.getValidateValue()[fn],targetValue,this.getValue())
+
+            const testValue=this.getTestValue()??{}
+            this.#validateField(column,fullnameArray,testValue,targetValue)
+                ?.then(()=>{
+                    this.setTestValue(testValue)
+                })
+                .catch(()=>{
+                    this.setTestValue(testValue)
+                })
         }
 
         const _parentName=[...parentName]
@@ -308,26 +352,31 @@ export default class JRFields extends JRWindow {
             content=<StyledColumnValue className={'jr-column-value'}
                 style={{
                     gridColumn:label==null?'span 2':null
+                    ,..._columnStyle
                 }}
             >
                 {
                     React.createElement(
                         type
                         ,{
-                            value:value,onChange,record:parentValue,style:{width:'100%',...typeStyle}
+                            value:value,onChange,record:parentValue
+                            ,style:{width:'100%',...typeStyle}
                             ,...column
                         }
                     )
                 }
             </StyledColumnValue>
         }else if(column.columns){
-            content=<StyledGrid cols={column.cols} className={'jr-grid'} $gap={gap}>
+            content=<StyledGrid cols={column.cols} className={'jr-grid'} $gap={gap}
+                style={_columnStyle}
+            >
                 {
                     this.createColumns(
                         value
                         ,column.columns
                         ,_parentName
-                        ,fullname
+                        ,fullnameArray
+                        ,column.labelProps??this.props.labelProps
                     )
                 }
             </StyledGrid>
@@ -340,12 +389,13 @@ export default class JRFields extends JRWindow {
             >
                 {
                     column.render
-                    ?column.render.bind(this)({onChange,value: value,record:this.getValue()})
-                    :typeof value ==='object'?JSON.stringify(value):value
+                        ?column.render.bind(this)({onChange,value: value,record:this.getValue()})
+                        :typeof value ==='object'?JSON.stringify(value):value
                 }
             </StyledColumnValue>
         }
-        const layout=column.labelProps?.layout===undefined ? this.props.labelProps?.layout: column.labelProps?.layout
+        const layout=labelProps?.layout
+        const colon=labelProps?.colon === undefined ? ':' :labelProps.colon
         const labelStyle=column.labelProps?.style ?? this.props.labelProps?.style ?? {}
         return <StyledColumn 
             $layout={layout}
@@ -360,59 +410,58 @@ export default class JRFields extends JRWindow {
                 label!=null 
                 && <StyledColumnLabel 
                     style={labelStyle}
-                    $required={required}
+                    $required={column.required}
                     className={'label'} 
                     $layout={layout}
-                    $colon={column.labelProps?.colon===undefined ? this.colon:column.labelProps?.colon}>{label}
+                    $colon={colon}
+                >
+                    {label}
                 </StyledColumnLabel>
             }
             {content}
-            {   this.props.debugMode && 
-                <StyledColumnFooter>
-                    <div className="left">
-                        <ColumnMessage value={this.getValidateValue(_parentName.join('.'))} record={this.getValue()}/>
-                    </div>
-                    <div className="right">
-                        {/* {_parentName.join('.')} */}
-                    </div>
-                </StyledColumnFooter>
-                // validateValue?.[name]!==undefined && <StyledColumnFooter $layout={layout}>
-                //     {/* {validateValue?.[name]?.$message} */}
-                //     <ColumnMessage value={validateValue?.[name]}/>
-                // </StyledColumnFooter>
-            }
-            
+            <StyledColumnFooter
+                $layout={layout}
+            >
+                <div className="left">
+                    {
+                        this.getTestValue(_parentName.join('.'))?.msg?.map((msg)=>{
+                            return msg
+                        })
+                    }
+                </div>
+                <div className="right">
+                </div>
+            </StyledColumnFooter>
         </StyledColumn>
     }
 
-    createColumns(parentValue,columns,parentName,fullname){
+    createColumns(parentValue,columns,parentName,fullname,labelProps){
         return columns?.map((column,index)=>{
             return this.createColumn(
                 parentValue
                 ,column,index,parentName
                 ,column.name?[...fullname,column.name]:fullname
+                ,labelProps
             )
         })
     }
 
-
-
     renderMe(){
         return <StyleJRFields className={'jr-fields'} style={this.props.typeStyle}>
-            <StyledGrid cols={this.props.cols} style={this.props.gridStyle} className={'jr-grid'} $gap={this.props.gap??'8px'}>
+            <StyledGrid cols={this.props.cols} style={this.props.gridStyle} className={'jr-grid'} $gap={this.props.gap}>
                 {
                     this.createColumns(
                         this.props.dataSourceName?this.getValue()?.[this.props.dataSourceName]:this.getValue()
                         ,this.props.columns
                         ,this.props.dataSourceName?[this.props.dataSourceName]:[]
                         ,this.props.dataSourceName?[this.props.dataSourceName]:[]
+                        ,this.props.labelProps
                     )
                 }
             </StyledGrid>
         </StyleJRFields>
     }
+}
 
-    // render(){
-    //     return this.renderMe()
-    // }
-}
+// export const FFields=JRFrameHOC(JRFields)
+// export const WFields=JRWindowHOC(FFields)

package/src/components/JRFields/StyleJRFields.jsx

@@ -8,16 +8,15 @@ export const StyleJRFields=styled.main`
     flex-direction: column;
     flex:1;
     overflow: overlay;
-    padding: 10px;
     
     color:#525252;
-
+    
     >.jr-grid{
+        padding: 10px;
         .jr-column{
             > .label{
                 color:#525252;
                 text-wrap: nowrap;
-                padding: 3px 8px;
                 font-weight: bold;
             }
             > .jr-column-value{

package/src/components/JRFields/Validators.jsx

@@ -0,0 +1,33 @@
+import { po } from "../JRUtils"
+
+export function required(value){
+    return value==null || value=='' || value.trim?.()==''
+        ? 'This is required'
+        : true
+}
+
+export function max(value,colum){
+    return value==null
+        ? true
+        :(typeof value ==='string') && (value.length > colum.max)
+            ? `Length can not more than ${colum.max}`
+            :Array.isArray(value) && (value.length > colum.max)
+                ? `Length can not more than ${colum.max}`
+                :(typeof value ==='number') && value > colum.max 
+                    ? `Length can not more than ${colum.max}`
+                    :true
+
+}
+
+
+export function min(value,colum){
+    return value=null
+        ? true
+        :(typeof value ==='string') && (colum.min > value.length)
+            ? `Length can not less than ${colum.min}`
+            :Array.isArray(value) && (colum.min > value.length )
+                ? `Length can not less than ${colum.min}`
+                :(typeof value ==='number') && colum.min > value 
+                    ? `Can not less than ${colum.min}`
+                    :true
+}

package/src/components/JRFrame/JRFrame.jsx

@@ -27,7 +27,7 @@ const StyledJRFrame=styled.div`
     >main{
         display:flex;
         flex:1;
-        overflow:overlay;
+        overflow:hidden;
         flex-direction: column;
         > *{
             XXborder:1px solid gray;
@@ -42,6 +42,13 @@ const StyledJRFrame=styled.div`
             display:flex;
             flex:1;
             overflow:hidden;
+
+            >main{
+                display:flex;
+                flex:1;
+                overflow: overlay;
+            }
+
         }
         >footer{
             XXborder:1px solid  blue;
@@ -49,18 +56,19 @@ const StyledJRFrame=styled.div`
         }
 
     }
-
 `
 
 export default class JRFrame extends JRSubmit {
     renderer(){
-        return <StyledJRFrame style={this.props.style} className={`${this.props.className} jr-frame`} >
+        return <StyledJRFrame  id={this.props.id} style={this.props.style} className={`${this.props.className} jr-frame`} >
             <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
             <main>
                 <FreeType tag='header' config={this.props.top} me={this}/>
                 <main>
                     <FreeType tag='div' config={this.props.left} me={this} className={'left'}/>
-                    {this.renderMe?.() ?? this.props.children}
+                    <main className={'body'}> 
+                        {this.renderMe?.() ?? this.props.children}
+                    </main>
                     <FreeType tag='div' config={this.props.right} me={this} className={'right'}/>
                 </main>
                 <FreeType tag='footer' config={this.props.bottom} me={this}/>
@@ -68,8 +76,5 @@ export default class JRFrame extends JRSubmit {
             <FreeType tag='div' config={this.props.end} me={this} className={'end'}/>
         </StyledJRFrame>
     }
-    // renderMe(){
-    //     return <div style={{flex:1}}>Render me</div>
-    // }
 }
  

package/src/components/JRFrame/JRFrameHOC.jsx

@@ -0,0 +1,61 @@
+import React from "react"
+import styled from "styled-components"
+import { FreeType } from "./JRFrame"
+
+
+const StyledJRFrame=styled.div`
+    display:flex;
+    flex:1;
+    overflow:hidden;
+
+    > *{
+        Xborder:1px solid gray;
+    }
+    >main{
+        display:flex;
+        flex:1;
+        overflow:overlay;
+        flex-direction: column;
+        > *{
+            XXborder:1px solid gray;
+            XXmin-height:30px;
+        }
+
+        >header{
+            XXborder:1px solid  red;
+            XXoverflow: overlay;
+        }
+        >main{
+            display:flex;
+            flex:1;
+            overflow:hidden;
+        }
+        >footer{
+            XXborder:1px solid  blue;
+            overflow: overlay;
+        }
+
+    }
+
+`
+
+export const  JRFrameHOC = (WrappedComponent) => {
+    return class extends React.Component {
+        render(){
+            const {style,className,start,top,left,right,bottom,end,...props}=this.props
+            return <StyledJRFrame style={style} className={`${className} jr-frame`} >
+                <FreeType tag='div' config={start} me={this} className={'start'}/>
+                <main>
+                    <FreeType tag='header' config={top} me={this}/>
+                    <main>
+                        <FreeType tag='div' config={left} me={this} className={'left'}/>
+                            <WrappedComponent {...props} />
+                        <FreeType tag='div' config={right} me={this} className={'right'}/>
+                    </main>
+                    <FreeType tag='footer' config={bottom} me={this}/>
+                </main>
+                <FreeType tag='div' config={end} me={this} className={'end'}/>
+            </StyledJRFrame>
+        }
+    }
+}

package/src/components/JRInput/JRInput.jsx

@@ -1,10 +1,11 @@
 import React from "react";
 import styled from "styled-components";
 
-
-
 const StyledInput=styled.div`
     display:flex;
+    input:focus{
+        outline: none; 
+    }
 `
 export default class JRInput extends React.Component{
     setValue(value){

package/src/components/JRS.jsx

@@ -0,0 +1,4 @@
+
+export default function JRS(){
+    return <div id={'jrs'}/>
+}

package/src/components/JRSubmit.jsx

@@ -102,15 +102,13 @@ export default class JRSubmit extends React.Component {
         return this.state?.rawValue
     }
     setRawValue(rawValue){
-        this.setState({rawValue:JSON.parse(JSON.stringify(rawValue??''))})
+        this.setState({rawValue:rawValue!=null?JSON.parse(JSON.stringify(rawValue)):null})
     }
     reset(){
         this.setValue(this.rawValue,true)
     }
     setValue(value,reset=false){
         if(this.props.onChange){
-            po('name',this.props.name)
-            po('onChange',value)
             this.props.onChange(value)
         }else{
             this.setState({value})