jrs-react 1.2.47 → 1.2.49

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.49",
+	"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/assets/icon/card.svg

@@ -1,14 +1,14 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
-  <line x1="1" y1="10" x2="23" y2="10" />
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+  <line x1="1" y1="10" x2="23" y2="10" />
+</svg>

package/src/assets/icon/copy.svg

@@ -1,14 +1,14 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+</svg>

package/src/assets/icon/minus.svg

@@ -1,13 +1,13 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <line x1="5" y1="12" x2="19" y2="12" />
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="5" y1="12" x2="19" y2="12" />
+</svg>

package/src/assets/icon/square.svg

@@ -1,13 +1,13 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+</svg>

package/src/assets/icon/x.svg

@@ -1,14 +1,14 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <line x1="18" y1="6" x2="6" y2="18" />
-  <line x1="6" y1="6" x2="18" y2="18" />
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="18" y1="6" x2="6" y2="18" />
+  <line x1="6" y1="6" x2="18" y2="18" />
+</svg>

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

package/src/components/JRSubmit.jsx

@@ -20,7 +20,6 @@ const Cover=({children})=>{
 
 export default class JRSubmit extends React.Component {
     #methods = ['get', 'post', 'put','patch','delete','download']
-
     constructor(props) {
         super(props)
         if(this.props.value===undefined && this.props.initValue!==undefined ){
@@ -157,7 +156,10 @@ export default class JRSubmit extends React.Component {
         return this.getValue()
     }
 
-    getAxiosParams({url,method,value,extraValue,sendValue,transformValue,...params}){
+    getAxiosParams({url,method,value,extraValue,sendValue,transformValue,paramsSerializer
+        ,...params
+    }){
+        po('params',params)
         const _extraValue=extraValue?.bind?.(this)() ?? extraValue
         // let payload=typeof value === 'function'
         //     ?value.bind(this)({
@@ -196,10 +198,11 @@ export default class JRSubmit extends React.Component {
         let params1={}
         const params2={}
         if(method=='get'){
-            if(sendValue==null || sendValue)params1.params=payload
+            if(sendValue==null || sendValue) params1.params=payload
             params1.headers=headers
+            params1.paramsSerializer=paramsSerializer
         }else if(method=='delete'){
-            if(sendValue==null || sendValue)params1.data=payload
+            if(sendValue==null || sendValue) params1.data=payload
             params1.headers=headers
         }else{
             if(sendValue==null || sendValue){
@@ -275,9 +278,7 @@ export default class JRSubmit extends React.Component {
             
         response = config?.response?.bind(this)(response,payload) ?? response
         const isSuccess = response.status >= 200 && response.status <= 299
-        
         this.setRes(isSuccess,response,config)
-
         if(config.delay!=null){
             setTimeout(()=>{
                 this.showMessage(isSuccess,isSuccess?config.successMessage:config.failedMessage)
@@ -289,8 +290,6 @@ export default class JRSubmit extends React.Component {
             config.callback?.bind(this)(isSuccess,response,payload)
             config.removeMaskFunction?.()
         }
-
-
     }
 
     showMessage(success,message){

package/src/components/JRWindow/JRWindow.jsx

@@ -4,9 +4,7 @@ import styled from "styled-components";
 import TitleBar from "./TitleBar";
 import Sliders from "./Slider";
 import { JRHTML } from "jrs-js";
-import { po, random } from "../JRUtils";
-
-
+import { po } from "../JRUtils";
 
 const StyledBackdrop=styled.div`
     ${({$zIndex})=>$zIndex!=null?`z-index:${$zIndex};`:null}
@@ -58,8 +56,6 @@ const StyledJRWindow=styled.div`
     }
 `
 
-
-
 class Backdrop extends JRHTML{
     backdropConfig={   
         yo:'div'
@@ -73,51 +69,115 @@ class Backdrop extends JRHTML{
         }
     }
 
-    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)
+        this.on=true
     }
     hide(){
-        const backdrop=document.getElementById(this.backdropId)
-        if(backdrop){
-            backdrop.parentNode.removeChild(backdrop);
+        if(this.on){
+            this.yo.removeChild(this.yo.children[this.yo.children.length-1])
+            this.hijos=[]
+            this.on=false
         }
-        this.hijos=[]
     }
 }
 
-
-
-class RWindow extends React.Component {
+export default class JRWindow extends JRFrame {
+    // x=0
+    // y=0
+    // width=300
+    // height=300
     padding=1
     thick=5
+    
     constructor(props){
         super(props)
+        this.ref=React.createRef()
         this.titleBarRef=React.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()
-        }
+        this.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{
@@ -130,7 +190,7 @@ class RWindow extends React.Component {
     }
 
     get yh(){
-        let height=400
+        let height
         if(this.props.height?.indexOf?.('%')>-1){
             height=(this.props.height.split('%')[0]*window.innerHeight)/100
         }else{
@@ -142,89 +202,43 @@ class RWindow extends React.Component {
         }
     }
 
-    render(){
-        const {children,title,resizable,jrWindow,...props}=this.props
-        return <StyledJRWindow 
-            $zIndex={this.props.zIndex?this.props.zIndex+1:null}
-            className={`jr-window ${this.props.className??''}`}
-            ref={this.props.windowRef}
-            $xw={this.xw}
-            $yh={this.yh}
-            $thick={this.thick}
-        >
-            <main style={{zIndex:this.props.zIndex?this.props.zIndex+1:null}} >
-                <TitleBar 
-                    titleBarRef={this.titleBarRef}
-                    jrWindow={jrWindow}
-                    windowRef={this.props.windowRef} 
-                    window={this}
-                    title={title}
-                    thick={this.thick} 
-                    resizable={resizable}
-                    />
-                {children}
-                {this.props.resizable !== false
-                    && <Sliders 
-                    thick={this.thick} 
-                    windowRef={this.props.windowRef} 
-                    window={this} 
-                    titleBarRef={this.titleBarRef}
-                    />
-                }
-            </main>
-            {this.props.backdrop===true && <StyledBackdrop $zIndex={this.props.zIndex}/>}
-        </StyledJRWindow>
-    } 
-}
-
-export default class JRWindow extends JRFrame {
-    constructor(props){
-        super(props)
-        this.windowRef=React.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
-                ?<RWindow {...props}  jrWindow={this} open={open} windowRef={this.windowRef}>
-                    {super.renderer()}
-                </RWindow>
+        return this.props.popup===true
+            ?this.props.open
+                ?<>
+                    <StyledJRWindow
+                        $zIndex={this.props.zIndex}
+                        rule={'dialog'}
+                        ref={this.ref}
+                        className={`jr-window ${this.props.className??''}`}
+                        $xw={this.xw}
+                        $yh={this.yh}
+                        $thick={this.thick}
+                    >
+                        <main  style={{zIndex:1}}>
+                            <TitleBar 
+                                titleBarRef={this.titleBarRef}
+                                windowRef={this.ref} 
+                                window={this}
+                                title={this.props.title}
+                                thick={this.thick} 
+                                resizable={this.props.resizable}
+                            />
+                            <main>
+                                {super.renderer()}
+                            </main>
+                            {this.props.resizable !== false
+                                && <Sliders 
+                                    thick={this.thick} 
+                                    windowRef={this.ref} 
+                                    window={this} 
+                                    titleBarRef={this.titleBarRef}
+                                />
+                            }
+                        </main>
+                        {this.props.backdrop!==false && typeof this.props.backdrop!=='string' && <StyledBackdrop $zIndex={this.props.zIndex}/>}
+                    </StyledJRWindow>
+                </>
                 :''
             :super.renderer()
     }