jrs-react 1.2.13 → 1.2.14

package/src/app/window/WindowApp.jsx

@@ -3,115 +3,121 @@ 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";
-import { background } from "storybook/internal/theming";
+import { useEffect, useState } from "react";
+import { createRoot } from 'react-dom/client'
+import styled from "styled-components";
+
+
+const StyledDiv=styled.div`
+	border:10px solid gray;
+	width:400px;
+	height:400px;
+	margin:80px;
+	padding:20px;
+	border-radius: 5px;
+	overflow: overlay;
+`
+
+const Window=styled(JRWindow)`
+	.body{
+		padding:10px;
+	}
+`
 
 export default function WindowApp() {
 	const [popup,setPopup]=useState(true)
 	const [open,setOpen]=useState(true)
+
+	// useEffect(()=>{
+	// 	const w1=500
+    //     const x1=250
+    //     const w2=200
+    //     const x2=(w1/x1)
+    //     po('xp'   , ((x1/w1)*100) * (w2/100))
+	// },[])
 	return <>
-	<button
-		onClick={()=>{
-			setPopup(!popup)
-		}}
-	>Popup</button>
+
+	<div>
 		<button
-		onClick={()=>{
-			setOpen(!open)
-		}}
-	>Open</button>
-	{/* <JRTable
-		title={function(){
-			return `共: ${this.getValue()?.length ??0 }筆`
-		}}
-		width={600}
-		height={350}
-		popup={popup}
-		open={open}
-		setOpen={setOpen}
+			onClick={()=>{
+				const textnode = document.createTextNode("Water");
+				document.getElementById('root').appendChild(textnode)
+			}}	
+		>
+			Add
+		</button>
+
+
+	</div>
+
+		<button
+			onClick={()=>{
+				setPopup(!popup)
+			}}
+		>Popup</button>
+
+
+
+	<JRTable id={'info'}
+		// title={'Info'}
+		// open={true}
+		// popup={true}
+		columns={[
+			{name:'name',label:'Name'}
+		]}
 		get={{
 			url:'list.json'
 			,autoRun:true
 		}}
-		columns={[
-			{name:'name',label:'姓名'}
-			,{name:'birthday',label:'生日',type:JRText}
-		]}
-		resizableColumns={true}
-	/> */}
-	
+		onRowClick={({record},b,c)=>{
+			setOpen({
+				value:record
+			})
+		}}
+		xstyle={{
+			height:'200px'
+			,width:'500px'
+		}}
+	>
+	</JRTable>
+
 	
 	<JRFields
-		title={function(){
-			return 'JRFields'//this.getValue()?.name
+		maskOn={'info'}
+		style={{
+			background:'black'
 		}}
-		gridStyle={{
-			grid:'auto / repeat(auto-fill, minmax(260px, 1fr))'
+		title={function(){
+			return this.getValue()?.name
 		}}
-		width={400}
-		height={450}
+		width={200}
+		height={200}
+		// y={100}
 		popup={popup}
 		open={open}
 		setOpen={setOpen}
 		get={{
 			url:'data.json'
-			,mask:'Loading'
+			// ,autoRun:true
 		}}
 		onOpen={function(){
-			po('open',this)
-			this.get()
-		}}
-		// cols={3}
-		columns={[
-			{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 <>
-				<button
-					onClick={()=>{
-						this.get()
-					}}
-				>Get</button>
-				<button
-					onClick={()=>{
-						this.reset()
-					}}
-				>Reset</button>
-				<button
-					onClick={()=>{
-						this.setValue(null,true)
-					}}
-				>Clear</button>
-			</>
-		}}
-	/> 
-
-	{/* <JRWindow
-		style={{
-			background:'black'
+			this.get(open)
 		}}
-		title={'JRWindow'}
-		width={380}
-		height={220}
-		y={100}
-		popup={popup}
-		open={open}
-		setOpen={setOpen}
-		get={{
-			url:'data.json'
-			,autoRun:true
+		onClose={function(){
+			this.setValue(null,true)
 		}}
 		columns={[
-			{name:'name',label:'姓名'}
+			{name:'name',label:'姓名',type:JRText}
 		]}
 		bottom={()=>{
 			return <button>Get</button>
 		}}
+		xleft={function(){
+			return <>Left fsd gsdf gdf g</>
+		}}
+		xright={function(){
+			return <div>right</div>
+		}}
 	>
 		JRWindow<br/>
 		1<br/>
@@ -122,7 +128,38 @@ export default function WindowApp() {
 		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/> */}
+	</JRFields>
+
+	<StyledDiv id='div'>
+		something here
+		<input/>
+		<button
+			style={{
+				zIndex:100
+			}}
+			onClick={()=>{
+				setOpen(!open)
+			}}
+		>Open ({open?'opend':'closed'})</button>
+		.<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/>
+		<button
+			style={{
+				zIndex:100
+			}}
+			onClick={()=>{
+				setOpen(!open)
+			}}
+		>Open ({open?'opend':'closed'})</button>
+		
+	</StyledDiv>
+	.<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/>
+	<button
+			style={{
+				zIndex:100
+			}}
+			onClick={()=>{
+				setOpen(!open)
+			}}
+		>Open ({open?'opend':'closed'})</button>
 	</>	
 }

package/src/components/JRAlert/index.jsx

@@ -0,0 +1,71 @@
+import { createRoot  } from "react-dom/client"
+import { po } from "../JRUtils"
+import { useEffect, useState } from "react";
+import JRFields from "../JRFields/JRFields";
+import JRWindow from "../JRWindow/JRWindow";
+import styled from "styled-components";
+
+class AlertWindow extends JRWindow{
+    renderMe(){
+        return this.getValue()?.message
+    }
+}
+const StyledAlert=styled(AlertWindow)`
+    .body{
+        display: flex;
+        align-items: center;
+        padding: 20px;
+    }
+        
+    footer{
+        display: flex;
+        justify-content: end;
+        padding: 8px;
+    }
+`
+function JRAlertWindow({title,message,container,...props}){
+    const [open,setOpen]=useState(true)
+    return <StyledAlert
+        initValue={{message}}
+        width={440}
+        height={180}
+        maskOn={'play'}
+        {...props}
+        open={open}
+        setOpen={setOpen}
+        popup={true}
+        title={title??''}
+        // onOpen={()=>{
+        //     po('Open+++++++++++++++++')
+        // }}
+        onClose={()=>{
+            container.remove()
+        }}
+        bottom={function(){
+            return <button
+                onClick={()=>{
+                    setOpen(false)
+                }}
+            >OK</button>
+        }}
+
+    >
+        {message}
+    </StyledAlert>
+}
+
+export default function JRAlert(props){
+    const body=document.body
+    const containerId='jr-alert-div'
+    let container=document.getElementById(containerId)
+    if(container==null){
+        container=document.createElement('div')
+        container.id=containerId
+        body.appendChild(container)
+    }
+
+    const jrAlerDiv = document.createElement('div')
+    container.appendChild(jrAlerDiv);
+
+    createRoot(jrAlerDiv).render(<JRAlertWindow {...props} container={jrAlerDiv}/>);
+}