1
1
import React from 'react' ;
2
2
3
- const ThemeContext = React . createContext ( 'mxTheme' ) ;
4
3
const { themeShape } = require ( '../constants/App' ) ;
5
4
6
5
/**
@@ -10,35 +9,48 @@ const { themeShape } = require('../constants/App');
10
9
*/
11
10
export class ThemeProvider extends React . Component {
12
11
static propTypes = { theme : themeShape }
12
+ static childContextTypes = { mxTheme : themeShape }
13
+
14
+ getChildContext ( ) {
15
+ return { mxTheme : this . props . theme } ;
16
+ }
13
17
14
18
render ( ) {
15
- return (
16
- < ThemeContext . Provider value = { this . props . theme } >
17
- { this . props . children }
18
- </ ThemeContext . Provider >
19
- ) ;
19
+ return this . props . children ;
20
20
}
21
21
}
22
22
23
23
/**
24
- * `withTheme` injects the `theme` from `ThemeProvider` as a prop into `Component`.
25
- *
26
- * `theme` can still be provided as a prop to the themed component to override the theme.
24
+ * ThemeContext is for use inside components that need access
25
+ * to the theme.
27
26
*/
27
+ class ThemeContext extends React . Component {
28
+ static contextTypes = {
29
+ mxTheme : themeShape
30
+ }
31
+
32
+ render ( ) {
33
+ return this . props . children ( this . context . mxTheme ) ;
34
+ }
35
+ }
36
+
37
+ /**
38
+ * `withTheme` injects the `theme` from `ThemeProvider` as a prop into `Component`.
39
+ *
40
+ * `theme` can still be provided as a prop to the themed component to override the theme.
41
+ */
28
42
export function withTheme ( Component ) {
29
- // "ref" is provided by React.forwardRef
30
- function ThemedComponent ( props , ref ) {
43
+ function ThemedComponent ( props ) {
31
44
return (
32
- < ThemeContext . Consumer >
45
+ < ThemeContext >
33
46
{ theme => (
34
- < Component { ...props } ref = { ref } theme = { props . theme || theme } />
47
+ < Component { ...props } theme = { props . theme || theme } />
35
48
) }
36
- </ ThemeContext . Consumer >
49
+ </ ThemeContext >
37
50
) ;
38
51
}
39
52
ThemedComponent . propTypes = { theme : themeShape } ;
40
53
ThemedComponent . displayName = `withTheme(${ Component . displayName || Component . name } )` ;
41
54
42
- // pass "ref" to ThemedComponent
43
- return React . forwardRef ( ThemedComponent ) ;
55
+ return ThemedComponent ;
44
56
}
0 commit comments