Merge pull request #27 from Microsoft/content-class-style-overall

[Core] Content class and contentStyle refactor and enhancements

Author: bengry

.vscode/settings.json

@@ -17,6 +17,7 @@
     "nrwl",
     "renderprop",
     "scrollable",
+    "stylenames",
     "submenu",
     "uifabric",
     "unmount",

libs/core/package.json

@@ -6,7 +6,9 @@
     "deleteDestPath": true,
     "whitelistedNonPeerDependencies": [
       "tslib",
-      "css-to-style"
+      "css-to-style",
+      "classnames",
+      "stylenames"
     ],
     "lib": {
       "languageLevel": [
@@ -56,9 +58,13 @@
     "react": "^16.4.1"
   },
   "dependencies": {
-    "css-to-style": "^1.2.0"
+    "css-to-style": "^1.2.0",
+    "classnames": "^2.2.6",
+    "stylenames": "^1.1.6"
   },
   "bundledDependencies": [
-    "css-to-style"
+    "css-to-style",
+    "classnames",
+    "stylesnames"
   ]
 }

libs/core/src/lib/components/wrapper-component.ts

@@ -15,7 +15,10 @@ import {
   TemplateRef,
   Type,
 } from '@angular/core';
+import classnames from 'classnames';
 import toStyle from 'css-to-style';
+import stylenames, { StyleObject } from 'stylenames';
+import { Many } from '../declarations/many';
 import { ReactContentProps } from '../renderer/react-content';
 import { isReactNode } from '../renderer/react-node';
 import { isReactRendererData } from '../renderer/renderer';
@@ -42,52 +45,57 @@ export type InputRendererOptions<TContext extends object> =
 
 export type JsxRenderFunc<TContext> = (context: TContext) => JSX.Element;
 
+export type ContentClassValue = string[] | Set<string> | { [klass: string]: any };
+export type ContentStyleValue = string | StyleObject;
+
 /**
  * Base class for Angular @Components wrapping React Components.
- * Simplifies some of the handling around passing down props and setting CSS on the host component.
+ * Simplifies some of the handling around passing down props and CSS styling on the host component.
  */
 // NOTE: TProps is not used at the moment, but a preparation for a potential future change.
 export abstract class ReactWrapperComponent<TProps extends {}> implements AfterViewInit, OnChanges {
-  private _contentClass: string;
-  private _contentStyle: string;
+  private _contentClass: Many<ContentClassValue>;
+  private _contentStyle: ContentStyleValue;
 
   protected abstract reactNodeRef: ElementRef<HTMLElement>;
 
   /**
-   * Alternative to `class` using the same syntax.
+   * Alternative to `class` and `[ngClass]` using the same syntax.
    *
-   * @description Since this is a wrapper component, sticking to the virtual DOM concept, this should have any styling of its own.
-   * Any value passes to `contentClass` will be passed to the root component's class.
+   * @description Since this is a wrapper component, sticking to the virtual DOM concept, its DOM element shouldn't have any styling of its own.
+   * Instead, any value passes to `contentClass` will be passed to the root component's class as `className`.
    */
   @Input()
-  set contentClass(value: string) {
+  set contentClass(value: Many<ContentClassValue>) {
     this._contentClass = value;
     if (isReactNode(this.reactNodeRef.nativeElement)) {
-      this.reactNodeRef.nativeElement.setProperty('className', value);
+      this.reactNodeRef.nativeElement.setProperty('className', classnames(value));
       this.changeDetectorRef.detectChanges();
     }
   }
 
-  get contentClass(): string {
+  get contentClass(): Many<ContentClassValue> {
     return this._contentClass;
   }
 
   /**
-   * Alternative to `style` using the same syntax.
+   * Alternative to `style` and `[ngStyle]` using (almost) the same syntax.
+   * All syntax supports by `ngStyle` is supported, with the exception of specifying units in the key (`{ 'width.px': 12 }`).
    *
    * @description Since this is a wrapper component, sticking to the virtual DOM concept, this should have any styling of its own.
    * Any value passes to `contentStyle` will be passed to the root component's style.
    */
   @Input()
-  set contentStyle(value: string) {
+  set contentStyle(value: ContentStyleValue) {
     this._contentStyle = value;
     if (isReactNode(this.reactNodeRef.nativeElement)) {
-      this.reactNodeRef.nativeElement.setProperty('style', toStyle(value));
+      const stringValue = typeof value === 'string' ? value : stylenames(value);
+      this.reactNodeRef.nativeElement.setProperty('style', toStyle(stringValue));
       this.changeDetectorRef.detectChanges();
     }
   }
 
-  get contentStyle(): string {
+  get contentStyle(): ContentStyleValue {
     return this._contentStyle;
   }
 

libs/core/src/lib/declarations/many.d.ts

@@ -0,0 +1 @@
+export type Many<T> = T | T[];

libs/core/src/lib/declarations/public-api.d.ts

@@ -3,5 +3,6 @@
 
 export * from './index-signature';
 export * from './known-keys';
+export * from './many';
 export * from './omit';
 export * from './string-map';

package-lock.json

@@ -92,12 +92,15 @@
     "@ngrx/schematics": "6.0.1",
     "@nrwl/nx": "^6.2.0",
     "@nrwl/schematics": "^6.2.0",
+    "@types/classnames": "^2.2.6",
     "@types/css-to-style": "^1.2.0",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~10.5.5",
     "@types/react": "^16.4.7",
     "@types/react-dom": "^16.0.6",
+    "@types/stylenames": "^1.1.0",
+    "classnames": "^2.2.6",
     "codelyzer": "~4.4.2",
     "copyfiles": "^2.0.0",
     "css-to-style": "^1.2.0",
@@ -113,6 +116,7 @@
     "prettier": "1.14.0",
     "protractor": "~5.4.0",
     "rimraf": "^2.6.2",
+    "stylenames": "^1.1.6",
     "ts-node": "~7.0.0",
     "tsickle": "^0.32.1",
     "tslib": "^1.9.0",