Skip to content

Commit 81da677

Browse files
bluebill1049bluebill1049
committed
update with latest
1 parent 604a965 commit 81da677

5 files changed

Lines changed: 114 additions & 86 deletions

File tree

‎src/formStateTable.tsx‎

Lines changed: 84 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import colors from './colors';
22
import * as React from 'react';
3+
import { Animate } from 'react-simple-animate';
34
import { Button, paraGraphDefaultStyle } from './styled';
45

56
type Props = {
@@ -18,76 +19,89 @@ const FormStateTable = ({
1819
alignSelf: 'end',
1920
}}
2021
>
21-
{showFormState && (
22-
<table
23-
style={{
24-
padding: 10,
25-
display: 'block',
26-
background: 'black',
27-
borderTop: `1px solid ${colors.lightPink}`,
28-
}}
29-
>
30-
<tbody>
31-
<tr>
32-
<td align="right" style={{ width: 90, ...paraGraphDefaultStyle }}>
33-
Valid:
34-
</td>
35-
<td
36-
style={{
37-
color: formState.isValid ? colors.green : colors.lightPink,
38-
...paraGraphDefaultStyle,
39-
}}
40-
>
41-
{formState.isValid ? 'true' : 'false'}
42-
</td>
43-
</tr>
44-
<tr>
45-
<td align="right" style={{ ...paraGraphDefaultStyle }}>
46-
Submitted:
47-
</td>
48-
<td
49-
style={{
50-
color: formState.isSubmitted ? colors.green : colors.lightPink,
51-
...paraGraphDefaultStyle,
52-
}}
53-
>
54-
{formState.isSubmitted ? 'true' : 'false'}
55-
</td>
56-
</tr>
57-
<tr>
58-
<td align="right" style={{ ...paraGraphDefaultStyle }}>
59-
Count:
60-
</td>
61-
<td
62-
style={{
63-
color: formState.submitCount ? colors.green : colors.lightPink,
64-
...paraGraphDefaultStyle,
65-
}}
66-
>
67-
{formState.submitCount}
68-
</td>
69-
</tr>
70-
<tr>
71-
<td
72-
align="right"
73-
style={{
74-
...paraGraphDefaultStyle,
75-
}}
76-
>
77-
Submitting:
78-
</td>
79-
<td
80-
style={{
81-
color: formState.isSubmitting ? colors.green : colors.lightPink,
82-
...paraGraphDefaultStyle,
83-
}}
84-
>
85-
{formState.isSubmitting ? 'true' : 'false'}
86-
</td>
87-
</tr>
88-
</tbody>
89-
</table>
90-
)}
22+
<Animate
23+
play={showFormState}
24+
start={{ opacity: 0 }}
25+
end={{ opacity: 1 }}
26+
render={({ style }) => (
27+
<table
28+
style={{
29+
padding: '5px 10px',
30+
display: 'block',
31+
background: 'black',
32+
borderTop: `1px solid ${colors.lightPink}`,
33+
pointerEvents: 'none',
34+
...style,
35+
}}
36+
>
37+
<tbody>
38+
<tr>
39+
<td align="right" style={{ width: 90, ...paraGraphDefaultStyle }}>
40+
Valid:
41+
</td>
42+
<td
43+
style={{
44+
color: formState.isValid ? colors.green : colors.lightPink,
45+
...paraGraphDefaultStyle,
46+
}}
47+
>
48+
{formState.isValid ? 'true' : 'false'}
49+
</td>
50+
</tr>
51+
<tr>
52+
<td align="right" style={{ ...paraGraphDefaultStyle }}>
53+
Submitted:
54+
</td>
55+
<td
56+
style={{
57+
color: formState.isSubmitted
58+
? colors.green
59+
: colors.lightPink,
60+
...paraGraphDefaultStyle,
61+
}}
62+
>
63+
{formState.isSubmitted ? 'true' : 'false'}
64+
</td>
65+
</tr>
66+
<tr>
67+
<td align="right" style={{ ...paraGraphDefaultStyle }}>
68+
Count:
69+
</td>
70+
<td
71+
style={{
72+
color: formState.submitCount
73+
? colors.green
74+
: colors.lightPink,
75+
...paraGraphDefaultStyle,
76+
}}
77+
>
78+
{formState.submitCount}
79+
</td>
80+
</tr>
81+
<tr>
82+
<td
83+
align="right"
84+
style={{
85+
...paraGraphDefaultStyle,
86+
}}
87+
>
88+
Submitting:
89+
</td>
90+
<td
91+
style={{
92+
color: formState.isSubmitting
93+
? colors.green
94+
: colors.lightPink,
95+
...paraGraphDefaultStyle,
96+
}}
97+
>
98+
{formState.isSubmitting ? 'true' : 'false'}
99+
</td>
100+
</tr>
101+
</tbody>
102+
</table>
103+
)}
104+
/>
91105
<Button
92106
style={{
93107
margin: 0,

‎src/header.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@ const Header = ({ setVisible, control }: Props) => {
2323
>
2424
<p
2525
style={{
26+
...paraGraphDefaultStyle,
2627
margin: 0,
2728
padding: 0,
28-
fontWeight: 600,
29-
...paraGraphDefaultStyle,
29+
fontWeight: 400,
30+
fontSize: 12,
3031
}}
3132
>
3233
<span
@@ -37,7 +38,7 @@ const Header = ({ setVisible, control }: Props) => {
3738
>
3839
■
3940
</span>{' '}
40-
RHF DevTools
41+
React Hook Form
4142
</p>
4243
<CircleButton title="Close dev panel" onClick={() => setVisible(false)}>
4344
✕

‎src/panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default ({ control, control: { fieldsRef } }: { control: Control }) => {
5454
title="Update values and state the form"
5555
onClick={() => setData({})}
5656
>
57-
♺ UPDATE
57+
♺ REFRESH
5858
</Button>
5959
<Button
6060
style={{

‎src/panelTable.tsx‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,18 @@ const PanelTable = ({
7171
>
7272
<Table
7373
style={{
74-
padding: '10px 10px 10px',
74+
padding: '5px 8px',
7575
width: '100%',
7676
transition: '.3s all',
7777
borderLeft: `2px solid ${
7878
hasError ? colors.secondary : colors.buttonBlue
7979
}`,
80+
background: 'none',
8081
}}
8182
>
8283
<thead>
8384
<tr>
84-
<td valign="top" style={{ width: 100, lineHeight: '22px' }}>
85+
<td valign="top" style={{ width: 85, lineHeight: '22px' }}>
8586
<Button
8687
onClick={() => setCollapse(!collapse)}
8788
title="Toggle field table"
@@ -90,11 +91,11 @@ const PanelTable = ({
9091
borderRadius: 2,
9192
padding: '3px 5px',
9293
display: 'inline-block',
93-
fontSize: 10,
94-
lineHeight: '12px',
94+
fontSize: 9,
95+
lineHeight: '13px',
9596
width: 20,
9697
textAlign: 'center',
97-
marginRight: 10,
98+
marginRight: 8,
9899
}}
99100
>
100101
{collapse ? '+' : '-'}
@@ -111,10 +112,10 @@ const PanelTable = ({
111112
borderRadius: 2,
112113
padding: '3px 5px',
113114
display: 'inline-block',
114-
fontSize: 10,
115-
lineHeight: '12px',
115+
fontSize: 9,
116+
lineHeight: '13px',
116117
textAlign: 'center',
117-
marginRight: 10,
118+
width: 'calc(100% - 30px)',
118119
...(isNative
119120
? {}
120121
: { cursor: 'not-allowed', background: colors.lightBlue }),
@@ -126,17 +127,20 @@ const PanelTable = ({
126127
<td
127128
style={{
128129
display: 'block',
129-
maxWidth: 100,
130+
maxWidth: 140,
130131
}}
131132
>
132133
<p
133134
style={{
134135
margin: 0,
135136
padding: 0,
137+
top: 0,
138+
position: 'relative',
136139
whiteSpace: 'nowrap',
137140
overflow: 'hidden',
138141
textOverflow: 'ellipsis',
139142
...paraGraphDefaultStyle,
143+
lineHeight: '24px',
140144
}}
141145
title={name}
142146
>
@@ -240,7 +244,16 @@ const PanelTable = ({
240244
...paraGraphDefaultStyle,
241245
}}
242246
>
243-
<p title={value}>{value}</p>
247+
<p
248+
title={value}
249+
style={{
250+
...paraGraphDefaultStyle,
251+
margin: 0,
252+
padding: 0,
253+
}}
254+
>
255+
{value}
256+
</p>
244257
</td>
245258
</tr>
246259
)}

‎src/styled.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
22
import colors from './colors';
33

44
export const paraGraphDefaultStyle = {
5-
fontSize: 14,
6-
lineHeight: '22px',
5+
fontSize: 13,
6+
lineHeight: '20px',
77
};
88

99
const Button = styled.button<{ hideBackground?: boolean }>`

0 commit comments

Comments
 (0)