Skip to content

Commit 5b94053

Browse files
bluebill1049bluebill1049
authored
persist state (#7)
1 parent ffe11c7 commit 5b94053

18 files changed

Lines changed: 598 additions & 202 deletions

‎app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@types/node": "^12.0.0",
1414
"@types/react": "^16.9.0",
1515
"@types/react-dom": "^16.9.0",
16+
"little-state-machine": "^2.11.3",
1617
"lodash": "^4.17.15",
1718
"react": "^16.12.0",
1819
"react-dom": "^16.12.0",

‎app/src/devTool/devTool.tsx‎

Lines changed: 19 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,26 @@
11
import * as React from 'react';
2+
import {
3+
StateMachineProvider,
4+
createStore,
5+
setStorageType,
6+
} from 'little-state-machine';
27
import { Control } from 'react-hook-form';
3-
import { Animate } from 'react-simple-animate';
4-
import Header from './header';
5-
import Panel from './panel';
6-
import colors from './colors';
7-
import Logo from './logo';
8-
import { PanelShadow } from './panelShadow';
9-
import { Button } from './styled';
8+
import { DevToolUI } from './devToolUI';
109

11-
export const DevTool = ({ control }: { control: Control }) => {
12-
const [visible, setVisible] = React.useState(true);
10+
setStorageType(window.localStorage);
1311

14-
return (
15-
<>
16-
<Animate
17-
play={!visible}
18-
duration={0.2}
19-
start={{
20-
position: 'fixed',
21-
top: 0,
22-
right: 0,
23-
transform: 'translateX(0)',
24-
zIndex: 99999,
25-
}}
26-
end={{
27-
top: 0,
28-
right: 0,
29-
position: 'fixed',
30-
transform: 'translateX(280px)',
31-
zIndex: 99999,
32-
}}
33-
>
34-
<div
35-
style={{
36-
position: 'fixed',
37-
height: '100vh',
38-
width: 250,
39-
zIndex: 99999,
40-
background: colors.buttonBlue,
41-
top: 0,
42-
right: 0,
43-
display: 'grid',
44-
textAlign: 'left',
45-
color: 'white',
46-
fontSize: 14,
47-
gridTemplateRows: '40px auto',
48-
fontFamily:
49-
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
50-
}}
51-
>
52-
<Header setVisible={setVisible} control={control} />
53-
<Panel control={control} />
54-
</div>
55-
<PanelShadow visible={visible} />
56-
</Animate>
12+
createStore({
13+
visible: true,
14+
isCollapse: false,
15+
filterName: '',
16+
}, {
17+
name: "__REACT_HOOK_FORM_DEVTOOLS__"
18+
});
5719

58-
{!visible && (
59-
<Button
60-
title="Show dev panel"
61-
style={{
62-
position: 'fixed',
63-
zIndex: 99999,
64-
top: 3,
65-
right: 3,
66-
padding: 3,
67-
margin: 0,
68-
background: 'none',
69-
}}
70-
>
71-
<Logo setVisible={setVisible} />
72-
</Button>
73-
)}
74-
</>
20+
export const DevTool = ({ control }: { control: Control }) => {
21+
return (
22+
<StateMachineProvider>
23+
<DevToolUI control={control} />
24+
</StateMachineProvider>
7525
);
7626
};

‎app/src/devTool/devToolUI.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import * as React from 'react';
2+
import { Control } from 'react-hook-form';
3+
import { Animate } from 'react-simple-animate';
4+
import Header from './header';
5+
import Panel from './panel';
6+
import colors from './colors';
7+
import Logo from './logo';
8+
import { PanelShadow } from './panelShadow';
9+
import { Button } from './styled';
10+
import { useStateMachine } from 'little-state-machine';
11+
import { setVisible } from './settingAction';
12+
13+
export const DevToolUI = ({ control }: { control: Control }) => {
14+
const { state, action } = useStateMachine(setVisible);
15+
16+
return (
17+
<>
18+
<Animate
19+
play={!state.visible}
20+
duration={0.2}
21+
start={{
22+
position: 'fixed',
23+
top: 0,
24+
right: 0,
25+
transform: 'translateX(0)',
26+
zIndex: 99999,
27+
}}
28+
end={{
29+
top: 0,
30+
right: 0,
31+
position: 'fixed',
32+
transform: 'translateX(280px)',
33+
zIndex: 99999,
34+
}}
35+
>
36+
<div
37+
style={{
38+
position: 'fixed',
39+
height: '100vh',
40+
width: 250,
41+
zIndex: 99999,
42+
background: colors.buttonBlue,
43+
top: 0,
44+
right: 0,
45+
display: 'grid',
46+
textAlign: 'left',
47+
color: 'white',
48+
fontSize: 14,
49+
gridTemplateRows: '40px auto',
50+
fontFamily:
51+
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
52+
}}
53+
>
54+
<Header setVisible={action} control={control} />
55+
<Panel control={control} />
56+
</div>
57+
<PanelShadow visible={state.visible} />
58+
</Animate>
59+
60+
{!state.visible && (
61+
<Button
62+
title="Show dev panel"
63+
style={{
64+
position: 'fixed',
65+
zIndex: 99999,
66+
top: 3,
67+
right: 3,
68+
padding: 3,
69+
margin: 0,
70+
background: 'none',
71+
}}
72+
>
73+
<Logo setVisible={action} />
74+
</Button>
75+
)}
76+
</>
77+
);
78+
};

‎app/src/devTool/header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Control } from 'react-hook-form';
44
import { CircleButton, paraGraphDefaultStyle } from './styled';
55

66
type Props = {
7-
setVisible: (visible: boolean) => void;
7+
setVisible: any;
88
control: Control;
99
};
1010

‎app/src/devTool/logo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Logo = ({
66
setVisible,
77
}: {
88
style?: Record<string, any>;
9-
setVisible: (visible: boolean) => void;
9+
setVisible: any;
1010
}) => {
1111
return (
1212
<svg

‎app/src/devTool/panel.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
import * as React from 'react';
22
import get from 'lodash/get';
33
import { Control, useForm } from 'react-hook-form';
4+
import { useStateMachine } from 'little-state-machine';
45
import { useEffect } from 'react';
56
import colors from './colors';
67
import PanelTable from './panelTable';
78
import FormStateTable from './formStateTable';
89
import { Button, Input } from './styled';
10+
import { setCollapse } from './settingAction';
911

1012
export default ({
1113
control: { fieldsRef, getValues, formState, errorsRef, readFormStateRef },
1214
}: {
1315
control: Control;
1416
}) => {
17+
const { state, action } = useStateMachine(setCollapse);
1518
const [, setData] = React.useState({});
16-
const [collapseAll, setCollapseAll] = React.useState(true);
1719
const [showFormState, setShowFormState] = React.useState(false);
1820
const fieldsValues = getValues();
1921
const { register, watch } = useForm();
2022
const searchTerm = watch('search', '');
2123

24+
console.log(state)
25+
2226
useEffect(() => {
2327
setData({});
2428
}, []);
@@ -58,9 +62,12 @@ export default ({
5862
lineHeight: 1,
5963
}}
6064
title="Toggle entire fields"
61-
onClick={() => setCollapseAll(!collapseAll)}
65+
onClick={() => {
66+
// @ts-ignore
67+
action(!state.isCollapse);
68+
}}
6269
>
63-
{collapseAll ? '[-] COLLAPSE' : '[+] EXPAND'}
70+
{state.isCollapse ? '[-] COLLAPSE' : '[+] EXPAND'}
6471
</Button>
6572

6673
<Input
@@ -123,7 +130,7 @@ export default ({
123130
<PanelTable
124131
refObject={ref}
125132
index={index}
126-
collapseAll={collapseAll}
133+
collapseAll={state.isCollapse}
127134
name={name}
128135
isTouched={isTouched}
129136
type={type}

‎app/src/devTool/settingAction.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export function setVisible(state: any, payload: any) {
2+
return {
3+
...state,
4+
visible: payload,
5+
};
6+
}
7+
8+
export function setCollapse(state: any, payload: any) {
9+
return {
10+
...state,
11+
isCollapse: payload,
12+
};
13+
}
14+

0 commit comments

Comments
 (0)