amirho/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2026-02-23 20:23:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved DevTools context test harness (#19878)

Browse Source
This commit is contained in:
Brian Vaughn
2020-09-21 16:39:53 -04:00
committed by GitHub
parent 6d73063ddf
commit ded2a83ebf
1 changed files with 52 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/react-devtools-shell/src/app/InspectableElements/Contexts.js vendored
View File

@@ -8,11 +8,19 @@
*/
import * as React from 'react';
import {createContext, Component, Fragment, useContext} from 'react';
import {createContext, Component, useContext} from 'react';
import PropTypes from 'prop-types';
function someNamedFunction() {}
function formatContextForDisplay(name, value) {
return (
<li>
{name}: <pre>{JSON.stringify(value, null, 2)}</pre>
</li>
);
}
const contextData = {
array: ['first', 'second', 'third'],
bool: true,
@@ -61,7 +69,7 @@ class LegacyContextConsumer extends Component<any> {
};
render() {
return null;
return formatContextForDisplay('LegacyContextConsumer', this.context);
}
}
@@ -88,34 +96,55 @@ class ModernContextType extends Component<any> {
static contextType = ModernContext;
render() {
return null;
return formatContextForDisplay('ModernContextType', this.context);
}
}
function FunctionalContextConsumer() {
useContext(StringContext);
return null;
const value = useContext(StringContext);
return formatContextForDisplay('FunctionalContextConsumer', value);
}
export default function Contexts() {
return (
<Fragment>
<LegacyContextProvider>
<LegacyContextConsumer />
</LegacyContextProvider>
<ModernContext.Provider value={contextData}>
<ModernContext.Consumer>{value => null}</ModernContext.Consumer>
<ModernContextType />
</ModernContext.Provider>
<FunctionalContextConsumer />
<ArrayContext.Consumer>{value => null}</ArrayContext.Consumer>
<BoolContext.Consumer>{value => null}</BoolContext.Consumer>
<FuncContext.Consumer>{value => null}</FuncContext.Consumer>
<NumberContext.Consumer>{value => null}</NumberContext.Consumer>
<StringContext.Consumer>{value => null}</StringContext.Consumer>
<SymbolContext.Consumer>{value => null}</SymbolContext.Consumer>
<NullContext.Consumer>{value => null}</NullContext.Consumer>
<UndefinedContext.Consumer>{value => null}</UndefinedContext.Consumer>
</Fragment>
<div>
<h1>Contexts</h1>
<ul>
<LegacyContextProvider>
<LegacyContextConsumer />
</LegacyContextProvider>
<ModernContext.Provider value={contextData}>
<ModernContext.Consumer>
{value => formatContextForDisplay('ModernContext.Consumer', value)}
</ModernContext.Consumer>
<ModernContextType />
</ModernContext.Provider>
<FunctionalContextConsumer />
<ArrayContext.Consumer>
{value => formatContextForDisplay('ArrayContext.Consumer', value)}
</ArrayContext.Consumer>
<BoolContext.Consumer>
{value => formatContextForDisplay('BoolContext.Consumer', value)}
</BoolContext.Consumer>
<FuncContext.Consumer>
{value => formatContextForDisplay('FuncContext.Consumer', value)}
</FuncContext.Consumer>
<NumberContext.Consumer>
{value => formatContextForDisplay('NumberContext.Consumer', value)}
</NumberContext.Consumer>
<StringContext.Consumer>
{value => formatContextForDisplay('StringContext.Consumer', value)}
</StringContext.Consumer>
<SymbolContext.Consumer>
{value => formatContextForDisplay('SymbolContext.Consumer', value)}
</SymbolContext.Consumer>
<NullContext.Consumer>
{value => formatContextForDisplay('NullContext.Consumer', value)}
</NullContext.Consumer>
<UndefinedContext.Consumer>
{value => formatContextForDisplay('UndefinedContext.Consumer', value)}
</UndefinedContext.Consumer>
</ul>
</div>
);
}