fix(*): mdTheme only on ngModels

Kamil Kisiela · Kamil Kisiela · commit fc11c9506047 · 2016-01-27T03:39:09.000+01:00
Closes #23
diff --git a/src/runs/index.js b/src/runs/index.js
@@ -1,4 +1,3 @@
 import className from './class-name';
-import theme from './theme';
 
-export default [className, theme];
+export default [className];
diff --git a/src/runs/theme.js b/src/runs/theme.js
diff --git a/src/types/checkbox/checkbox.html b/src/types/checkbox/checkbox.html
@@ -1,5 +1,5 @@
 <div>
-    <md-checkbox ng-model="model[options.key]">
+    <md-checkbox ng-model="model[options.key]" md-theme="{{to.theme}}">
         {{to.label}}
     </md-checkbox>
-</div>
+</div>
diff --git a/src/types/checkbox/checkbox.js b/src/types/checkbox/checkbox.js
@@ -13,7 +13,8 @@ export default (formlyConfigProvider) => {
     },
     apiCheck: (check) => ({
       templateOptions: {
-        disabled: check.bool.optional
+        disabled: check.bool.optional,
+        theme: check.string.optional
       }
     })
   });
diff --git a/src/types/chips/chips.html b/src/types/chips/chips.html
@@ -1 +1 @@
-<md-chips ng-model="model[options.key]" readonly="to.disabled"></md-chips>
+<md-chips ng-model="model[options.key]" readonly="to.disabled" md-theme="{{to.theme}}"></md-chips>
diff --git a/src/types/chips/chips.js b/src/types/chips/chips.js
@@ -39,7 +39,8 @@ export default (formlyConfigProvider) => {
         deleteHint: check.string.optional,
         onAdd: check.func.optional,
         onRemove: check.func.optional,
-        onSelect: check.func.optional
+        onSelect: check.func.optional,
+        theme: check.string.optional
       }
     })
   });
diff --git a/src/types/datepicker/datepicker.html b/src/types/datepicker/datepicker.html
@@ -1,3 +1,3 @@
 <div>
-    <md-datepicker ng-model="model[options.key]"></md-datepicker>
-</div>
+    <md-datepicker ng-model="model[options.key]" md-theme="{{to.theme}}"></md-datepicker>
+</div>
diff --git a/src/types/datepicker/datepicker.js b/src/types/datepicker/datepicker.js
@@ -33,7 +33,8 @@ export default (formlyConfigProvider) => {
         placeholder: check.string.optional,
         minDate: check.instanceOf(Date).optional,
         maxDate: check.instanceOf(Date).optional,
-        filterDate: check.func.optional
+        filterDate: check.func.optional,
+        theme: check.string.optional
       }
     })
   });
diff --git a/src/types/input/input.js b/src/types/input/input.js
@@ -32,7 +32,8 @@ export default (formlyConfigProvider) => {
           pattern: check.oneOfType([
             check.string,
             check.instanceOf(RegExp)
-          ]).optional
+          ]).optional,
+          theme: check.string.optional
         }
       };
     }
diff --git a/src/types/radio/radio.html b/src/types/radio/radio.html
@@ -1,4 +1,4 @@
-<md-radio-group ng-model="model[options.key]">
+<md-radio-group ng-model="model[options.key]" md-theme="{{to.theme}}">
     <md-radio-button
             ng-repeat="option in to.options"
             ng-disabled="to.disabled"
diff --git a/src/types/radio/radio.js b/src/types/radio/radio.js
@@ -9,7 +9,8 @@ export default (formlyConfigProvider) => {
       templateOptions: {
         options: check.arrayOf(check.object),
         labelProp: check.string.optional,
-        valueProp: check.string.optional
+        valueProp: check.string.optional,
+        theme: check.string.optional
       }
     })
   });
diff --git a/src/types/select/select.html b/src/types/select/select.html
@@ -1,5 +1,5 @@
-<md-select ng-model="model[options.key]">
+<md-select ng-model="model[options.key]" md-theme="{{to.theme}}">
     <md-option ng-repeat="option in to.options" ng-value="option[to.valueProp || 'value']">
         {{ option[to.labelProp || 'name'] }}
     </md-option>
-</md-select>
+</md-select>
diff --git a/src/types/select/select.js b/src/types/select/select.js
@@ -30,7 +30,8 @@ export default (formlyConfigProvider) => {
         labelProp: check.string.optional,
         valueProp: check.string.optional,
         onClose: check.func.optional,
-        onOpen: check.func.optional
+        onOpen: check.func.optional,
+        theme: check.string.optional
       }
     })
   });
diff --git a/src/types/slider/slider.html b/src/types/slider/slider.html
@@ -1 +1 @@
-<md-slider ng-model="model[options.key]"></md-slider>
+<md-slider ng-model="model[options.key]" md-theme="{{to.theme}}"></md-slider>
diff --git a/src/types/slider/slider.js b/src/types/slider/slider.js
@@ -33,7 +33,8 @@ export default (formlyConfigProvider) => {
         min: check.number.optional,
         max: check.number.optional,
         step: check.number.optional,
-        discrete: check.bool.optional
+        discrete: check.bool.optional,
+        theme: check.string.optional
       }
     })
   });
diff --git a/src/types/switch/switch.html b/src/types/switch/switch.html
@@ -1,3 +1,3 @@
-<md-switch ng-model="model[options.key]">
+<md-switch ng-model="model[options.key]" md-theme="{{to.theme}}">
     {{to.label}}
-</md-switch>
+</md-switch>
diff --git a/src/types/switch/switch.js b/src/types/switch/switch.js
@@ -16,7 +16,8 @@ export default (formlyConfigProvider) => {
     },
     apiCheck: (check) => ({
       templateOptions: {
-        disabled: check.bool.optional
+        disabled: check.bool.optional,
+        theme: check.string.optional
       }
     })
   });
diff --git a/src/types/textarea/textarea.js b/src/types/textarea/textarea.js
@@ -27,7 +27,8 @@ export default (formlyConfigProvider) => {
         disabled: check.bool.optional,
         rows: check.number.optional,
         cols: check.number.optional,
-        grow: check.bool.optional
+        grow: check.bool.optional,
+        theme: check.string.optional
       }
     })
   });
diff --git a/src/wrappers/input-container/input-container.html b/src/wrappers/input-container/input-container.html
@@ -1,3 +1,3 @@
-<md-input-container>
+<md-input-container md-theme="{{to.theme}}">
     <formly-transclude></formly-transclude>
-</md-input-container>
+</md-input-container>
diff --git a/tests/runs/index.js b/tests/runs/index.js
@@ -1,2 +1 @@
 import './class-name-spec';
-import './theme-spec';
diff --git a/tests/runs/theme-spec.js b/tests/runs/theme-spec.js
diff --git a/tests/types/checkbox-spec.js b/tests/types/checkbox-spec.js
@@ -22,6 +22,7 @@ describe('formlyMaterial - checkbox type', () => {
       type: 'checkbox',
       templateOptions: {
         label: 'test field',
+        theme: 'custom',
         disabled: true
       }
     }, options)];
@@ -60,4 +61,8 @@ describe('formlyMaterial - checkbox type', () => {
     expect(element.attr('ng-disabled')).toBe(`options.templateOptions['disabled']`);
     expect(elementScope.options.templateOptions.disabled).toBe(true);
   });
+
+  it('should have proper theme when defined', () => {
+    expect(element.is('.md-custom-theme')).toBe(true);
+  });
 });
diff --git a/tests/types/chips-spec.js b/tests/types/chips-spec.js
@@ -11,6 +11,7 @@ describe('formlyMaterial - chips type', () => {
   let element;
   let field;
   let fieldScope;
+  const theme = 'custom';
 
   function onAdd() {
     return true;
@@ -36,6 +37,7 @@ describe('formlyMaterial - chips type', () => {
         onAdd,
         onRemove,
         onSelect,
+        theme,
         label: 'test field',
         placeholder: '+tags',
         secondaryPlaceholder: 'Add tag',
@@ -76,6 +78,10 @@ describe('formlyMaterial - chips type', () => {
     expect(element.attr('placeholder')).toBe(field.templateOptions.placeholder);
   });
 
+  it('should have proper theme when defined', () => {
+    expect(element.is(`.md-${theme}-theme`)).toBe(true);
+  });
+
   it('should have secondary placeholder', () => {
     expect(element.attr('secondary-placeholder')).toBe(field.templateOptions.secondaryPlaceholder);
   });
diff --git a/tests/types/datepicker-spec.js b/tests/types/datepicker-spec.js
@@ -11,6 +11,7 @@ describe('formlyMaterial - datepicker type', () => {
   let form;
   let element;
   let elementScope;
+  const theme = 'custom';
   const minDate = new Date(2015, 10, 19);
   const maxDate = new Date(2015, 11, 20);
   const filterDate = () => true;
@@ -28,6 +29,7 @@ describe('formlyMaterial - datepicker type', () => {
         minDate,
         maxDate,
         filterDate,
+        theme,
         disabled: true,
         label: 'test field',
         placeholder: 'Pick a date'
@@ -63,6 +65,10 @@ describe('formlyMaterial - datepicker type', () => {
     expect(form.find('[ng-messages]').length).toBe(1);
   });
 
+  it('should have proper theme when defined', () => {
+    expect(element.attr('md-theme')).toBe(theme);
+  });
+
   it('should have min date', () => {
     expect(element.attr('md-min-date')).toBe(`options.templateOptions['minDate']`);
     expect(elementScope.options.templateOptions.minDate.toDateString()).toBe(minDate.toDateString());
diff --git a/tests/types/input-spec.js b/tests/types/input-spec.js
@@ -12,6 +12,7 @@ describe('formlyMaterial - input type', () => {
   let form;
   let element;
   let field;
+  const theme = 'custom';
 
   //
   // helpers
@@ -23,6 +24,7 @@ describe('formlyMaterial - input type', () => {
       key: 'testField',
       type: 'input',
       templateOptions: {
+        theme,
         disabled: true,
         type: 'email',
         label: 'test field'
@@ -61,6 +63,10 @@ describe('formlyMaterial - input type', () => {
       expect(element.attr('type')).toBe(field.templateOptions.type);
     });
 
+    it('should have proper theme when defined', () => {
+      expect(element.parent().is(`.md-${theme}-theme`)).toBe(true);
+    });
+
     it('should have messages wrapper', () => {
       expect(form.find('[ng-messages]').length).toBe(1);
     });
diff --git a/tests/types/radio-spec.js b/tests/types/radio-spec.js
@@ -13,6 +13,7 @@ describe('formlyMaterial - radio type', () => {
   let element;
   let optionsElements;
   let field;
+  const theme = 'custom';
 
   //
   // helpers
@@ -24,6 +25,7 @@ describe('formlyMaterial - radio type', () => {
       key: 'testField',
       type: 'radio',
       templateOptions: {
+        theme,
         label: 'test field',
         options: [{
           name: 'first',
@@ -64,6 +66,11 @@ describe('formlyMaterial - radio type', () => {
     expect(element[0].nodeName).toBe('MD-RADIO-GROUP');
   });
 
+  it('should have proper theme when defined', () => {
+    compile();
+    expect(element.is(`.md-${theme}-theme`)).toBe(true);
+  });
+
   it('should have options with default properties for name and value', () => {
     compile();
     expect(optionsElements.length).toBe(field.templateOptions.options.length);
diff --git a/tests/types/select-spec.js b/tests/types/select-spec.js
@@ -15,6 +15,7 @@ describe('formlyMaterial - select type', () => {
   let element;
   let elementScope;
   let field;
+  const theme = 'custom';
 
   //
   // helpers
@@ -26,6 +27,7 @@ describe('formlyMaterial - select type', () => {
       key: 'testField',
       type: 'select',
       templateOptions: {
+        theme,
         label: 'test field',
         multiple: true,
         onClose: () => true,
@@ -101,6 +103,11 @@ describe('formlyMaterial - select type', () => {
     expect(element.attr('multiple')).toBeDefined();
   });
 
+  it('should have proper theme when defined', () => {
+    compile();
+    expect(element.is(`.md-${theme}-theme`)).toBe(true);
+  });
+
   it('should not add multiple directive when does not equal true', () => {
     compile({
       templateOptions: {
diff --git a/tests/types/slider-spec.js b/tests/types/slider-spec.js
@@ -11,10 +11,12 @@ describe('formlyMaterial - slider type', () => {
   let form;
   let element;
   let elementScope;
+  const theme = 'custom';
   const fieldConfig = {
     key: 'testField',
     type: 'slider',
     templateOptions: {
+      theme,
       label: 'test field',
       disabled: true,
       min: 1,
@@ -56,6 +58,10 @@ describe('formlyMaterial - slider type', () => {
     expect(element[0].nodeName).toBe('MD-SLIDER');
   });
 
+  it('should have proper theme when defined', () => {
+    expect(element.is(`.md-${theme}-theme`)).toBe(true);
+  });
+
   it('should support min option', () => {
     expect(parseFloat(element.attr('min'))).toEqual(fieldConfig.templateOptions.min);
   });
diff --git a/tests/types/switch-spec.js b/tests/types/switch-spec.js
diff --git a/tests/types/textarea-spec.js b/tests/types/textarea-spec.js

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<md-chips ng-model="model[options.key]" readonly="to.disabled"></md-chips>`
	`1`	`+<md-chips ng-model="model[options.key]" readonly="to.disabled" md-theme="{{to.theme}}"></md-chips>`
-Original file line number
+Diff line change
@@ @@ -1,3 +1,3 @@ @@
 <div>
 -    <md-datepicker ng-model="model[options.key]"></md-datepicker>
 -</div>
 +    <md-datepicker ng-model="model[options.key]" md-theme="{{to.theme}}"></md-datepicker>
 +</div>
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,8 @@ export default (formlyConfigProvider) => {`
`32`	`32`	`pattern: check.oneOfType([`
`33`	`33`	`check.string,`
`34`	`34`	`check.instanceOf(RegExp)`
`35`		`- ]).optional`
	`35`	`+ ]).optional,`
	`36`	`+ theme: check.string.optional`
`36`	`37`	`}`
`37`	`38`	`};`
`38`	`39`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<md-radio-group ng-model="model[options.key]">`
	`1`	`+<md-radio-group ng-model="model[options.key]" md-theme="{{to.theme}}">`
`2`	`2`	`<md-radio-button`
`3`	`3`	`ng-repeat="option in to.options"`
`4`	`4`	`ng-disabled="to.disabled"`