jrs-react 1.2.14 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.14",
+	"version": "1.2.16",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",

package/public/data.json

@@ -16,4 +16,14 @@
     }
     ,"father":"Lai"
     ,"mother":"Wong"
+
+    ,"checkbox": [
+        1,
+        3,
+        5
+    ],
+    "select": [
+        2
+    ]
+    ,"radio":1
 }

package/public/list.json

@@ -1,6 +1,7 @@
 [
     {
         "name":"Joren"
+        ,"id":1
         ,"phone":"097459999"
         ,"address":{
             "no":"23"
@@ -10,6 +11,7 @@
     }
     ,{
         "name":"John"
+        ,"id":2
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -18,7 +20,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Oliver"
+        ,"id":3
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -27,7 +30,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Harry"
+        ,"id":4
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -36,7 +40,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Jacob"
+        ,"id":5
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -45,7 +50,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Charlie"
+        ,"id":6
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -54,7 +60,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Thomas"
+        ,"id":7
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -63,7 +70,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"George"
+        ,"id":8
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -72,7 +80,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Oscar"
+        ,"id":9
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -81,7 +90,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"James"
+        ,"id":10
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -90,7 +100,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"William"
+        ,"id":11
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -99,7 +110,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Emily"
+        ,"id":12
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"
@@ -108,7 +120,8 @@
         }
     }
     ,{
-        "name":"John"
+        "name":"Isla"
+        ,"id":13
         ,"phone":"0124873737"
         ,"address":{
             "no":"36"

package/src/app/App.jsx

@@ -7,10 +7,11 @@ import AxiosApp from './axios/AxiosApp'
 import AlertApp from './alert/AlertApp'
 import { po } from '../components/JRUtils'
 import TestApp from './test'
+import InputApp from './input/InputApp'
 
 function App() {
 	const apps={
-		TableApp,FieldsApp,WindowApp,AxiosApp,AlertApp,TestApp
+		TableApp,FieldsApp,WindowApp,AxiosApp,AlertApp,InputApp,TestApp
 	}
 	return <BrowserRouter>
 		{
@@ -24,14 +25,8 @@ function App() {
 					return <Route path={`/${key}`} element={<App/>} key={key}/>
 				})
 			}
-
-			<Route path="/table" element={<TableApp/>}/>
-			<Route path="/fields" element={<FieldsApp/>}/>
-			<Route path="/window" element={<WindowApp/>}/>
-			<Route path="/axios" element={<AxiosApp/>}/>
-			<Route path="/alert" element={<AlertApp/>}/>
 		</Routes>
-		<div id='play' style={{width:'500px',height:'500px',border:'1px solid gray'}}> </div>
+		{/* <div id='play' style={{width:'500px',height:'500px',border:'1px solid gray'}}> </div> */}
 	</BrowserRouter>
 }
 

package/src/app/fields/FieldsApp.jsx

@@ -16,12 +16,16 @@ const StyledJRFields=styled(JRFields)`
 export default function FieldsApp() {
 	return <>
         <JRFields
+            initValue={{
+                checkbox:[1,3,5]
+                ,select:[2]
+            }}
             {...devFields}
             {...withSomeButton}
             open={true}
-            popup={true}
+            popup={false}
             width={900}
-            height={800}
+            // height={800}
             title={'Fields'}
         />
     </>

package/src/app/fields/fieldsConfig.jsx

@@ -5,6 +5,8 @@ import JRText from "../../components/JRInput/JRText";
 import JRTable from "../../components/JRTable/JRTable";
 import { po } from "../../components/JRUtils";
 import styled from "styled-components";
+import JRCheckbox from "../../components/JRInput/JRCheckbox";
+import { JRRadio } from "../../components/JRInput/JRRadio";
 
 export const fieldsConfig={
         popup:true
@@ -208,11 +210,45 @@ export const normalFields={
                 }
             ]
         }
+        ,{
+            name:'select'
+            ,label:'Select'
+            ,type:JRSelect
+            ,valueName:'id'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,multiple:true
+            ,required:true
+        }
+        ,{}
+        ,{
+            name:'isMember'
+            ,label:'Is member'
+            ,type:JRCheckbox
+            ,option:{
+                value:1
+                ,label:'yes'
+            }
+        }
+        ,{
+            name:'checkbox'
+            ,label:'Checkbox'
+            ,type:JRCheckbox
+            ,valueName:'id'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,required:true
+        }
     ]
     ,cols:2
     ,style:{
         border:'1px solid gray'
     }
+    
 }
 ////////////////////////////////////////////////////////////
 const StyledDiv=styled.div`
@@ -251,7 +287,7 @@ export const withSomeButton={
                 onClick={()=>{
                     this.validate()
                         .then(()=>{
-
+                            alert('is valid')
                         })
                         .catch(()=>{
 
@@ -305,7 +341,7 @@ export const labelLayout={
 export const devFields={
     get:{
         url:'data.json'
-        ,autoRun:true
+        // ,autoRun:true
         ,callback(success,res){
             po('success,data',success,res)
             // setTimeout(()=>{
@@ -357,7 +393,68 @@ export const devFields={
                 ,border:'1px solid black'
                 ,borderRadius: '3px'
             }
+            ,colSpan:2
+        }
+        ,{
+            name:'isMember'
+            ,label:'Is member'
+            ,type:JRCheckbox
+            ,options:{
+                value:1
+                ,label:'yes'
+            }
+            ,required:true
+        }
+        ,{
+            name:'selectSingle'
+            ,label:'Select'
+            ,type:JRSelect
+            ,valueName:'id'
+            ,labelName:'name'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,required:true
+        }
+        ,{
+            name:'checkbox'
+            ,label:'Checkbox'
+            ,type:JRCheckbox
+            ,valueName:'id'
+            ,labelName:'name'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,required:true
+        }
+        ,{
+            name:'select'
+            ,label:'Select'
+            ,type:JRSelect
+            ,valueName:'id'
+            ,labelName:'name'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,multiple:true
+            ,required:true
+        }
+        ,{
+            name:'radio'
+            ,label:'Radio'
+            ,type:JRRadio
+            ,valueName:'id'
+            ,labelName:'name'
+            ,get:{
+                url:'list.json'
+                ,autoRun:true
+            }
+            ,multiple:true
+            ,required:true
         }
     ]
-    ,cols:1
+    ,cols:2
 }

package/src/app/input/InputApp.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import JRFields from "../../components/JRFields/JRFields";
+import { required } from "../../components/JRFields/Validators";
+import JRSelect from "../../components/JRInput/JRSelect";
+export default function InputApp() {
+    const [selectedValue,setSelectedValue]=useState()
+    return <div>
+        <JRSelect
+            get={{
+                url:'list.json'
+                ,autoRun:true
+            }}
+            value={selectedValue}
+            onChange={(value)=>{
+                setSelectedValue(value)
+            }}
+            size={6}
+            multiple={true}
+            valueName={'name'}
+        />
+        [{selectedValue}]
+        <JRFields
+            valueName={'phone'}
+            columns={[
+                {name:'name',label:'Name'
+                    ,type:JRSelect
+                    ,get:{
+                        url:'list.json'
+                        ,autoRun:true
+                    }
+                    ,showBlank:true
+                    ,multiple:true
+                    ,valueName:'name'
+                    // ,size:5
+                    ,required:true
+                }
+            ]}
+            bottom={function(){
+                return JSON.stringify(this.getValue())
+            }}
+        />
+    </div>
+}

package/src/components/JRAlert/index.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { createRoot  } from "react-dom/client"
 import { po } from "../JRUtils"
 import { useEffect, useState } from "react";

package/src/components/JRInput/JRCheckbox.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import JROptions from "../JROptions";
+import styled from "styled-components";
+import { StyledPick } from "./JRRadio";
+
+
+export default  class JRCheckbox extends JROptions{
+    renderer(){
+        const {valueName='value',labelName='label'}=this.props
+        const multiple=Array.isArray(this.getOptions()??[])
+        const options=multiple?this.getOptions():[this.getOptions()]
+        const value=multiple?[...this.getValue()??[]]:this.getValue()
+        const checked=multiple
+            ?(checkValue)=>{
+                return value.indexOf(checkValue)>-1
+            }
+            :(checkValue)=>{
+                return checkValue==value
+            }
+        return <StyledPick className={'jr-checkbox'}>
+            {
+                options?.map((record,key)=>{
+                    const recordValue=record[valueName]
+                    return <label key={key}>
+                        <input
+                            type={'checkbox'}
+                            multiple={multiple}
+                            value={recordValue}
+                            checked={checked(recordValue)}
+                            onChange={multiple
+                                ?(e)=>{
+                                    if(e.target.checked){
+                                        value.push(recordValue)
+                                    }else{
+                                        value.splice(value.indexOf(recordValue),1)
+                                    }
+                                    this.setValue(value.length?value:null)
+                                }
+                                :(e)=>{
+                                    this.setValue(e.target.checked?recordValue:null)
+                                }
+                            }
+                        />{record[labelName]}
+                    </label>
+                })
+            }
+        </StyledPick>
+    }
+}

package/src/components/JRInput/JRRadio.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import JROptions from "../JROptions";
+import styled from "styled-components";
+
+
+export const StyledPick=styled.div`
+    >label{
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        height: 30px;
+        padding-right: 12px;
+    }
+`
+export class JRRadio extends JROptions{
+    renderer(){
+        const {valueName='value',labelName='label',onChange,...props}=this.props
+        const options=this.getOptions()
+        return <StyledPick className={'jr-radio'}>
+            {
+                options?.map((record,key)=>{
+                    const recordValue=record[valueName]
+                    return <label key={key}>
+                        <input 
+                            type={'radio'}
+                            name={'radio'}
+                            checked={this.getValue()==recordValue}
+                            onClick={(e)=>{
+                                if(this.getValue()==recordValue){
+                                    this.setValue(null)
+                                    e.target.checked=false
+                                }else{
+                                    this.setValue(recordValue)
+                                }
+                            }}
+                        />
+                        {record[labelName]}
+                    </label>
+                })
+            }
+        </StyledPick>
+    }
+}

package/src/components/JRInput/JRSelect.jsx

@@ -1,19 +1,64 @@
 import React from "react";
 import { po } from "../JRUtils";
 import JRInput from "./JRInput";
+import JROptions from "../JROptions";
+import styled from "styled-components";
 
-export default class JRSelect extends JRInput{
-    input(){
-        return <select value={this.props.value}
-            style={{
-                height: '30px'
-                ,width: '100%'
-            }}
+const StyledOption=styled.option`
+`
+const StyledSelect=styled.select`
+    ${({size,multiple})=>`${size==1 || (size==undefined && multiple!=true)?'height:30px;':''}`}
+    width: 100%;
+
+    option{
+        padding: 4px;
+        height: 25px;
+        display: flex;
+        align-items: center;
+    }
+`
+export default class JRSelect extends JROptions{
+    renderer(){
+        const {showBlank,valueName='id',labelName='name',multiple,size}=this.props
+        const options=[...this.getOptions()??[]]
+        if(multiple!=true && showBlank!=false)options.unshift({[valueName]:'',[labelName]:''})
+        return <>
+        <StyledSelect 
+            value={this.getValue()??(multiple?[]:'')}
+            className={'jr-select'}
             onChange={(e)=>{
-                this.setValue(e.target.value)
+                if(multiple){
+                    const selectedIndex=[...e.target.selectedOptions].map((option)=>option.index)
+                    this.setValue(selectedIndex.length
+                        ?selectedIndex.map((index)=>options[index][valueName])
+                        :null
+                    )
+                }else{
+                    const selectedIndex=e.target.selectedOptions[0].index
+                    this.setValue(selectedIndex?options[selectedIndex][valueName]:null)
+                }
             }}
+            size={size}
+            multiple={multiple}
         >
-            <option value={1}>A</option>
-        </select>
+            {
+                options.map((record,key)=>{
+                    const props={
+                        value:record[valueName]
+                        ,key:key
+                    }
+                    if(
+                        (multiple && this.getValue()?.indexOf(record[valueName])>-1)
+                        || this.getValue()==record[valueName]
+                    ){
+                        props.className='selected'
+                    }
+                    return <StyledOption {...props}>
+                        {record[labelName]}
+                    </StyledOption>
+                })
+            }
+        </StyledSelect>
+        </>
     }
 }

package/src/components/JROptions.jsx

@@ -0,0 +1,24 @@
+import JRSubmit from "./JRSubmit"
+
+export default class JROptions extends JRSubmit {
+    get optionsFrom(){
+        return this.props.options===undefined?'state':'props'
+    }
+    setOptions(options){
+        if(this.props.setOptions){
+            this.props.setOptions(options)
+        }else{
+            this.setState({options: options})
+        }
+    }
+    getOptions(){
+        return this[this.optionsFrom]?.options
+    }
+    setRes(isSuccess,response,config){
+        if (isSuccess ) {
+            const options=config.formatValue?.bind(this)(response.data)??response.data
+            response.data=options
+            this.setOptions(options)
+        }  
+    }
+}

package/src/components/JRSubmit.jsx

@@ -142,6 +142,8 @@ export default class JRSubmit extends React.Component {
             const fullnamList=fullname.split('.')
             return this.#getValueByName(fullnamList,this[this.from]?.value)
         }else{
+            // po('ssssssssssssssssssssssssssssssssssssssssss')
+            // 忘記為甚麼這樣寫了 XDD
             return flexType(this[this.from]?.value,this,null,null)
         }
     }

package/src/components/JRTest.jsx

@@ -2,40 +2,8 @@ import React from 'react'
 import styled from "styled-components";
 import JRSubmit from './JRSubmit'
 
-const StyledJRFrame=styled.div`
-    display:flex;
-    flex:1;
-    overflow:hidden;
-
-    > *{
-        Xborder:1px solid gray;
-    }
-    >main{
-        display:flex;
-        flex:1;
-        overflow:overlay;
-        flex-direction: column;
-        > *{
-            XXborder:1px solid gray;
-            min-height:30px;
-        }
-
-        >header{
-            XXborder:1px solid  red;
-            XXoverflow: overlay;
-        }
-        >main{
-            display:flex;
-            flex:1;
-            overflow:hidden;
-        }
-        >footer{
-            XXborder:1px solid  blue;
-            overflow: overlay;
-        }
-
-    }
-
+const StyledJRTest=styled.div`
+  
 `
 
 const FreeType=({tag:Tag,config,me,className})=>{
@@ -51,19 +19,8 @@ const FreeType=({tag:Tag,config,me,className})=>{
 
 export default class JRTestReact extends JRSubmit {
     renderer(){
-        return <StyledJRFrame style={this.props.style} className={`${this.props.className} jr-frame`} >
-            <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
-            <main>
-                <FreeType tag='header' config={this.props.top} me={this}/>
-                <main>
-                    <FreeType tag='div' config={this.props.left} me={this} className={'left'}/>
-                    {this.renderMe()}
-                    <FreeType tag='div' config={this.props.right} me={this} className={'right'}/>
-                </main>
-                <FreeType tag='footer' config={this.props.bottom} me={this}/>
-            </main>
-            <FreeType tag='div' config={this.props.end} me={this} className={'end'}/>
-        </StyledJRFrame>
+        return <StyledJRTest style={this.props.style} className={`${this.props.className} jr-frame`} >
+        </StyledJRTest>
     }
     renderMe(){
         return <div style={{flex:1}}>Render me</div>

package/src/components/JRWindow/JRWindow.jsx

@@ -3,10 +3,7 @@ import JRFrame from "../JRFrame/JRFrame";
 import styled from "styled-components";
 import TitleBar from "./TitleBar";
 import { po } from "../JRUtils";
-import Slider from "./Slider";
 import Sliders from "./Slider";
-import Fields from "../JRFields/JRFields";
-import JRText from "../JRInput/JRText";
 import style from './Style.module.css'