Skip to content

Commit de42cd0

Browse files
bluebill1049bluebill1049
authored
Fix 43 44 (#45)
* fix #43 #43 issues * fix #43 #44
1 parent 3c027e2 commit de42cd0

File tree

6 files changed

+40
-29
lines changed

6 files changed

+40
-29
lines changed

‎src/__snapshots__/devTool.test.tsx.snap‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports[`DevTool render correctly 1`] = `
2222
RHF DevTools
2323
</p>
2424
<button
25-
class="css-7zizgu"
25+
class="css-2hkk94"
2626
title="Close dev panel"
2727
type="button"
2828
>
@@ -36,15 +36,15 @@ exports[`DevTool render correctly 1`] = `
3636
style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 28px 28px;"
3737
>
3838
<button
39-
class="css-4vv12s"
39+
class="css-1hixbz5"
4040
style="border-right: 1px solid #0e101c; text-transform: none; font-size: 11px; line-height: 1;"
4141
title="Update values and state the form"
4242
type="button"
4343
>
4444
♺ UPDATE
4545
</button>
4646
<button
47-
class="css-4vv12s"
47+
class="css-1hixbz5"
4848
style="border-right: 1px solid #0e101c; text-transform: none; font-size: 11px; line-height: 1;"
4949
title="Toggle entire fields"
5050
type="button"
@@ -79,15 +79,15 @@ exports[`DevTool render correctly 1`] = `
7979
valign="top"
8080
>
8181
<button
82-
class="css-4vv12s"
82+
class="css-1hixbz5"
8383
style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
8484
title="Toggle field table"
8585
type="button"
8686
>
8787
+
8888
</button>
8989
<button
90-
class="css-4vv12s"
90+
class="css-1hixbz5"
9191
style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px;"
9292
title="Scroll into view"
9393
type="button"
@@ -99,7 +99,8 @@ exports[`DevTool render correctly 1`] = `
9999
style="display: block; max-width: 100px;"
100100
>
101101
<p
102-
style="margin: 0px; padding: 0px; font-size: 14px; line-height: 22px;"
102+
style="margin: 0px; padding: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 22px;"
103+
title="test"
103104
>
104105
test
105106
</p>
@@ -126,15 +127,15 @@ exports[`DevTool render correctly 1`] = `
126127
valign="top"
127128
>
128129
<button
129-
class="css-4vv12s"
130+
class="css-1hixbz5"
130131
style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
131132
title="Toggle field table"
132133
type="button"
133134
>
134135
+
135136
</button>
136137
<button
137-
class="css-4vv12s"
138+
class="css-1hixbz5"
138139
style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px;"
139140
title="Scroll into view"
140141
type="button"
@@ -146,7 +147,8 @@ exports[`DevTool render correctly 1`] = `
146147
style="display: block; max-width: 100px;"
147148
>
148149
<p
149-
style="margin: 0px; padding: 0px; font-size: 14px; line-height: 22px;"
150+
style="margin: 0px; padding: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 22px;"
151+
title="test2"
150152
>
151153
test2
152154
</p>
@@ -161,7 +163,7 @@ exports[`DevTool render correctly 1`] = `
161163
style="align-self: end;"
162164
>
163165
<button
164-
class="css-4vv12s"
166+
class="css-1hixbz5"
165167
style="margin: 0px; width: 100%; padding: 8px 10px; text-transform: none; font-size: 12px; line-height: 14px;"
166168
title="Toggle form state panel"
167169
type="button"

‎src/__snapshots__/header.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports[`header should render correct color when form pass 1`] = `
1616
RHF DevTools
1717
</p>
1818
<button
19-
class="css-7zizgu"
19+
class="css-2hkk94"
2020
title="Close dev panel"
2121
type="button"
2222
>
@@ -42,7 +42,7 @@ exports[`header should render correct when form failed 1`] = `
4242
RHF DevTools
4343
</p>
4444
<button
45-
class="css-7zizgu"
45+
class="css-2hkk94"
4646
title="Close dev panel"
4747
type="button"
4848
>

‎src/__snapshots__/panelTable.test.tsx.snap‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ exports[`PanelTable should render collapsed 1`] = `
1616
valign="top"
1717
>
1818
<button
19-
class="css-4vv12s"
19+
class="css-1hixbz5"
2020
style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; width: 20px; text-align: center; margin-right: 10px;"
2121
title="Toggle field table"
2222
type="button"
2323
>
2424
+
2525
</button>
2626
<button
27-
class="css-4vv12s"
27+
class="css-1hixbz5"
2828
style="border: 1px solid #516391; border-radius: 2px; padding: 3px 5px; display: inline-block; font-size: 10px; line-height: 12px; text-align: center; margin-right: 10px; cursor: not-allowed; background: rgb(81, 99, 145);"
2929
title="Scroll into view"
3030
type="button"
@@ -36,7 +36,8 @@ exports[`PanelTable should render collapsed 1`] = `
3636
style="display: block; max-width: 100px;"
3737
>
3838
<p
39-
style="margin: 0px; padding: 0px; font-size: 14px; line-height: 22px;"
39+
style="margin: 0px; padding: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 22px;"
40+
title="test"
4041
>
4142
test
4243
</p>

‎src/devToolUI.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export const DevToolUI = ({ control }: { control: Control }) => {
6060
{!state.visible && (
6161
<Button
6262
title="Show dev panel"
63+
hideBackground
6364
style={{
6465
position: 'fixed',
6566
zIndex: 99999,

‎src/panelTable.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import { Animate } from 'react-simple-animate';
33
import isUndefined from 'lodash/isUndefined';
44
import isObject from 'lodash/isObject';
5+
import get from 'lodash/get';
56
import colors from './colors';
67
import { Button, Table, paraGraphDefaultStyle } from './styled';
78

@@ -44,23 +45,23 @@ const PanelTable = ({
4445
setCollapse(!collapseAll);
4546
}, [collapseAll]);
4647

47-
let value = fieldsValues ? fieldsValues[name] : '';
48+
let value = fieldsValues ? get(fieldsValues, name) : '';
4849

49-
if (fieldsValues) {
50-
if (isObject(fieldsValues[name])) {
50+
if (!isUndefined(value)) {
51+
if (isObject(value)) {
5152
try {
5253
value = (
5354
<pre style={{ margin: 0 }}>
5455
<code style={{ fontSize: 12 }}>
55-
{JSON.stringify(fieldsValues[name], null, 2)}
56+
{JSON.stringify(value, null, 2)}
5657
</code>
5758
</pre>
5859
);
5960
} catch {
6061
value = <span>[Nested Object]</span>;
6162
}
62-
} else if (typeof fieldsValues[name] !== 'string') {
63-
value = String(fieldsValues[name]);
63+
} else if (typeof value !== 'string') {
64+
value = String(value);
6465
}
6566
}
6667

@@ -136,8 +137,12 @@ const PanelTable = ({
136137
style={{
137138
margin: 0,
138139
padding: 0,
140+
whiteSpace: 'nowrap',
141+
overflow: 'hidden',
142+
textOverflow: 'ellipsis',
139143
...paraGraphDefaultStyle,
140144
}}
145+
title={name}
141146
>
142147
{name}
143148
</p>
@@ -218,7 +223,7 @@ const PanelTable = ({
218223
</td>
219224
</tr>
220225
)}
221-
{fieldsValues && !isUndefined(fieldsValues[name]) && (
226+
{!isUndefined(value) && (
222227
<tr>
223228
<td
224229
align="right"

‎src/styled.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ export const paraGraphDefaultStyle = {
66
lineHeight: '22px',
77
};
88

9-
const Button = styled.button`
9+
const Button = styled.button<{ hideBackground?: boolean }>`
1010
appearance: none;
1111
margin: 0;
1212
border: 0;
1313
color: white;
14-
padding: 5px;
15-
border-radius: 0;
16-
background: ${colors.blue};
14+
padding: 5px !important;
15+
border-radius: 0 !important;
16+
background: ${(props: { hideBackground?: boolean }) =>
17+
props.hideBackground ? `` : `${colors.blue} !important`};
1718
transition: 0.2s all;
1819
1920
&:hover {
@@ -27,13 +28,14 @@ const CircleButton = styled(Button)`
2728
font-size: 14px;
2829
font-weight: bold;
2930
margin: 0 4px 0 auto;
30-
background: none;
31+
background: none !important;
3132
display: flex;
3233
width: 25px;
3334
height: 25px;
3435
justify-content: center;
35-
line-height: 14px;
36-
border-radius: 50%;
36+
line-height: 14px !important;
37+
border-radius: 50% !important;
38+
padding: 0 !important;
3739
transition: 0.2s all;
3840
3941
&:hover {

0 commit comments

Comments
 (0)