Improved DevTools context test harness (#19878)
Brian Vaughn committed
Sep 21, 2020 at 16:39 UTC
ded2a83ebfb7d0d755b0527bb221fa1a2b19b3b8
1 file changed
+52
-23
packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
+52
-23
@@ -8,11 +8,19 @@
8
*/
9
10
import * as React from 'react';
11
-import {createContext, Component, Fragment, useContext} from 'react';
11
+import {createContext, Component, useContext} from 'react';
12
import PropTypes from 'prop-types';
13
14
function someNamedFunction() {}
15
16
+function formatContextForDisplay(name, value) {
17
+ return (
18
+ <li>
19
+ {name}: <pre>{JSON.stringify(value, null, 2)}</pre>
20
+ </li>
21
+ );
22
+}
23
+
24
const contextData = {
25
array: ['first', 'second', 'third'],
26
bool: true,
@@ -61,7 +69,7 @@ class LegacyContextConsumer extends Component<any> {
69
};
70
71
render() {
64
- return null;
72
+ return formatContextForDisplay('LegacyContextConsumer', this.context);
73
}
74
}
75
@@ -88,34 +96,55 @@ class ModernContextType extends Component<any> {
96
static contextType = ModernContext;
97
98
render() {
91
- return null;
99
+ return formatContextForDisplay('ModernContextType', this.context);
100
}
101
}
102
103
function FunctionalContextConsumer() {
96
- useContext(StringContext);
97
- return null;
104
+ const value = useContext(StringContext);
105
+ return formatContextForDisplay('FunctionalContextConsumer', value);
106
}
107
108
export default function Contexts() {
109
return (
102
- <Fragment>
103
- <LegacyContextProvider>
104
- <LegacyContextConsumer />
105
- </LegacyContextProvider>
106
- <ModernContext.Provider value={contextData}>
107
- <ModernContext.Consumer>{value => null}</ModernContext.Consumer>
108
- <ModernContextType />
109
- </ModernContext.Provider>
110
- <FunctionalContextConsumer />
111
- <ArrayContext.Consumer>{value => null}</ArrayContext.Consumer>
112
- <BoolContext.Consumer>{value => null}</BoolContext.Consumer>
113
- <FuncContext.Consumer>{value => null}</FuncContext.Consumer>
114
- <NumberContext.Consumer>{value => null}</NumberContext.Consumer>
115
- <StringContext.Consumer>{value => null}</StringContext.Consumer>
116
- <SymbolContext.Consumer>{value => null}</SymbolContext.Consumer>
117
- <NullContext.Consumer>{value => null}</NullContext.Consumer>
118
- <UndefinedContext.Consumer>{value => null}</UndefinedContext.Consumer>
119
- </Fragment>
110
+ <div>
111
+ <h1>Contexts</h1>
112
+ <ul>
113
+ <LegacyContextProvider>
114
+ <LegacyContextConsumer />
115
+ </LegacyContextProvider>
116
+ <ModernContext.Provider value={contextData}>
117
+ <ModernContext.Consumer>
118
+ {value => formatContextForDisplay('ModernContext.Consumer', value)}
119
+ </ModernContext.Consumer>
120
+ <ModernContextType />
121
+ </ModernContext.Provider>
122
+ <FunctionalContextConsumer />
123
+ <ArrayContext.Consumer>
124
+ {value => formatContextForDisplay('ArrayContext.Consumer', value)}
125
+ </ArrayContext.Consumer>
126
+ <BoolContext.Consumer>
127
+ {value => formatContextForDisplay('BoolContext.Consumer', value)}
128
+ </BoolContext.Consumer>
129
+ <FuncContext.Consumer>
130
+ {value => formatContextForDisplay('FuncContext.Consumer', value)}
131
+ </FuncContext.Consumer>
132
+ <NumberContext.Consumer>
133
+ {value => formatContextForDisplay('NumberContext.Consumer', value)}
134
+ </NumberContext.Consumer>
135
+ <StringContext.Consumer>
136
+ {value => formatContextForDisplay('StringContext.Consumer', value)}
137
+ </StringContext.Consumer>
138
+ <SymbolContext.Consumer>
139
+ {value => formatContextForDisplay('SymbolContext.Consumer', value)}
140
+ </SymbolContext.Consumer>
141
+ <NullContext.Consumer>
142
+ {value => formatContextForDisplay('NullContext.Consumer', value)}
143
+ </NullContext.Consumer>
144
+ <UndefinedContext.Consumer>
145
+ {value => formatContextForDisplay('UndefinedContext.Consumer', value)}
146
+ </UndefinedContext.Consumer>
147
+ </ul>
148
+ </div>
149
);
150
}