jrs-react 1.2.28 → 1.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.28",
+	"version": "1.2.30",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",

package/src/components/JRFrame/JRFrame.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import JRSubmit from "../JRSubmit";
-import { po, random } from "../JRUtils";
+import { random } from "../JRUtils";
 
 export const FreeType=({tag:Tag,config,me,className})=>{
     if(typeof config==='function'){
@@ -23,22 +23,15 @@ const StyledJRFrame=styled.div`
     flex:1;
     overflow:hidden;
 
-    > *{
-        Xborder:1px solid gray;
-    }
     >main{
         display:flex;
         flex:1;
         overflow:hidden;
         flex-direction: column;
         > *{
-            XXborder:1px solid gray;
-            XXmin-height:30px;
         }
 
         >header{
-            XXborder:1px solid  red;
-            XXoverflow: overlay;
         }
         >main{
             display:flex;
@@ -48,13 +41,12 @@ const StyledJRFrame=styled.div`
             >main{
                 width:100%;
                 xdisplay:flex;
-                xflex:1;
+                flex:1;
                 overflow: overlay;
             }
 
         }
         >footer{
-            XXborder:1px solid  blue;
             overflow: overlay;
         }
 
@@ -65,7 +57,7 @@ export default class JRFrame extends JRSubmit {
     mask=this.props.mask
         ?()=>{
             const {type,props}=this.props.mask
-            this.maskId=`mask-${this.rid}`
+            this.maskId=`mask-${props.id??this.rid}`
             return React.createElement(
                 type
                 ,{
@@ -77,7 +69,6 @@ export default class JRFrame extends JRSubmit {
         :null
     renderer(){
         return <StyledJRFrame  id={this.props.id} style={this.props.style} className={`jr-frame`} >
-            {this.mask?.()}
             <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
             <main>
                 <FreeType tag='header' config={this.props.top} me={this}/>
@@ -91,6 +82,7 @@ export default class JRFrame extends JRSubmit {
                 <FreeType tag='footer' config={this.props.bottom} me={this}/>
             </main>
             <FreeType tag='div' config={this.props.end} me={this} className={'end'}/>
+            {this.mask?.()}
         </StyledJRFrame>
     }
 }

package/src/components/JRInput/JValue.jsx

@@ -0,0 +1,30 @@
+import styled from "styled-components"
+
+const StyleJValue=styled.div`
+    background: #efefef;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #d9d9d9;
+
+    box-sizing: border-box;
+    margin: 0;
+    padding: 3px 11px;
+    color: rgba(0, 0, 0, 0.88);
+    font-size: 14px;
+    line-height: 1.5714285714285714;
+    list-style: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    min-width: 0;
+    border-radius: 6px;
+    transition: all 0.2s;
+    min-height:30px;
+`
+export default function JValue({value,record,menu,render,style,align='align',...param}){
+    const _value=render?.({value,record}) ?? value
+    return <StyleJValue style={{textAlign:align,...style}}>
+        {_value}
+    </StyleJValue>
+}

package/src/components/JRMask/JRMask.jsx

@@ -131,7 +131,7 @@ const StyledDialogMask = styled.dialog`
 
 const StyledDivMask = styled.div`
     ${css}
-    color: ${({theme})=>theme?.colorPrimary??'whilte'};
+    color: ${({theme})=>theme?.colorPrimary??'white'};
     width:100%;
     height:100%;
     position: absolute;
@@ -215,7 +215,6 @@ class Mask extends JRHTML{
 
 export function showMask(msg,maskId='jr-mask'){
     const jrMask=document.getElementById(maskId)
-    
     if((jrMask)){
         const jrMaskMsg=document.getElementById(`${maskId}-msg`)
         if(!jrMask.maskDiv){

package/src/components/JRSubmit.jsx

@@ -32,11 +32,17 @@ export default class JRSubmit extends React.Component {
             }
         }
     }
-    componentDidMount() {
+    componentDidMount(){
         this.#methods
         .filter((method) => this[method] && this.props[method] && this.props[method].autoRun)
         .forEach((method) => {
-            this[method]()
+            if(this.props[method].autoRun===true){
+                this[method]()
+            } else if(this.props[method].autoRun>-1){
+                setTimeout(()=>{
+                    this[method]()
+                },this.props[method].autoRun)
+            }
         })
     }
     get(_config = {}) {
@@ -248,10 +254,9 @@ export default class JRSubmit extends React.Component {
             .catch((res)=>{
                 this.handleResponse(res,_payload,config)
             })
-            .finally(()=> {
-                // setTimeout(config.removeMaskFunction??avoid,random(4000,1000))
-                config.removeMaskFunction?.()
-            })
+            // .finally(()=> {
+                // config.removeMaskFunction?.()
+            // })
     }
 
     handleResponse=(response,payload,config)=>{
@@ -272,14 +277,27 @@ export default class JRSubmit extends React.Component {
         const isSuccess = response.status >= 200 && response.status <= 299
         
         this.setRes(isSuccess,response,config)
-        this.showMessage(isSuccess,isSuccess?config.successMessage:config.failedMessage)
-    
-        config.callback?.bind(this)(isSuccess,response,payload)
+
+        if(config.delay!=null){
+            setTimeout(()=>{
+                this.showMessage(isSuccess,isSuccess?config.successMessage:config.failedMessage)
+                config.callback?.bind(this)(isSuccess,response,payload)
+                config.removeMaskFunction?.()
+            },config.delay)
+        }else{
+            this.showMessage(isSuccess,isSuccess?config.successMessage:config.failedMessage)
+            config.callback?.bind(this)(isSuccess,response,payload)
+            config.removeMaskFunction?.()
+        }
+
+
     }
 
     showMessage(success,message){
-        po('success',success)
-        po('message',message)
+        if(message){
+            po('success',success)
+            po('message',message)
+        }
     }
     
     renderer(){

package/src/components/JRTable/StyledJRTable.jsx

@@ -43,7 +43,7 @@ export const StyledJRTable=styled.div`
             top: 0;
 
             th{
-                xposition: relative;
+                position: 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/JRTable/TBodies.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { flexType, po } from "../JRUtils"
+import { flexType } from "../JRUtils"
 import styled from "styled-components"
 
 const StyledSeparator=styled.tbody`
@@ -31,7 +31,6 @@ const Ths=({table,groupData,groupIndex,deep,rowColumn,rowIndex})=>{
         }else{
             content=column.label
         }
-        // style.textAlign=align
         return <th key={colIndex} 
             
             style={{textAlign:align,...style}}
@@ -101,15 +100,10 @@ const Td=({column:_column,record,tbodyIndex,trIndex,tdIndex,table})=>{
         setValue(record,targetValue)
         table.setValue(table.getValue())
     }
-
     
     const value=getValue(record)
     let style=render?{}:flexType(_style,table,{value,record},{})
-    const setStyle=(_style)=>{
-        style=_style
-    }
-    setStyle.bind(table)
-    render?.bind(table)
+
     if(type){
         const typeStyle=flexType(_typeStyle,table,{record},{})
         
@@ -121,13 +115,16 @@ const Td=({column:_column,record,tbodyIndex,trIndex,tdIndex,table})=>{
                 :onChange
             ,value
             ,style:typeStyle
-            ,render
+            ,render:render?.bind(table)
             ,...column
             ,...funcProps?.bind(table)({value})
 
         })
     }else if(render){
-        content=render({index:trIndex,groupIndex:tbodyIndex,value,record,onChange,setStyle})
+        const setStyle=(_style)=>{
+            style=_style
+        }
+        content=render.bind(table)({index:trIndex,groupIndex:tbodyIndex,value,record,onChange,setStyle})
     }else{
         content=value
     }
@@ -146,7 +143,6 @@ const Td=({column:_column,record,tbodyIndex,trIndex,tdIndex,table})=>{
 }
 const Tds=({leafColumns,record,table,tbodyIndex,trIndex})=>{
     return leafColumns?.map((column,tdIndex)=>{
-        
         return <Td
             column={column} 
             key={tdIndex} 
@@ -162,59 +158,51 @@ const Tds=({leafColumns,record,table,tbodyIndex,trIndex})=>{
 
 
 const TBody=({groupData,groupHeader,leafColumns,groupFooter,table,tbodyIndex})=>{
-
     const neededProps={table,tbodyIndex}
-    return <>
-        <tbody key={`tbody${tbodyIndex}`}>
-            {(groupData?.length >0 ) && <GroupHeader 
-                groupData={groupData}
-                columns={groupHeader}
-                {...neededProps}
-            />}
-            {
-                groupData?.map?.((record,trIndex)=>{
-                    const onRowClick=table.props.onRowClick?.bind(table)
-                    return <tr key={trIndex}
-                        onClick={()=>{
-                            onRowClick?.({record,index:trIndex,groupIndex:tbodyIndex})
-                        }}
-                    >
-                        <Tds 
-                            record={record}
-                            trIndex={trIndex}
-
-                            {...neededProps}
-                            leafColumns={leafColumns} 
-                        />
-                    </tr>
-                })
-            }
-            {(groupData?.length > 0) && <GroupFooter 
-                groupData={groupData}
-                columns={groupFooter}
-                {...neededProps}
-            />}
+    return <tbody key={`tbody${tbodyIndex}`}>
+        {(groupData?.length >0 ) && <GroupHeader 
+            groupData={groupData}
+            columns={groupHeader}
+            {...neededProps}
+        />}
+        {
+            groupData?.map?.((record,trIndex)=>{
+                const onRowClick=table.props.onRowClick?.bind(table)
+                return <tr key={trIndex}
+                    onClick={()=>{
+                        onRowClick?.({record,index:trIndex,groupIndex:tbodyIndex})
+                    }}
+                >
+                    <Tds 
+                        record={record}
+                        trIndex={trIndex}
+
+                        {...neededProps}
+                        leafColumns={leafColumns} 
+                    />
+                </tr>
+            })
+        }
+        {(groupData?.length > 0) && <GroupFooter 
+            groupData={groupData}
+            columns={groupFooter}
+            {...neededProps}
+        />}
 
-        </tbody>
-        {/* {(dataSource.length > (tbodyIndex+1)) && <Separator length={leafColumns.length} key={`sp-${tbodyIndex}`}></Separator>} */}
-    </>
+    </tbody>
 }
 
 export const TBodies=({groupHeader,leafColumns,groupFooter,dataSource:_dataSource,table})=>{
-    // po('--TBodies--')
     const isGroupDataType=Array.isArray(_dataSource?.[0])
 
     const dataSource=isGroupDataType
         ?_dataSource
         :[_dataSource]
 
-    // po('dataSource',dataSource)    
     return dataSource?.map((groupData,tbodyIndex,c)=>{
         return  <TBody 
                 key={`tbody${tbodyIndex}`} 
                 table={table}
-                // dataSource={dataSource}
-                // dataGroup={groupData} 
                 groupData={groupData}
                 tbodyIndex={tbodyIndex}
                 

package/src/index.js

@@ -11,13 +11,12 @@ import JRCheckbox from './components/JRInput/JRCheckbox'
 import JRRadio from './components/JRInput/JRRadio'
 import JRText from './components/JRInput/JRText'
 import JRMask,{JRDivMask,showMask} from './components/JRMask/JRMask'
-import {random} from './components/JRUtils'
+import {random,po} from './components/JRUtils'
 export {
     JRTestReact
     ,JRSubmit,JRFrame,JRWindow,JRTable,JRFields,JRAlert
     ,JRButton
     ,JRText,JRSelect,JRCheckbox,JRRadio
     ,JRMask,JRDivMask,showMask
-    ,random
-
+    ,random,po
 }