Addressing Issue #3988 - Customizable Decorator conflicting with Static class Functions

common/changes/@uifabric/utilities/customizable-hoisting_2018-03-07-21-58.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Added hoistStatics function to @customizable decorator so static methods work properly",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "v-brgarl@microsoft.com"
+}

common/changes/office-ui-fabric-react/customizable-hoisting_2018-03-07-21-58.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Added the @customizable decorator to Image and Layer to enable theme functionality",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-brgarl@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/Image/Image.base.tsx

@@ -5,7 +5,7 @@ import {
   autobind,
   BaseComponent,
   classNamesFunction,
-  // customizable,
+  customizable,
   getNativeProps,
   imageProperties
 } from '../../Utilities';
@@ -26,7 +26,7 @@ export interface IImageState {
 
 const KEY_PREFIX = 'fabricImage';
 
-// @customizable('Image', ['theme'])
+@customizable('Image', ['theme'])
 export class ImageBase extends BaseComponent<IImageProps, IImageState> {
   public static defaultProps = {
     shouldFadeIn: true

packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx

@@ -12,6 +12,7 @@ import {
 import {
   BaseComponent,
   classNamesFunction,
+  customizable,
   getDocument,
   setVirtualParent
 } from '../../Utilities';
@@ -21,6 +22,7 @@ let _defaultHostSelector: string | undefined;
 
 const getClassNames = classNamesFunction<ILayerStyleProps, ILayerStyles>();
 
+@customizable('Layer', ['theme'])
 export class LayerBase extends BaseComponent<ILayerProps, {}> {
 
   public static defaultProps: ILayerProps = {

packages/utilities/src/customizable.tsx

@@ -14,14 +14,14 @@ export function customizable(
     ComposedComponent: (new (props: P, ...args: any[]) => React.Component<P, S>)
     // tslint:disable-next-line:no-any
   ): any {
-    return class ComponentWithInjectedProps extends React.Component<P, {}> {
+    const resultClass = class ComponentWithInjectedProps extends React.Component<P, {}> {
       public static displayName: string = 'Customized' + scope;
 
       public static contextTypes: {
         customizations: PropTypes.Requireable<{}>;
       } = {
-        customizations: PropTypes.object
-      };
+          customizations: PropTypes.object
+        };
 
       // tslint:disable-next-line:no-any
       constructor(props: P, context: any) {
@@ -52,5 +52,18 @@ export function customizable(
       }
 
     };
+
+    return hoistStatics(ComposedComponent, resultClass);
   };
 }
+
+function hoistStatics<TSource, TDest>(source: TSource, dest: TDest): TDest {
+  for (const name in source) {
+    if (source.hasOwnProperty(name)) {
+      // tslint:disable-next-line:no-any
+      (dest as any)[name] = source[name];
+    }
+  }
+
+  return dest;
+}