Add placeholders to clarify between empty string, null, and undefined
Brian Vaughn committed
Feb 28, 2019 at 10:46 UTC
bffa72c6013383061084760f6109d16802e2ae73
3 files changed
+28
-12
shells/dev/app/InspectableElements/Contexts.js
+6
@@ -13,6 +13,8 @@ const contextData = {
13
object: { outer: { inner: {} } },
14
string: 'abc',
15
symbol: Symbol.for('symbol'),
16
+ null: null,
17
+ undefined: undefined,
18
};
19
20
class LegacyContextProvider extends Component<any> {
@@ -24,6 +26,8 @@ class LegacyContextProvider extends Component<any> {
26
object: PropTypes.object,
27
string: PropTypes.string,
28
symbol: PropTypes.symbol,
29
+ null: PropTypes.any,
30
+ undefined: PropTypes.any,
31
};
32
33
getChildContext() {
@@ -44,6 +48,8 @@ class LegacyContextConsumer extends Component<any> {
48
object: PropTypes.object,
49
string: PropTypes.string,
50
symbol: PropTypes.symbol,
51
+ null: PropTypes.any,
52
+ undefined: PropTypes.any,
53
};
54
55
render() {
shells/dev/app/InspectableElements/NestedProps.js
+12
-12
@@ -2,26 +2,26 @@
2
3
import React from 'react';
4
5
+const object = {
6
+ string: 'abc',
7
+ longString: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890',
8
+ emptyString: '',
9
+ number: 123,
10
+ boolean: true,
11
+ undefined: undefined,
12
+ null: null,
13
+};
14
+
15
export default function ObjectProps() {
16
return (
17
<ChildComponent
18
object={{
19
outer: {
10
- inner: {
11
- string: 'abc',
12
- number: 123,
13
- boolean: true,
14
- },
20
+ inner: object,
21
},
22
}}
23
array={['first', 'second', 'third']}
18
- objectInArray={[
19
- {
20
- string: 'abc',
21
- number: 123,
22
- boolean: true,
23
- },
24
- ]}
24
+ objectInArray={[object]}
25
arrayInObject={{ array: ['first', 'second', 'third'] }}
26
/>
27
);
src/devtools/views/EditableValue.js
+10
@@ -86,6 +86,15 @@ export default function EditableValue({
86
inputValue = editableValue == null ? '' : editableValue;
87
}
88
89
+ let placeholder = '';
90
+ if (value === null) {
91
+ placeholder = '(null)';
92
+ } else if (value === undefined) {
93
+ placeholder = '(undefined)';
94
+ } else if (dataType === 'string') {
95
+ placeholder = '(string)';
96
+ }
97
+
98
return (
99
<Fragment>
100
{dataType === 'boolean' && (
@@ -105,6 +114,7 @@ export default function EditableValue({
114
className={styles.Input}
115
onChange={handleChange}
116
onKeyDown={handleKeyDown}
117
+ placeholder={placeholder}
118
ref={inputRef}
119
type={type}
120
value={inputValue}