Customizer now uses React 16 context.

apps/fabric-website-resources/webpack.serve.config.js

@@ -15,6 +15,7 @@ module.exports = resources.createServeConfig({
 
   resolve: {
     alias: {
+      'office-ui-fabric-react$': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/src': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/lib': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'Props.ts.js': 'Props',

apps/todo-app/package.json

@@ -23,7 +23,7 @@
     "office-ui-fabric-react": ">=6.40.0 <7.0.0",
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",
-    "typescript": "2.8.4",
+    "typescript": "3.0.0-rc",
     "tslib": "^1.7.1"
   }
 }

common/changes/@uifabric/fabric-website-resources/customizer-fix_2018-07-27-01-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website-resources",
+      "comment": "Updating serve config to respect oufr imports.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website-resources",
+  "email": "dzearing@microsoft.com"
+}

common/changes/@uifabric/utilities/customizer-fix_2018-07-27-01-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Customizer: moving to use React 16 context.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "dzearing@microsoft.com"
+}

common/changes/office-ui-fabric-react/customizer-fix_2018-07-27-01-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Check: adjusting shouldComponentUpdate to not ignore theme changes.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}

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

@@ -14,7 +14,11 @@ export class CheckBase extends BaseComponent<ICheckProps, {}> {
   };
 
   public shouldComponentUpdate(newProps: ICheckProps): boolean {
-    return this.props.checked !== newProps.checked;
+    return (
+      this.props.className !== newProps.className ||
+      this.props.checked !== newProps.checked ||
+      this.props.theme !== newProps.theme
+    );
   }
 
   public render(): JSX.Element {

packages/utilities/src/Customizer.tsx

@@ -1,12 +1,18 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { BaseComponent, IBaseProps } from './BaseComponent';
-import { ICustomizations, Settings, SettingsFunction } from './Customizations';
+import { Customizations, ICustomizations, Settings, SettingsFunction } from './Customizations';
 
 export interface ICustomizerContext {
   customizations: ICustomizations;
 }
 
+export const CustomizerContext = React.createContext<ICustomizerContext>({
+  customizations: {
+    settings: {},
+    scopedSettings: {}
+  }
+});
+
 export type ICustomizerProps = IBaseProps &
   Partial<{
     /**
@@ -54,7 +60,8 @@ export type ICustomizerProps = IBaseProps &
 
 /**
  * The Customizer component allows for default props to be mixed into components which
- * are decorated with the customizable() decorator. This enables injection scenarios like:
+ * are decorated with the customizable() decorator, or use the styled HOC. This enables
+ * injection scenarios like:
  *
  * 1. render svg icons instead of the icon font within all buttons
  * 2. inject a custom theme object into a component
@@ -65,40 +72,30 @@ export type ICustomizerProps = IBaseProps &
  *
  * @public
  */
-export class Customizer extends BaseComponent<ICustomizerProps, ICustomizerContext> {
-  public static contextTypes: {
-    customizations: PropTypes.Requireable<{}>;
-  } = {
-    customizations: PropTypes.object
-  };
-
-  public static childContextTypes: {
-    customizations: PropTypes.Requireable<{}>;
-  } =
-    Customizer.contextTypes;
-
-  // tslint:disable-next-line:no-any
-  constructor(props: ICustomizerProps, context: any) {
-    super(props);
-
-    this.state = this._getCustomizations(props, context);
+export class Customizer extends BaseComponent<ICustomizerProps> {
+  public componentDidMount(): void {
+    Customizations.observe(this._onCustomizationChange);
   }
-
-  public getChildContext(): ICustomizerContext {
-    return this.state;
-  }
-
-  // tslint:disable-next-line:no-any
-  public componentWillReceiveProps(newProps: any, newContext: any): void {
-    this.setState(this._getCustomizations(newProps, newContext));
+  public componentWillUnmount(): void {
+    Customizations.unobserve(this._onCustomizationChange);
   }
 
   public render(): React.ReactElement<{}> {
-    return React.Children.only(this.props.children);
+    return (
+      <CustomizerContext.Consumer>
+        {(parentContext: ICustomizerContext) => {
+          const newContext = this._getCustomizations(this.props, parentContext);
+
+          return <CustomizerContext.Provider value={newContext}>{this.props.children}</CustomizerContext.Provider>;
+        }}
+      </CustomizerContext.Consumer>
+    );
   }
 
-  private _getCustomizations(props: ICustomizerProps, context: ICustomizerContext): ICustomizerContext {
-    const { customizations = { settings: {}, scopedSettings: {} } } = context;
+  private _onCustomizationChange = () => this.forceUpdate();
+
+  private _getCustomizations(props: ICustomizerProps, parentContext: ICustomizerContext): ICustomizerContext {
+    const { customizations = { settings: {}, scopedSettings: {} } } = parentContext || {};
 
     return {
       customizations: {

packages/utilities/src/customizable.tsx

@@ -1,11 +1,7 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { Customizations } from './Customizations';
 import { hoistStatics } from './hoistStatics';
-
-export const CustomizableContextTypes = {
-  customizations: PropTypes.object
-};
+import { CustomizerContext, ICustomizerContext } from './Customizer';
 
 export function customizable(
   scope: string,
@@ -21,11 +17,9 @@ export function customizable(
     const resultClass = class ComponentWithInjectedProps extends React.Component<P, {}> {
       public static displayName: string = 'Customized' + scope;
 
-      public static contextTypes = CustomizableContextTypes;
-
       // tslint:disable-next-line:no-any
-      constructor(props: P, context: any) {
-        super(props, context);
+      constructor(props: P) {
+        super(props);
 
         this._onSettingChanged = this._onSettingChanged.bind(this);
       }
@@ -39,11 +33,14 @@ export function customizable(
       }
 
       public render(): JSX.Element {
-        const defaultProps = Customizations.getSettings(fields, scope, this.context.customizations);
-
         return (
-          // tslint:disable-next-line:no-any
-          <ComposedComponent {...defaultProps} {...this.props as any} />
+          <CustomizerContext.Consumer>
+            {(context: ICustomizerContext) => {
+              const defaultProps = Customizations.getSettings(fields, scope, context.customizations);
+              // tslint:disable-next-line:no-any
+              return <ComposedComponent {...defaultProps} {...this.props as any} />;
+            }}
+          </CustomizerContext.Consumer>
         );
       }
 

packages/utilities/src/styled.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { concatStyleSets, IStyleSet, IStyleFunctionOrObject, IConcatenatedStyleSet } from '@uifabric/merge-styles';
-import { IStyleFunction } from './IStyleFunction';
-import { CustomizableContextTypes } from './customizable';
-import { Customizations, ICustomizations } from './Customizations';
+import { Customizations } from './Customizations';
+import { CustomizerContext, ICustomizerContext } from './Customizer';
 
 export interface IPropsWithStyles<TStyleProps, TStyleSet extends IStyleSet<TStyleSet>> {
   styles?: IStyleFunctionOrObject<TStyleProps, TStyleSet>;
@@ -49,24 +48,26 @@ export function styled<
   getProps?: (props: TComponentProps) => Partial<TComponentProps>,
   customizable?: ICustomizableProps
 ): (props: TComponentProps) => JSX.Element {
-  const Wrapped: React.StatelessComponent<TComponentProps> = (
-    componentProps: TComponentProps,
-    context: { customizations: ICustomizations }
-  ) => {
+  const Wrapped: React.StatelessComponent<TComponentProps> = (componentProps: TComponentProps) => {
     customizable = customizable || { scope: '', fields: undefined };
 
     const { scope, fields = DefaultFields } = customizable;
-    const settings = Customizations.getSettings(fields, scope, context.customizations);
-    const { styles: customizedStyles, ...rest } = settings;
-    const styles = (styleProps: TStyleProps) =>
-      _resolve(styleProps, baseStyles, customizedStyles, componentProps.styles);
 
-    const additionalProps = getProps ? getProps(componentProps) : undefined;
+    return (
+      <CustomizerContext.Consumer>
+        {(context: ICustomizerContext) => {
+          const settings = Customizations.getSettings(fields, scope, context.customizations);
+          const { styles: customizedStyles, ...rest } = settings;
+          const styles = (styleProps: TStyleProps) =>
+            _resolve(styleProps, baseStyles, customizedStyles, componentProps.styles);
 
-    return <Component {...rest} {...additionalProps} {...componentProps} styles={styles} />;
+          const additionalProps = getProps ? getProps(componentProps) : undefined;
+          return <Component {...rest} {...additionalProps} {...componentProps} styles={styles} />;
+        }}
+      </CustomizerContext.Consumer>
+    );
   };
 
-  Wrapped.contextTypes = CustomizableContextTypes;
   Wrapped.displayName = `Styled${Component.displayName || Component.name}`;
 
   return Wrapped as (props: TComponentProps) => JSX.Element;