jrs-react 1.2.4 → 1.2.6

package/src/app/window/WindowApp.jsx

@@ -0,0 +1,84 @@
+import JRWindow from "../../components/JRWindow/JRWindow";
+import JRTable from "../../components/JRTable/JRTable";
+import JRFields from "../../components/JRFields/JRFields";
+import JRText from "../../components/JRInput/JRText";
+import { po } from "../../components/JRUtils";
+
+export default function WindowApp() {
+	return <>
+	<JRTable
+			title={function(){
+				return `共: ${this.getValue()?.length ??0 }筆`
+			}}
+		width={800}
+		// popup={true}
+		xxx={0}
+		xy={0}
+		get={{
+			url:'list.json'
+			,autoRun:true
+		}}
+		columns={[
+			{name:'name',label:'姓名'}
+			,{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
+		title={function(){
+			return 'JRFields'//this.getValue()?.name
+		}}
+		width={480}
+		height={480}
+		popup={true}
+		get={{
+			url:'data.json'
+			,mask:'Loading'
+		}}
+		columns={[
+			{name:'name',label:'姓名',type:JRText}
+			,{name:'email',label:'E-mail',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
+		title={'JRWindow'}
+		width={180}
+		height={180}
+		popup={true}
+		get={{
+			url:'data.json'
+			,autoRun:true
+		}}
+		columns={[
+			{name:'name',label:'姓名'}
+		]}
+		bottom={()=>{
+			return <button>Get</button>
+		}}
+	>
+		JRWindow
+	</JRWindow> */}
+	</>	
+}

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/JRFields/JRFields.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import { flexType, po } from "../JRUtils";
 import JRFrame from "../JRFrame/JRFrame";
 import {StyleJRFields} from "./StyleJRFields"
+import JRWindow from "../JRWindow/JRWindow";
 
 function checkMap(_name,inputValue,mapValue,nameList){
     if(nameList.length) {
@@ -48,7 +49,7 @@ const StyledColumn=styled.div`
         }
     }}
 `
-const StyledColumnLabel=styled.label`
+const StyledColumnLabel=styled.div`
     ${({$layout})=>{
         if($layout=='v'){
             return `text-align: start;`
@@ -80,8 +81,9 @@ const StyledColumnLabel=styled.label`
 
 `
 const StyledColumnValue=styled.main`
-    Xflex:1;
+    flex:1;
     Xdisplay:flex;
+    flex-direction: column;
     overflow: hidden;
 
     text-align: start;
@@ -156,7 +158,7 @@ const maxValidator=({value,max})=>{
 
 
 
-export default class JRFields extends JRFrame {
+export default class JRFields extends JRWindow {
     UNSAFE_componentWillMount(){
         this.#initValidateValue()
 
@@ -186,7 +188,6 @@ export default class JRFields extends JRFrame {
             no+=1
             const fullnameList=name?[..._fullnameList,name]:_fullnameList
             const fullname=fullnameList.join('.')
-            // po(`${no} - ${tab}fn= ${fullname}`)
             this.#findValidator(acc,fullname,column)
             if(type==null&&columns){
                 this.#loopColumnsForValidateValue(no,fullnameList,columns,`${tab}\t`,result)
@@ -264,7 +265,8 @@ export default class JRFields extends JRFrame {
     createColumn(
         parentValue
         ,{
-            type,name,colSpan,rowSpan,style
+            type,name,colSpan,rowSpan
+            ,style
             ,typeStyle:_typeStyle
             ,required
             ,...column
@@ -273,27 +275,18 @@ export default class JRFields extends JRFrame {
         ,parentName
         ,fullname
     ){
-        // po('----------------------------------------')
-        // po('parentName',parentName)
-        // po('fullname',fullname)
         const value=name?parentValue?.[name]:parentValue
-
         const gap=column.gap??this.props.gap
         const label=column.label
         const _style=flexType(style,this,{},{})
         if (colSpan) _style.gridColumn = `span ${colSpan}`
         if (rowSpan) _style.gridRow = `span ${rowSpan}`
-        // Object.assign(_style,style)
-
 
         let content
-
         const validators=this.createValidator({required,column})
-        
         const fn=fullname.join('.')
         const onChange=(inputValue)=>{
             const targetValue=inputValue?.target?.value ?? inputValue
-            // po('===Form onChange===',targetValue)
             try{
                 parentValue[name]=targetValue
                 this.setValue({...this.getValue()})
@@ -353,6 +346,7 @@ export default class JRFields extends JRFrame {
             </StyledColumnValue>
         }
         const layout=column.labelProps?.layout===undefined ? this.props.labelProps?.layout: column.labelProps?.layout
+        const labelStyle=column.labelProps?.style ?? this.props.labelProps?.style ?? {}
         return <StyledColumn 
             $layout={layout}
             $hasLabel={label!=null }
@@ -365,6 +359,7 @@ export default class JRFields extends JRFrame {
             {
                 label!=null 
                 && <StyledColumnLabel 
+                    style={labelStyle}
                     $required={required}
                     className={'label'} 
                     $layout={layout}
@@ -403,8 +398,8 @@ export default class JRFields extends JRFrame {
 
 
     renderMe(){
-        return <StyleJRFields className={'jr-fields'}>
-            <StyledGrid cols={this.props.cols} style={this.props.gridStyle} className={'jr-grid'} $gap={this.props.gap}>
+        return <StyleJRFields className={'jr-fields'} style={this.props.typeStyle}>
+            <StyledGrid cols={this.props.cols} style={this.props.gridStyle} className={'jr-grid'} $gap={this.props.gap??'8px'}>
                 {
                     this.createColumns(
                         this.props.dataSourceName?this.getValue()?.[this.props.dataSourceName]:this.getValue()

package/src/components/JRFields/StyleJRFields.jsx

@@ -2,29 +2,26 @@ import styled from "styled-components";
 
 export const StyleJRFields=styled.main`
     --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
+    --column-b-color:unset;
     --column-b-hover-color:#ffffff;
 
     flex-direction: column;
     flex:1;
     overflow: overlay;
-
+    padding: 10px;
+    
     color:#525252;
-    XXXborder: 1px solid #a0a0a0;
-    background: var(--column-b-color);
 
     >.jr-grid{
-        background:var(--column-b-color);
-
         .jr-column{
-            padding: 6px;
-
-            label{
+            > .label{
                 color:#525252;
                 text-wrap: nowrap;
-                padding: 4px 10px 4px 0;
+                padding: 3px 8px;
                 font-weight: bold;
             }
+            > .jr-column-value{
+            }
         }
     }
 `

package/src/components/JRFrame/JRFrame.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import JRSubmit from "../JRSubmit";
 
-const FreeType=({tag:Tag,config,me,className})=>{
+export const FreeType=({tag:Tag,config,me,className})=>{
     if(typeof config==='function'){
         let style
         const setStyle=function(_style){
@@ -10,7 +10,10 @@ const FreeType=({tag:Tag,config,me,className})=>{
         }
         const content=config.bind(me)({setStyle})
         return <Tag className={className} style={style}>{content}</Tag>
+    }else if(typeof config==='string'){
+        return <Tag className={className}>{config}</Tag>
     }
+
 }
 
 const StyledJRFrame=styled.div`
@@ -28,7 +31,7 @@ const StyledJRFrame=styled.div`
         flex-direction: column;
         > *{
             XXborder:1px solid gray;
-            min-height:30px;
+            XXmin-height:30px;
         }
 
         >header{
@@ -57,7 +60,7 @@ export default class JRFrame extends JRSubmit {
                 <FreeType tag='header' config={this.props.top} me={this}/>
                 <main>
                     <FreeType tag='div' config={this.props.left} me={this} className={'left'}/>
-                    {this.renderMe()}
+                    {this.renderMe?.() ?? this.props.children}
                     <FreeType tag='div' config={this.props.right} me={this} className={'right'}/>
                 </main>
                 <FreeType tag='footer' config={this.props.bottom} me={this}/>
@@ -65,8 +68,8 @@ export default class JRFrame extends JRSubmit {
             <FreeType tag='div' config={this.props.end} me={this} className={'end'}/>
         </StyledJRFrame>
     }
-    renderMe(){
-        return <div style={{flex:1}}>Render me</div>
-    }
+    // renderMe(){
+    //     return <div style={{flex:1}}>Render me</div>
+    // }
 }
  

package/src/components/JRInput/JRInput.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import styled from "styled-components";
+
+
+
+const StyledInput=styled.div`
+    display:flex;
+`
+export default class JRInput extends React.Component{
+    setValue(value){
+        this.props?.onChange?.(value)
+    }
+    render(){
+        return <StyledInput>
+            {this.input()}
+        </StyledInput>
+    }
+}

package/src/components/JRInput/JRSelect.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { po } from "../JRUtils";
+import JRInput from "./JRInput";
+
+export default class JRSelect extends JRInput{
+    input(){
+        return <select value={this.props.value}
+            style={{
+                height: '30px'
+                ,width: '100%'
+            }}
+            onChange={(e)=>{
+                this.setValue(e.target.value)
+            }}
+        >
+            <option value={1}>A</option>
+        </select>
+    }
+}

package/src/components/JRInput/JRText.jsx

@@ -1,7 +1,16 @@
 import React from "react";
+import JRInput from "./JRInput";
 
-export default class JRText extends React.Component{
-    render(){
-        return <input value={this.props.value}/>
+export default class JRText extends JRInput{
+    input(){
+        return <input value={this.props.value??''}
+            style={{
+                height: '24px'
+                ,width: '100%'
+            }}
+            onChange={(e)=>{
+                this.setValue(e.target.value)
+            }}
+        />
     }
 }

package/src/components/JRSubmit.jsx

@@ -4,7 +4,6 @@ import { colonValueString, flexType, po } from './JRUtils'
 import { displaySpinner } from './LoadingBar'
 import styled from 'styled-components'
 
-
 const axiosSubmit = axios.create({
     authorization: `Bearer ${localStorage.getItem("accessToken")}`
     ,timeout: 120000
@@ -110,6 +109,8 @@ export default class JRSubmit extends React.Component {
     }
     setValue(value,reset=false){
         if(this.props.onChange){
+            po('name',this.props.name)
+            po('onChange',value)
             this.props.onChange(value)
         }else{
             this.setState({value})
@@ -278,8 +279,8 @@ export default class JRSubmit extends React.Component {
     }
 
     showMessage(success,message){
-        po('success',success)
-        po('message',message)
+        // po('success',success)
+        // po('message',message)
     }
     
     renderer(){

package/src/components/JRTable/JRTable.jsx

@@ -4,6 +4,7 @@ import { TBodies } from "./TBodies";
 import { StyledJRTable } from "./StyledJRTable";
 import JRFrame from "../JRFrame/JRFrame";
 import React from "react";
+import JRWindow from "../JRWindow/JRWindow";
 
 
 const getMapObject=(map,names)=>{
@@ -26,14 +27,14 @@ const setMapObject=(map,names,value)=>{
     }
 }
 
-export default class JRTable extends JRFrame {
+export default class JRTable extends JRWindow {
     constructor(props) {
         super(props)
         this.colGroupRef = React.createRef()
     }
 
     UNSAFE_componentWillMount(){
-        this.setColumns(this.props.columns)
+        this.setColumns(this.props.columns??[])
     }
 
     //------------------------------------------------------------------------------------

package/src/components/JRTable/Slider.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "styled-components"
 
-export const StyledSlider=styled.div`
+const StyledSlider=styled.div`
     position: absolute;
     top: 0;
     right: 0;

package/src/components/JRTable/StyledJRTable.jsx

@@ -44,8 +44,7 @@ export const StyledJRTable=styled.div`
 
             th{
                 position: relative;
-                height:32px;
-                padding: 4px;
+                padding: 2px 6px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
                 color: #525252;

package/src/components/JRTable/TBodies.jsx

@@ -172,7 +172,7 @@ const TBody=({groupData,groupHeader,leafColumns,groupFooter,table,tbodyIndex})=>
                 {...neededProps}
             />}
             {
-                groupData?.map((record,trIndex)=>{
+                groupData?.map?.((record,trIndex)=>{
                     const onRowClick=table.props.onRowClick?.bind(table)
                     return <tr key={trIndex}
                         onClick={()=>{

package/src/components/JRWindow/JRWindow.jsx

@@ -0,0 +1,110 @@
+import React from "react";
+import JRFrame from "../JRFrame/JRFrame";
+import styled from "styled-components";
+import TitleBar from "./TitleBar";
+import { po } from "../JRUtils";
+import Slider from "./Slider";
+
+const StyledJRWindow=styled.div`
+    --padding-child:8px;
+    xborder:1px solid gray;
+    position: absolute;
+    padding: ${({$thick})=>$thick}px;
+
+    top: ${({$y})=>$y}px;
+    left: ${({$x})=>$x}px;
+    width: ${({$width=300})=>`${$width}px`};
+    height: ${({$height=300})=>`${$height}px`};
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    
+    > main{
+        box-shadow: 0px 0px 5px 1px gray;
+        Xbackground: white;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        flex:1;
+        > main {
+            background: white;
+            Xpadding:var(--padding-child);
+            overflow: overlay;
+            flex:1;
+            display: flex;
+        }
+    }
+`
+export default class JRWindow extends JRFrame {
+    x=0
+    y=0
+    width=300
+    height=300
+    padding=5
+    thick=3
+    
+    constructor(props){
+        super(props)
+        this.ref=React.createRef()
+        this.titleBarRef=React.createRef()
+        if(this.props.popup===true)this.renderer=this.renderWindow
+        this.init()
+    }
+    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.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>
+    }
+}