Merge pull request #27994 from iRoachie/material-ui

Add changes for theme context

types/react-native-material-ui/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-native-material-ui 1.19
+// Type definitions for react-native-material-ui 1.30
 // Project: https://github.com/xotahal/react-native-material-ui
 // Definitions by: Kyle Roach <https://github.com/iRoachie>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -490,16 +490,6 @@ export interface RippleFeedbackProps {
  */
 export class RippleFeedback extends Component<RippleFeedbackProps, any> {}
 
-export interface ThemeProviderProps {
-    uiTheme: {};
-    children: JSX.Element;
-}
-
-/**
- * @see https://github.com/xotahal/react-native-material-ui/blob/master/src/styles/ThemeProvider.react.js
- */
-export class ThemeProvider extends Component<ThemeProviderProps, any> {}
-
 export interface Color {
     red50: string;
     red100: string;
@@ -762,3 +752,23 @@ export interface Color {
 }
 
 export const COLOR: Color;
+
+export interface ThemeProps {
+    theme: {};
+}
+
+export interface ThemeProviderProps {
+    value: {};
+    children: React.ReactElement<any>;
+}
+
+export interface ThemeConsumerProps {
+    children(props: ThemeProps): React.ReactElement<any>;
+}
+
+export namespace ThemeContext {
+    class Provider extends Component<ThemeProviderProps> {}
+    class Consumer extends Component<ThemeConsumerProps> {}
+}
+
+export function getTheme(theme: {}): {};

types/react-native-material-ui/react-native-material-ui-tests.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native';
 import {
     ActionButton,
     Avatar,
-    ThemeProvider,
+    ThemeContext,
     COLOR,
     Badge,
     Button,
@@ -12,7 +12,8 @@ import {
     Dialog,
     DialogDefaultActions,
     BottomNavigation,
-    Toolbar
+    Toolbar,
+    getTheme
 } from 'react-native-material-ui';
 
 const theme = {
@@ -24,7 +25,7 @@ const theme = {
 };
 
 const Example = () =>
-    <ThemeProvider uiTheme={theme}>
+    <ThemeContext.Provider value={getTheme(theme)}>
         <View>
             <ActionButton style={{ positionContainer: { marginBottom: 3 }}} />
             <ActionButton icon="done" />
@@ -40,12 +41,14 @@ const Example = () =>
             <Button text="I'm a button" />
 
             <Card>
-                <Text>Hello world!</Text>
+                <ThemeContext.Consumer>
+                    {theme => <Text>Hello world!</Text> }
+                </ThemeContext.Consumer>
             </Card>
 
             <Checkbox label="Select me" value="chicken" onCheck={a => console.log(a)}/>
         </View>
-    </ThemeProvider>;
+    </ThemeContext.Provider>;
 
 const DialogExample = () =>
     <Dialog>