jrs-react 1.2.29 → 1.2.31

package/build/index.es.js

@@ -3576,7 +3576,6 @@ function JRDialogMask({
 function JRDivMask({
   id = 'jr-mask'
 }) {
-  // po(`create JRDivMask id=${id}`)
   return /*#__PURE__*/React__default.createElement(StyledDivMask, {
     id: id
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -3631,8 +3630,6 @@ class Mask extends JRHTML {
 }
 function showMask(msg, maskId = 'jr-mask') {
   const jrMask = document.getElementById(maskId);
-  // po(`showMask find id=${maskId}`)
-  // po('jrMask',jrMask)
   if (jrMask) {
     const jrMaskMsg = document.getElementById(`${maskId}-msg`);
     if (!jrMask.maskDiv) {
@@ -3885,15 +3882,13 @@ class JRSubmit extends React__default.Component {
         return axiosSubmit[method](url, params1, params2);
       }
     })().then(res => {
-      // setTimeout(()=>{
       this.handleResponse(res, _payload, config);
-      // config.removeMaskFunction?.()
-      // },random(2000,1000))
     }).catch(res => {
       this.handleResponse(res, _payload, config);
-    }).finally(() => {
-      config.removeMaskFunction?.();
     });
+    // .finally(()=> {
+    // config.removeMaskFunction?.()
+    // })
   }
   handleResponse = (response, payload, config) => {
     if (Array.isArray(response)) {
@@ -3911,12 +3906,23 @@ class JRSubmit extends React__default.Component {
     response = config?.response?.bind(this)(response, payload) ?? response;
     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() {
     return;
@@ -3951,27 +3957,23 @@ const FreeType = ({
   }
 };
 const StyledJRFrame = styled.div`
+    color:#525252;
+    background:white;
+
     position:relative;
     display:flex;
     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;
@@ -3981,13 +3983,12 @@ const StyledJRFrame = styled.div`
             >main{
                 width:100%;
                 xdisplay:flex;
-                xflex:1;
+                flex:1;
                 overflow: overlay;
             }
 
         }
         >footer{
-            XXborder:1px solid  blue;
             overflow: overlay;
         }
 
@@ -4000,7 +4001,7 @@ class JRFrame extends JRSubmit {
       type,
       props
     } = this.props.mask;
-    this.maskId = `mask-${this.rid}`;
+    this.maskId = `mask-${props.id ?? this.rid}`;
     return /*#__PURE__*/React__default.createElement(type, {
       ...props,
       id: this.maskId
@@ -4010,7 +4011,7 @@ class JRFrame extends JRSubmit {
     return /*#__PURE__*/React__default.createElement(StyledJRFrame, {
       id: this.props.id,
       style: this.props.style,
-      className: `jr-frame`
+      className: `jr-frame ${this.props.popup !== true ? this.props.className : ''}`
     }, /*#__PURE__*/React__default.createElement(FreeType, {
       tag: "div",
       config: this.props.start,
@@ -4739,7 +4740,6 @@ function styleInject(css, ref) {
 }
 
 var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-module_withMask__LPcai{overflow:hidden!important;position:relative;user-select:none;&:after{a:#868686cc;background:#868686cc;border-radius:inherit;bottom:0;content:\"\";height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}}mask{background:#868686cc;border-radius:inherit;bottom:0;height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}";
-var style = {"test":"Style-module_test__LrdEc","withMask":"Style-module_withMask__LPcai"};
 styleInject(css_248z);
 
 const StyledJRWindow = styled.div`
@@ -4815,11 +4815,8 @@ class JRWindow extends JRFrame {
     this.mask.style.height = '10000px';
     this.mask.style.width = '10000px';
     target.appendChild(this.mask);
-    po('style.mask', style.mask);
-    po('addMask+++++++++++++++++++++++++++');
   };
   removeMaskFromTarget = () => {
-    po('removeMask-----------------------');
     this.mask.remove();
   };
   backdropOn(on) {
@@ -5127,7 +5124,6 @@ const Ths = ({
     } else {
       content = column.label;
     }
-    // style.textAlign=align
     return /*#__PURE__*/React__default.createElement("th", {
       key: colIndex,
       style: {
@@ -5220,11 +5216,6 @@ const Td = ({
     value,
     record
   }, {});
-  const setStyle = _style => {
-    style = _style;
-  };
-  setStyle.bind(table);
-  render?.bind(table);
   if (type) {
     const typeStyle = flexType(_typeStyle, table, {
       record
@@ -5239,14 +5230,17 @@ const Td = ({
       } : onChange,
       value,
       style: typeStyle,
-      render,
+      render: render?.bind(table),
       ...column,
       ...funcProps?.bind(table)({
         value
       })
     });
   } else if (render) {
-    content = render({
+    const setStyle = _style => {
+      style = _style;
+    };
+    content = render.bind(table)({
       index: trIndex,
       groupIndex: tbodyIndex,
       value,
@@ -5301,7 +5295,7 @@ const TBody = ({
     table,
     tbodyIndex
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tbody", {
+  return /*#__PURE__*/React__default.createElement("tbody", {
     key: `tbody${tbodyIndex}`
   }, groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupHeader, _extends({
     groupData: groupData,
@@ -5326,7 +5320,7 @@ const TBody = ({
   }), groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupFooter, _extends({
     groupData: groupData,
     columns: groupFooter
-  }, neededProps))));
+  }, neededProps)));
 };
 const TBodies = ({
   groupHeader,
@@ -5335,18 +5329,12 @@ const TBodies = ({
   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 /*#__PURE__*/React__default.createElement(TBody, {
       key: `tbody${tbodyIndex}`,
-      table: table
-      // dataSource={dataSource}
-      // dataGroup={groupData} 
-      ,
+      table: table,
       groupData: groupData,
       tbodyIndex: tbodyIndex,
       groupHeader: groupHeader,
@@ -5362,8 +5350,6 @@ const StyledJRTable = styled.div`
     --column-b-hover-color:#eeeeee;
 
     position: relative;
-    background: var(--column-b-color);
-    border:1px solid var(--column-bd-color);
 
     display:flex;
     flex-direction: column;
@@ -5403,7 +5389,6 @@ const StyledJRTable = styled.div`
                 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;
-                color: #525252;
                 white-space: nowrap;
             }
         }
@@ -5412,21 +5397,10 @@ const StyledJRTable = styled.div`
             position: sticky;
             bottom: -1px;
 
-            Xtr:nth-child(1){
-                th{
-                    Xborder-top:1px solid var(--column-bd-color);
-                }
-            }
-            Xth:nth-child(1){
-                Xborder-left:1px solid var(--column-bd-color);
-            }
-                
             th{
                 height:32px;
                 padding: 4px;
                 background: #e4e4e4;
-                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
-                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
                 color: #525252;
                 white-space: nowrap;
 
@@ -5440,7 +5414,6 @@ const StyledJRTable = styled.div`
         tbody{
             tr{
                 transition: background .3s linear;
-                background:var(--column-b-color);
                 a:#ededed;
                 th{
                     color:#444444;
@@ -5453,7 +5426,6 @@ const StyledJRTable = styled.div`
             }
             tr:hover{
                 background:var(--column-b-hover-color);
-                
             }
             
             tr.jr-group-header
@@ -6549,4 +6521,4 @@ class JRText extends JRInput {
   }
 }
 
-export { JRAlert, JRButton, JRCheckbox, JRDivMask, JRFields, JRFrame, JRDialogMask as JRMask, JRRadio, JRSelect, JRSubmit, JRTable, JRTestReact, JRText, JRWindow, random, showMask };
+export { JRAlert, JRButton, JRCheckbox, JRDivMask, JRFields, JRFrame, JRDialogMask as JRMask, JRRadio, JRSelect, JRSubmit, JRTable, JRTestReact, JRText, JRWindow, po, random, showMask };

package/build/index.js

@@ -3603,7 +3603,6 @@ function JRDialogMask({
 function JRDivMask({
   id = 'jr-mask'
 }) {
-  // po(`create JRDivMask id=${id}`)
   return /*#__PURE__*/React__default["default"].createElement(StyledDivMask, {
     id: id
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3658,8 +3657,6 @@ class Mask extends JRHTML {
 }
 function showMask(msg, maskId = 'jr-mask') {
   const jrMask = document.getElementById(maskId);
-  // po(`showMask find id=${maskId}`)
-  // po('jrMask',jrMask)
   if (jrMask) {
     const jrMaskMsg = document.getElementById(`${maskId}-msg`);
     if (!jrMask.maskDiv) {
@@ -3912,15 +3909,13 @@ class JRSubmit extends React__default["default"].Component {
         return axiosSubmit[method](url, params1, params2);
       }
     })().then(res => {
-      // setTimeout(()=>{
       this.handleResponse(res, _payload, config);
-      // config.removeMaskFunction?.()
-      // },random(2000,1000))
     }).catch(res => {
       this.handleResponse(res, _payload, config);
-    }).finally(() => {
-      config.removeMaskFunction?.();
     });
+    // .finally(()=> {
+    // config.removeMaskFunction?.()
+    // })
   }
   handleResponse = (response, payload, config) => {
     if (Array.isArray(response)) {
@@ -3938,12 +3933,23 @@ class JRSubmit extends React__default["default"].Component {
     response = config?.response?.bind(this)(response, payload) ?? response;
     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() {
     return;
@@ -3978,27 +3984,23 @@ const FreeType = ({
   }
 };
 const StyledJRFrame = styled__default["default"].div`
+    color:#525252;
+    background:white;
+
     position:relative;
     display:flex;
     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;
@@ -4008,13 +4010,12 @@ const StyledJRFrame = styled__default["default"].div`
             >main{
                 width:100%;
                 xdisplay:flex;
-                xflex:1;
+                flex:1;
                 overflow: overlay;
             }
 
         }
         >footer{
-            XXborder:1px solid  blue;
             overflow: overlay;
         }
 
@@ -4027,7 +4028,7 @@ class JRFrame extends JRSubmit {
       type,
       props
     } = this.props.mask;
-    this.maskId = `mask-${this.rid}`;
+    this.maskId = `mask-${props.id ?? this.rid}`;
     return /*#__PURE__*/React__default["default"].createElement(type, {
       ...props,
       id: this.maskId
@@ -4037,7 +4038,7 @@ class JRFrame extends JRSubmit {
     return /*#__PURE__*/React__default["default"].createElement(StyledJRFrame, {
       id: this.props.id,
       style: this.props.style,
-      className: `jr-frame`
+      className: `jr-frame ${this.props.popup !== true ? this.props.className : ''}`
     }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
       tag: "div",
       config: this.props.start,
@@ -4766,7 +4767,6 @@ function styleInject(css, ref) {
 }
 
 var css_248z = ".Style-module_test__LrdEc{border:1px solid red;color:red}.Style-module_withMask__LPcai{overflow:hidden!important;position:relative;user-select:none;&:after{a:#868686cc;background:#868686cc;border-radius:inherit;bottom:0;content:\"\";height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}}mask{background:#868686cc;border-radius:inherit;bottom:0;height:10000px;left:0;position:absolute;right:0;top:0;width:10000px}";
-var style = {"test":"Style-module_test__LrdEc","withMask":"Style-module_withMask__LPcai"};
 styleInject(css_248z);
 
 const StyledJRWindow = styled__default["default"].div`
@@ -4842,11 +4842,8 @@ class JRWindow extends JRFrame {
     this.mask.style.height = '10000px';
     this.mask.style.width = '10000px';
     target.appendChild(this.mask);
-    po('style.mask', style.mask);
-    po('addMask+++++++++++++++++++++++++++');
   };
   removeMaskFromTarget = () => {
-    po('removeMask-----------------------');
     this.mask.remove();
   };
   backdropOn(on) {
@@ -5154,7 +5151,6 @@ const Ths = ({
     } else {
       content = column.label;
     }
-    // style.textAlign=align
     return /*#__PURE__*/React__default["default"].createElement("th", {
       key: colIndex,
       style: {
@@ -5247,11 +5243,6 @@ const Td = ({
     value,
     record
   }, {});
-  const setStyle = _style => {
-    style = _style;
-  };
-  setStyle.bind(table);
-  render?.bind(table);
   if (type) {
     const typeStyle = flexType(_typeStyle, table, {
       record
@@ -5266,14 +5257,17 @@ const Td = ({
       } : onChange,
       value,
       style: typeStyle,
-      render,
+      render: render?.bind(table),
       ...column,
       ...funcProps?.bind(table)({
         value
       })
     });
   } else if (render) {
-    content = render({
+    const setStyle = _style => {
+      style = _style;
+    };
+    content = render.bind(table)({
       index: trIndex,
       groupIndex: tbodyIndex,
       value,
@@ -5328,7 +5322,7 @@ const TBody = ({
     table,
     tbodyIndex
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("tbody", {
+  return /*#__PURE__*/React__default["default"].createElement("tbody", {
     key: `tbody${tbodyIndex}`
   }, groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupHeader, _extends({
     groupData: groupData,
@@ -5353,7 +5347,7 @@ const TBody = ({
   }), groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupFooter, _extends({
     groupData: groupData,
     columns: groupFooter
-  }, neededProps))));
+  }, neededProps)));
 };
 const TBodies = ({
   groupHeader,
@@ -5362,18 +5356,12 @@ const TBodies = ({
   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 /*#__PURE__*/React__default["default"].createElement(TBody, {
       key: `tbody${tbodyIndex}`,
-      table: table
-      // dataSource={dataSource}
-      // dataGroup={groupData} 
-      ,
+      table: table,
       groupData: groupData,
       tbodyIndex: tbodyIndex,
       groupHeader: groupHeader,
@@ -5389,8 +5377,6 @@ const StyledJRTable = styled__default["default"].div`
     --column-b-hover-color:#eeeeee;
 
     position: relative;
-    background: var(--column-b-color);
-    border:1px solid var(--column-bd-color);
 
     display:flex;
     flex-direction: column;
@@ -5430,7 +5416,6 @@ const StyledJRTable = styled__default["default"].div`
                 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;
-                color: #525252;
                 white-space: nowrap;
             }
         }
@@ -5439,21 +5424,10 @@ const StyledJRTable = styled__default["default"].div`
             position: sticky;
             bottom: -1px;
 
-            Xtr:nth-child(1){
-                th{
-                    Xborder-top:1px solid var(--column-bd-color);
-                }
-            }
-            Xth:nth-child(1){
-                Xborder-left:1px solid var(--column-bd-color);
-            }
-                
             th{
                 height:32px;
                 padding: 4px;
                 background: #e4e4e4;
-                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
-                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
                 color: #525252;
                 white-space: nowrap;
 
@@ -5467,7 +5441,6 @@ const StyledJRTable = styled__default["default"].div`
         tbody{
             tr{
                 transition: background .3s linear;
-                background:var(--column-b-color);
                 a:#ededed;
                 th{
                     color:#444444;
@@ -5480,7 +5453,6 @@ const StyledJRTable = styled__default["default"].div`
             }
             tr:hover{
                 background:var(--column-b-hover-color);
-                
             }
             
             tr.jr-group-header
@@ -6590,5 +6562,6 @@ exports.JRTable = JRTable;
 exports.JRTestReact = JRTestReact;
 exports.JRText = JRText;
 exports.JRWindow = JRWindow;
+exports.po = po;
 exports.random = random;
 exports.showMask = showMask;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.29",
+	"version": "1.2.31",
 	"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'){
@@ -18,27 +18,23 @@ export const FreeType=({tag:Tag,config,me,className})=>{
 }
 
 const StyledJRFrame=styled.div`
+    color:#525252;
+    background:white;
+
     position:relative;
     display:flex;
     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 +44,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 +60,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
                 ,{
@@ -76,8 +71,9 @@ export default class JRFrame extends JRSubmit {
         }
         :null
     renderer(){
-        return <StyledJRFrame  id={this.props.id} style={this.props.style} className={`jr-frame`} >
-            
+        return <StyledJRFrame  id={this.props.id} style={this.props.style} 
+            className={`jr-frame ${(this.props.popup!==true  )? this.props.className:''}`} 
+        >
             <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
             <main>
                 <FreeType tag='header' config={this.props.top} me={this}/>

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

@@ -154,7 +154,6 @@ export default function JRDialogMask({id='jr-mask'}){
 }
 
 export function JRDivMask({id='jr-mask'}){
-    // po(`create JRDivMask id=${id}`)
     return <StyledDivMask id={id}>
         <div id={`${id}-msg`} >MSG</div>
         <div className="cs-loader-inner">
@@ -216,8 +215,6 @@ class Mask extends JRHTML{
 
 export function showMask(msg,maskId='jr-mask'){
     const jrMask=document.getElementById(maskId)
-    // po(`showMask find id=${maskId}`)
-    // po('jrMask',jrMask)
     if((jrMask)){
         const jrMaskMsg=document.getElementById(`${maskId}-msg`)
         if(!jrMask.maskDiv){

package/src/components/JRSubmit.jsx

@@ -32,7 +32,7 @@ export default class JRSubmit extends React.Component {
             }
         }
     }
-    componentDidMount() {
+    componentDidMount(){
         this.#methods
         .filter((method) => this[method] && this.props[method] && this.props[method].autoRun)
         .forEach((method) => {
@@ -249,17 +249,14 @@ export default class JRSubmit extends React.Component {
             }
         })()
             .then((res)=>{
-                // setTimeout(()=>{
-                    this.handleResponse(res,_payload,config)
-                    // config.removeMaskFunction?.()
-                // },random(2000,1000))
+                this.handleResponse(res,_payload,config)
             })
             .catch((res)=>{
                 this.handleResponse(res,_payload,config)
             })
-            .finally(()=> {
-                config.removeMaskFunction?.()
-            })
+            // .finally(()=> {
+                // config.removeMaskFunction?.()
+            // })
     }
 
     handleResponse=(response,payload,config)=>{
@@ -280,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

@@ -6,8 +6,6 @@ export const StyledJRTable=styled.div`
     --column-b-hover-color:#eeeeee;
 
     position: relative;
-    background: var(--column-b-color);
-    border:1px solid var(--column-bd-color);
 
     display:flex;
     flex-direction: column;
@@ -47,7 +45,6 @@ export const StyledJRTable=styled.div`
                 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;
-                color: #525252;
                 white-space: nowrap;
             }
         }
@@ -56,21 +53,10 @@ export const StyledJRTable=styled.div`
             position: sticky;
             bottom: -1px;
 
-            Xtr:nth-child(1){
-                th{
-                    Xborder-top:1px solid var(--column-bd-color);
-                }
-            }
-            Xth:nth-child(1){
-                Xborder-left:1px solid var(--column-bd-color);
-            }
-                
             th{
                 height:32px;
                 padding: 4px;
                 background: #e4e4e4;
-                xbackground: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
-                xbox-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
                 color: #525252;
                 white-space: nowrap;
 
@@ -84,7 +70,6 @@ export const StyledJRTable=styled.div`
         tbody{
             tr{
                 transition: background .3s linear;
-                background:var(--column-b-color);
                 a:#ededed;
                 th{
                     color:#444444;
@@ -97,7 +82,6 @@ export const StyledJRTable=styled.div`
             }
             tr:hover{
                 background:var(--column-b-hover-color);
-                
             }
             
             tr.jr-group-header

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/components/JRWindow/JRWindow.jsx

@@ -73,11 +73,8 @@ export default class JRWindow extends JRFrame {
         this.mask.style.height='10000px'
         this.mask.style.width='10000px'
         target.appendChild(this.mask)
-        po('style.mask',style.mask)
-        po('addMask+++++++++++++++++++++++++++')
     }
     removeMaskFromTarget=()=>{
-        po('removeMask-----------------------')
         this.mask.remove()
     }
 

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
 }