jrs-react 1.2.13 → 1.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.es.js +1015 -727
- package/build/index.js +1015 -727
- package/index.html +2 -2
- package/package.json +3 -2
- package/public/alert.json +4 -0
- package/public/data.json +10 -0
- package/public/data2.json +19 -0
- package/public/list.json +99 -0
- package/src/app/App.css +25 -3
- package/src/app/App.jsx +22 -1
- package/src/app/alert/AlertApp.jsx +92 -0
- package/src/app/axios/AxiosApp.jsx +71 -0
- package/src/app/fields/FieldsApp.jsx +22 -6
- package/src/app/fields/fieldsConfig.jsx +227 -1
- package/src/app/fields/tryHOC.jsx +21 -0
- package/src/app/fields/validator.jsx +217 -0
- package/src/app/index.css +1 -1
- package/src/app/table/tableConfig.jsx +4 -1
- package/src/app/test/index.jsx +8 -0
- package/src/app/window/WindowApp.jsx +120 -83
- package/src/components/JRAlert/index.jsx +71 -0
- package/src/components/JRFields/JRFields.jsx +178 -129
- package/src/components/JRFields/StyleJRFields.jsx +2 -3
- package/src/components/JRFields/Validators.jsx +33 -0
- package/src/components/JRFrame/JRFrame.jsx +12 -7
- package/src/components/JRFrame/JRFrameHOC.jsx +61 -0
- package/src/components/JRInput/JRInput.jsx +3 -2
- package/src/components/JRS.jsx +4 -0
- package/src/components/JRSubmit.jsx +1 -3
- package/src/components/JRTable/JRTable.jsx +10 -7
- package/src/components/JRTable/StyledJRTable.jsx +8 -0
- package/src/components/JRTable/THead.jsx +1 -1
- package/src/components/JRWindow/JRWindow.jsx +73 -15
- package/src/components/JRWindow/JRWindowHOC.jsx +114 -0
- package/src/components/JRWindow/Slider.jsx +8 -3
- package/src/components/JRWindow/Style.module.css +35 -0
- package/src/components/JRWindow/TitleBar.jsx +116 -33
- package/src/main.jsx +2 -1
- package/src/components/JRUtil.jsx +0 -1
package/index.html
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
2
|
+
<html lang="en" id="html">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>Vite + React</title>
|
|
8
8
|
</head>
|
|
9
|
-
<body style="background: black;color:
|
|
9
|
+
<body id="body" style="background: black;color:white;">
|
|
10
10
|
<div id="root"></div>
|
|
11
11
|
<script type="module" src="/src/main.jsx"></script>
|
|
12
12
|
</body>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jrs-react",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.14",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"module": "build/index.es.js",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"@vitejs/plugin-react": "^4.3.4",
|
|
22
22
|
"antd": "^5.12.5",
|
|
23
23
|
"axios": "^1.6.2",
|
|
24
|
+
"create-react-class": "^15.7.0",
|
|
24
25
|
"globals": "^15.15.0",
|
|
25
26
|
"react": "^18.2.0",
|
|
26
27
|
"react-dom": "^18.2.0",
|
|
@@ -29,7 +30,7 @@
|
|
|
29
30
|
"vite": "^6.2.0",
|
|
30
31
|
"vite-plugin-svgr": "^4.3.0"
|
|
31
32
|
},
|
|
32
|
-
"peerDependencies":{
|
|
33
|
+
"peerDependencies": {
|
|
33
34
|
"react": "^18.2.0",
|
|
34
35
|
"react-dom": "^18.2.0"
|
|
35
36
|
},
|
package/public/data.json
CHANGED
|
@@ -4,6 +4,16 @@
|
|
|
4
4
|
{"phone":"0948272834","name":"中華電信"}
|
|
5
5
|
,{"phone":"0987304555","name":"遠傳"}
|
|
6
6
|
]
|
|
7
|
+
,"dataUrl":"data.json"
|
|
7
8
|
,"account":"jorenlai"
|
|
8
9
|
,"email":"joren.lai@gmail.com"
|
|
10
|
+
,"address":{
|
|
11
|
+
"no":"53-102"
|
|
12
|
+
,"street":"Jalan Indah"
|
|
13
|
+
,"postcode":"86000"
|
|
14
|
+
,"state":"Johor"
|
|
15
|
+
,"country":"Malaysia"
|
|
16
|
+
}
|
|
17
|
+
,"father":"Lai"
|
|
18
|
+
,"mother":"Wong"
|
|
9
19
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name":"Joren 2"
|
|
3
|
+
,"phone":[
|
|
4
|
+
{"phone":"0948272834","name":"中華電信"}
|
|
5
|
+
,{"phone":"0987304555","name":"遠傳"}
|
|
6
|
+
]
|
|
7
|
+
,"dataUrl":"data.json"
|
|
8
|
+
,"account":"jorenlai"
|
|
9
|
+
,"email":"joren.lai@gmail.com"
|
|
10
|
+
,"address":{
|
|
11
|
+
"no":"53-102"
|
|
12
|
+
,"street":"Jalan Indah"
|
|
13
|
+
,"postcode":"86000"
|
|
14
|
+
,"state":"Johor"
|
|
15
|
+
,"country":"Malaysia"
|
|
16
|
+
}
|
|
17
|
+
,"father":"Lai"
|
|
18
|
+
,"mother":"Wong"
|
|
19
|
+
}
|
package/public/list.json
CHANGED
|
@@ -17,4 +17,103 @@
|
|
|
17
17
|
,"country":"台灣"
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
+
,{
|
|
21
|
+
"name":"John"
|
|
22
|
+
,"phone":"0124873737"
|
|
23
|
+
,"address":{
|
|
24
|
+
"no":"36"
|
|
25
|
+
,"street":"景興路"
|
|
26
|
+
,"country":"台灣"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
,{
|
|
30
|
+
"name":"John"
|
|
31
|
+
,"phone":"0124873737"
|
|
32
|
+
,"address":{
|
|
33
|
+
"no":"36"
|
|
34
|
+
,"street":"景興路"
|
|
35
|
+
,"country":"台灣"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
,{
|
|
39
|
+
"name":"John"
|
|
40
|
+
,"phone":"0124873737"
|
|
41
|
+
,"address":{
|
|
42
|
+
"no":"36"
|
|
43
|
+
,"street":"景興路"
|
|
44
|
+
,"country":"台灣"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
,{
|
|
48
|
+
"name":"John"
|
|
49
|
+
,"phone":"0124873737"
|
|
50
|
+
,"address":{
|
|
51
|
+
"no":"36"
|
|
52
|
+
,"street":"景興路"
|
|
53
|
+
,"country":"台灣"
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
,{
|
|
57
|
+
"name":"John"
|
|
58
|
+
,"phone":"0124873737"
|
|
59
|
+
,"address":{
|
|
60
|
+
"no":"36"
|
|
61
|
+
,"street":"景興路"
|
|
62
|
+
,"country":"台灣"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
,{
|
|
66
|
+
"name":"John"
|
|
67
|
+
,"phone":"0124873737"
|
|
68
|
+
,"address":{
|
|
69
|
+
"no":"36"
|
|
70
|
+
,"street":"景興路"
|
|
71
|
+
,"country":"台灣"
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
,{
|
|
75
|
+
"name":"John"
|
|
76
|
+
,"phone":"0124873737"
|
|
77
|
+
,"address":{
|
|
78
|
+
"no":"36"
|
|
79
|
+
,"street":"景興路"
|
|
80
|
+
,"country":"台灣"
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
,{
|
|
84
|
+
"name":"John"
|
|
85
|
+
,"phone":"0124873737"
|
|
86
|
+
,"address":{
|
|
87
|
+
"no":"36"
|
|
88
|
+
,"street":"景興路"
|
|
89
|
+
,"country":"台灣"
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
,{
|
|
93
|
+
"name":"John"
|
|
94
|
+
,"phone":"0124873737"
|
|
95
|
+
,"address":{
|
|
96
|
+
"no":"36"
|
|
97
|
+
,"street":"景興路"
|
|
98
|
+
,"country":"台灣"
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
,{
|
|
102
|
+
"name":"John"
|
|
103
|
+
,"phone":"0124873737"
|
|
104
|
+
,"address":{
|
|
105
|
+
"no":"36"
|
|
106
|
+
,"street":"景興路"
|
|
107
|
+
,"country":"台灣"
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
,{
|
|
111
|
+
"name":"John"
|
|
112
|
+
,"phone":"0124873737"
|
|
113
|
+
,"address":{
|
|
114
|
+
"no":"36"
|
|
115
|
+
,"street":"景興路"
|
|
116
|
+
,"country":"台灣"
|
|
117
|
+
}
|
|
118
|
+
}
|
|
20
119
|
]
|
package/src/app/App.css
CHANGED
|
@@ -1,9 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
}
|
|
1
|
+
|
|
4
2
|
|
|
5
3
|
html,*,*:before,*:after {
|
|
6
4
|
box-sizing: border-box;
|
|
7
5
|
}
|
|
8
6
|
|
|
9
7
|
|
|
8
|
+
.withMask{
|
|
9
|
+
position: relative;
|
|
10
|
+
overflow: hidden !important;
|
|
11
|
+
user-select: none;
|
|
12
|
+
&::after{
|
|
13
|
+
content:'' ;
|
|
14
|
+
background : #868686cc;
|
|
15
|
+
a:#868686cc;
|
|
16
|
+
position: absolute;
|
|
17
|
+
top: 0;
|
|
18
|
+
left: 0;
|
|
19
|
+
right: 0;
|
|
20
|
+
bottom: 0;
|
|
21
|
+
border-radius: inherit;
|
|
22
|
+
height: 10000px;
|
|
23
|
+
width: 10000px;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
#jr-alert-div{
|
|
28
|
+
>div:not(:last-child){
|
|
29
|
+
display: none;
|
|
30
|
+
}
|
|
31
|
+
}
|
package/src/app/App.jsx
CHANGED
|
@@ -1,16 +1,37 @@
|
|
|
1
|
-
import { BrowserRouter, Route, Routes } from 'react-router-dom'
|
|
1
|
+
import { BrowserRouter, Route, Routes ,Link} from 'react-router-dom'
|
|
2
2
|
import './App.css'
|
|
3
3
|
import TableApp from './table/TableApp'
|
|
4
4
|
import FieldsApp from './fields/FieldsApp'
|
|
5
5
|
import WindowApp from './window/WindowApp'
|
|
6
|
+
import AxiosApp from './axios/AxiosApp'
|
|
7
|
+
import AlertApp from './alert/AlertApp'
|
|
8
|
+
import { po } from '../components/JRUtils'
|
|
9
|
+
import TestApp from './test'
|
|
6
10
|
|
|
7
11
|
function App() {
|
|
12
|
+
const apps={
|
|
13
|
+
TableApp,FieldsApp,WindowApp,AxiosApp,AlertApp,TestApp
|
|
14
|
+
}
|
|
8
15
|
return <BrowserRouter>
|
|
16
|
+
{
|
|
17
|
+
Object.entries(apps).map(([key,app],index)=>{
|
|
18
|
+
return <span key={key} style={{padding:'8px'}}><Link to={`/${key}`}>{key}</Link></span>
|
|
19
|
+
})
|
|
20
|
+
}
|
|
9
21
|
<Routes>
|
|
22
|
+
{
|
|
23
|
+
Object.entries(apps).map(([key,App],index)=>{
|
|
24
|
+
return <Route path={`/${key}`} element={<App/>} key={key}/>
|
|
25
|
+
})
|
|
26
|
+
}
|
|
27
|
+
|
|
10
28
|
<Route path="/table" element={<TableApp/>}/>
|
|
11
29
|
<Route path="/fields" element={<FieldsApp/>}/>
|
|
12
30
|
<Route path="/window" element={<WindowApp/>}/>
|
|
31
|
+
<Route path="/axios" element={<AxiosApp/>}/>
|
|
32
|
+
<Route path="/alert" element={<AlertApp/>}/>
|
|
13
33
|
</Routes>
|
|
34
|
+
<div id='play' style={{width:'500px',height:'500px',border:'1px solid gray'}}> </div>
|
|
14
35
|
</BrowserRouter>
|
|
15
36
|
}
|
|
16
37
|
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import React, { useEffect } from "react"
|
|
2
|
+
import { createPortal } from 'react-dom'
|
|
3
|
+
import JRAlert from "../../components/JRAlert"
|
|
4
|
+
import JRS from "../../components/JRS"
|
|
5
|
+
import { po } from "../../components/JRUtils"
|
|
6
|
+
import createClass from 'create-react-class';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
const Show = createClass({
|
|
10
|
+
render: () => <h1>This is coming from createClass() function</h1>,
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
function AlertApp1() {
|
|
14
|
+
useEffect(()=>{
|
|
15
|
+
|
|
16
|
+
// root.render(<div>VVVVVVVVV</div>)
|
|
17
|
+
})
|
|
18
|
+
return <div>Alert <Show/></div>
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function AlertApp() {
|
|
22
|
+
useEffect(()=>{
|
|
23
|
+
JRAlert({
|
|
24
|
+
title:'Static Title'
|
|
25
|
+
,message:'Default message'
|
|
26
|
+
,x:100
|
|
27
|
+
,y:100
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
JRAlert({
|
|
31
|
+
title:'Static Title'
|
|
32
|
+
,message:'Default message'
|
|
33
|
+
,x:200
|
|
34
|
+
,y:200
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
JRAlert({
|
|
38
|
+
title:'Static Title'
|
|
39
|
+
,message:'Default message'
|
|
40
|
+
,x:300
|
|
41
|
+
,y:300
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
JRAlert({
|
|
45
|
+
title:'Static Title'
|
|
46
|
+
,message:'Default message'
|
|
47
|
+
,x:400
|
|
48
|
+
,y:400
|
|
49
|
+
})
|
|
50
|
+
})
|
|
51
|
+
return <div>
|
|
52
|
+
<button
|
|
53
|
+
onClick={()=>{
|
|
54
|
+
JRAlert({
|
|
55
|
+
title:'My alert'
|
|
56
|
+
,message:'Here you go'
|
|
57
|
+
,width:300
|
|
58
|
+
,height:160
|
|
59
|
+
,get:{
|
|
60
|
+
url:'data.json'
|
|
61
|
+
,autoRun:true
|
|
62
|
+
}
|
|
63
|
+
})
|
|
64
|
+
}}
|
|
65
|
+
>Alert</button>
|
|
66
|
+
|
|
67
|
+
<button
|
|
68
|
+
onClick={()=>{
|
|
69
|
+
JRAlert({
|
|
70
|
+
title:'Another alert'
|
|
71
|
+
,message:'Here you go'
|
|
72
|
+
})
|
|
73
|
+
}}
|
|
74
|
+
>Alert 2</button>
|
|
75
|
+
|
|
76
|
+
<button
|
|
77
|
+
onClick={()=>{
|
|
78
|
+
JRAlert({
|
|
79
|
+
title(){
|
|
80
|
+
return this.getValue().title
|
|
81
|
+
}
|
|
82
|
+
,get:{
|
|
83
|
+
url:'alert.json'
|
|
84
|
+
,autoRun:true
|
|
85
|
+
}
|
|
86
|
+
})
|
|
87
|
+
}}
|
|
88
|
+
>Server</button>
|
|
89
|
+
</div>
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export default AlertApp
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
|
|
2
|
+
import axios from "axios";
|
|
3
|
+
import { useEffect } from "react";
|
|
4
|
+
import styled from "styled-components";
|
|
5
|
+
import { po } from "../../components/JRUtils";
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
const StyledDiv=styled.div`
|
|
10
|
+
input {
|
|
11
|
+
background: #202020;
|
|
12
|
+
color:gray;
|
|
13
|
+
}
|
|
14
|
+
`
|
|
15
|
+
// const submit = axios.create({
|
|
16
|
+
// timeout: 120000,
|
|
17
|
+
// maxBodyLength: 104857600, //100mb 104857600
|
|
18
|
+
// maxContentLength: 104857600, //100mb
|
|
19
|
+
// });
|
|
20
|
+
// axios.interceptors.response.use(
|
|
21
|
+
// (Response) => {
|
|
22
|
+
// po('++++++++++++++++++++++++++',Response,Response)
|
|
23
|
+
// if(Response?.status!=200){
|
|
24
|
+
// po('fffffffffffffffff')
|
|
25
|
+
// return Promise.reject(Error);
|
|
26
|
+
// }
|
|
27
|
+
// return Promise.resolve(Response);
|
|
28
|
+
// },
|
|
29
|
+
// (Error) => {
|
|
30
|
+
// po('---------------------------',Error)
|
|
31
|
+
// return Promise.reject(Error);
|
|
32
|
+
// }
|
|
33
|
+
// );
|
|
34
|
+
|
|
35
|
+
export default function AxiosApp() {
|
|
36
|
+
const config = {
|
|
37
|
+
headers:{
|
|
38
|
+
Authorization: `Bearer AAAAA.bbbbbbbbbbbbbbbbbbbbb.ccccccccccccccc`
|
|
39
|
+
,'Content-Type' : 'application/json'
|
|
40
|
+
}
|
|
41
|
+
,emulateJSON: true
|
|
42
|
+
,params: {
|
|
43
|
+
orderNo:'M20240720001'
|
|
44
|
+
}
|
|
45
|
+
,responseType: "application/json"
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
useEffect(()=>{
|
|
49
|
+
axios.get('data.json'
|
|
50
|
+
, {
|
|
51
|
+
params:{
|
|
52
|
+
name: "2",
|
|
53
|
+
parts: "4"
|
|
54
|
+
}
|
|
55
|
+
,...config
|
|
56
|
+
}
|
|
57
|
+
,{
|
|
58
|
+
...config
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
.then(response => {
|
|
62
|
+
po('then')
|
|
63
|
+
console.log(response)
|
|
64
|
+
})
|
|
65
|
+
.catch(error => {
|
|
66
|
+
po('catch')
|
|
67
|
+
console.log(error.response)
|
|
68
|
+
});
|
|
69
|
+
},[])
|
|
70
|
+
return <StyledDiv>StyledDiv 3</StyledDiv>
|
|
71
|
+
}
|
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
|
|
2
|
+
import styled from "styled-components";
|
|
2
3
|
import JRFields from "../../components/JRFields/JRFields";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
4
|
+
import { fieldsValidator ,fields} from "./validator";
|
|
5
|
+
import { devFields, normalFields, withSomeButton } from "./fieldsConfig";
|
|
6
|
+
// import { tryHOC } from "./tryHOC";
|
|
6
7
|
|
|
7
8
|
|
|
9
|
+
|
|
10
|
+
const StyledJRFields=styled(JRFields)`
|
|
11
|
+
input {
|
|
12
|
+
background: #202020;
|
|
13
|
+
color:gray;
|
|
14
|
+
}
|
|
15
|
+
`
|
|
8
16
|
export default function FieldsApp() {
|
|
9
|
-
return
|
|
10
|
-
|
|
11
|
-
|
|
17
|
+
return <>
|
|
18
|
+
<JRFields
|
|
19
|
+
{...devFields}
|
|
20
|
+
{...withSomeButton}
|
|
21
|
+
open={true}
|
|
22
|
+
popup={true}
|
|
23
|
+
width={900}
|
|
24
|
+
height={800}
|
|
25
|
+
title={'Fields'}
|
|
26
|
+
/>
|
|
27
|
+
</>
|
|
12
28
|
}
|