jrs-react 1.2.12 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.12",
+	"version": "1.2.13",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",
@@ -29,6 +29,10 @@
 		"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",

package/src/app/App.css

@@ -4,5 +4,6 @@
 
 html,*,*:before,*:after {
     box-sizing: border-box;
-  }
-  
+}
+  
+

package/src/app/window/WindowApp.jsx

@@ -4,6 +4,7 @@ import JRFields from "../../components/JRFields/JRFields";
 import JRText from "../../components/JRInput/JRText";
 import { po } from "../../components/JRUtils";
 import { useState } from "react";
+import { background } from "storybook/internal/theming";
 
 export default function WindowApp() {
 	const [popup,setPopup]=useState(true)
@@ -40,12 +41,15 @@ export default function WindowApp() {
 	/> */}
 	
 	
-	{/* <JRFields
+	<JRFields
 		title={function(){
 			return 'JRFields'//this.getValue()?.name
 		}}
+		gridStyle={{
+			grid:'auto / repeat(auto-fill, minmax(260px, 1fr))'
+		}}
 		width={400}
-		height={150}
+		height={450}
 		popup={popup}
 		open={open}
 		setOpen={setOpen}
@@ -57,9 +61,14 @@ export default function WindowApp() {
 			po('open',this)
 			this.get()
 		}}
+		// cols={3}
 		columns={[
-			{name:'name',type:JRText}
+			{name:'name',label:'Name',type:JRText}
 			,{name:'email',label:'E-mail',type:JRText}
+			,{name:'1',label:'1',type:JRText}
+			,{name:'2',label:'2',type:JRText}
+			,{name:'3',label:'3',type:JRText}
+			,{name:'4',label:'4',type:JRText}
 		]}
 		bottom={function(){
 			return <>
@@ -80,12 +89,16 @@ export default function WindowApp() {
 				>Clear</button>
 			</>
 		}}
-	/>  */}
+	/> 
 
-	<JRWindow
+	{/* <JRWindow
+		style={{
+			background:'black'
+		}}
 		title={'JRWindow'}
-		width={180}
-		height={180}
+		width={380}
+		height={220}
+		y={100}
 		popup={popup}
 		open={open}
 		setOpen={setOpen}
@@ -109,10 +122,7 @@ export default function WindowApp() {
 		6<br/>
 		7<br/>
 		8<br/>9<br/>10<br/>
-
-
-
-	</JRWindow>
+	</JRWindow> */}
 	{/* .<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/> */}
 	</>	
 }

package/src/assets/icon/index.jsx

@@ -1,22 +1,9 @@
-// import IconX from "./x.svg?react"
-// import IconCard from "./card.svg?react"
-// import IconCopy from "./copy.svg?react"
-// import IconSquare from "./square.svg?react"
-// import IconMinus from "./minus.svg?react"
-
 import IconX from "./x.svg"
 import IconCard from "./card.svg"
 import IconCopy from "./copy.svg"
 import IconSquare from "./square.svg"
 import IconMinus from "./minus.svg"
 
-// import { ReactComponent as IconX } from "./x.svg"
-// import { ReactComponent as IconCard } from "./card.svg"
-// import { ReactComponent as IconCopy } from "./copy.svg"
-// import { ReactComponent as IconSquare } from "./square.svg"
-// import { ReactComponent as IconMinus } from "./minus.svg"
-
-// import { ReactComponent as Logo } from './logo.svg'
 export {
     IconX
     ,IconCard

package/src/components/JRWindow/JRWindow.jsx

@@ -42,6 +42,12 @@ const StyledJRWindow=styled.div`
             display: flex;
         }
     }
+
+    @container (min-width: 700px) {
+        &{
+            border: 1px solid red;
+            }
+    }
 `
 export default class JRWindow extends JRFrame {
     x=0

package/src/components/JRWindow/Slider.jsx

@@ -2,7 +2,6 @@ import React from "react"
 import styled from "styled-components"
 import { po } from "../JRUtils"
 
-const borderWidth='px'
 const directions=['n','e','s','w','nww','nnw','nne','nee','sse','see','sww','ssw']
 export default class Sliders extends React.Component {
     render(){
@@ -39,7 +38,7 @@ const StyledSlider=styled.div`
 class Slider extends React.Component {
     width='3px'
     borderWidth='px'
-    borderLong=30
+    borderLong=5
 
     constructor(props){
         super(props);
@@ -201,15 +200,12 @@ class Slider extends React.Component {
         let y=cursorY-(this.props.thick)
         if(y<0)y=0
         let height=startHeight+(startY-y)
-
         if(height<titleBarHeight+(this.props.thick*2)){
             height=titleBarHeight+(this.props.thick*2)
             y=startY + startHeight - titleBarHeight - (this.props.thick*2)
         }
-
         window.style.top=`${y}px`
         window.style.height=`${height}px`
-
     }
     resizeE=({window,clientX,left,titleBarHeight})=>{
         let width=clientX-left-this.props.thick
@@ -248,14 +244,16 @@ class Slider extends React.Component {
         if(x>window.innerWidth)this.props.windowRef.current.style.left = `${window.innerWidth-width}px`
         document.body.style.cursor='default'
         window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mousemove',this.preMove)
         window.removeEventListener('mouseup',this.stop)
     }
     move=(e)=>{
         e.preventDefault()
+        this.props.windowRef.current.style.transition='unset'
         const {clientX,clientY,x:cursorX,y:cursorY}=e
         const window=this.props.windowRef.current
         const {left,top}=window.getBoundingClientRect()
-        const {x:startX,width:startWidth,y:startY,height:startHeight,titleBarHeight}=this.data
+        let {x:startX,width:startWidth,y:startY,height:startHeight,titleBarHeight}=this.data
         
         this.directions[this.props.direction].resize({
             window,titleBarHeight
@@ -263,20 +261,20 @@ class Slider extends React.Component {
             ,clientY,cursorY,startY,startHeight,top
         })
     }
+    preMove=()=>{
+        this.props.windowRef.current.style.height=`${this.props.window.orgHeight}px`
+        this.data.height=this.props.window.orgHeight
+        this.props.window.orgHeight=null
+        window.removeEventListener('mousemove',this.preMove)
+        setTimeout(()=>{
+            window.addEventListener('mousemove',this.move)
+        },100)
+    }
     start=(e,direction)=>{
         e.preventDefault()
         const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
         let {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
 
-        if(direction.indexOf('n')>-1){
-            if(this.props.window.orgHeight){
-                height=this.props.window.orgHeight
-                this.props.window.orgHeight=null
-            }
-        }else if(direction.indexOf('s')>-1){
-            this.props.window.orgHeight=null
-        }
-
         this.data={
             x,y
             ,width
@@ -284,9 +282,12 @@ class Slider extends React.Component {
             ,titleBarHeight
             ,direction
         }
-        this.props.windowRef.current.style.transition='unset'
         document.body.style.cursor=this.directions[this.props.direction].cursor
-        window.addEventListener('mousemove',this.move)
+        if(this.props.window.orgHeight){
+            window.addEventListener('mousemove',this.preMove)
+        }else{
+            window.addEventListener('mousemove',this.move)
+        }
         window.addEventListener('mouseup',this.stop)
     }
 

package/src/components/JRWindow/TitleBar.jsx

@@ -52,6 +52,7 @@ const StyledTitle=styled.div`
                 color:white;
             }
             >svg{
+                color:black;
                 width:14px;
                 height:14px;
                 cursor: pointer;
@@ -59,7 +60,9 @@ const StyledTitle=styled.div`
         }
         >button.danger:hover{
             background: red;
-            color:white;
+            >svg{
+                color:white;
+            }
         } 
     }
 `
@@ -78,11 +81,9 @@ export default class TitleBar extends React.Component{
     stop=(e)=>{
         e.preventDefault()
         if(this.moved){
-
-        
+            const {clientX,clientY}=e
             const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
             const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
-            po('y',y)
             if(y<1){
                 this.props.windowRef.current.style.transition='var(--transition-x-y), left .1s ease-in'
                 this.props.windowRef.current.style.left=`${-this.props.thick}px`
@@ -91,6 +92,8 @@ export default class TitleBar extends React.Component{
 
                 this.props.window.orgHeight=height
                 this.props.window.orgWidth=width
+                this.props.window.orgXd=clientX-x
+
             }
             if(y>window.innerHeight)this.props.windowRef.current.style.top = `${window.innerHeight-titleBarHeight}px`
             if(x+width-this.props.thick<0)this.props.windowRef.current.style.left = 0
@@ -99,6 +102,7 @@ export default class TitleBar extends React.Component{
         }
         window.removeEventListener('mousemove',this.move)
         window.removeEventListener('mouseup',this.stop)
+        window.removeEventListener('mousemove',this.preMove)
     }
     move=(e)=>{
         e.preventDefault()
@@ -111,13 +115,9 @@ export default class TitleBar extends React.Component{
         this.pos4 = y
 
         const w= this.props.windowRef.current
-        this.x=w.offsetLeft - this.pos1
         this.y=w.offsetTop - this.pos2
+        this.x=w.offsetLeft - this.pos1
 
-        if(this.props.window.orgHeight){
-            w.style.height=`${this.props.window.orgHeight}px`
-            this.props.window.orgHeight=null
-        }
         if(this.props.window.orgWidth){
             if(clientX>this.props.window.orgWidth){
                 this.x=clientX-(this.props.window.orgWidth/2)
@@ -127,8 +127,27 @@ export default class TitleBar extends React.Component{
         }
 
         this.y=this.y<-this.props.thick?-this.props.thick:this.y
-        w.style.top = this.y + 'px'
-        w.style.left = this.x + 'px'
+        w.style.transition='unset'
+        w.style.top = `${this.y}px`
+        w.style.left = `${this.x}px`
+    }
+    preMove=(e)=>{
+        const w=this.props.windowRef.current
+        const {clientX,clientY}=e
+        if(this.props.window.orgXd){
+            w.style.left=`${clientX-this.props.window.orgXd}px`
+            this.props.window.orgXd=null
+        }
+        if(this.props.window.orgHeight){
+            w.style.height=`${this.props.window.orgHeight}px`
+            this.props.window.orgHeight=null
+        }
+
+        w.style.transition='left .1s ease-in, height .1s ease-in'
+        setTimeout(()=>{
+            window.addEventListener('mousemove',this.move)
+        },100)
+        window.removeEventListener('mousemove',this.preMove)
     }
     start(e){
         e.preventDefault()
@@ -137,7 +156,7 @@ export default class TitleBar extends React.Component{
         this.pos4 = e.clientY
         this.props.windowRef.current.style.transition='var(--transition-x-y)'
         document.body.style.cursor='grabbing'
-        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mousemove',this.preMove)
         window.addEventListener('mouseup',this.stop)
     }
     render(){
@@ -150,8 +169,8 @@ export default class TitleBar extends React.Component{
         >
             <FreeType tag='div' config={this.props.title??''} me={this.props.window} className={'title'}/>
             <nav>
-                <JRButton icon={<IconMinus />}/>
-                <JRButton icon={<IconSquare />}/>
+                {/* <JRButton icon={<IconMinus />}/>
+                <JRButton icon={<IconSquare />}/> */}
                 {
                     this.props.window.props.setOpen
                         ?<JRButton icon={<IconX />} 

package/src/index.js

@@ -4,8 +4,9 @@ import JRTable from './components/JRTable/JRTable'
 import JRFields from './components/JRFields/JRFields'
 import JRTestReact from './components/JRTest'
 import JRButton from './components/JRInput/JRButton'
+import JRWindow from './components/JRWindow/JRWindow'
 export {
     JRTestReact
-    ,JRSubmit,JRFrame,JRTable,JRFields
+    ,JRSubmit,JRFrame,JRWindow,JRTable,JRFields
     ,JRButton
 }