jrs-react 1.2.47 → 1.2.48

package/build/index.es.js

@@ -3794,6 +3794,7 @@ class JRSubmit extends React__default.Component {
     extraValue,
     sendValue,
     transformValue,
+    responseType = 'json',
     ...params
   }) {
     const _extraValue = extraValue?.bind?.(this)() ?? extraValue;
@@ -3827,7 +3828,9 @@ class JRSubmit extends React__default.Component {
     const headers = {
       authorization: `Bearer ${localStorage.getItem("accessToken")}`
     };
-    let params1 = {};
+    let params1 = {
+      responseType
+    };
     const params2 = {};
     if (method == 'get') {
       if (sendValue == null || sendValue) params1.params = payload;
@@ -3964,19 +3967,23 @@ class Slider$2 extends React__default.Component {
       const ref = this.props.contenerRef.current;
       let width = this.frame.x2 - clientX - this.frame.shw;
       if (width < 0) width = 0;
+      po('width', width);
       ref.style.flexBasis = `${width}px`;
     },
     top: ({
       clientY
     }) => {
+      po('top');
       const ref = this.props.contenerRef.current;
       let height = clientY - this.frame.y - this.frame.shh;
+      po('height', height);
       // if(width<0)width=0
       ref.style.flexBasis = `${height}px`;
     },
     bottom: ({
       clientY
     }) => {
+      po('bottom');
       const ref = this.props.contenerRef.current;
       let height = this.frame.w2 - clientY - this.frame.shh;
       // clientY-this.frame.y-this.frame.shh
@@ -3986,6 +3993,7 @@ class Slider$2 extends React__default.Component {
     }
   };
   stop = e => {
+    po('stop', this.stop);
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
     window.removeEventListener('mouseup', this.stop);
@@ -3996,6 +4004,7 @@ class Slider$2 extends React__default.Component {
   start = ({
     clientX
   }) => {
+    console.clear();
     const ref = this.props.contenerRef.current;
     const {
       x,
@@ -4004,6 +4013,8 @@ class Slider$2 extends React__default.Component {
       height,
       ...other
     } = ref.getBoundingClientRect();
+    po('other', ref.getBoundingClientRect());
+    po('ref.getBoundingClientRect()', this.ref.current.getBoundingClientRect());
     const {
       width: sw,
       height: sh
@@ -4201,20 +4212,10 @@ class JRFrame extends JRSubmit {
   }
 }
 
-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 _path;
-function _extends() { return _extends = 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.apply(null, arguments); }
+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({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -4443,8 +4444,6 @@ class TitleBar extends React__default.Component {
     window.removeEventListener('mousemove', this.preMove);
   };
   start(e) {
-    po('start', this);
-    po('this.props.windowRef', this.props.windowRef);
     e.preventDefault();
     this.moved = false;
     this.pos3 = e.clientX;
@@ -4469,7 +4468,7 @@ class TitleBar extends React__default.Component {
       config: this.props.title ?? '',
       me: this.props.window,
       className: 'title'
-    }), /*#__PURE__*/React__default.createElement("nav", null, this.props.jrWindow.props.close ? /*#__PURE__*/React__default.createElement(JRButton, {
+    }), /*#__PURE__*/React__default.createElement("nav", null, this.props.window.props.setOpen ? /*#__PURE__*/React__default.createElement(JRButton, {
       icon: /*#__PURE__*/React__default.createElement(SvgX, null),
       className: 'danger',
       onClick: e => {
@@ -4477,7 +4476,7 @@ class TitleBar extends React__default.Component {
         if (this.props.window.orgBodyOverflow != null) {
           document.body.style.overflow = this.props.window.orgBodyOverflow;
         }
-        this.props.jrWindow.props.close();
+        this.props.window.props.setOpen(false);
       },
       onMouseDown: e => {
         e.stopPropagation();
@@ -4953,49 +4952,99 @@ class Backdrop extends JRHTML {
       left: 0
     }
   };
-  constructor({
-    zIndex,
-    fullScreen,
-    ...params
-  }) {
+  constructor(params) {
     super(params);
-    this.backdropConfig.style.zIndex = zIndex;
-    this.backdropConfig.personajes = {
-      id: params.backdropId
-    };
     Object.assign(this.backdropConfig.style, params.backdropStyle);
   }
   show() {
-    this.agregarHijo(this.backdropConfig);
+    this.backdrop = this.agregarHijo(this.backdropConfig);
   }
   hide() {
-    const backdrop = document.getElementById(this.backdropId);
-    if (backdrop) {
-      backdrop.parentNode.removeChild(backdrop);
-    }
+    this.yo.removeChild(this.yo.children[this.yo.children.length - 1]);
     this.hijos = [];
   }
 }
-class RWindow extends React__default.Component {
+class JRWindow extends JRFrame {
+  // x=0
+  // y=0
+  // width=300
+  // height=300
   padding = 1;
   thick = 5;
   constructor(props) {
     super(props);
+    this.ref = /*#__PURE__*/React__default.createRef();
     this.titleBarRef = /*#__PURE__*/React__default.createRef();
   }
+  createBackdrop() {
+    if (typeof this.props.backdrop === 'string') {
+      const target = document.getElementById(this.props.backdrop);
+      if (target) {
+        this.backdropTarget = new Backdrop({
+          yo: target,
+          style: {
+            position: 'relative'
+          },
+          backdropStyle: this.props.backdropStyle
+        });
+      }
+    }
+  }
+  addMaskToTarget = target => {
+    this.mask = document.createElement('div');
+    this.mask.style.background = '#868686cc';
+    this.mask.style.position = 'absolute';
+    this.mask.style.top = '0';
+    this.mask.style.left = '0';
+    this.mask.style.right = '0';
+    this.mask.style.bottom = '0';
+    this.mask.style.borderRadius = 'inherit';
+    this.mask.style.height = '10000px';
+    this.mask.style.width = '10000px';
+    target.appendChild(this.mask);
+  };
+  removeMaskFromTarget = () => {
+    this.mask.remove();
+  };
+
+  // backdropOn(on){
+  // const target=(typeof this.props.backdrop)==='object'
+  //     ?this.props.backdrop
+  //     :typeof this.props.backdrop ==='string'
+  //         ?document.getElementById(this.props.backdrop)
+  //         :document.body
+  // target?.classList[on?'add':'remove']('withMask')
+  // }
+
   componentDidMount() {
+    super.componentDidMount();
+    this.createBackdrop();
     if (this.props.open) {
-      this.props.jrWindow.backdropTarget?.show();
-      this.props.onOpen?.bind(this.props.jrWindow)();
+      this.open();
     }
   }
-  componentWillUnmount() {
-    if (this.props.open) {
-      this.props.jrWindow.backdropTarget?.hide();
+  open() {
+    this.backdropTarget?.show();
+    this.props.onOpen?.bind(this)();
+  }
+  close() {
+    this.backdropTarget?.hide();
+    this.props.onClose?.bind(this)();
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.popup === true) {
+      if (this.props.open && prevProps.open === false) {
+        this.open();
+      } else if (this.props.open === false && prevProps.open) {
+        this.close();
+      }
+      // if(this.props.backdrop && this.props.open!=prevProps.open){
+      //     this.backdropOn(this.props.open)
+      // }
     }
   }
   get xw() {
-    let width = 700;
+    let width;
     if (this.props.width?.indexOf?.('%') > -1) {
       width = this.props.width.split('%')[0] * window.innerWidth / 100;
     } else {
@@ -5007,7 +5056,7 @@ class RWindow extends React__default.Component {
     };
   }
   get yh() {
-    let height = 400;
+    let height;
     if (this.props.height?.indexOf?.('%') > -1) {
       height = this.props.height.split('%')[0] * window.innerHeight / 100;
     } else {
@@ -5018,93 +5067,34 @@ class RWindow extends React__default.Component {
       height
     };
   }
-  render() {
-    const {
-      children,
-      title,
-      resizable,
-      jrWindow,
-      ...props
-    } = this.props;
-    return /*#__PURE__*/React__default.createElement(StyledJRWindow, {
-      $zIndex: this.props.zIndex ? this.props.zIndex + 1 : null,
+  renderer() {
+    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledJRWindow, {
+      $zIndex: this.props.zIndex,
+      rule: 'dialog',
+      ref: this.ref,
       className: `jr-window ${this.props.className ?? ''}`,
-      ref: this.props.windowRef,
       $xw: this.xw,
       $yh: this.yh,
       $thick: this.thick
     }, /*#__PURE__*/React__default.createElement("main", {
       style: {
-        zIndex: this.props.zIndex ? this.props.zIndex + 1 : null
+        zIndex: 1
       }
     }, /*#__PURE__*/React__default.createElement(TitleBar, {
       titleBarRef: this.titleBarRef,
-      jrWindow: jrWindow,
-      windowRef: this.props.windowRef,
+      windowRef: this.ref,
       window: this,
-      title: title,
+      title: this.props.title,
       thick: this.thick,
-      resizable: resizable
-    }), children, this.props.resizable !== false && /*#__PURE__*/React__default.createElement(Sliders, {
+      resizable: this.props.resizable
+    }), /*#__PURE__*/React__default.createElement("main", null, super.renderer()), this.props.resizable !== false && /*#__PURE__*/React__default.createElement(Sliders, {
       thick: this.thick,
-      windowRef: this.props.windowRef,
+      windowRef: this.ref,
       window: this,
       titleBarRef: this.titleBarRef
-    })), this.props.backdrop === true && /*#__PURE__*/React__default.createElement(StyledBackdrop, {
+    })), this.props.backdrop !== false && typeof this.props.backdrop !== 'string' && /*#__PURE__*/React__default.createElement(StyledBackdrop, {
       $zIndex: this.props.zIndex
-    }));
-  }
-}
-class JRWindow extends JRFrame {
-  constructor(props) {
-    super(props);
-    this.windowRef = /*#__PURE__*/React__default.createRef();
-    this.backdropId = `backdropId-${random(10000, 99999)}`;
-  }
-  componentDidMount() {
-    super.componentDidMount();
-    this.createBackdrop();
-  }
-  componentWillUnmount() {
-    if (this.props.open) {
-      this.backdropTarget?.hide();
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.open && prevProps.open != this.props.open) {
-      this.props.onClose?.bind(this)();
-    }
-  }
-  componentWillUpdate;
-  createBackdrop() {
-    if (typeof this.props.backdrop === 'string') {
-      const target = document.getElementById(this.props.backdrop);
-      if (target) {
-        this.backdropTarget = new Backdrop({
-          yo: target,
-          backdropId: this.backdropId,
-          fullScreen: this.props.backdrop === true,
-          zIndex: this.props.zIndex,
-          backdropStyle: this.props.backdropStyle
-        });
-        if (this.props.open) {
-          this.backdropTarget.show();
-        }
-      }
-    }
-  }
-  renderer() {
-    const {
-      popup,
-      open,
-      xzIndex = 1,
-      ...props
-    } = this.props;
-    return popup === true ? open ? /*#__PURE__*/React__default.createElement(RWindow, _extends$1({}, props, {
-      jrWindow: this,
-      open: open,
-      windowRef: this.windowRef
-    }), super.renderer()) : '' : super.renderer();
+    }))) : '' : super.renderer();
   }
 }
 
@@ -5300,6 +5290,16 @@ const TFoot = ({
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tfoot", null, trs));
 };
 
+function _extends() {
+  return _extends = 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.apply(null, arguments);
+}
+
 styled.tbody`
     th{
         height:4px;
@@ -5380,7 +5380,7 @@ styled.tr`
     }
 `;
 const GroupHeader = props => {
-  return /*#__PURE__*/React__default.createElement(GroupColumns, _extends$1({
+  return /*#__PURE__*/React__default.createElement(GroupColumns, _extends({
     trClassName: 'jr-group-header'
   }, props));
 };
@@ -5391,7 +5391,7 @@ styled.tr`
     }
 `;
 const GroupFooter = props => {
-  return /*#__PURE__*/React__default.createElement(GroupColumns, _extends$1({
+  return /*#__PURE__*/React__default.createElement(GroupColumns, _extends({
     trClassName: 'jr-group-footer'
   }, props));
 };
@@ -5510,7 +5510,7 @@ const TBody = ({
   };
   return /*#__PURE__*/React__default.createElement("tbody", {
     key: `tbody${tbodyIndex}`
-  }, groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupHeader, _extends$1({
+  }, groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupHeader, _extends({
     groupData: groupData,
     columns: groupHeader
   }, neededProps)), groupData?.map?.((record, trIndex) => {
@@ -5524,13 +5524,13 @@ const TBody = ({
           groupIndex: tbodyIndex
         });
       }
-    }, /*#__PURE__*/React__default.createElement(Tds, _extends$1({
+    }, /*#__PURE__*/React__default.createElement(Tds, _extends({
       record: record,
       trIndex: trIndex
     }, neededProps, {
       leafColumns: leafColumns
     })));
-  }), groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupFooter, _extends$1({
+  }), groupData?.length > 0 && /*#__PURE__*/React__default.createElement(GroupFooter, _extends({
     groupData: groupData,
     columns: groupFooter
   }, neededProps)));
@@ -6013,6 +6013,7 @@ class JRFields extends JRWindow {
     }, validators);
   }
   validate(value) {
+    console.clear();
     const validators = [];
     const testValue = this.getTestValue() ?? {};
     this.#validators(this.getColumns(), validators, [], testValue, value !== undefined ? value : this.getValue());
@@ -6498,7 +6499,7 @@ function JRAlertWindow({
   ...props
 }) {
   const [open, setOpen] = useState(true);
-  return /*#__PURE__*/React__default.createElement(StyledAlert, _extends$1({
+  return /*#__PURE__*/React__default.createElement(StyledAlert, _extends({
     initValue: {
       message
     },
@@ -6537,7 +6538,7 @@ function JRAlert(props) {
   }
   const jrAlerDiv = document.createElement('div');
   container.appendChild(jrAlerDiv);
-  createRoot(jrAlerDiv).render(/*#__PURE__*/React__default.createElement(JRAlertWindow, _extends$1({}, props, {
+  createRoot(jrAlerDiv).render(/*#__PURE__*/React__default.createElement(JRAlertWindow, _extends({}, props, {
     container: jrAlerDiv
   })));
 }