jrs-react 1.2.29 → 1.2.30

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;
@@ -3956,22 +3962,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;
@@ -3981,13 +3980,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 +3998,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
@@ -5127,7 +5125,6 @@ const Ths = ({
     } else {
       content = column.label;
     }
-    // style.textAlign=align
     return /*#__PURE__*/React__default.createElement("th", {
       key: colIndex,
       style: {
@@ -5220,11 +5217,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 +5231,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 +5296,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 +5321,7 @@ const TBody = ({
   }), groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupFooter, _extends({
     groupData: groupData,
     columns: groupFooter
-  }, neededProps))));
+  }, neededProps)));
 };
 const TBodies = ({
   groupHeader,
@@ -5335,18 +5330,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,
@@ -6549,4 +6538,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;
@@ -3983,22 +3989,15 @@ const StyledJRFrame = styled__default["default"].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;
@@ -4008,13 +4007,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 +4025,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
@@ -5154,7 +5152,6 @@ const Ths = ({
     } else {
       content = column.label;
     }
-    // style.textAlign=align
     return /*#__PURE__*/React__default["default"].createElement("th", {
       key: colIndex,
       style: {
@@ -5247,11 +5244,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 +5258,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 +5323,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 +5348,7 @@ const TBody = ({
   }), groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupFooter, _extends({
     groupData: groupData,
     columns: groupFooter
-  }, neededProps))));
+  }, neededProps)));
 };
 const TBodies = ({
   groupHeader,
@@ -5362,18 +5357,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,
@@ -6590,5 +6579,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.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`} >
-            
             <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/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
 }