allow set forced theme prop for component using ThemeManager (#742)

Author: ethanshar

src/commons/__tests__/modifiers.spec.js

@@ -329,6 +329,11 @@ describe('Modifiers', () => {
   });
 
   describe('getThemeProps', () => {
+    beforeEach(() => {
+      ThemeManager.setComponentTheme('SampleComponent', undefined);
+      ThemeManager.setComponentForcedTheme('SampleComponent', undefined);
+    });
+
     it('should return props values from the Theme Manager if were defined', () => {
       ThemeManager.setComponentTheme('SampleComponent', {prop1: 'themeValue'});
       expect(uut.getThemeProps.call(SampleComponent, {})).toEqual({prop1: 'themeValue'});
@@ -349,5 +354,10 @@ describe('Modifiers', () => {
       expect(uut.getThemeProps.call(SampleComponent, {test: true})).toEqual({prop1: 'yes', test: true});
       expect(uut.getThemeProps.call(SampleComponent, {test: false})).toEqual({prop1: 'no', test: false});
     });
+    
+    it('should prioritize forced theme props over user props', () => {
+      ThemeManager.setComponentForcedTheme('SampleComponent', props => ({foo: 'forced'}));
+      expect(uut.getThemeProps.call(SampleComponent, {foo: 'user-value', other: 'other'})).toEqual({foo: 'forced', other: 'other'});
+    });
   });
 });

src/commons/modifiers.ts

@@ -272,13 +272,21 @@ export function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]) {
 export function getThemeProps(props = this.props, context = this.context) {
   //@ts-ignore
   const componentName = this.displayName || this.constructor.displayName || this.constructor.name;
+
   let themeProps;
   if (_.isFunction(ThemeManager.components[componentName])) {
     themeProps = ThemeManager.components[componentName](props, context);
   } else {
     themeProps = ThemeManager.components[componentName];
   }
-  return {...themeProps, ...props};
+
+  let forcedThemeProps;
+  if (_.isFunction(ThemeManager.forcedThemeComponents[componentName])) {
+    forcedThemeProps = ThemeManager.forcedThemeComponents[componentName](props, context);
+  } else {
+    forcedThemeProps = ThemeManager.forcedThemeComponents[componentName];
+  }
+  return {...themeProps, ...props, ...forcedThemeProps};
 }
 
 export function generateModifiersStyle(options = {

src/style/themeManager.ts

@@ -20,6 +20,10 @@ export class ThemeManager {
     } as Extendable
   };
 
+  forcedTheme = {
+    components: {} as Extendable
+  }
+
   setTheme(overrides: Dictionary<string>) {
     this.theme = _.merge(this.theme, overrides);
   }
@@ -49,10 +53,22 @@ export class ThemeManager {
     }
   }
 
+  setComponentForcedTheme(componentName: string, overrides: Dictionary<string> | Function) {
+    if (_.isFunction(overrides)) {
+      this.forcedTheme.components[componentName] = overrides;
+    } else {
+      this.forcedTheme.components[componentName] = _.cloneDeep(overrides);
+    }
+  }
+
   get components() {
     return this.theme.components;
   }
 
+  get forcedThemeComponents() {
+    return this.forcedTheme.components;
+  }
+
   get primaryColor() {
     return this.theme.primaryColor;
   }