From ce875b845b45290f4bb7b565a10b21867539309a Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 7 Mar 2018 13:54:47 -0800 Subject: [PATCH 1/4] Added a hoistStatics function to customizable decorator --- packages/utilities/src/customizable.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/utilities/src/customizable.tsx b/packages/utilities/src/customizable.tsx index 962bde6e14252b..a3a99e57167b5d 100644 --- a/packages/utilities/src/customizable.tsx +++ b/packages/utilities/src/customizable.tsx @@ -14,14 +14,14 @@ export function customizable( ComposedComponent: (new (props: P, ...args: any[]) => React.Component) // tslint:disable-next-line:no-any ): any { - return class ComponentWithInjectedProps extends React.Component { + const resultClass = class ComponentWithInjectedProps extends React.Component { 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(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; +} \ No newline at end of file From 0fe97da7a8c27d5857b845c647f36d1239f98f31 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 7 Mar 2018 13:55:39 -0800 Subject: [PATCH 2/4] added @customizable decorator to Image and Layer --- .../src/components/Image/Image.base.tsx | 7 +++++-- .../src/components/Layer/Layer.base.tsx | 2 ++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx index 1fe6bc5970c171..8d0e067f794e2f 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx +++ b/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 { public static defaultProps = { shouldFadeIn: true @@ -202,3 +202,6 @@ export class ImageBase extends BaseComponent { }); } } + +const foo = ImageBase; +console.log(foo.defaultProps); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx index 5b103565134f21..f241acbd411397 100644 --- a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx +++ b/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(); +@customizable('Layer', ['theme']) export class LayerBase extends BaseComponent { public static defaultProps: ILayerProps = { From a23dba116eaaef679688618531c827b854917473 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 7 Mar 2018 13:59:34 -0800 Subject: [PATCH 3/4] rush change --- .../customizable-hoisting_2018-03-07-21-58.json | 11 +++++++++++ .../customizable-hoisting_2018-03-07-21-58.json | 11 +++++++++++ 2 files changed, 22 insertions(+) create mode 100644 common/changes/@uifabric/utilities/customizable-hoisting_2018-03-07-21-58.json create mode 100644 common/changes/office-ui-fabric-react/customizable-hoisting_2018-03-07-21-58.json diff --git a/common/changes/@uifabric/utilities/customizable-hoisting_2018-03-07-21-58.json b/common/changes/@uifabric/utilities/customizable-hoisting_2018-03-07-21-58.json new file mode 100644 index 00000000000000..1103fda8a75cba --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/customizable-hoisting_2018-03-07-21-58.json b/common/changes/office-ui-fabric-react/customizable-hoisting_2018-03-07-21-58.json new file mode 100644 index 00000000000000..7af05007afefab --- /dev/null +++ b/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" +} \ No newline at end of file From 266d0ac22c9cebb21f0b1dbba4413a1aed82a9b9 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 7 Mar 2018 14:03:05 -0800 Subject: [PATCH 4/4] cleanup test code --- .../office-ui-fabric-react/src/components/Image/Image.base.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx index 8d0e067f794e2f..ce2ebe0699bc5d 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx @@ -202,6 +202,3 @@ export class ImageBase extends BaseComponent { }); } } - -const foo = ImageBase; -console.log(foo.defaultProps); \ No newline at end of file