diff --git a/common/changes/@uifabric/foundation/jg-remove-object-assign_2018-08-27-15-56.json b/common/changes/@uifabric/foundation/jg-remove-object-assign_2018-08-27-15-56.json new file mode 100644 index 00000000000000..262df1d7581da4 --- /dev/null +++ b/common/changes/@uifabric/foundation/jg-remove-object-assign_2018-08-27-15-56.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/foundation", + "comment": "Remove Object.assign usage to fix IE11 issues.", + "type": "patch" + } + ], + "packageName": "@uifabric/foundation", + "email": "jagore@microsoft.com" +} \ No newline at end of file diff --git a/packages/foundation/src/createComponent.tsx b/packages/foundation/src/createComponent.tsx index d518d395ef5789..1f2a5fc079d6a0 100644 --- a/packages/foundation/src/createComponent.tsx +++ b/packages/foundation/src/createComponent.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { assign } from './utilities'; /** * Props contract for themed components. @@ -74,7 +75,6 @@ export interface IStylingProviders | undefined)[]) => TProcessedStyleSet; getCustomizations: (scope: string, context: TContext) => IStyleableComponent; // TODO: remove any if possible - // tslint:disable-next-line:no-any CustomizableContextTypes: any; } @@ -144,20 +144,21 @@ export function createComponent< // The approach here is to allow state components to provide only the props they care about, automatically // merging user props and processed props together. This ensures all props are passed properly to view, // including children and styles. + // TODO: Should 'rest' props from customizations pass onto view? They are not currently. + // (items like theme seem like they shouldn't) const propStyles = processedProps.styles || userProps.styles; - const themedProps: TProcessedProps = Object.assign({}, rest, userProps, processedProps); - const viewProps: IViewComponentProps = Object.assign( - {}, - processedProps, - userProps, - { + const styleProps: TProcessedProps = { ...rest, ...(processedProps as any), ...(userProps as any) }; + const viewProps: IViewComponentProps = { + ...(processedProps as any), + ...(userProps as any), + ...{ classNames: providers.mergeStyleSets( - _evaluateStyle(themedProps, options.styles), - _evaluateStyle(themedProps, contextStyles), - _evaluateStyle(themedProps, propStyles) + _evaluateStyle(styleProps, options.styles), + _evaluateStyle(styleProps, contextStyles), + _evaluateStyle(styleProps, propStyles) ) } - ); + }; // TODO: consider rendering view as JSX component with display name in debug mode to aid in debugging return options.view(viewProps); @@ -169,7 +170,7 @@ export function createComponent< result.contextTypes = providers.CustomizableContextTypes; result.displayName = options.displayName; - Object.assign(result, options.statics); + assign(result, options.statics); // Later versions of TypeSript should allow us to merge objects in a type safe way and avoid this cast. return result as React.StatelessComponent & TStatics; @@ -200,15 +201,20 @@ export function createStatelessComponent< const { styles: contextStyles, ...rest } = settings; const content = (processedProps: TProcessedProps) => { + // TODO: Should 'rest' props from customizations pass onto view? They are not currently. + // (items like theme seem like they shouldn't) const { styles: propStyles } = processedProps; - const themedProps: TProcessedProps = Object.assign({}, rest, processedProps); - const viewProps: IViewComponentProps = Object.assign({}, processedProps, { - classNames: providers.mergeStyleSets( - _evaluateStyle(themedProps, options.styles), - _evaluateStyle(themedProps, contextStyles), - _evaluateStyle(themedProps, propStyles) - ) - }); + const styleProps: TProcessedProps = { ...rest, ...(processedProps as any) }; + const viewProps: IViewComponentProps = { + ...(processedProps as any), + ...{ + classNames: providers.mergeStyleSets( + _evaluateStyle(styleProps, options.styles), + _evaluateStyle(styleProps, contextStyles), + _evaluateStyle(styleProps, propStyles) + ) + } + }; // TODO: consider rendering view as JSX component with display name in debug mode to aid in debugging return options.view(viewProps); @@ -219,7 +225,8 @@ export function createStatelessComponent< result.contextTypes = providers.CustomizableContextTypes; result.displayName = options.displayName; - Object.assign(result, options.statics); + + assign(result, options.statics); // Later versions of TypeSript should allow us to merge objects in a type safe way and avoid this cast. return result as React.StatelessComponent & TStatics; diff --git a/packages/foundation/src/utilities.ts b/packages/foundation/src/utilities.ts new file mode 100644 index 00000000000000..3146eabfcb3301 --- /dev/null +++ b/packages/foundation/src/utilities.ts @@ -0,0 +1,2 @@ +import { __assign } from 'tslib'; +export const assign = __assign; diff --git a/packages/foundation/tslint.json b/packages/foundation/tslint.json index b057578463d419..c481d5d9d31876 100644 --- a/packages/foundation/tslint.json +++ b/packages/foundation/tslint.json @@ -3,6 +3,7 @@ "office-ui-fabric-react-tslint" ], "rules": { - "deprecation": false + "deprecation": false, + "no-any": false } } \ No newline at end of file