jrs-react 1.2.19 → 1.2.21

package/build/index.js

@@ -3296,36 +3296,197 @@ const whatType = ({
     return doElse;
   }
 };
+function random(max = 100, min = 0) {
+  return Math.floor(Math.random() * (max + 1 - min)) + min;
+}
 
-// import { IconSpinner } from '../assets/image';
+class JRHTML{
+	isJRHTML=true
+	_hijos=[]
+	_padre
+	_madre
+	_yo
+	constructor(params){
+		var {yo,padre,madre,clases,personajes={},...params}=params;
+		this.yo=yo;
+		if(padre){
+			this.padre=padre;
+			this.madre=padre.yo;
+		}else if(madre){
+			this.madre=madre;
+		}
+		if(clases)personajes.class=clases.join(' ');
+		params.personajes=personajes;
+		Object.assign(this,params);
+		this._init();
+	}
+	_init(){
+		
+	}
+	set style(styles){
+		Object.entries(styles).forEach((style,i)=>{
+			this._yo.style[style[0]]=style[1];
+		});
+	}
+	set personajes(personajes){
+		Object.entries(personajes).forEach(([personaje,valor])=>{
+			this._yo.setAttribute(personaje,valor);
+		});			
+	}
+	agregarHijo(hijo){
+		if(hijo.isJRHTML){
+			hijo.padre=this;
+			hijo.madre=this.yo;
+		}else if(hijo.yo){
+			hijo.padre=this;
+			hijo= hijo.yo.name?new hijo.yo(hijo):new JRHTML(hijo);
+		}else {
+			this.yo.appendChild(document.createTextNode(hijo));
+		}
+		return hijo
+	}
+	set html(html){
+		this._yo.innerHTML=html;
+	}
+	get html(){
+		return this._yo.innerHTML
+	}
+	set hijos(hijos){
+		hijos.forEach((hijo,i)=>{
+			this.agregarHijo(hijo);
+		});
+	}
+	get hijos(){
+		return this._hijos
+	}
+	removeAllHijos(){
+		this.hijos.forEach(hijo=>{
+			hijo.yo.remove();
+		});
+		delete this.hijos;
+		this.hijos=[];
+	}
+	removeHijo(hijo){
+		var index=this.hijos.indexOf(hijo);
+		if(index>=0){
+			this.yo.removeChild(this.yo.childNodes[index]);
+			this.hijos.splice(index, 1);
+		}
+	}
+	nacido(yo){
+		return document.createElement(yo)
+	}	
+	set yo(yo){
+		if(typeof yo === 'string' ){
+			this._yo=this.nacido(yo);
+		}else {
+			this._yo=yo;
+		}
+	}
+	get yo(){
+		return this._yo
+	}
+	set padre(padre){
+		this._padre=padre;
+		if(this._padre)this._padre._hijos.push(this);
+	}
+	get padre(){
+		return this._padre
+	}
+	set madre(madre){
+		if(typeof madre === 'string' ){
+			this._madre=document.getElementById(madre);	
+		}else {
+			this._madre=madre;
+		}
+		if(this._madre&&this._yo)this._madre.appendChild(this._yo);
+	}	
+	get madre(){
+		return this._madre
+	}	
+	set listeners(listeners){
+		Object.entries(listeners).forEach(([event,func])=>{
+			var me=this;
+			if(event=='listeners'){
+				this.listeners=func;
+			}else {
+				this._yo.addEventListener(event,function(e){
+					func(e,me);
+				},false);
+			}
+		});
+	}	
+	get width(){
+		return this._yo.clientWidth//offsetWidth
+	}
+	set width(width){
+		this._yo.style.width=width;
+	}
+	get height(){
+		return this._yo.clientHeight//offsetWidth
+	}
+	set height(height){
+		this._yo.style.height=height;
+	}	
+	set textContent(textContent){
+		this._yo.textContent=textContent;
+	}
+	set color(color){
+		this.yo.style.color=color;
+		this._color=color;
+	}
+	get color(){
+		return this._color
+	}
+	set visibility(visibility){
+		this.yo.style.visibility=visibility;
+	}
+	set tip(tip){
+		this.agregarHijo({
+			yo:'span'
+			,clases:['tooltiptext']
+			,textContent:tip
+		});	
+	}
+}
+
+const StyledMask = styled__default["default"].dialog`
+    display:none;
+    &:open{
+        display:flex;
+    }
+
+    &:modal  {
+        outline: 0;
+        background: #000c6e77;
+    }
+
+    #jr-mask-msg{
+        padding: 10px;
+    }
+    
+    max-width: 100vw;
+    max-height: 100vh;
+
+    width: 100vw;
+    height: 100vh;
+
+    border:0;
+    margin: 0;
+    top: 0;
+    left: 0;
 
-styled__default["default"].div`
     user-select: none;
     cursor: wait;
-    display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background-color: #000000aa;
+
     z-index: 20000;
-    color: ${({
-  theme
-}) => theme.colorPrimary};
-
-    svg{
-        width: 80px;
-        height: 80px;
-        path, circle{
-            fill: ${({
-  theme
-}) => theme.colorPrimary};
-        }
-    }
+    overflow: hidden;
     
-	.cs-loader-inner {
+    .cs-loader-inner {
 		transform: translateY(-30%);
 		width: calc(100% - 200xpx);
 	}
@@ -3334,96 +3495,150 @@ styled__default["default"].div`
 		font-size: 20px;
 		opacity: 0;
 		display:inline-block;
-		color:${({
-  theme
-}) => theme.colorPrimary};
+		color:white;
 	}
 
-@keyframes lol {
-  0% {
-    opacity: 0;
-    transform: translateX(-300px);
-  }
-  33% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  66% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(300px);
-  }
-}
+    @keyframes lol {
+        0% {
+            opacity: 0;
+            transform: translateX(-300px);
+        }
+        33% {
+            opacity: 1;
+            transform: translateX(0px);
+        }
+        66% {
+            opacity: 1;
+            transform: translateX(0px);
+        }
+        100% {
+            opacity: 0;
+            transform: translateX(300px);
+        }
+    }
 
-@-webkit-keyframes lol {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-300px);
-  }
-  33% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-  66% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: translateX(300px);
-  }
-}
+    @-webkit-keyframes lol {
+        0% {
+            opacity: 0;
+            -webkit-transform: translateX(-300px);
+        }
+        33% {
+            opacity: 1;
+            -webkit-transform: translateX(0px);
+        }
+        66% {
+            opacity: 1;
+            -webkit-transform: translateX(0px);
+        }
+        100% {
+            opacity: 0;
+            -webkit-transform: translateX(300px);
+        }
+    }
 
-.cs-loader-inner label:nth-child(6) {
-  -webkit-animation: lol 3s infinite ease-in-out;
-  animation: lol 3s infinite ease-in-out;
-}
+    .cs-loader-inner label:nth-child(6) {
+        -webkit-animation: lol 3s infinite ease-in-out;
+        animation: lol 3s infinite ease-in-out;
+    }
 
-.cs-loader-inner label:nth-child(5) {
-  -webkit-animation: lol 3s 100ms infinite ease-in-out;
-  animation: lol 3s 100ms infinite ease-in-out;
-}
+    .cs-loader-inner label:nth-child(5) {
+        -webkit-animation: lol 3s 100ms infinite ease-in-out;
+        animation: lol 3s 100ms infinite ease-in-out;
+    }
 
-.cs-loader-inner label:nth-child(4) {
-  -webkit-animation: lol 3s 200ms infinite ease-in-out;
-  animation: lol 3s 200ms infinite ease-in-out;
-}
+    .cs-loader-inner label:nth-child(4) {
+        -webkit-animation: lol 3s 200ms infinite ease-in-out;
+        animation: lol 3s 200ms infinite ease-in-out;
+    }
 
-.cs-loader-inner label:nth-child(3) {
-  -webkit-animation: lol 3s 300ms infinite ease-in-out;
-  animation: lol 3s 300ms infinite ease-in-out;
-}
+    .cs-loader-inner label:nth-child(3) {
+        -webkit-animation: lol 3s 300ms infinite ease-in-out;
+        animation: lol 3s 300ms infinite ease-in-out;
+    }
 
-.cs-loader-inner label:nth-child(2) {
-  -webkit-animation: lol 3s 400ms infinite ease-in-out;
-  animation: lol 3s 400ms infinite ease-in-out;
-}
+    .cs-loader-inner label:nth-child(2) {
+        -webkit-animation: lol 3s 400ms infinite ease-in-out;
+        animation: lol 3s 400ms infinite ease-in-out;
+    }
 
-.cs-loader-inner label:nth-child(1) {
-  -webkit-animation: lol 3s 500ms infinite ease-in-out;
-  animation: lol 3s 500ms infinite ease-in-out;
-}
+    .cs-loader-inner label:nth-child(1) {
+        -webkit-animation: lol 3s 500ms infinite ease-in-out;
+        animation: lol 3s 500ms infinite ease-in-out;
+    }
 `;
-const displaySpinner = ({
-  mask
-}) => {
-  const spin = document.getElementById("loadingBar");
-  const text = document.getElementById("loadingText");
-  if (spin == null) {
-    //alert("Spin or msgSpan is not initialized")
-    return;
+function JRMask({
+  id = 'jr-mask'
+}) {
+  return /*#__PURE__*/React__default["default"].createElement(StyledMask, {
+    id: id,
+    className: 'jr-mask'
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    id: 'jr-mask-msg'
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "cs-loader-inner"
+  }, /*#__PURE__*/React__default["default"].createElement("label", null, "\u25CF"), /*#__PURE__*/React__default["default"].createElement("label", null, "\u25CF"), /*#__PURE__*/React__default["default"].createElement("label", null, "\u25CF"), /*#__PURE__*/React__default["default"].createElement("label", null, "\u25CF"), /*#__PURE__*/React__default["default"].createElement("label", null, "\u25CF"), /*#__PURE__*/React__default["default"].createElement("label", null, "\u25CF")));
+}
+class Mask extends JRHTML {
+  msg = [];
+  #msgIndex = 0;
+  #mask;
+  get msgIndex() {
+    return this.#msgIndex++;
+  }
+  addMsg(msg) {
+    const index = this.msgIndex;
+    this.msg.push({
+      i: index,
+      msg
+    });
+    this.renderMsg();
+    return () => {
+      po('remove function', index);
+      this.removeMsg(index);
+    };
   }
-  if (mask) {
-    spin.style.display = "flex";
-    text.innerText = mask;
-  } else {
-    spin.style.display = "none";
-    text.innerText = '';
+  removeMsg(index) {
+    this.msg = this.msg.filter(r => r.i != index);
+    this.renderMsg();
   }
-};
+  renderMsg() {
+    this.msgDiv.removeAllHijos();
+    if (this.msg.length) {
+      this.msgDiv.agregarHijo(new JRHTML({
+        yo: 'div',
+        textContent: this.msg[this.msg.length - 1].msg
+      }));
+      if (!this.yo.open) {
+        this.yo.showModal();
+      }
+    } else {
+      this.yo.close();
+    }
+  }
+  get msg() {
+    return 'msg';
+  }
+}
+function showMask(msg, maskTarget, whichMask) {
+  const jrMask = document.getElementById('jr-mask');
+  const jrMaskMsg = document.getElementById('jr-mask-msg');
+  if (!jrMask.maskDiv) {
+    jrMask.maskDiv = new Mask({
+      yo: jrMask,
+      msgDiv: new JRHTML({
+        yo: jrMaskMsg
+      }),
+      listeners: {
+        keydown(e) {
+          if (e.key === 'Escape') {
+            e.preventDefault();
+          }
+        }
+      }
+    });
+  }
+  return jrMask.maskDiv.addMsg(msg);
+}
 
 const axiosSubmit = axios$1.create({
   authorization: `Bearer ${localStorage.getItem("accessToken")}`,
@@ -3620,13 +3835,10 @@ class JRSubmit extends React__default["default"].Component {
     po('reload 還沒有做 ');
   }
   submit(config) {
-    const me = this;
-    displaySpinner({
-      mask: config.mask
-    });
-    this.setState({
-      loading: true
-    });
+    // const me=this
+    // displaySpinner({mask:config.mask})
+    // this.setState({loading:true})//拿掉可能會有問題, 先觀察看看
+    if (config.mask) config.removeMaskFunction = showMask(config.mask);
     let _payload;
     (() => {
       if (Array.isArray(config.url)) {
@@ -3661,13 +3873,12 @@ class JRSubmit extends React__default["default"].Component {
       this.handleResponse(res, _payload, config);
     }).catch(res => {
       this.handleResponse(res, _payload, config);
-    }).finally(function (a, b, c) {
-      me.setState({
-        loading: false
-      });
-      displaySpinner({
-        mask: false
-      });
+    }).finally(() => {
+      // this.setState({loading:false})
+      // displaySpinner({mask:false})
+      // setTimeout(()=>{
+      config.removeMaskFunction?.();
+      // },random(4000,1000))
     });
   }
   handleResponse = (response, payload, config) => {
@@ -3940,7 +4151,6 @@ class TitleBar extends React__default["default"].Component {
     }
   };
   floatScreen = e => {
-    po('floatScreen');
     this.props.windowRef.current;
     this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .05s ease-in';
     this.props.windowRef.current.style.left = `${this.props.window.orgLeft}px`;
@@ -3950,7 +4160,6 @@ class TitleBar extends React__default["default"].Component {
     document.body.style.overflow = this.props.window.orgBodyOverflow;
   };
   fullScreen = e => {
-    po('fullScreen', this.props.thick);
     this.props.windowRef.current.style.transition = 'var(--transition-x-y), left .05s ease-in';
     this.props.windowRef.current.style.left = `${-this.props.thick}px`;
     this.props.windowRef.current.style.top = `${-this.props.thick}px`;
@@ -3963,7 +4172,6 @@ class TitleBar extends React__default["default"].Component {
     }, 50);
   };
   stop = e => {
-    po('stop');
     e.preventDefault();
     if (this.moved) {
       const {
@@ -3986,7 +4194,6 @@ class TitleBar extends React__default["default"].Component {
     window.removeEventListener('mousemove', this.preMove);
   };
   move = e => {
-    po('move');
     e.preventDefault();
     this.moved = true;
     const {
@@ -4001,35 +4208,24 @@ class TitleBar extends React__default["default"].Component {
     const w = this.props.windowRef.current;
     this.y = w.offsetTop - this.pos2;
     this.x = w.offsetLeft - this.pos1;
-
-    // if(this.props.window.orgWidth){
-    //     w.style.width=`${this.props.window.orgWidth}px`
-    //     this.props.window.orgWidth=null
-    // }
-
     this.y = this.y < -this.props.thick ? -this.props.thick : this.y;
     w.style.transition = 'unset';
     w.style.top = `${this.y}px`;
     w.style.left = `${this.x}px`;
   };
   preMove = e => {
-    console.clear();
-    po('preMove');
     const w = this.props.windowRef.current;
     const {
       clientX,
       clientY,
       ...oe
     } = e;
-    po('e', e);
     const {
       x,
       y,
       width,
       height
     } = w.getBoundingClientRect();
-    po('width', width);
-    if (y <= -this.props.thick) ;
     w.style.transition = 'left .05s ease-in, height .05s ease-in';
     if (y <= 0) {
       // contt browserWidth=
@@ -4052,7 +4248,6 @@ class TitleBar extends React__default["default"].Component {
     window.removeEventListener('mousemove', this.preMove);
   };
   start(e) {
-    po('start');
     e.preventDefault();
     this.moved = false;
     this.pos3 = e.clientX;
@@ -6321,6 +6516,7 @@ exports.JRButton = JRButton;
 exports.JRCheckbox = JRCheckbox;
 exports.JRFields = JRFields;
 exports.JRFrame = JRFrame;
+exports.JRMask = JRMask;
 exports.JRRadio = JRRadio;
 exports.JRSelect = JRSelect;
 exports.JRSubmit = JRSubmit;
@@ -6328,3 +6524,5 @@ exports.JRTable = JRTable;
 exports.JRTestReact = JRTestReact;
 exports.JRText = JRText;
 exports.JRWindow = JRWindow;
+exports.random = random;
+exports.showMask = showMask;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.19",
+	"version": "1.2.21",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",
@@ -23,6 +23,7 @@
 		"axios": "^1.6.2",
 		"create-react-class": "^15.7.0",
 		"globals": "^15.15.0",
+		"jrs-js": "^0.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^7.4.0",

package/src/app/App.css

@@ -28,4 +28,15 @@ html,*,*:before,*:after {
     >div:not(:last-child){
         display: none;
     }
-}
+}
+
+
+
+Xdialog.jr-mask::backdrop {
+    background: #000c6e;
+    opacity: .3;
+}
+
+dialog:modal {
+    max-width: 100vw;
+  }

package/src/app/App.jsx

@@ -8,10 +8,12 @@ import AlertApp from './alert/AlertApp'
 import { po } from '../components/JRUtils'
 import TestApp from './test'
 import InputApp from './input/InputApp'
+import DevApp from './dev/devApp'
 
 function App() {
 	const apps={
 		TableApp,FieldsApp,WindowApp,AxiosApp,AlertApp,InputApp,TestApp
+		,DevApp
 	}
 	return <BrowserRouter>
 		{