Update createRef to match the new React 16.3 api

apps/todo-app/src/components/TodoForm.tsx

@@ -81,7 +81,7 @@ export default class TodoForm extends BaseComponent<ITodoFormProps, ITodoFormSta
   private _onSubmit = (event: React.FormEvent<HTMLElement>): void => {
     event.preventDefault();
 
-    const { value: textField } = this._textField;
+    const { current: textField } = this._textField;
     if (!textField) {
       return;
     }

common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/example-app-base",
+      "comment": "Update createRef to match React.createRef api",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/example-app-base",
+  "email": "mark@thedutchies.com"
+}

common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Update createRef to match React.createRef api",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "mark@thedutchies.com"
+}

common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Update createRef to match React.createRef api",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "mark@thedutchies.com"
+}

common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Update createRef to match React.createRef api",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "mark@thedutchies.com"
+}

ghdocs/BestPractices/ComponentDesign.md

@@ -189,9 +189,9 @@ public render() {
 
 Best, use createRef:
 
-The `createRef` function in `lib/Utilities` is a polyfill for [React.createRef](https://github.com/facebook/react/pull/11555). (When Fabric switches over to React 16, we'll use React.createRef instead)
+The `createRef` function in `lib/Utilities` is a polyfill for [React.createRef](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs). (When Fabric switches over to React 16, we'll use React.createRef instead)
 
-`createRef` creates a reference object that has the following type `{ value: T | null }`, where T is the element to reference (either a dom node or a react component). You set the reference by passing the reference object as the `ref` prop. You can then subsequently access the reference through the `.value` property on the reference object elsewhere in your code.
+`createRef` creates a reference object that has the following type `{ current: T | null }`, where T is the element to reference (either a dom node or a react component). You set the reference by passing the reference object as the `ref` prop. You can then subsequently access the reference through the `.current` property on the reference object elsewhere in your code.
 
 ```typescript
 import { createRef } from 'office-ui-fabric-react/lib/Utilities';
@@ -206,8 +206,8 @@ class Foo extends BaseComponent<...> {
   }
 
   private _onClick() {
-    // Access the reference through the .value property on the reference object
-    this._root.value.focus();
+    // Access the reference through the .current property on the reference object
+    this._root.current.focus();
   }
 }
 ```

packages/example-app-base/src/components/Highlight/Highlight.tsx

@@ -31,8 +31,8 @@ export class Highlight extends BaseComponent<IHighlightProps, {}> {
   }
 
   public componentDidMount(): void {
-    if (this._codeElement.value) {
-      highlightBlock(this._codeElement.value);
+    if (this._codeElement.current) {
+      highlightBlock(this._codeElement.current);
     }
   }
 }

packages/experiments/src/components/CommandBar/CommandBar.base.tsx

@@ -56,7 +56,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
 
   private _overflowSet = createRef<IOverflowSet>();
   private _resizeGroup = createRef<IResizeGroup>();
-  private _classNames: {[key in keyof ICommandBarStyles]: string };
+  private _classNames: { [key in keyof ICommandBarStyles]: string };
 
   public render(): JSX.Element {
     const {
@@ -134,13 +134,13 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
   }
 
   public focus(): void {
-    const { value: overflowSet } = this._overflowSet;
+    const { current: overflowSet } = this._overflowSet;
 
     overflowSet && overflowSet.focus();
   }
 
   public remeasure(): void {
-    this._resizeGroup.value && this._resizeGroup.value.remeasure();
+    this._resizeGroup.current && this._resizeGroup.current.remeasure();
   }
 
   private _computeCacheKey(primaryItems: ICommandBarItemProps[], farItems: ICommandBarItemProps[], overflow: boolean): string {

packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx

@@ -106,11 +106,11 @@ describe('Pickers', () => {
         picker.inputElement.value = 'bl';
       }
 
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.suggestions.length).toBe(2);
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.suggestions[0].name).toBe('black');
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.suggestions.length).toBe(2);
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.suggestions[0].name).toBe('black');
 
       // Force resolve to the first suggestions
-      picker.floatingPicker.value && picker.floatingPicker.value.forceResolveSuggestion();
+      picker.floatingPicker.current && picker.floatingPicker.current.forceResolveSuggestion();
       expect(picker.items.length).toBe(1);
       expect(picker.items[0].name).toBe('black');
 
@@ -135,11 +135,11 @@ describe('Pickers', () => {
         picker.inputElement.value = 'bl';
       }
 
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeTruthy();
-      picker.floatingPicker.value && picker.floatingPicker.value.hidePicker();
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeFalsy();
-      picker.floatingPicker.value && picker.floatingPicker.value.showPicker();
-      expect(picker.floatingPicker.value && picker.floatingPicker.value.isSuggestionsShown).toBeTruthy();
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeTruthy();
+      picker.floatingPicker.current && picker.floatingPicker.current.hidePicker();
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeFalsy();
+      picker.floatingPicker.current && picker.floatingPicker.current.showPicker();
+      expect(picker.floatingPicker.current && picker.floatingPicker.current.isSuggestionsShown).toBeTruthy();
 
       ReactDOM.unmountComponentAtNode(root);
     });
@@ -163,9 +163,9 @@ describe('Pickers', () => {
         ReactTestUtils.Simulate.keyDown(picker.inputElement, { which: KeyCodes.down });
       }
 
-      picker.floatingPicker.value && picker.floatingPicker.value.completeSuggestion();
-      expect(picker.selectedItemsList.value && picker.selectedItemsList.value.items.length).toBe(1);
-      expect(picker.selectedItemsList.value && picker.selectedItemsList.value.items[0].name).toBe('blue');
+      picker.floatingPicker.current && picker.floatingPicker.current.completeSuggestion();
+      expect(picker.selectedItemsList.current && picker.selectedItemsList.current.items.length).toBe(1);
+      expect(picker.selectedItemsList.current && picker.selectedItemsList.current.items[0].name).toBe('blue');
 
       ReactDOM.unmountComponentAtNode(root);
     });

packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx

@@ -62,27 +62,27 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
 
   // tslint:disable-next-line:no-any
   public get items(): any {
-    return this.selectedItemsList.value ? this.selectedItemsList.value.items : [];
+    return this.selectedItemsList.current ? this.selectedItemsList.current.items : [];
   }
 
   public componentDidMount(): void {
     this.forceUpdate();
   }
 
   public focus(): void {
-    if (this.focusZone.value) {
-      this.focusZone.value.focus();
+    if (this.focusZone.current) {
+      this.focusZone.current.focus();
     }
   }
 
   public clearInput(): void {
-    if (this.input.value) {
-      this.input.value.clear();
+    if (this.input.current) {
+      this.input.current.clear();
     }
   }
 
   public get inputElement(): HTMLInputElement | null {
-    return this.input.value && this.input.value.inputElement;
+    return this.input.current && this.input.current.inputElement;
   }
 
   public render(): JSX.Element {
@@ -152,8 +152,8 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     return (onRenderFloatingPicker({
       componentRef: this.floatingPicker,
       onChange: this._onSuggestionSelected,
-      inputElement: this.input.value ? this.input.value.inputElement : undefined,
-      selectedItems: this.selectedItemsList.value ? this.selectedItemsList.value.items : [],
+      inputElement: this.input.current ? this.input.current.inputElement : undefined,
+      selectedItems: this.selectedItemsList.current ? this.selectedItemsList.current.items : [],
       ...this.floatingPickerProps
     }));
   }
@@ -169,35 +169,35 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   protected resetFocus(index?: number): void {
     const { items } = this.state;
 
-    if (items.length && index! >= 0 && this.root.value) {
-      const newEl: HTMLElement = this.root.value
+    if (items.length && index! >= 0 && this.root.current) {
+      const newEl: HTMLElement = this.root.current
         .querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement;
-      if (newEl && this.focusZone.value) {
-        this.focusZone.value.focusElement(newEl);
+      if (newEl && this.focusZone.current) {
+        this.focusZone.current.focusElement(newEl);
       }
     } else if (!this.canAddItems()) {
       (items[items.length - 1] as IPickerItemProps<T>).selected = true;
       this.resetFocus(items.length - 1);
     } else {
-      if (this.input.value) {
-        this.input.value.focus();
+      if (this.input.current) {
+        this.input.current.focus();
       }
     }
   }
 
   protected onInputChange = (value: string): void => {
-    if (this.floatingPicker.value) {
-      this.floatingPicker.value.onQueryStringChanged(value);
+    if (this.floatingPicker.current) {
+      this.floatingPicker.current.onQueryStringChanged(value);
     }
   }
 
   protected onInputFocus = (ev: React.FocusEvent<HTMLInputElement | Autofill>): void => {
-    if (this.selectedItemsList.value) {
-      this.selectedItemsList.value.unselectAll();
+    if (this.selectedItemsList.current) {
+      this.selectedItemsList.current.unselectAll();
     }
 
-    if (this.floatingPicker.value) {
-      this.floatingPicker.value.showPicker(true /*updateValue*/);
+    if (this.floatingPicker.current) {
+      this.floatingPicker.current.showPicker(true /*updateValue*/);
     }
 
     if (this.props.inputProps && this.props.inputProps.onFocus) {
@@ -211,18 +211,18 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     if (ev.which !== KeyCodes.backspace) {
       return;
     }
-    if ((this.state.items.length && !this.input.value) || (this.input.value && !this.input.value.isValueSelected)) {
-      if (this.selectedItemsList.value && (this.input.value as Autofill).cursorLocation === 0) {
-        this.selectedItemsList.value.removeItemAt(this.items.length - 1);
+    if ((this.state.items.length && !this.input.current) || (this.input.current && !this.input.current.isValueSelected)) {
+      if (this.selectedItemsList.current && (this.input.current as Autofill).cursorLocation === 0) {
+        this.selectedItemsList.current.removeItemAt(this.items.length - 1);
         this._onSelectedItemsChanged();
       }
     }
   }
 
   protected onCopy = (ev: React.ClipboardEvent<HTMLElement>): void => {
-    if (this.selectedItemsList.value) {
+    if (this.selectedItemsList.current) {
       // Pass it down into the selected items list
-      this.selectedItemsList.value.onCopy(ev);
+      this.selectedItemsList.current.onCopy(ev);
     }
   }
 
@@ -236,7 +236,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
 
   protected _isFocusZoneInnerKeystroke = (ev: React.KeyboardEvent<HTMLElement>): boolean => {
     // If suggestions are shown let up/down keys control them, otherwise allow them through to control the focusZone.
-    if (this.floatingPicker.value && this.floatingPicker.value.isSuggestionsShown) {
+    if (this.floatingPicker.current && this.floatingPicker.current.isSuggestionsShown) {
       switch (ev.which) {
         case KeyCodes.up:
         case KeyCodes.down:
@@ -253,20 +253,20 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   protected _onSuggestionSelected = (item: T): void => {
-    if (this.selectedItemsList.value) {
-      this.selectedItemsList.value.addItems([item]);
+    if (this.selectedItemsList.current) {
+      this.selectedItemsList.current.addItems([item]);
     }
 
     if (this.props.onItemSelected) {
       this.props.onItemSelected(item);
     }
 
-    if (this.input.value) {
-      this.input.value.clear();
+    if (this.input.current) {
+      this.input.current.clear();
     }
 
-    if (this.floatingPicker.value) {
-      this.floatingPicker.value.hidePicker();
+    if (this.floatingPicker.current) {
+      this.floatingPicker.current.hidePicker();
     }
 
     this.focus();

packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx

@@ -61,8 +61,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
             && this._picker.inputElement.value.indexOf('@') > -1;
         },
         onExecute: () => {
-          if (this._picker.floatingPicker.value !== null) {
-            this._picker.floatingPicker.value.forceResolveSuggestion();
+          if (this._picker.floatingPicker.current !== null) {
+            this._picker.floatingPicker.current.forceResolveSuggestion();
           }
         }
       },
@@ -84,8 +84,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
         shouldShow: () => {
           return this._picker !== undefined
             && this._picker.floatingPicker !== undefined
-            && this._picker.floatingPicker.value !== null
-            && this._picker.floatingPicker.value.suggestions.length === 0;
+            && this._picker.floatingPicker.current !== null
+            && this._picker.floatingPicker.current.suggestions.length === 0;
         }
       },
       {
@@ -182,9 +182,9 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   }
 
   private _onExpandItem = (item: IExtendedPersonaProps): void => {
-    if (this._picker.selectedItemsList.value) {
+    if (this._picker.selectedItemsList.current) {
       // tslint:disable-next-line:no-any
-      (this._picker.selectedItemsList.value as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any));
+      (this._picker.selectedItemsList.current as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any));
     }
   }
 
@@ -239,9 +239,9 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
 
   private _shouldShowForceResolve = (): boolean => {
     return Boolean(
-      this._picker.floatingPicker.value &&
-      this._validateInput(this._picker.floatingPicker.value.inputText) &&
-      this._picker.floatingPicker.value.suggestions.length === 0
+      this._picker.floatingPicker.current &&
+      this._validateInput(this._picker.floatingPicker.current.inputText) &&
+      this._picker.floatingPicker.current.suggestions.length === 0
     );
   }