jrs-react 1.2.7 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.7",
+	"version": "1.2.9",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",
@@ -14,7 +14,6 @@
 	"author": "JorenLai",
 	"license": "MIT",
 	"dependencies": {
-		"@eslint/js": "^9.21.0",
 		"@rollup/plugin-commonjs": "^28.0.3",
 		"@rollup/plugin-json": "^6.1.0",
 		"@types/react": "^19.0.10",
@@ -22,20 +21,16 @@
 		"@vitejs/plugin-react": "^4.3.4",
 		"antd": "^5.12.5",
 		"axios": "^1.6.2",
-		"eslint": "^9.21.0",
-		"eslint-plugin-react-hooks": "^5.1.0",
-		"eslint-plugin-react-refresh": "^0.4.19",
 		"globals": "^15.15.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^7.4.0",
-		"rollup-plugin-node-resolve": "^5.2.0",
 		"styled-components": "^6.1.15",
-		"vite": "^6.2.0"
+		"vite": "^6.2.0",
+		"vite-plugin-svgr": "^4.3.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.26.10",
-		"@babel/preset-react": "^7.26.3",
 		"@chromatic-com/storybook": "^3.2.6",
 		"@rollup/plugin-node-resolve": "^16.0.1",
 		"@storybook/addon-essentials": "^8.6.6",
@@ -45,10 +40,9 @@
 		"@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",
-		"babel-loader": "^10.0.0",
-		"playwright": "^1.51.0",
 		"prop-types": "^15.8.1",
 		"rollup": "^2.79.2",
 		"rollup-plugin-babel": "^4.4.0",

package/src/app/window/WindowApp.jsx

@@ -3,17 +3,31 @@ import JRTable from "../../components/JRTable/JRTable";
 import JRFields from "../../components/JRFields/JRFields";
 import JRText from "../../components/JRInput/JRText";
 import { po } from "../../components/JRUtils";
+import { useState } from "react";
 
 export default function WindowApp() {
+	const [popup,setPopup]=useState(true)
+	const [open,setOpen]=useState(true)
 	return <>
-	<JRTable
-			title={function(){
-				return `共: ${this.getValue()?.length ??0 }筆`
-			}}
-		width={800}
-		// popup={true}
-		xxx={0}
-		xy={0}
+	<button
+		onClick={()=>{
+			setPopup(!popup)
+		}}
+	>Popup</button>
+		<button
+		onClick={()=>{
+			setOpen(!open)
+		}}
+	>Open</button>
+	{/* <JRTable
+		title={function(){
+			return `共: ${this.getValue()?.length ??0 }筆`
+		}}
+		width={600}
+		height={350}
+		popup={popup}
+		open={open}
+		setOpen={setOpen}
 		get={{
 			url:'list.json'
 			,autoRun:true
@@ -23,22 +37,28 @@ export default function WindowApp() {
 			,{name:'birthday',label:'生日',type:JRText}
 		]}
 		resizableColumns={true}
-	/>
-	.<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/>
+	/> */}
+	
 	
-	<JRFields
+	{/* <JRFields
 		title={function(){
 			return 'JRFields'//this.getValue()?.name
 		}}
-		width={480}
-		height={480}
-		popup={true}
+		width={400}
+		height={150}
+		popup={popup}
+		open={open}
+		setOpen={setOpen}
 		get={{
 			url:'data.json'
 			,mask:'Loading'
 		}}
+		onOpen={function(){
+			po('open',this)
+			this.get()
+		}}
 		columns={[
-			{name:'name',label:'姓名',type:JRText}
+			{name:'name',type:JRText}
 			,{name:'email',label:'E-mail',type:JRText}
 		]}
 		bottom={function(){
@@ -60,13 +80,15 @@ export default function WindowApp() {
 				>Clear</button>
 			</>
 		}}
-	/> 
+	/>  */}
 
-	{/* <JRWindow
+	<JRWindow
 		title={'JRWindow'}
 		width={180}
 		height={180}
-		popup={true}
+		popup={popup}
+		open={open}
+		setOpen={setOpen}
 		get={{
 			url:'data.json'
 			,autoRun:true
@@ -78,7 +100,19 @@ export default function WindowApp() {
 			return <button>Get</button>
 		}}
 	>
-		JRWindow
-	</JRWindow> */}
+		JRWindow<br/>
+		1<br/>
+		2<br/>
+		3<br/>
+		4<br/>
+		5<br/>
+		6<br/>
+		7<br/>
+		8<br/>9<br/>10<br/>
+
+
+
+	</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/card.svg

@@ -0,0 +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>

package/src/assets/icon/copy.svg

@@ -0,0 +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>

package/src/assets/icon/index.jsx

@@ -0,0 +1,26 @@
+// 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
+    ,IconCopy
+    ,IconSquare
+    ,IconMinus
+}

package/src/assets/icon/minus.svg

@@ -0,0 +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>

package/src/assets/icon/square.svg

@@ -0,0 +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>

package/src/assets/icon/x.svg

@@ -0,0 +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>

package/src/components/JRInput/JRButton.jsx

@@ -0,0 +1,3 @@
+export default function JRButton({icon,children,...props}){
+    return <button {...props}>{icon}{children}</button>
+}

package/src/components/JRWindow/JRWindow.jsx

@@ -4,12 +4,17 @@ import styled from "styled-components";
 import TitleBar from "./TitleBar";
 import { po } from "../JRUtils";
 import Slider from "./Slider";
+import Sliders from "./Slider";
+
 
 const StyledJRWindow=styled.div`
+    --jr-window-radius:3px;
     --padding-child:8px;
+    --transition-x-y:height .1s ease-in, width .1s ease-in;
     xborder:1px solid gray;
-    position: absolute;
+    position: fixed;
     padding: ${({$thick})=>$thick}px;
+    border-radius: var(--jr-window-radius);
 
     top: ${({$y})=>$y}px;
     left: ${({$x})=>$x}px;
@@ -22,6 +27,7 @@ const StyledJRWindow=styled.div`
     overflow: hidden;
     
     > main{
+        border-radius: var(--jr-window-radius);
         box-shadow: 0px 0px 5px 1px gray;
         Xbackground: white;
         display: flex;
@@ -42,69 +48,59 @@ export default class JRWindow extends JRFrame {
     y=0
     width=300
     height=300
-    padding=5
-    thick=3
+    padding=1
+    thick=5
     
     constructor(props){
         super(props)
         this.ref=React.createRef()
         this.titleBarRef=React.createRef()
-        if(this.props.popup===true)this.renderer=this.renderWindow
         this.init()
     }
+    componentWillUpdate(prevProps, prevState, snapshot){
+        if(this.props.popup===true && this.props.open===true && prevProps.open===false){
+            this.props.onOpen?.bind(this)()
+        }
+    }
     init(){
-        this.height=window.innerHeight>=this.props.height?this.props.height:window.innerHeight
-        this.width=window.innerWidth>=this.props.width?this.props.width:window.innerWidth
+        this.height=window.innerHeight>=(this.props.height??this.height)?(this.props.height??this.height):window.innerHeight
+        this.width=window.innerWidth>=(this.props.width??this.width)?(this.props.width??this.width):window.innerWidth
         this.x=this.props.x??((window.innerWidth-(this.width??300))/2)
         this.y=this.props.y??(window.innerHeight-(this.height??300))/2
     }
-    componentWillMount(){
-     }
-    // renderer(){
-    //     return this.props.popup===true
-    //         ?<StyledJRWindow>
-    //             {super.renderer()}
-    //         </StyledJRWindow>
-    //         :super.renderer()
-    // }
-    renderWindow(){
-        return <StyledJRWindow
-            ref={this.ref}
-            className={`jr-window ${this.props.className??''}`}
-            $x={this.x}
-            $y={this.y}
-            $width={this.width}
-            $height={this.height}
-            $thick={this.thick}
-            // onMouseDown={()=>{
-            //     po('onFocus')
-            //     this.ref.current.style.zIndex=100
-            // }}
-        >
-            <main>
-                <TitleBar 
-                    titleBarRef={this.titleBarRef}
-                    windowRef={this.ref} 
-                    window={this}
-                    title={this.props.title}
-                />
-                <main>
-                    {super.renderer()}
-                </main>
-            </main>
-            <Slider direction={'n'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'e'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'s'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'w'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-
-            <Slider direction={'nww'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'nnw'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'nne'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'nee'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'sse'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'see'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'sww'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-            <Slider direction={'ssw'} thick={this.thick} windowRef={this.ref} window={this} titleBarRef={this.titleBarRef}/>
-        </StyledJRWindow>
+    renderer(){
+        
+        return this.props.popup===true
+            ?this.props.open===true
+                ?<StyledJRWindow
+                    ref={this.ref}
+                    className={`jr-window ${this.props.className??''}`}
+                    $x={this.x}
+                    $y={this.y}
+                    $width={this.width}
+                    $height={this.height}
+                    $thick={this.thick}
+                >
+                    <main>
+                        <TitleBar 
+                            titleBarRef={this.titleBarRef}
+                            windowRef={this.ref} 
+                            window={this}
+                            title={this.props.title}
+                            thick={this.thick} 
+                            />
+                        <main>
+                            {super.renderer()}
+                        </main>
+                    </main>
+                    <Sliders 
+                        thick={this.thick} 
+                        windowRef={this.ref} 
+                        window={this} 
+                        titleBarRef={this.titleBarRef}
+                    />
+                </StyledJRWindow>
+                :''
+            :super.renderer()
     }
 }

package/src/components/JRWindow/Slider.jsx

@@ -3,10 +3,23 @@ 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(){
+        return directions.map((direction,index)=><Slider 
+            direction={direction} 
+            thick={this.props.thick} 
+            windowRef={this.props.windowRef} 
+            window={this.props.window} 
+            titleBarRef={this.props.titleBarRef}
+            key={index}
+        />)
+    }
+}
 
 const StyledSlider=styled.div`
     Xborder:1px solid ${({$direction:{color}})=>color}; 
-    xbackground:${({$direction:{color}})=>color};
+    Xbackground:${({$direction:{color}})=>color};
     position: absolute;
     top: ${({$direction:{top}})=>top};
     bottom: ${({$direction:{bottom}})=>bottom};
@@ -23,10 +36,10 @@ const StyledSlider=styled.div`
     user-select: none;
 
 `
-export default class Slider extends React.Component {
+class Slider extends React.Component {
     width='3px'
     borderWidth='px'
-    borderLong='10px'
+    borderLong=30
 
     constructor(props){
         super(props);
@@ -74,12 +87,24 @@ export default class Slider extends React.Component {
                 this.resizeW(props)
             }
         }
+        ,nw:{
+            top:0
+            ,left:0
+            ,color:'blue'
+            ,width:`${this.borderLong}px`
+            ,height:`${this.borderLong}px`
+            ,cursor: 'nw-resize'
+            ,resize:(props)=>{
+                this.resizeN(props)
+                this.resizeW(props)
+            }
+        }
         ,nww:{
             top:0
             ,left:0
             ,color:'blue'
-            ,width:`${this.props.thick}px`
-            ,height:this.borderLong
+            ,width:`${this.props.thick+this.borderLong}px`
+            ,height:`${this.props.thick}px`
             ,cursor: 'nw-resize'
             ,resize:(props)=>{
                 this.resizeN(props)
@@ -90,8 +115,8 @@ export default class Slider extends React.Component {
             top:0
             ,left:0
             ,color:'blue'
-            ,width:this.borderLong
-            ,height:`${this.props.thick}px`
+            ,width:`${this.props.thick}px`
+            ,height:`${this.props.thick+this.borderLong}px`
             ,cursor: 'nw-resize'
             ,resize:(props)=>{
                 this.resizeN(props)
@@ -102,7 +127,7 @@ export default class Slider extends React.Component {
             top:0
             ,right:0
             ,color:'green'
-            ,width:this.borderLong
+            ,width:`${this.props.thick+this.borderLong}px`
             ,height:`${this.props.thick}px`
             ,cursor: 'ne-resize'
             ,resize:(props)=>{
@@ -115,7 +140,7 @@ export default class Slider extends React.Component {
             ,right:0
             ,color:'green'
             ,width:`${this.props.thick}px`
-            ,height:this.borderLong
+            ,height:`${this.props.thick+this.borderLong}px`
             ,cursor: 'ne-resize'
             ,resize:(props)=>{
                 this.resizeN(props)
@@ -126,7 +151,7 @@ export default class Slider extends React.Component {
             color:'red'
             ,right:0
             ,bottom:0
-            ,width:this.borderLong
+            ,width:`${this.props.thick+this.borderLong}px`
             ,height:`${this.props.thick}px`
             ,cursor: 'se-resize'
             ,resize:(props)=>{
@@ -139,7 +164,7 @@ export default class Slider extends React.Component {
             ,right:0
             ,bottom:0
             ,width:`${this.props.thick}px`
-            ,height:this.borderLong
+            ,height:`${this.props.thick+this.borderLong}px`
             ,cursor: 'se-resize'
             ,resize:(props)=>{
                 this.resizeS(props)
@@ -150,7 +175,7 @@ export default class Slider extends React.Component {
             color:'yellow'
             ,bottom:0
             ,left:0
-            ,width:this.borderLong
+            ,width:`${this.props.thick+this.borderLong}px`
             ,height:`${this.props.thick}px`
             ,cursor: 'sw-resize'
             ,resize:(props)=>{
@@ -163,7 +188,7 @@ export default class Slider extends React.Component {
             ,bottom:0
             ,left:0
             ,width:`${this.props.thick}px`
-            ,height:this.borderLong
+            ,height:`${this.props.thick+this.borderLong}px`
             ,cursor: 'sw-resize'
             ,resize:(props)=>{
                 this.resizeS(props)
@@ -172,20 +197,16 @@ export default class Slider extends React.Component {
         }
     }
 
-    stop=(e)=>{
-        document.body.style.cursor='default'
-        window.removeEventListener('mousemove',this.move)
-        window.removeEventListener('mouseup',this.stop)
-    }
-
     resizeN=({window,cursorY,startY,startHeight,titleBarHeight})=>{
         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`
 
@@ -201,8 +222,8 @@ export default class Slider extends React.Component {
         window.style.height=`${height+(this.props.thick*2)}px`
     }
     resizeW=({window,cursorX,startX,startWidth,titleBarHeight})=>{
-        let x=cursorX
-        if(x<=1)x=1
+        let x=cursorX-this.props.thick
+        if(x<0)x=0
         let width=startWidth+(startX-x)
         if(width<titleBarHeight+ (this.props.thick*2)){
             width=titleBarHeight+ (this.props.thick*2)
@@ -211,7 +232,26 @@ export default class Slider extends React.Component {
         window.style.left=`${x}px`
         window.style.width=`${width}px`
     }
+
+    stop=(e)=>{
+        e.preventDefault()
+        const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
+        const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
+        
+        this.props.windowRef.current.style.transition='var(--transition-x-y)'
+        if(y==0 && this.data.direction.indexOf('n')>-1){
+            this.props.window.orgHeight=height
+            this.props.windowRef.current.style.height=`${window.innerHeight}px`
+        }
+        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
+        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('mouseup',this.stop)
+    }
     move=(e)=>{
+        e.preventDefault()
         const {clientX,clientY,x:cursorX,y:cursorY}=e
         const window=this.props.windowRef.current
         const {left,top}=window.getBoundingClientRect()
@@ -222,20 +262,29 @@ export default class Slider extends React.Component {
             ,clientX,cursorX,startX,startWidth,left
             ,clientY,cursorY,startY,startHeight,top
         })
-        /////////////////////////////////////////////////////////////
-
-
-
-
-        /////////////////////////////////////////////////////////////
-        
-  
-
     }
-    start=()=>{
+    start=(e,direction)=>{
+        e.preventDefault()
         const {height:titleBarHeight}=this.props.titleBarRef.current.getBoundingClientRect()
-        const {x,y,width,height}=this.props.windowRef.current.getBoundingClientRect()
-        this.data={x,y,width,height,titleBarHeight}
+        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
+            ,height
+            ,titleBarHeight
+            ,direction
+        }
+        this.props.windowRef.current.style.transition='unset'
         document.body.style.cursor=this.directions[this.props.direction].cursor
         window.addEventListener('mousemove',this.move)
         window.addEventListener('mouseup',this.stop)
@@ -245,7 +294,9 @@ export default class Slider extends React.Component {
         return <StyledSlider 
             $direction={this.directions[this.props.direction]}
             $padding={this.props.padding}
-            onMouseDown={this.start}
+            onMouseDown={(e)=>{
+                this.start(e,this.props.direction)
+            }}
         />
     }
 }