jrs-react 1.2.47 → 1.2.48

package/build/index.js

@@ -3821,6 +3821,7 @@ class JRSubmit extends React__default["default"].Component {
     extraValue,
     sendValue,
     transformValue,
+    responseType = 'json',
     ...params
   }) {
     const _extraValue = extraValue?.bind?.(this)() ?? extraValue;
@@ -3854,7 +3855,9 @@ class JRSubmit extends React__default["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;
@@ -3991,19 +3994,23 @@ class Slider$2 extends React__default["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
@@ -4013,6 +4020,7 @@ class Slider$2 extends React__default["default"].Component {
     }
   };
   stop = e => {
+    po('stop', this.stop);
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
     window.removeEventListener('mouseup', this.stop);
@@ -4023,6 +4031,7 @@ class Slider$2 extends React__default["default"].Component {
   start = ({
     clientX
   }) => {
+    console.clear();
     const ref = this.props.contenerRef.current;
     const {
       x,
@@ -4031,6 +4040,8 @@ class Slider$2 extends React__default["default"].Component {
       height,
       ...other
     } = ref.getBoundingClientRect();
+    po('other', ref.getBoundingClientRect());
+    po('ref.getBoundingClientRect()', this.ref.current.getBoundingClientRect());
     const {
       width: sw,
       height: sh
@@ -4228,20 +4239,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__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -4470,8 +4471,6 @@ class TitleBar extends React__default["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;
@@ -4496,7 +4495,7 @@ class TitleBar extends React__default["default"].Component {
       config: this.props.title ?? '',
       me: this.props.window,
       className: 'title'
-    }), /*#__PURE__*/React__default["default"].createElement("nav", null, this.props.jrWindow.props.close ? /*#__PURE__*/React__default["default"].createElement(JRButton, {
+    }), /*#__PURE__*/React__default["default"].createElement("nav", null, this.props.window.props.setOpen ? /*#__PURE__*/React__default["default"].createElement(JRButton, {
       icon: /*#__PURE__*/React__default["default"].createElement(SvgX, null),
       className: 'danger',
       onClick: e => {
@@ -4504,7 +4503,7 @@ class TitleBar extends React__default["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();
@@ -4980,49 +4979,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["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["default"].createRef();
     this.titleBarRef = /*#__PURE__*/React__default["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 {
@@ -5034,7 +5083,7 @@ class RWindow extends React__default["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 {
@@ -5045,93 +5094,34 @@ class RWindow extends React__default["default"].Component {
       height
     };
   }
-  render() {
-    const {
-      children,
-      title,
-      resizable,
-      jrWindow,
-      ...props
-    } = this.props;
-    return /*#__PURE__*/React__default["default"].createElement(StyledJRWindow, {
-      $zIndex: this.props.zIndex ? this.props.zIndex + 1 : null,
+  renderer() {
+    return this.props.popup === true ? this.props.open ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["default"].createElement("main", {
       style: {
-        zIndex: this.props.zIndex ? this.props.zIndex + 1 : null
+        zIndex: 1
       }
     }, /*#__PURE__*/React__default["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["default"].createElement(Sliders, {
+      resizable: this.props.resizable
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, super.renderer()), this.props.resizable !== false && /*#__PURE__*/React__default["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["default"].createElement(StyledBackdrop, {
+    })), this.props.backdrop !== false && typeof this.props.backdrop !== 'string' && /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
       $zIndex: this.props.zIndex
-    }));
-  }
-}
-class JRWindow extends JRFrame {
-  constructor(props) {
-    super(props);
-    this.windowRef = /*#__PURE__*/React__default["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["default"].createElement(RWindow, _extends$1({}, props, {
-      jrWindow: this,
-      open: open,
-      windowRef: this.windowRef
-    }), super.renderer()) : '' : super.renderer();
+    }))) : '' : super.renderer();
   }
 }
 
@@ -5327,6 +5317,16 @@ const TFoot = ({
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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__default["default"].tbody`
     th{
         height:4px;
@@ -5407,7 +5407,7 @@ styled__default["default"].tr`
     }
 `;
 const GroupHeader = props => {
-  return /*#__PURE__*/React__default["default"].createElement(GroupColumns, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(GroupColumns, _extends({
     trClassName: 'jr-group-header'
   }, props));
 };
@@ -5418,7 +5418,7 @@ styled__default["default"].tr`
     }
 `;
 const GroupFooter = props => {
-  return /*#__PURE__*/React__default["default"].createElement(GroupColumns, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(GroupColumns, _extends({
     trClassName: 'jr-group-footer'
   }, props));
 };
@@ -5537,7 +5537,7 @@ const TBody = ({
   };
   return /*#__PURE__*/React__default["default"].createElement("tbody", {
     key: `tbody${tbodyIndex}`
-  }, groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupHeader, _extends$1({
+  }, groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupHeader, _extends({
     groupData: groupData,
     columns: groupHeader
   }, neededProps)), groupData?.map?.((record, trIndex) => {
@@ -5551,13 +5551,13 @@ const TBody = ({
           groupIndex: tbodyIndex
         });
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Tds, _extends$1({
+    }, /*#__PURE__*/React__default["default"].createElement(Tds, _extends({
       record: record,
       trIndex: trIndex
     }, neededProps, {
       leafColumns: leafColumns
     })));
-  }), groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupFooter, _extends$1({
+  }), groupData?.length > 0 && /*#__PURE__*/React__default["default"].createElement(GroupFooter, _extends({
     groupData: groupData,
     columns: groupFooter
   }, neededProps)));
@@ -6040,6 +6040,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());
@@ -6525,7 +6526,7 @@ function JRAlertWindow({
   ...props
 }) {
   const [open, setOpen] = React.useState(true);
-  return /*#__PURE__*/React__default["default"].createElement(StyledAlert, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(StyledAlert, _extends({
     initValue: {
       message
     },
@@ -6564,7 +6565,7 @@ function JRAlert(props) {
   }
   const jrAlerDiv = document.createElement('div');
   container.appendChild(jrAlerDiv);
-  client.createRoot(jrAlerDiv).render(/*#__PURE__*/React__default["default"].createElement(JRAlertWindow, _extends$1({}, props, {
+  client.createRoot(jrAlerDiv).render(/*#__PURE__*/React__default["default"].createElement(JRAlertWindow, _extends({}, props, {
     container: jrAlerDiv
   })));
 }

package/package.json

@@ -1,61 +1,61 @@
 {
-	"name": "jrs-react",
-	"version": "1.2.47",
-	"description": "",
-	"main": "build/index.js",
-	"module": "build/index.es.js",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"build": "rollup -c",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"vite": "vite"
-	},
-	"author": "JorenLai",
-	"license": "MIT",
-	"dependencies": {
-		"@rollup/plugin-commonjs": "^28.0.3",
-		"@rollup/plugin-json": "^6.1.0",
-		"@types/react": "^19.0.10",
-		"@types/react-dom": "^19.0.4",
-		"@vitejs/plugin-react": "^4.3.4",
-		"antd": "^5.12.5",
-		"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",
-		"styled-components": "^6.1.15",
-		"vite": "^6.2.0",
-		"vite-plugin-svgr": "^4.3.0"
-	},
-	"peerDependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.26.10",
-		"@chromatic-com/storybook": "^3.2.6",
-		"@rollup/plugin-node-resolve": "^16.0.1",
-		"@storybook/addon-essentials": "^8.6.6",
-		"@storybook/addon-onboarding": "^8.6.6",
-		"@storybook/blocks": "^8.6.6",
-		"@storybook/experimental-addon-test": "^8.6.6",
-		"@storybook/react": "^8.6.6",
-		"@storybook/react-vite": "^8.6.6",
-		"@storybook/test": "^8.6.6",
-		"@svgr/rollup": "^8.1.0",
-		"@vitest/browser": "^3.0.8",
-		"@vitest/coverage-v8": "^3.0.8",
-		"prop-types": "^15.8.1",
-		"rollup": "^2.79.2",
-		"rollup-plugin-babel": "^4.4.0",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-terser": "^7.0.2",
-		"storybook": "^8.6.6",
-		"vitest": "^3.0.8"
-	}
-}
+  "name": "jrs-react",
+  "version": "1.2.48",
+  "description": "",
+  "main": "build/index.js",
+  "module": "build/index.es.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "vite": "vite"
+  },
+  "author": "JorenLai",
+  "license": "MIT",
+  "dependencies": {
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "antd": "^5.12.5",
+    "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",
+    "styled-components": "^6.1.15",
+    "vite": "^6.2.0",
+    "vite-plugin-svgr": "^4.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@storybook/addon-essentials": "^8.6.6",
+    "@storybook/addon-onboarding": "^8.6.6",
+    "@storybook/blocks": "^8.6.6",
+    "@storybook/experimental-addon-test": "^8.6.6",
+    "@storybook/react": "^8.6.6",
+    "@storybook/react-vite": "^8.6.6",
+    "@storybook/test": "^8.6.6",
+    "@svgr/rollup": "^8.1.0",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-v8": "^3.0.8",
+    "prop-types": "^15.8.1",
+    "rollup": "^2.79.2",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^8.6.6",
+    "vitest": "^3.0.8"
+  }
+}

package/src/components/JRFields/JRFields.jsx

@@ -276,6 +276,7 @@ export default class JRFields extends JRWindow {
         )
     }
     validate(value){
+        console.clear()
         const validators=[]
         const testValue=this.getTestValue()??{}
         this.#validators(this.getColumns(),validators,[],testValue,value!==undefined?value:this.getValue())

package/src/components/JRFrame/Slider.jsx

@@ -22,15 +22,19 @@ export default class Slider extends React.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
@@ -40,6 +44,7 @@ export default class Slider extends React.Component {
         }
     }
     stop=(e)=>{
+        po('stop',this.stop)
         document.body.style.cursor='default'
         window.removeEventListener('mousemove',this.move)
         window.removeEventListener('mouseup',this.stop)
@@ -48,8 +53,11 @@ export default class Slider extends React.Component {
         this.resize[this.props.dir](e)
     }
     start=({clientX})=>{
+        console.clear()
         const ref=this.props.contenerRef.current
         const {x,y,width,height,...other}=ref.getBoundingClientRect()
+        po('other',ref.getBoundingClientRect())
+        po('ref.getBoundingClientRect()',this.ref.current.getBoundingClientRect())
         const {width:sw,height:sh}=this.ref.current.getBoundingClientRect()
         this.frame={
             x,y