jrs-react 1.2.18 → 1.2.20

package/build/index.es.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { useState } from 'react';
 import styled from 'styled-components';
 import { createRoot } from 'react-dom/client';
@@ -3269,36 +3269,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.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.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);
 	}
@@ -3307,96 +3468,150 @@ styled.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.createElement(StyledMask, {
+    id: id,
+    className: 'jr-mask'
+  }, /*#__PURE__*/React.createElement("div", {
+    id: 'jr-mask-msg'
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "cs-loader-inner"
+  }, /*#__PURE__*/React.createElement("label", null, "\u25CF"), /*#__PURE__*/React.createElement("label", null, "\u25CF"), /*#__PURE__*/React.createElement("label", null, "\u25CF"), /*#__PURE__*/React.createElement("label", null, "\u25CF"), /*#__PURE__*/React.createElement("label", null, "\u25CF"), /*#__PURE__*/React.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")}`,
@@ -3593,13 +3808,10 @@ class JRSubmit extends React__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)) {
@@ -3634,13 +3846,12 @@ class JRSubmit extends React__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) => {
@@ -3782,7 +3993,7 @@ class JRFrame extends JRSubmit {
 var _path;
 function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgX = function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React$1.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -3792,7 +4003,7 @@ var SvgX = function SvgX(props) {
     strokeLinejoin: "round",
     strokeWidth: 2,
     viewBox: "0 0 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path || (_path = /*#__PURE__*/React$1.createElement("path", {
     d: "M18 6 6 18M6 6l12 12"
   })));
 };
@@ -3913,7 +4124,6 @@ class TitleBar extends React__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`;
@@ -3923,7 +4133,6 @@ class TitleBar extends React__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`;
@@ -3936,7 +4145,6 @@ class TitleBar extends React__default.Component {
     }, 50);
   };
   stop = e => {
-    po('stop');
     e.preventDefault();
     if (this.moved) {
       const {
@@ -3959,7 +4167,6 @@ class TitleBar extends React__default.Component {
     window.removeEventListener('mousemove', this.preMove);
   };
   move = e => {
-    po('move');
     e.preventDefault();
     this.moved = true;
     const {
@@ -3974,35 +4181,24 @@ class TitleBar extends React__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=
@@ -4025,7 +4221,6 @@ class TitleBar extends React__default.Component {
     window.removeEventListener('mousemove', this.preMove);
   };
   start(e) {
-    po('start');
     e.preventDefault();
     this.moved = false;
     this.pos3 = e.clientX;
@@ -6197,8 +6392,8 @@ const StyledPick = styled.div`
     >label{
         white-space: nowrap;
         display: inline-flex;
-        align-items: baseline;
-        height: 30px;
+        align-items: center;
+        height: 24px;
         padding-right: 12px;
     }
 `;
@@ -6289,4 +6484,4 @@ class JRText extends JRInput {
   }
 }
 
-export { JRAlert, JRButton, JRCheckbox, JRFields, JRFrame, JRRadio, JRSelect, JRSubmit, JRTable, JRTestReact, JRText, JRWindow };
+export { JRAlert, JRButton, JRCheckbox, JRFields, JRFrame, JRMask, JRRadio, JRSelect, JRSubmit, JRTable, JRTestReact, JRText, JRWindow, random, showMask };