feat(theme): implementing ThemeProvider and withTheme

Author: malashkevich

src/framework/theme/index.ts

@@ -1,5 +1,5 @@
 export const description = '@rk-kit/theme';
-import getThemeProvider from './primitives/themeProvider';
-import withTheme from './primitives/themeConsumer';
+import ThemeProvider from './primitives/themeProvider';
+import {withTheme, WithThemeProps} from './primitives/themeConsumer';
 
-export {getThemeProvider, withTheme};
+export {ThemeProvider, withTheme, WithThemeProps};

src/framework/theme/primitives/createContext.ts

@@ -2,4 +2,4 @@ import React from 'react';
 
 const {Consumer, Provider} = React.createContext({});
 
-export {Consumer, Provider};
+export {Consumer, Provider};

src/framework/theme/primitives/themeConsumer.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
 import {Consumer} from './createContext';
 
-function withTheme(Component) {
-  return (
-    <Consumer>
-      {theme => {
-        return React.cloneElement(Component, {theme});
-      }}
-    </Consumer>
-  )
+export interface WithThemeProps {
+  theme: Object;
 }
 
-export default withTheme;
+export function withTheme<T extends WithThemeProps>(Component: React.ComponentType<T>) {
+
+  type TExcept = Exclude<keyof T, keyof WithThemeProps>;
+  type ForwardedProps = Pick<T, TExcept>;
+
+  return class WithTheme extends React.Component<ForwardedProps, {}> {
+
+    render() {
+      return (
+        <Consumer>
+          {theme => <Component {...this.props} theme={theme}/>}
+        </Consumer>
+      );
+    }
+  };
+}

src/framework/theme/primitives/themeProvider.tsx

@@ -2,25 +2,23 @@ import React from 'react';
 import {Provider} from './createContext';
 
 interface PropsType {
-  children: JSX.Element,
-  theme: Object
+  children: JSX.Element;
+  theme: Object;
 }
 
-function getThemeProvider() {
-  return class ThemeProvider extends React.PureComponent<PropsType> {
+class ThemeProvider extends React.PureComponent<PropsType> {
 
-    static defaultProps = {
-      theme: {}
-    };
+  static defaultProps = {
+    theme: {},
+  };
 
-    render() {
-      return (
-        <Provider value={this.props.theme}>
-          {this.props.children}
-        </Provider>
-      )
-    }
+  render() {
+    return (
+      <Provider value={this.props.theme}>
+        {this.props.children}
+      </Provider>
+    );
   }
 }
 
-export default getThemeProvider;
+export default ThemeProvider;

src/framework/theme/theme.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {View} from 'react-native';
+import * as UITest from 'react-native-testing-library';
+import {ThemeProvider, withTheme, WithThemeProps} from './index';
+
+interface TestProps extends WithThemeProps {
+  name: string;
+}
+
+class TestComponent extends React.Component<TestProps> {
+  render() {
+    const {theme, name} = this.props;
+
+    return (
+      <View/>
+    );
+  }
+}
+
+it('Checks simple Provider/Consumer theme pass', async () => {
+  const ThemedComponent = withTheme(TestComponent);
+
+  const component = UITest.render(
+    <ThemeProvider>
+      <ThemedComponent name={'test'}/>
+    </ThemeProvider>,
+  );
+
+  // TODO: finish test
+});
+