Picker and Suggestions: Move the styled call out of render call. (#8834)

* Move the styled call out of render call.

- It breaks type check on React reconciliation.

* Add change file.

* Remove debugging code.

* Update the API doc.

* Polish the typing.

Author: lijunle

common/changes/office-ui-fabric-react/picker-fix-flashing_2019-04-24-10-15.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix the picker suggestion items flashing issue.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md

@@ -350,8 +350,6 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     // (undocumented)
     protected suggestionElement: React.RefObject<ISuggestions<T>>;
     // (undocumented)
-    protected SuggestionOfProperType: new (props: ISuggestionsProps<T>) => Suggestions<T>;
-    // (undocumented)
     protected suggestionStore: SuggestionsController<T>;
     // (undocumented)
     protected updateSuggestions(suggestions: any[]): void;

packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx

@@ -48,6 +48,13 @@ export type IPickerAriaIds = {
 
 const getClassNames = classNamesFunction<IBasePickerStyleProps, IBasePickerStyles>();
 
+const StyledSuggestions = styled<ISuggestionsProps<any>, ISuggestionsStyleProps, ISuggestionsStyles>(
+  Suggestions,
+  suggestionsStyles,
+  undefined,
+  { scope: 'Suggestions' }
+);
+
 export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<P, IBasePickerState> implements IBasePicker<T> {
   // Refs
   protected root = React.createRef<HTMLDivElement>();
@@ -57,7 +64,6 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   protected selection: Selection;
   protected suggestionStore: SuggestionsController<T>;
-  protected SuggestionOfProperType = Suggestions as new (props: ISuggestionsProps<T>) => Suggestions<T>;
   protected currentPromise: PromiseLike<any> | undefined;
   protected _ariaMap: IPickerAriaIds;
   private _id: string;
@@ -277,17 +283,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   protected renderSuggestions(): JSX.Element | null {
-    const TypedSuggestions = this.SuggestionOfProperType;
-
-    // TODO:
-    // Move this styled component in a separate file and make it available to the public API.
-    // This should be done after rewriting pickers to use a composition pattern instead of inheritance.
-    const StyledTypedSuggestions = styled<ISuggestionsProps<T>, ISuggestionsStyleProps, ISuggestionsStyles>(
-      TypedSuggestions,
-      suggestionsStyles,
-      undefined,
-      { scope: 'Suggestions' }
-    );
+    const StyledTypedSuggestions: React.StatelessComponent<ISuggestionsProps<T>> = StyledSuggestions;
 
     return this.state.suggestionsVisible && this.input ? (
       <Callout

packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx

@@ -18,11 +18,17 @@ export interface ISuggestionsState {
   selectedActionType: SuggestionActionType;
 }
 
+const StyledSuggestionsItem = styled<ISuggestionItemProps<any>, ISuggestionsItemStyleProps, ISuggestionsItemStyles>(
+  SuggestionsItem,
+  suggestionsItemStyles,
+  undefined,
+  { scope: 'SuggestionItem' }
+);
+
 export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggestionsState> {
   protected _forceResolveButton = React.createRef<IButton>();
   protected _searchForMoreButton = React.createRef<IButton>();
   protected _selectedElement = React.createRef<HTMLDivElement>();
-  private SuggestionsItemOfProperType = SuggestionsItem as new (props: ISuggestionItemProps<T>) => SuggestionsItem<T>;
   private activeSelectedElement: HTMLDivElement | null;
   private _classNames: Partial<IProcessedStyleSet<ISuggestionsStyles>>;
 
@@ -307,19 +313,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
 
     let { suggestions } = this.props;
 
-    const TypedSuggestionsItem = this.SuggestionsItemOfProperType;
-
-    // TODO:
-    // Move this styled component in a separate file and make it available to the public API.
-    // This should be done after rewriting pickers to use a composition pattern instead of inheritance.
-    const StyledTypedSuggestionsItem = styled<ISuggestionItemProps<T>, ISuggestionsItemStyleProps, ISuggestionsItemStyles>(
-      TypedSuggestionsItem,
-      suggestionsItemStyles,
-      undefined,
-      {
-        scope: 'SuggestionItem'
-      }
-    );
+    const StyledTypedSuggestionsItem: React.StatelessComponent<ISuggestionItemProps<T>> = StyledSuggestionsItem;
 
     let selectedIndex = -1;
     suggestions.some((element, index) => {