fix(🎨 Themes): Bug fixes

BlueBaseJS · Dec 16, 2018 · 2627b47 · 2627b47
1 parent d5b15c7
commit 2627b47
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 14 deletions.
diff --git a/src/components/BlueBaseApp/__tests__/__snapshots__/BlueBaseApp.test.tsx.snap b/src/components/BlueBaseApp/__tests__/__snapshots__/BlueBaseApp.test.tsx.snap
@@ -7,12 +7,21 @@ exports[`BlueBaseApp Snapshot BlueBaseApp component 1`] = `
 `;
 
 exports[`BlueBaseApp Snapshot BlueBaseApp component after complete rendering 1`] = `
-<View>
-  <View>
+<View
+  styles={Object {}}
+>
+  <View
+    styles={Object {}}
+  >
     <Text
       style={
         Array [
-          undefined,
+          Object {
+            "color": "rgba(0, 0, 0, 0.87)",
+            "fontFamily": "Roboto",
+            "fontSize": 16,
+            "fontWeight": "400",
+          },
           undefined,
         ]
       }

diff --git a/src/models/Theme/applyStyles.tsx b/src/models/Theme/applyStyles.tsx
@@ -47,7 +47,7 @@ export const applyStyles = (
 				<ThemeContext.Consumer children={(args?: { theme: ThemeValue }) => {
 
 					if(!args) {
-						return;
+						return React.createElement(Component, { ...rest });
 					}
 
 					const { theme } = args;

diff --git a/src/registries/ComponentRegistry.ts b/src/registries/ComponentRegistry.ts
@@ -3,8 +3,9 @@ import {
 	BlueBaseModuleRegistryInputItem,
 	BlueBaseModuleRegistryItem,
 } from './BlueBaseModuleRegistry';
-import { Thunk, getDefiniteBlueBaseModule, isBlueBaseModule } from '../utils';
+import { MaybeThunk, Thunk, getDefiniteBlueBaseModule, isBlueBaseModule } from '../utils';
 import { BlueBase } from '../BlueBase';
+import { ComponentStyles, applyStyles } from '../models';
 import { ItemCollection } from './Registry';
 import Loadable from 'react-loadable';
 import { ReactLoadableLoading } from '../components';
@@ -28,6 +29,7 @@ export interface ComponentSource {
 interface ComponentRegistryItemExtras {
 	hocs: Array<ComponentRegistryHocItem | ComponentRegistryHocItemWithArgs>,
 	source: ComponentSource,
+	styles: MaybeThunk<ComponentStyles>,
 	isAsync: boolean,
 }
 
@@ -73,12 +75,15 @@ export class ComponentRegistry extends BlueBaseModuleRegistry<ComponentRegistryI
 			throw Error(`Could not resolve any of the following components: [${keys.join(', ')}].`);
 		}
 
-		const rawComponent = item.value.isAsync
+		let rawComponent = item.value.isAsync
 			? Loadable({
 				loader: () => item.value,
 				loading: ReactLoadableLoading,
 			})
-			: item.value.module;
+			: item.value.module as React.ComponentType<any>;
+
+		// Add withStyles HOC
+		rawComponent = applyStyles(item.key, rawComponent, item.styles);
 
 		const hocs = item.hocs
 			.map(hoc => (Array.isArray(hoc) ? hoc[0](hoc[1]) : hoc));
@@ -108,6 +113,32 @@ export class ComponentRegistry extends BlueBaseModuleRegistry<ComponentRegistryI
 	// 	// TODO:
 	// }
 
+	// TODO: Add docs
+	public setStyles(key: string, styles: MaybeThunk<ComponentStyles>) {
+		const item = this.get(key);
+
+		if (!item) {
+			throw Error(
+				`Cannot set styles "${key}" component. Reason: Component not found.`
+			);
+		}
+
+		item.styles = styles;
+
+		this.data = this.data.set(key, item);
+	}
+
+	// TODO: Add docs
+	public getStyles(key: string): MaybeThunk<ComponentStyles> | undefined {
+		const item = this.get(key);
+
+		if (!item) {
+			return;
+		}
+
+		return item.styles;
+	}
+
 	protected createItem(key: string, partial: any): ComponentRegistryItem {
 
 		const value = getDefiniteBlueBaseModule(partial.value);

diff --git a/src/registries/__stories__/ComponentRegistry.stories.tsx b/src/registries/__stories__/ComponentRegistry.stories.tsx
@@ -1,4 +1,4 @@
-import { BlueBase, BlueBaseConsumer } from '../../..';
+import { BlueBase, BlueBaseConsumer } from '../../';
 import { Text, View } from 'react-native';
 import React from 'react';
 import storiesOf from '@bluebase/storybook-addon';

diff --git a/src/registries/__stories__/ThemeContext.stories.tsx b/src/registries/__stories__/ThemeContext.stories.tsx
@@ -1,5 +1,5 @@
 // tslint:disable:no-console
-import { BlueBase, BlueBaseConsumer } from '../../..';
+import { BlueBase, BlueBaseConsumer } from '../../';
 import React from 'react';
 import { ThemeDemo } from './ThemeDemo';
 import { ThemePicker } from './ThemePicker';

diff --git a/src/registries/__stories__/ThemePicker.tsx b/src/registries/__stories__/ThemePicker.tsx
@@ -1,4 +1,4 @@
-import { BlueBase, BlueBaseContext } from '../../..';
+import { BlueBase, BlueBaseContext } from '../../';
 import { ThemeContext, ThemeContextData } from '../../themes';
 import { Picker } from 'react-native';
 import React from 'react';

diff --git a/src/registries/__stories__/ThemedCard.tsx b/src/registries/__stories__/ThemedCard.tsx
@@ -1,4 +1,4 @@
-import { BlueBase, BlueBaseContext } from '../../..';
+import { BlueBase, BlueBaseContext } from '../../';
 import { TextStyle, ViewStyle } from 'react-native';
 import { MaybeThunk } from '../../utils';
 import React from 'react';

diff --git a/src/registries/__tests__/ComponentRegisty.test.tsx b/src/registries/__tests__/ComponentRegisty.test.tsx
@@ -67,10 +67,11 @@ describe('ComponentRegistry', () => {
 
 		it('should resolve a Promised component', async (done) => {
 			const BB = new BlueBase();
-			const Components = new ComponentRegistry(BB);
+			await BB.boot();
+			// const Components = new ComponentRegistry(BB);
 
-			await Components.register('Foo', { value: Promise.resolve(Text) as any });
-			const Foo = Components.resolve('Foo');
+			await BB.Components.register('Foo', { value: Promise.resolve(Text) as any });
+			const Foo = BB.Components.resolve('Foo');
 
 			const rendered = TestRenderer.create(<Foo>Some text</Foo>);
 			const foo = rendered.root.findByType(ReactLoadableLoading);