diff --git a/apps/todo-app/src/components/TodoForm.tsx b/apps/todo-app/src/components/TodoForm.tsx index c381a5fd8980a8..57a5d51148bab7 100644 --- a/apps/todo-app/src/components/TodoForm.tsx +++ b/apps/todo-app/src/components/TodoForm.tsx @@ -81,7 +81,7 @@ export default class TodoForm extends BaseComponent): void => { event.preventDefault(); - const { value: textField } = this._textField; + const { current: textField } = this._textField; if (!textField) { return; } diff --git a/common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/example-app-base/mapol-fix-createRef-type_2018-04-18-16-05.json new file mode 100644 index 00000000000000..68607fc07cb606 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/experiments/mapol-fix-createRef-type_2018-04-18-16-05.json new file mode 100644 index 00000000000000..e0e1fbc4a68846 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/@uifabric/utilities/mapol-fix-createRef-type_2018-04-18-16-05.json new file mode 100644 index 00000000000000..cd553107bd9383 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json b/common/changes/office-ui-fabric-react/mapol-fix-createRef-type_2018-04-18-16-05.json new file mode 100644 index 00000000000000..bd845f47dc3fa0 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/ghdocs/BestPractices/ComponentDesign.md b/ghdocs/BestPractices/ComponentDesign.md index 840a2759ffaa26..d5874979e68448 100644 --- a/ghdocs/BestPractices/ComponentDesign.md +++ b/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(); } } ``` diff --git a/packages/example-app-base/src/components/Highlight/Highlight.tsx b/packages/example-app-base/src/components/Highlight/Highlight.tsx index c11c2a5993fd48..51482f0bc96218 100644 --- a/packages/example-app-base/src/components/Highlight/Highlight.tsx +++ b/packages/example-app-base/src/components/Highlight/Highlight.tsx @@ -31,8 +31,8 @@ export class Highlight extends BaseComponent { } public componentDidMount(): void { - if (this._codeElement.value) { - highlightBlock(this._codeElement.value); + if (this._codeElement.current) { + highlightBlock(this._codeElement.current); } } } diff --git a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx index ed460e5a82c226..515c246b51753d 100644 --- a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx +++ b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx @@ -56,7 +56,7 @@ export class CommandBarBase extends BaseComponent implemen private _overflowSet = createRef(); private _resizeGroup = createRef(); - 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 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 { diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx index 9e1679a693996c..7880c3a408e920 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx +++ b/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); }); diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx index bd88502c5f8b6a..23befccb19daeb 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -62,7 +62,7 @@ export class BaseExtendedPicker> 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 { @@ -70,19 +70,19 @@ export class BaseExtendedPicker> extend } 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> 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> 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).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): 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> 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): 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> extend protected _isFocusZoneInnerKeystroke = (ev: React.KeyboardEvent): 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> 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(); diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx index 7112ba5e64a200..738e1504c3fc13 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx +++ b/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 ); } diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx index 90175d46014b9f..3f4049867221f3 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -46,7 +46,7 @@ export class EditingItem extends BaseComponent string; const itemText = getEditingItemText(this.props.item); - this._editingFloatingPicker.value && this._editingFloatingPicker.value.onQueryStringChanged(itemText); + this._editingFloatingPicker.current && this._editingFloatingPicker.current.onQueryStringChanged(itemText); this._editingInput.value = itemText; this._editingInput.focus(); } @@ -91,14 +91,14 @@ export class EditingItem extends BaseComponent { - this._editingFloatingPicker.value && this._editingFloatingPicker.value.showPicker(true /*updatevalue*/); + this._editingFloatingPicker.current && this._editingFloatingPicker.current.showPicker(true /*updatevalue*/); } private _onInputBlur = (ev: React.FocusEvent): void => { - if (this._editingFloatingPicker.value && + if (this._editingFloatingPicker.current && (ev.relatedTarget === null || (ev.relatedTarget as HTMLElement).className.indexOf('ms-SearchMore-button') === -1) ) { - this._editingFloatingPicker.value.forceResolveSuggestion(); + this._editingFloatingPicker.current.forceResolveSuggestion(); } } @@ -110,7 +110,7 @@ export class EditingItem extends BaseComponent) diff --git a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx index 15817e321616cc..0251e03d5915d5 100644 --- a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx +++ b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx @@ -212,7 +212,7 @@ export class VirtualizedList extends BaseComponent private _onFocus(ev: React.FocusEvent): void { let target = ev.target as HTMLElement; - while (target !== this._root.value) { + while (target !== this._root.current) { let indexString = target.getAttribute('data-selection-index'); if (indexString) { diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx index 61a9fc90f66ada..59b18c8b43b200 100644 --- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx @@ -34,8 +34,8 @@ export class Autofill extends BaseComponent impl } public get cursorLocation(): number | null { - if (this._inputElement.value) { - const inputElement = this._inputElement.value; + if (this._inputElement.current) { + const inputElement = this._inputElement.current; if (inputElement.selectionDirection !== SELECTION_FORWARD) { return inputElement.selectionEnd; } else { @@ -55,15 +55,15 @@ export class Autofill extends BaseComponent impl } public get selectionStart(): number | null { - return this._inputElement.value ? this._inputElement.value.selectionStart : -1; + return this._inputElement.current ? this._inputElement.current.selectionStart : -1; } public get selectionEnd(): number | null { - return this._inputElement.value ? this._inputElement.value.selectionEnd : -1; + return this._inputElement.current ? this._inputElement.current.selectionEnd : -1; } public get inputElement(): HTMLInputElement | null { - return this._inputElement.value; + return this._inputElement.current; } public componentWillReceiveProps(nextProps: IAutofillProps) { @@ -95,14 +95,14 @@ export class Autofill extends BaseComponent impl shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate(); } - if (shouldSelectFullRange && this._inputElement.value) { - this._inputElement.value.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD); + if (shouldSelectFullRange && this._inputElement.current) { + this._inputElement.current.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD); } else { while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) { differenceIndex++; } - if (differenceIndex > 0 && this._inputElement.value) { - this._inputElement.value.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD); + if (differenceIndex > 0 && this._inputElement.current) { + this._inputElement.current.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD); } } } @@ -133,13 +133,13 @@ export class Autofill extends BaseComponent impl } public focus() { - this._inputElement.value && this._inputElement.value.focus(); + this._inputElement.current && this._inputElement.current.focus(); } public clear() { this._autoFillEnabled = true; this._updateValue(''); - this._inputElement.value && this._inputElement.value.setSelectionRange(0, 0); + this._inputElement.current && this._inputElement.current.setSelectionRange(0, 0); } // Composition events are used when the character/text requires several keystrokes to be completed. @@ -233,8 +233,8 @@ export class Autofill extends BaseComponent impl private _tryEnableAutofill(newValue: string, oldValue: string, isComposing?: boolean, isComposed?: boolean) { if (!isComposing && newValue - && this._inputElement.value - && this._inputElement.value.selectionStart === newValue.length + && this._inputElement.current + && this._inputElement.current.selectionStart === newValue.length && !this._autoFillEnabled && (newValue.length > oldValue.length || isComposed)) { this._autoFillEnabled = true; diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx index 76befb4c563973..05a1c0c0aca8df 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -42,8 +42,8 @@ export class Breadcrumb extends BaseComponent { * Sets focus to the first breadcrumb link. */ public focus(): void { - if (this.focusZone.value) { - this.focusZone.value.focus(); + if (this.focusZone.current) { + this.focusZone.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx index 7cbdaeca15f986..df26bdeeda4a14 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -208,10 +208,10 @@ export class BaseButton extends BaseComponent @@ -428,8 +428,8 @@ export class BaseButton extends BaseComponent { - if (this._splitButtonContainer.value) { - this._splitButtonContainer.value.focus(); + if (this._splitButtonContainer.current) { + this._splitButtonContainer.current.focus(); } const { menuProps } = this.props; const currentMenuProps = this.state.menuProps; @@ -551,8 +551,8 @@ export class BaseButton extends BaseComponent) => { if (ev.which === KeyCodes.enter) { - if (this._buttonElement.value) { - this._buttonElement.value.click(); + if (this._buttonElement.current) { + this._buttonElement.current.click(); ev.preventDefault(); ev.stopPropagation(); } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 6d999bf54e92f6..ee130d056ce7e4 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -112,10 +112,10 @@ export class Calendar extends BaseComponent impl public componentDidUpdate() { if (this._focusOnUpdate) { // if the day picker is shown, focus on it - if (this._dayPicker.value) { - this._dayPicker.value.focus(); - } else if (this._monthPicker.value) { - this._monthPicker.value.focus(); + if (this._dayPicker.current) { + this._dayPicker.current.focus(); + } else if (this._monthPicker.current) { + this._monthPicker.current.focus(); } this._focusOnUpdate = false; } @@ -204,8 +204,8 @@ export class Calendar extends BaseComponent impl } public focus() { - if (this._dayPicker.value) { - this._dayPicker.value.focus(); + if (this._dayPicker.current) { + this._dayPicker.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx index aad6f3163b7162..b9eb91f7661bda 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx @@ -254,7 +254,7 @@ export class CalloutContentBase extends BaseComponent { - if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions && this._calloutElement.value) { + if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions && this._calloutElement.current) { this._didSetInitialFocus = true; - this._async.requestAnimationFrame(() => focusFirstChild(this._calloutElement.value!)); + this._async.requestAnimationFrame(() => focusFirstChild(this._calloutElement.current!)); } } @@ -327,8 +327,8 @@ export class CalloutContentBase extends BaseComponent { - const calloutMainElem = this._calloutElement.value && this._calloutElement.value.lastChild as HTMLElement; + const calloutMainElem = this._calloutElement.current && this._calloutElement.current.lastChild as HTMLElement; if (!calloutMainElem) { return; diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx index ba1d80ad79e0bf..f0e66f2cc175f3 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.base.tsx @@ -131,8 +131,8 @@ export class Checkbox extends BaseComponent impl } public focus(): void { - if (this._checkBox.value) { - this._checkBox.value.focus(); + if (this._checkBox.current) { + this._checkBox.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx index ecc83d3b3cf3e8..3fc63e618ebafa 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -137,8 +137,8 @@ export class ChoiceGroup extends BaseComponent {
{ - this._positioningContainer.value && { public componentDidMount(): void { this._async.requestAnimationFrame(((): void => { - if (this._entityInnerHostElement.value && (this.state.entityInnerHostRect.width + this.state.entityInnerHostRect.width) === 0) { + if (this._entityInnerHostElement.current && (this.state.entityInnerHostRect.width + this.state.entityInnerHostRect.width) === 0) { // @TODO Eventually we need to add the various directions const beakLeft = (this.props.width! / 2) - (this.props.beakWidth! / 2); @@ -188,8 +188,8 @@ export class Coachmark extends BaseComponent { this.setState({ isMeasuring: false, entityInnerHostRect: { - width: this._entityInnerHostElement.value.offsetWidth, - height: this._entityInnerHostElement.value.offsetHeight + width: this._entityInnerHostElement.current.offsetWidth, + height: this._entityInnerHostElement.current.offsetHeight }, beakLeft: beakLeft + 'px', beakTop: beakTop + 'px' @@ -214,13 +214,13 @@ export class Coachmark extends BaseComponent { collapsed: false }); - this._translateAnimationContainer.value && this._translateAnimationContainer.value.addEventListener('animationstart', (): void => { + this._translateAnimationContainer.current && this._translateAnimationContainer.current.addEventListener('animationstart', (): void => { if (this.props.onAnimationOpenStart) { this.props.onAnimationOpenStart(); } }); - this._translateAnimationContainer.value && this._translateAnimationContainer.value.addEventListener('animationend', (): void => { + this._translateAnimationContainer.current && this._translateAnimationContainer.current.addEventListener('animationend', (): void => { if (this.props.onAnimationOpenEnd) { this.props.onAnimationOpenEnd(); } @@ -243,8 +243,8 @@ export class Coachmark extends BaseComponent { // Take the initial measure out of the initial render to prevent // an unnecessary render. this._async.setTimeout(() => { - if (this._entityInnerHostElement.value) { - targetElementRect = this._entityInnerHostElement.value.getBoundingClientRect(); + if (this._entityInnerHostElement.current) { + targetElementRect = this._entityInnerHostElement.current.getBoundingClientRect(); } // When the window resizes we want to async @@ -258,8 +258,8 @@ export class Coachmark extends BaseComponent { }); timeoutIds.push(this._async.setTimeout((): void => { - if (this._entityInnerHostElement.value) { - targetElementRect = this._entityInnerHostElement.value.getBoundingClientRect(); + if (this._entityInnerHostElement.current) { + targetElementRect = this._entityInnerHostElement.current.getBoundingClientRect(); } }, 100)); }); diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx index 0a31984b9cfb20..eab4ad5ec598bd 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx +++ b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx @@ -217,7 +217,7 @@ export class PositioningContainer protected _dismissOnLostFocus(ev: Event): void { const target = ev.target as HTMLElement; - const clickedOutsideCallout = this._positionedHost.value && !elementContains(this._positionedHost.value, target); + const clickedOutsideCallout = this._positionedHost.current && !elementContains(this._positionedHost.current, target); if ( (!this._target && clickedOutsideCallout) || @@ -230,9 +230,9 @@ export class PositioningContainer } protected _setInitialFocus = (): void => { - if (this._contentHost.value && this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) { + if (this._contentHost.current && this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) { this._didSetInitialFocus = true; - focusFirstChild(this._contentHost.value); + focusFirstChild(this._contentHost.current); } } @@ -267,8 +267,8 @@ export class PositioningContainer onPositioned } = this.props; - const hostElement = this._positionedHost.value; - const positioningContainerElement = this._contentHost.value; + const hostElement = this._positionedHost.current; + const positioningContainerElement = this._contentHost.current; if (hostElement && positioningContainerElement) { let currentProps: IPositionProps | undefined; @@ -388,11 +388,11 @@ export class PositioningContainer private _setHeightOffsetEveryFrame(): void { if (this._contentHost && this.props.finalHeight) { this._setHeightOffsetTimer = this._async.requestAnimationFrame(() => { - if (!this._contentHost.value) { + if (!this._contentHost.current) { return; } - const positioningContainerMainElem = this._contentHost.value.lastChild as HTMLElement; + const positioningContainerMainElem = this._contentHost.current.lastChild as HTMLElement; const cardScrollHeight: number = positioningContainerMainElem.scrollHeight; const cardCurrHeight: number = positioningContainerMainElem.offsetHeight; const scrollDiff: number = cardScrollHeight - cardCurrHeight; diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx index 34cf5c556d1715..65bbb98b80f669 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx @@ -73,7 +73,7 @@ export class CoachmarkBasicExample extends BaseComponent<{}, ICoachmarkBasicExam
{ isVisible && ( ): void => { const { color, onSVChanged } = this.props; - if (!this._root.value) { + if (!this._root.current) { return; } - const rectSize = this._root.value.getBoundingClientRect(); + const rectSize = this._root.current.getBoundingClientRect(); const sPercentage = (ev.clientX - rectSize.left) / rectSize.width; const vPercentage = (ev.clientY - rectSize.top) / rectSize.height; diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx index 73b4ca591adc53..d6250e0a59b530 100644 --- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx +++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx @@ -85,12 +85,12 @@ export class ColorSlider extends BaseComponent): void => { - if (!this._root.value) { + if (!this._root.current) { return; } const { onChanged, minValue, maxValue } = this.props; - const rectSize = this._root.value.getBoundingClientRect(); + const rectSize = this._root.current.getBoundingClientRect(); const currentPercentage = (ev.clientX - rectSize.left) / rectSize.width; const newValue = Math.min(maxValue!, Math.max(minValue!, currentPercentage * maxValue!)); diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index a7986b1c5657d0..03a7e14426c1bb 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -189,7 +189,7 @@ export class ComboBox extends BaseComponent { public componentDidMount() { // hook up resolving the options if needed on focus - this._events.on(this._comboBoxWrapper.value, 'focus', this._onResolveOptions, true); + this._events.on(this._comboBoxWrapper.current, 'focus', this._onResolveOptions, true); } public componentWillReceiveProps(newProps: IComboBoxProps) { @@ -238,8 +238,8 @@ export class ComboBox extends BaseComponent { !isOpen && this._focusInputAfterClose && focused && - this._autofill.value && - document.activeElement !== this._autofill.value.inputElement)) { + this._autofill.current && + document.activeElement !== this._autofill.current.inputElement)) { this.focus(); } @@ -273,7 +273,7 @@ export class ComboBox extends BaseComponent { super.componentWillUnmount(); // remove the eventHanlder that was added in componentDidMount - this._events.off(this._comboBoxWrapper.value); + this._events.off(this._comboBoxWrapper.current); } // Primary Render @@ -405,8 +405,8 @@ export class ComboBox extends BaseComponent { * Set focus on the input */ public focus = (shouldOpenOnFocus?: boolean): void => { - if (this._autofill.value) { - this._autofill.value.focus(); + if (this._autofill.current) { + this._autofill.current.focus(); if (shouldOpenOnFocus) { this.setState({ isOpen: true @@ -431,7 +431,7 @@ export class ComboBox extends BaseComponent { * @returns {string} - the updated value to set, if needed */ private _onUpdateValueInAutofillWillReceiveProps = (): string | null => { - const comboBox = this._autofill.value; + const comboBox = this._autofill.current; if (!comboBox) { return null; @@ -812,8 +812,8 @@ export class ComboBox extends BaseComponent { * and set the focused state */ private _select = (): void => { - if (this._autofill.value && this._autofill.value.inputElement) { - this._autofill.value.inputElement.select(); + if (this._autofill.current && this._autofill.current.inputElement) { + this._autofill.current.inputElement.select(); } if (!this.state.focused) { @@ -864,8 +864,8 @@ export class ComboBox extends BaseComponent { // inside the comboBox root or the comboBox menu since // it we are not really bluring from the whole comboBox if (event.relatedTarget && - (this._root.value && this._root.value.contains(event.relatedTarget as HTMLElement) || - this._comboBoxMenu.value && this._comboBoxMenu.value.contains(event.relatedTarget as HTMLElement))) { + (this._root.current && this._root.current.contains(event.relatedTarget as HTMLElement) || + this._comboBoxMenu.current && this._comboBoxMenu.current.contains(event.relatedTarget as HTMLElement))) { event.preventDefault(); event.stopPropagation(); return; @@ -910,9 +910,9 @@ export class ComboBox extends BaseComponent { // the live value in the underlying input matches the pending option; update the state if (currentPendingValue.toLocaleLowerCase() === pendingOptionText || (autoComplete && pendingOptionText.indexOf(currentPendingValue.toLocaleLowerCase()) === 0 && - (this._autofill.value && this._autofill.value.isValueSelected && - currentPendingValue.length + (this._autofill.value.selectionEnd! - this._autofill.value.selectionStart!) === pendingOptionText.length) || - (this._autofill.value && this._autofill.value.inputElement && this._autofill.value.inputElement.value.toLocaleLowerCase() === pendingOptionText) + (this._autofill.current && this._autofill.current.isValueSelected && + currentPendingValue.length + (this._autofill.current.selectionEnd! - this._autofill.current.selectionStart!) === pendingOptionText.length) || + (this._autofill.current && this._autofill.current.inputElement && this._autofill.current.inputElement.value.toLocaleLowerCase() === pendingOptionText) )) { this._setSelectedIndex(currentPendingValueValidIndex); this._clearPendingInfo(); @@ -969,13 +969,13 @@ export class ComboBox extends BaseComponent { directionalHintFixed={ true } { ...calloutProps } className={ css(this._classNames.callout, calloutProps ? calloutProps.className : undefined) } - target={ this._comboBoxWrapper.value } + target={ this._comboBoxWrapper.current } onDismiss={ this._onDismiss } onScroll={ this._onScroll } setInitialFocus={ false } calloutWidth={ - useComboBoxAsMenuWidth && this._comboBoxWrapper.value ? - this._comboBoxWrapper.value.clientWidth + 2 + useComboBoxAsMenuWidth && this._comboBoxWrapper.current ? + this._comboBoxWrapper.current.clientWidth + 2 : dropdownWidth } >
@@ -1203,16 +1203,16 @@ export class ComboBox extends BaseComponent { if (onScrollToItem) { // Use the custom scroll handler onScrollToItem((currentPendingValueValidIndex >= 0 || currentPendingValue !== '') ? currentPendingValueValidIndex : this._getFirstSelectedIndex()); - } else if (this._selectedElement.value && this._selectedElement.value.offsetParent) { + } else if (this._selectedElement.current && this._selectedElement.current.offsetParent) { // We are using refs, scroll the ref into view if (scrollSelectedToTop) { - this._selectedElement.value.offsetParent.scrollIntoView(true); + this._selectedElement.current.offsetParent.scrollIntoView(true); } else { let alignToTop = true; - if (this._comboBoxMenu.value && this._comboBoxMenu.value.offsetParent) { - const scrollableParentRect = this._comboBoxMenu.value.offsetParent.getBoundingClientRect(); - const selectedElementRect = this._selectedElement.value.offsetParent.getBoundingClientRect(); + if (this._comboBoxMenu.current && this._comboBoxMenu.current.offsetParent) { + const scrollableParentRect = this._comboBoxMenu.current.offsetParent.getBoundingClientRect(); + const selectedElementRect = this._selectedElement.current.offsetParent.getBoundingClientRect(); // If we are completely in view then we do not need to scroll if (scrollableParentRect.top <= selectedElementRect.top && @@ -1226,7 +1226,7 @@ export class ComboBox extends BaseComponent { } } - this._selectedElement.value.offsetParent.scrollIntoView(alignToTop); + this._selectedElement.current.offsetParent.scrollIntoView(alignToTop); } } } @@ -1265,8 +1265,8 @@ export class ComboBox extends BaseComponent { // close the menu and focus the input this.setState({ isOpen: false }); - if (this._autofill.value && this._focusInputAfterClose) { - this._autofill.value.focus(); + if (this._autofill.current && this._focusInputAfterClose) { + this._autofill.current.focus(); } } @@ -1302,8 +1302,8 @@ export class ComboBox extends BaseComponent { selectedIndices, currentOptions } = this.state; - if (this._autofill.value) { - this._autofill.value.clear(); + if (this._autofill.current) { + this._autofill.current.clear(); } this._clearPendingInfo(); diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx index fc855b7ed0bde2..cd78735bf8aed4 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx @@ -12,14 +12,14 @@ export class VirtualizedComboBox extends BaseComponent imple private _list = createRef(); public dismissMenu(): void { - if (this._comboBox.value) { - return this._comboBox.value.dismissMenu(); + if (this._comboBox.current) { + return this._comboBox.current.dismissMenu(); } } public focus() { - if (this._comboBox.value) { - this._comboBox.value.focus(); + if (this._comboBox.current) { + this._comboBox.current.focus(); return true; } @@ -55,6 +55,6 @@ export class VirtualizedComboBox extends BaseComponent imple protected _onScrollToItem = (itemIndex: number): void => { // We are using the List component, call scrollToIndex - this._list.value && this._list.value.scrollToIndex(itemIndex); + this._list.current && this._list.current.scrollToIndex(itemIndex); } } \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx index 699f8a01e5d261..acd298cda6af33 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx @@ -169,7 +169,7 @@ export class CommandBar extends BaseComponent { - const { value: commandSurface } = this._commandSurface; + const { current: commandSurface } = this._commandSurface; if (!ev || !ev.relatedTarget || commandSurface && !commandSurface.contains(ev.relatedTarget as HTMLElement)) { const { contextualMenuProps } = this.state; diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx index ea2d0cde4d7aca..32e29248112f4b 100644 --- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx @@ -245,7 +245,7 @@ export class DatePicker extends BaseComponent { - if (this._calendar.value) { - this._calendar.value.focus(); + if (this._calendar.current) { + this._calendar.current.focus(); } } @@ -408,8 +408,8 @@ export class DatePicker extends BaseComponent { const rootElement = wrapper.getDOMNode(); const sizerElement = wrapper.find('[data-sizer-index=0]').getDOMNode(); - const header: any = headerRef.value; + const header: any = headerRef.current; // Trigger a mousedown, which validates that the ref to focuszone is hooking up events. EventGroup.raise( diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx index d1ce5425fac5fc..5d35cf465b4ece 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx @@ -102,7 +102,7 @@ export class DetailsHeader extends BaseComponent number): void { - this._list.value && this._list.value.scrollToIndex(index, measureItem); - this._groupedList.value && this._groupedList.value.scrollToIndex(index, measureItem); + this._list.current && this._list.current.scrollToIndex(index, measureItem); + this._groupedList.current && this._groupedList.current.scrollToIndex(index, measureItem); } public focusIndex( @@ -174,7 +174,7 @@ export class DetailsList extends BaseComponent 0 && this.state.focusedItemIndex !== -1 && - !elementContains(this._root.value, document.activeElement as HTMLElement, false) + !elementContains(this._root.current, document.activeElement as HTMLElement, false) ) { // Item set has changed and previously-focused item is gone. // Set focus to item at index of previously-focused item if it is in range, @@ -512,7 +512,7 @@ export class DetailsList extends BaseComponent) { if (ev.which === KeyCodes.down) { - if (this._focusZone.value && this._focusZone.value.focus()) { + if (this._focusZone.current && this._focusZone.current.focus()) { ev.preventDefault(); ev.stopPropagation(); } @@ -521,7 +521,7 @@ export class DetailsList extends BaseComponent) { if (ev.which === KeyCodes.up && !ev.altKey) { - if (this._header.value && this._header.value.focus()) { + if (this._header.current && this._header.current.focus()) { ev.preventDefault(); ev.stopPropagation(); } @@ -563,8 +563,8 @@ export class DetailsList extends BaseComponent { row.focus(forceIntoFirstElement); @@ -587,19 +587,19 @@ export class DetailsList extends BaseComponent= 0 && this._cellMeasurer.value) { - const newWidth = this._cellMeasurer.value.getBoundingClientRect().width; + if (columnMeasureInfo && columnMeasureInfo.index >= 0 && this._cellMeasurer.current) { + const newWidth = this._cellMeasurer.current.getBoundingClientRect().width; columnMeasureInfo.onMeasureDone(newWidth); @@ -329,7 +329,7 @@ export class DetailsRow extends BaseComponent { - if (this._root.value) { - this._root.value.focusIndex(items.length, true); + if (this._root.current) { + this._root.current.focusIndex(items.length, true); } }); } diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx index 1db79e315b5b3a..9b03ef17def543 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx @@ -119,8 +119,8 @@ export class DocumentCardTitle extends BaseComponent { onRenderList(props, this._onRenderList) } @@ -549,10 +549,10 @@ export class Dropdown extends BaseComponent { - if (this._focusZone.value) { + if (this._focusZone.current) { // Focusing an element can trigger a reflow. Making this wait until there is an animation // frame can improve perf significantly. - this._async.requestAnimationFrame(() => this._focusZone.value!.focus()); + this._async.requestAnimationFrame(() => this._focusZone.current!.focus()); } } @@ -614,11 +614,11 @@ export class Dropdown extends BaseComponent { this.setState({ isOpen: false }); - if (this._dropDown.value) { - this._dropDown.value.focus(); + if (this._dropDown.current) { + this._dropDown.current.focus(); } } @@ -802,8 +802,8 @@ export class Dropdown extends BaseComponent { - if (this._basicDropdown.value) { - this._basicDropdown.value.focus(true); + if (this._basicDropdown.current) { + this._basicDropdown.current.focus(true); } } diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx index 3319557f02d336..ac0b2b307bd4db 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx @@ -39,7 +39,7 @@ export class FocusTrapZone extends BaseComponent implem const { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true, elementToFocusOnDismiss, disableFirstFocus = false } = this.props; this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement as HTMLElement; - if (!elementContains(this._root.value, this._previouslyFocusedElement) && !disableFirstFocus) { + if (!elementContains(this._root.current, this._previouslyFocusedElement) && !disableFirstFocus) { this.focus(); } @@ -108,11 +108,11 @@ export class FocusTrapZone extends BaseComponent implem let _firstFocusableChild; - if (this._root.value) { + if (this._root.current) { if (focusSelector) { - _firstFocusableChild = this._root.value.querySelector('.' + focusSelector); + _firstFocusableChild = this._root.current.querySelector('.' + focusSelector); } else { - _firstFocusableChild = getNextElement(this._root.value, this._root.value.firstChild as HTMLElement, true, false, false, true); + _firstFocusableChild = getNextElement(this._root.current, this._root.current.firstChild as HTMLElement, true, false, false, true); } } if (_firstFocusableChild) { @@ -134,12 +134,12 @@ export class FocusTrapZone extends BaseComponent implem return; } - if (!this._root.value) { + if (!this._root.current) { return; } - const _firstFocusableChild = getFirstFocusable(this._root.value, this._root.value.firstChild as HTMLElement, true); - const _lastFocusableChild = getLastTabbable(this._root.value, this._root.value.lastChild as HTMLElement, true); + const _firstFocusableChild = getFirstFocusable(this._root.current, this._root.current.firstChild as HTMLElement, true); + const _lastFocusableChild = getLastTabbable(this._root.current, this._root.current.lastChild as HTMLElement, true); if (ev.shiftKey && _firstFocusableChild === ev.target) { focusAsync(_lastFocusableChild); @@ -156,7 +156,7 @@ export class FocusTrapZone extends BaseComponent implem if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) { const focusedElement = document.activeElement as HTMLElement; - if (!elementContains(this._root.value, focusedElement)) { + if (!elementContains(this._root.current, focusedElement)) { this.focus(); ev.preventDefault(); ev.stopPropagation(); @@ -168,7 +168,7 @@ export class FocusTrapZone extends BaseComponent implem if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) { const clickedElement = ev.target as HTMLElement; - if (clickedElement && !elementContains(this._root.value, clickedElement)) { + if (clickedElement && !elementContains(this._root.current, clickedElement)) { this.focus(); ev.preventDefault(); ev.stopPropagation(); diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index 37c220e477b261..de89ab2aecb7fd 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -86,10 +86,10 @@ export class FocusZone extends BaseComponent implements IFo public componentDidMount() { _allInstances[this._id] = this; - if (this._root.value) { - const windowElement = this._root.value.ownerDocument.defaultView; + if (this._root.current) { + const windowElement = this._root.current.ownerDocument.defaultView; - let parentElement = getParent(this._root.value, ALLOW_VIRTUAL_ELEMENTS); + let parentElement = getParent(this._root.current, ALLOW_VIRTUAL_ELEMENTS); while ( parentElement && @@ -159,25 +159,25 @@ export class FocusZone extends BaseComponent implements IFo * @returns True if focus could be set to an active element, false if no operation was taken. */ public focus(forceIntoFirstElement: boolean = false): boolean { - if (this._root.value) { - if (!forceIntoFirstElement && this._root.value.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' && this._isInnerZone) { - const ownerZoneElement = this._getOwnerZone(this._root.value) as HTMLElement; + if (this._root.current) { + if (!forceIntoFirstElement && this._root.current.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' && this._isInnerZone) { + const ownerZoneElement = this._getOwnerZone(this._root.current) as HTMLElement; - if (ownerZoneElement !== this._root.value) { + if (ownerZoneElement !== this._root.current) { const ownerZone = _allInstances[ownerZoneElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string]; - return !!ownerZone && ownerZone.focusElement(this._root.value); + return !!ownerZone && ownerZone.focusElement(this._root.current); } return false; - } else if (!forceIntoFirstElement && this._activeElement && elementContains(this._root.value, this._activeElement) + } else if (!forceIntoFirstElement && this._activeElement && elementContains(this._root.current, this._activeElement) && isElementTabbable(this._activeElement)) { this._activeElement.focus(); return true; } else { - const firstChild = this._root.value.firstChild as HTMLElement; + const firstChild = this._root.current.firstChild as HTMLElement; - return this.focusElement(getNextElement(this._root.value, firstChild, true) as HTMLElement); + return this.focusElement(getNextElement(this._root.current, firstChild, true) as HTMLElement); } } return false; @@ -218,7 +218,7 @@ export class FocusZone extends BaseComponent implements IFo } else { let parentElement = ev.target as HTMLElement; - while (parentElement && parentElement !== this._root.value) { + while (parentElement && parentElement !== this._root.current) { if (isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) { this._activeElement = parentElement; break; @@ -250,7 +250,7 @@ export class FocusZone extends BaseComponent implements IFo let target = ev.target as HTMLElement; const path = []; - while (target && target !== this._root.value) { + while (target && target !== this._root.current) { path.push(target); target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement; } @@ -301,7 +301,7 @@ export class FocusZone extends BaseComponent implements IFo return; } - if (document.activeElement === this._root.value && this._isInnerZone) { + if (document.activeElement === this._root.current && this._isInnerZone) { // If this element has focus, it is being controlled by a parent. // Ignore the keystroke. return; @@ -395,8 +395,8 @@ export class FocusZone extends BaseComponent implements IFo !this._shouldInputLoseFocus(ev.target as HTMLInputElement, false)) { return false; } - const firstChild = this._root.value && this._root.value.firstChild as HTMLElement | null; - if (this._root.value && firstChild && this.focusElement(getNextElement(this._root.value, firstChild, true) as HTMLElement)) { + const firstChild = this._root.current && this._root.current.firstChild as HTMLElement | null; + if (this._root.current && firstChild && this.focusElement(getNextElement(this._root.current, firstChild, true) as HTMLElement)) { break; } return; @@ -408,8 +408,8 @@ export class FocusZone extends BaseComponent implements IFo return false; } - const lastChild = this._root.value && this._root.value.lastChild as HTMLElement | null; - if (this._root.value && this.focusElement(getPreviousElement(this._root.value, lastChild, true, true, true) as HTMLElement)) { + const lastChild = this._root.current && this._root.current.lastChild as HTMLElement | null; + if (this._root.current && this.focusElement(getPreviousElement(this._root.current, lastChild, true, true, true) as HTMLElement)) { break; } return; @@ -433,7 +433,7 @@ export class FocusZone extends BaseComponent implements IFo * Walk up the dom try to find a focusable element. */ private _tryInvokeClickForFocusable(target: HTMLElement): boolean { - if (target === this._root.value) { + if (target === this._root.current) { return false; } @@ -452,7 +452,7 @@ export class FocusZone extends BaseComponent implements IFo } target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement; - } while (target !== this._root.value); + } while (target !== this._root.current); return false; } @@ -461,7 +461,7 @@ export class FocusZone extends BaseComponent implements IFo * Traverse to find first child zone. */ private _getFirstInnerZone(rootElement?: HTMLElement | null): FocusZone | null { - rootElement = rootElement || this._activeElement || this._root.value; + rootElement = rootElement || this._activeElement || this._root.current; if (!rootElement) { return null; @@ -501,7 +501,7 @@ export class FocusZone extends BaseComponent implements IFo let changedFocus = false; const isBidirectional = this.props.direction === FocusZoneDirection.bidirectional; - if (!element || !this._root.value) { + if (!element || !this._root.current) { return false; } @@ -514,7 +514,7 @@ export class FocusZone extends BaseComponent implements IFo const activeRect = isBidirectional ? element.getBoundingClientRect() : null; do { - element = (isForward ? getNextElement(this._root.value, element) : getPreviousElement(this._root.value, element)) as HTMLElement; + element = (isForward ? getNextElement(this._root.current, element) : getPreviousElement(this._root.current, element)) as HTMLElement; if (isBidirectional) { if (element) { @@ -548,9 +548,9 @@ export class FocusZone extends BaseComponent implements IFo this.focusElement(candidateElement); } else if (this.props.isCircularNavigation && useDefaultWrap) { if (isForward) { - return this.focusElement(getNextElement(this._root.value, this._root.value.firstElementChild as HTMLElement, true) as HTMLElement); + return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild as HTMLElement, true) as HTMLElement); } else { - return this.focusElement(getPreviousElement(this._root.value, this._root.value.lastElementChild as HTMLElement, true, true, true) as HTMLElement); + return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild as HTMLElement, true, true, true) as HTMLElement); } } @@ -718,13 +718,13 @@ export class FocusZone extends BaseComponent implements IFo } private _isImmediateDescendantOfZone(element?: HTMLElement): boolean { - return this._getOwnerZone(element) === this._root.value; + return this._getOwnerZone(element) === this._root.current; } private _getOwnerZone(element?: HTMLElement): HTMLElement | null { let parentElement = getParent(element as HTMLElement, ALLOW_VIRTUAL_ELEMENTS); - while (parentElement && parentElement !== this._root.value && parentElement !== document.body) { + while (parentElement && parentElement !== this._root.current && parentElement !== document.body) { if (isElementFocusZone(parentElement)) { return parentElement; } @@ -732,13 +732,13 @@ export class FocusZone extends BaseComponent implements IFo parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS); } - return this._root.value; + return this._root.current; } private _updateTabIndexes(element?: HTMLElement) { - if (!element && this._root.value) { + if (!element && this._root.current) { this._defaultFocusElement = null; - element = this._root.value; + element = this._root.current; if (this._activeElement && !elementContains(element, this._activeElement)) { this._activeElement = null; } diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx index b42da1572c0e1f..1c4fa2149b06a9 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx @@ -56,8 +56,8 @@ export class GroupedList extends BaseComponent number): void { - if (this._list.value) { - this._list.value.scrollToIndex(index, measureItem); + if (this._list.current) { + this._list.current.scrollToIndex(index, measureItem); } } @@ -247,11 +247,11 @@ export class GroupedList extends BaseComponent 0) { const subGroupCount = group.children.length; for (let i = 0; i < subGroupCount; i++) { - const subGroup = this._list.value.refs['subGroup_' + String(i)] as GroupedListSection; + const subGroup = this._list.current.refs['subGroup_' + String(i)] as GroupedListSection; if (subGroup) { subGroup.forceListUpdate(); diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx index 05e07d1c3bff19..b6ab47a089aa99 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx @@ -142,9 +142,9 @@ export class ExpandingCard extends BaseComponent { - if (this._expandedElem.value) { + if (this._expandedElem.current) { this._async.requestAnimationFrame(() => { - if (this._expandedElem.value && this._expandedElem.value.scrollHeight >= this.props.expandedCardHeight!) { + if (this._expandedElem.current && this._expandedElem.current.scrollHeight >= this.props.expandedCardHeight!) { this.setState({ needsScroll: true }); diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx index 7e04bc43247259..b401cc8f4c0135 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx @@ -138,7 +138,7 @@ export class HoverCard extends BaseComponent { return target as HTMLElement; default: - return this._hoverCard.value || undefined; + return this._hoverCard.current || undefined; } } 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 5d13ac2caf02a3..966228a12045e5 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 @@ -151,8 +151,8 @@ export class ImageBase extends BaseComponent { // .complete, because .complete will also be set to true if the image breaks. However, // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back // to checking .complete for these images. - const isLoaded: boolean = this._imageElement.value ? src && (this._imageElement.value.naturalWidth > 0 && this._imageElement.value.naturalHeight > 0) || - (this._imageElement.value.complete && ImageBase._svgRegex.test(src!)) : false; + const isLoaded: boolean = this._imageElement.current ? src && (this._imageElement.current.naturalWidth > 0 && this._imageElement.current.naturalHeight > 0) || + (this._imageElement.current.complete && ImageBase._svgRegex.test(src!)) : false; if (isLoaded) { this._computeCoverStyle(this.props); @@ -169,19 +169,19 @@ export class ImageBase extends BaseComponent { // Do not compute cover style if it was already specified in props if ((imageFit === ImageFit.cover || imageFit === ImageFit.contain) && this.props.coverStyle === undefined && - this._imageElement.value && - this._frameElement.value) { + this._imageElement.current && + this._frameElement.current) { // Determine the desired ratio using the width and height props. // If those props aren't available, measure measure the frame. let desiredRatio; if (!!width && !!height) { desiredRatio = (width as number) / (height as number); } else { - desiredRatio = this._frameElement.value.clientWidth / this._frameElement.value.clientHeight; + desiredRatio = this._frameElement.current.clientWidth / this._frameElement.current.clientHeight; } // Examine the source image to determine its original ratio. - const naturalRatio = this._imageElement.value.naturalWidth / this._imageElement.value.naturalHeight; + const naturalRatio = this._imageElement.current.naturalWidth / this._imageElement.current.naturalHeight; // Should we crop from the top or the sides? if (naturalRatio > desiredRatio) { 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 b20038037b429d..01181d5f2d7a27 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 @@ -108,7 +108,7 @@ export class LayerBase extends BaseComponent { this._host = host; if (!this._layerElement) { - const rootElement = this._rootElement.value; + const rootElement = this._rootElement.current; const doc = getDocument(rootElement); if (!doc || !rootElement) { @@ -171,7 +171,7 @@ export class LayerBase extends BaseComponent { private _getHost(): Node | undefined { const { hostId } = this.props; - const doc = getDocument(this._rootElement.value); + const doc = getDocument(this._rootElement.current); if (!doc) { return undefined; diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx index 255adf0716bb47..884801350150db 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx @@ -60,8 +60,8 @@ export class LinkBase extends BaseComponent implements ILink { } public focus() { - if (this._link.value) { - this._link.value.focus(); + if (this._link.current) { + this._link.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/List/List.tsx b/packages/office-ui-fabric-react/src/components/List/List.tsx index 9e8a2749e7cab9..7ec5f780540c26 100644 --- a/packages/office-ui-fabric-react/src/components/List/List.tsx +++ b/packages/office-ui-fabric-react/src/components/List/List.tsx @@ -261,11 +261,11 @@ export class List extends BaseComponent implements IList this._updatePages(); this._measureVersion++; - this._scrollElement = findScrollableParent(this._root.value) as HTMLElement; + this._scrollElement = findScrollableParent(this._root.current) as HTMLElement; this._events.on(window, 'resize', this._onAsyncResize); - if (this._root.value) { - this._events.on(this._root.value, 'focus', this._onFocus, true); + if (this._root.current) { + this._events.on(this._root.current, 'focus', this._onFocus, true); } if (this._scrollElement) { this._events.on(this._scrollElement, 'scroll', this._onScroll); @@ -476,7 +476,7 @@ export class List extends BaseComponent implements IList private _onFocus(ev: any) { let target = ev.target as HTMLElement; - while (target !== this._surface.value) { + while (target !== this._surface.current) { const indexString = target.getAttribute('data-list-index'); if (indexString) { @@ -927,7 +927,7 @@ export class List extends BaseComponent implements IList // This needs to be called to recalculate when new pages should be loaded. // We check to see how far we've scrolled and if it's further than a third of a page we run it again. if ( - this._surface.value && + this._surface.current && (forceUpdate || !pages || !this._surfaceRect || @@ -935,7 +935,7 @@ export class List extends BaseComponent implements IList scrollHeight !== this._scrollHeight || Math.abs(this._scrollTop - scrollTop) > this._estimatedPageHeight / 3) ) { - surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface.value); + surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface.current); this._scrollTop = scrollTop; } diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx index 1a5abcb5578c12..4f8e6385eee7ec 100644 --- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx +++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx @@ -60,11 +60,11 @@ export class MarqueeSelection extends BaseComponent implements I } public focus() { - if (this._focusTrapZone.value) { - this._focusTrapZone.value.focus(); + if (this._focusTrapZone.current) { + this._focusTrapZone.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index ea1d653ad93d8f..bf17e75ba12b31 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -87,11 +87,11 @@ export class OverflowSet extends BaseComponent implements let focusSucceeded = false; if (this.props.doNotContainWithinFocusZone) { - if (this._divContainer.value) { - focusSucceeded = focusFirstChild(this._divContainer.value); + if (this._divContainer.current) { + focusSucceeded = focusFirstChild(this._divContainer.current); } - } else if (this._focusZone.value) { - focusSucceeded = this._focusZone.value.focus(forceIntoFirstElement); + } else if (this._focusZone.current) { + focusSucceeded = this._focusZone.current.focus(forceIntoFirstElement); } return focusSucceeded; @@ -110,12 +110,12 @@ export class OverflowSet extends BaseComponent implements } if (this.props.doNotContainWithinFocusZone) { - if (this._divContainer.value && elementContains(this._divContainer.value, childElement)) { + if (this._divContainer.current && elementContains(this._divContainer.current, childElement)) { childElement.focus(); focusSucceeded = document.activeElement === childElement; } - } else if (this._focusZone.value) { - focusSucceeded = this._focusZone.value.focusElement(childElement); + } else if (this._focusZone.current) { + focusSucceeded = this._focusZone.current.focusElement(childElement); } return focusSucceeded; diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx index e7d21d5380bc01..8aae33f9273c8a 100644 --- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx +++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx @@ -308,7 +308,7 @@ export class Panel extends BaseComponent implements IP } private _updateFooterPosition(): void { - const _content = this._content.value; + const _content = this._content.current; if (_content) { const height = _content.clientHeight; const innerHeight = _content.scrollHeight; diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx index 0d48ff850ad039..f3ec8ce5527bfd 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx @@ -95,8 +95,8 @@ export class Pivot extends BaseComponent { * Sets focus to the first pivot tab. */ public focus(): void { - if (this.focusZone.value) { - this.focusZone.value.focus(); + if (this.focusZone.current) { + this.focusZone.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx index 7834e89b4a948d..a10db7d82c1be6 100644 --- a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx +++ b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx @@ -38,14 +38,14 @@ export class Popup extends BaseComponent { } public componentDidMount(): void { - if (!this._root.value) { + if (!this._root.current) { return; } - this._events.on(this._root.value, 'focus', this._onFocus, true); - this._events.on(this._root.value, 'blur', this._onBlur, true); + this._events.on(this._root.current, 'focus', this._onFocus, true); + this._events.on(this._root.current, 'blur', this._onBlur, true); - if (doesElementContainFocus(this._root.value)) { + if (doesElementContainFocus(this._root.current)) { this._containsFocus = true; } @@ -114,7 +114,7 @@ export class Popup extends BaseComponent { private _getScrollBar() { let needsVerticalScrollBar = false; - if (this._root && this._root.value && this._root.value.firstElementChild) { + if (this._root && this._root.current && this._root.current.firstElementChild) { // ClientHeight returns the client height of an element rounded to an // integer. On some browsers at different zoom levels this rounding // can generate different results for the root container and child even @@ -124,8 +124,8 @@ export class Popup extends BaseComponent { // Therefore instead we will calculate the difference between heights and // allow for a 1px difference to still be considered ok and not show the // scroll bar. - const rootHeight = this._root.value.clientHeight; - const firstChildHeight = this._root.value.firstElementChild.clientHeight; + const rootHeight = this._root.current.clientHeight; + const firstChildHeight = this._root.current.firstElementChild.clientHeight; if (rootHeight > 0 && firstChildHeight > rootHeight) { needsVerticalScrollBar = (firstChildHeight - rootHeight) > 1; } diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx index f0790dc988d2ef..294e0991d7902b 100644 --- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx @@ -351,7 +351,7 @@ export class ResizeGroupBase extends BaseComponent { let containerWidth = undefined; - if (this.state.measureContainer && this._root.value) { - containerWidth = this._root.value.getBoundingClientRect().width; + if (this.state.measureContainer && this._root.current) { + containerWidth = this._root.current.getBoundingClientRect().width; } const nextState = this._nextResizeGroupStateProvider.getNextState(this.props, this.state, - () => this._measured.value ? this._measured.value.scrollWidth : 0, + () => this._measured.current ? this._measured.current.scrollWidth : 0, containerWidth); if (nextState) { @@ -374,7 +374,7 @@ export class ResizeGroupBase extends BaseComponent } public get root(): HTMLDivElement | null { - return this._root.value; + return this._root.current; } public get stickyAbove(): HTMLDivElement | null { - return this._stickyAboveRef.value; + return this._stickyAboveRef.current; } public get stickyBelow(): HTMLDivElement | null { - return this._stickyBelowRef.value; + return this._stickyBelowRef.current; } public getChildContext() { @@ -72,19 +72,19 @@ export class ScrollablePaneBase extends BaseComponent } public componentDidMount() { - this._events.on(this._root.value, 'scroll', this.notifySubscribers); + this._events.on(this._root.current, 'scroll', this.notifySubscribers); this._events.on(window, 'resize', this._onWindowResize); } public componentWillUnmount() { - this._events.off(this._root.value); + this._events.off(this._root.current); this._events.off(window); } public componentDidUpdate(prevProps: IScrollablePaneProps) { const initialScrollPosition = this.props.initialScrollPosition; - if (this._root.value && initialScrollPosition && prevProps.initialScrollPosition !== initialScrollPosition) { - this._root.value.scrollTop = initialScrollPosition; + if (this._root.current && initialScrollPosition && prevProps.initialScrollPosition !== initialScrollPosition) { + this._root.current.scrollTop = initialScrollPosition; } } @@ -126,45 +126,45 @@ export class ScrollablePaneBase extends BaseComponent public addStickyHeader = (sticky: Sticky): void => { this._addSticky(sticky, this._stickyAbove, () => { - if (this._stickyAboveRef.value) { - this._stickyAboveRef.value.appendChild(sticky.content); + if (this._stickyAboveRef.current) { + this._stickyAboveRef.current.appendChild(sticky.content); } }); } public addStickyFooter = (sticky: Sticky): void => { this._addSticky(sticky, this._stickyBelow, () => { - if (this._stickyBelowRef.value) { - this._stickyBelowRef.value.insertBefore(sticky.content, this._stickyBelowRef.value.firstChild); + if (this._stickyBelowRef.current) { + this._stickyBelowRef.current.insertBefore(sticky.content, this._stickyBelowRef.current.firstChild); } }); } public removeStickyHeader = (sticky: Sticky): void => { - this._removeSticky(sticky, this._stickyAbove, this._stickyAboveRef.value); + this._removeSticky(sticky, this._stickyAbove, this._stickyAboveRef.current); } public removeStickyFooter = (sticky: Sticky): void => { - this._removeSticky(sticky, this._stickyBelow, this._stickyBelowRef.value); + this._removeSticky(sticky, this._stickyBelow, this._stickyBelowRef.current); } public notifySubscribers = (sort?: boolean): void => { this._subscribers.forEach((handle) => { - if (this._stickyAboveRef.value && this._stickyBelowRef.value) { - handle(this._stickyAboveRef.value.getBoundingClientRect(), this._stickyBelowRef.value.getBoundingClientRect()); + if (this._stickyAboveRef.current && this._stickyBelowRef.current) { + handle(this._stickyAboveRef.current.getBoundingClientRect(), this._stickyBelowRef.current.getBoundingClientRect()); } }); if (this._stickyAbove.size > 1) { - this._sortStickies(this._stickyAbove, this._stickyAboveRef.value); + this._sortStickies(this._stickyAbove, this._stickyAboveRef.current); } if (this._stickyBelow.size > 1) { - this._sortStickies(this._stickyBelow, this._stickyBelowRef.value); + this._sortStickies(this._stickyBelow, this._stickyBelowRef.current); } } public getScrollPosition = (): number => { - if (this._root.value) { - return this._root.value.scrollTop; + if (this._root.current) { + return this._root.current.scrollTop; } return 0; @@ -218,8 +218,8 @@ export class ScrollablePaneBase extends BaseComponent let stickyArr = Array.from(stickyList); stickyArr = stickyArr.sort((a, b) => { - const aOffset = this._calculateOffsetParent(a.root.value); - const bOffset = this._calculateOffsetParent(b.root.value); + const aOffset = this._calculateOffsetParent(a.root.current); + const bOffset = this._calculateOffsetParent(b.root.current); return aOffset - bOffset; }); // Get number of elements that is already in order. @@ -243,7 +243,7 @@ export class ScrollablePaneBase extends BaseComponent private _calculateOffsetParent(ele: HTMLElement | null): number { let offset = 0; - while (ele && this._root.value && ele.offsetParent !== this._root.value.offsetParent) { + while (ele && this._root.current && ele.offsetParent !== this._root.current.offsetParent) { offset += ele.offsetTop; if (ele.parentElement) { ele = ele.parentElement; diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx index 24597119e0b0f2..c4770b37ef9cbc 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx @@ -115,8 +115,8 @@ export class SearchBoxBase extends BaseComponent); @@ -197,7 +197,7 @@ export class SearchBoxBase extends BaseComponent): void => { - this._events.off(this._rootElement.value, 'blur'); + this._events.off(this._rootElement.current, 'blur'); this.setState({ hasFocus: false }); diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx index 9da5f25de6ba14..3b84e566df72da 100644 --- a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx +++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx @@ -151,8 +151,8 @@ export class Slider extends BaseComponent implements ) as React.ReactElement<{}>; } public focus(): void { - if (this._thumb.value) { - this._thumb.value.focus(); + if (this._thumb.current) { + this._thumb.current.focus(); } } @@ -185,13 +185,13 @@ export class Slider extends BaseComponent implements } private _onMouseMoveOrTouchMove = (event: MouseEvent | TouchEvent, suppressEventCancelation?: boolean): void => { - if (!this._sliderLine.value) { + if (!this._sliderLine.current) { return; } const { max, min, step } = this.props; const steps: number = (max! - min!) / step!; - const sliderPositionRect: ClientRect = this._sliderLine.value.getBoundingClientRect(); + const sliderPositionRect: ClientRect = this._sliderLine.current.getBoundingClientRect(); const sliderLength: number = !this.props.vertical ? sliderPositionRect.width : sliderPositionRect.height; const stepLength: number = sliderLength / steps; let currentSteps: number | undefined; diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx index 5ca3fcdf8e4826..758cd3c8864860 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx @@ -263,14 +263,14 @@ export class SpinButton extends BaseComponent): void => { // We can't set focus on a non-existing element - if (!this._input.value) { + if (!this._input.current) { return; } @@ -278,7 +278,7 @@ export class SpinButton extends BaseComponent { this.content = document.createElement('div'); this.content.style.background = this.props.stickyBackgroundColor || this._getBackground(); ReactDOM.render(
{ this.props.children }
, this.content); - if (this.root.value) { - this.root.value.appendChild(this.content); + if (this.root.current) { + this.root.current.appendChild(this.content); } this.context.scrollablePane.notifySubscribers(true); } @@ -135,11 +135,11 @@ export class Sticky extends BaseComponent { } private _onScrollEvent = (headerBound: ClientRect, footerBound: ClientRect): void => { - if (!this.root.value) { + if (!this.root.current) { return; } - const { top, bottom } = this.root.value.getBoundingClientRect(); + const { top, bottom } = this.root.current.getBoundingClientRect(); const { isStickyTop, isStickyBottom } = this.state; const { stickyPosition } = this.props; const canStickyHeader = stickyPosition === StickyPositionType.Both || stickyPosition === StickyPositionType.Header; @@ -159,8 +159,8 @@ export class Sticky extends BaseComponent { } private _resetSticky(callback: () => void): void { - if (this.root.value) { - this.root.value.appendChild(this.content); + if (this.root.current) { + this.root.current.appendChild(this.content); } setTimeout(() => { @@ -173,11 +173,11 @@ export class Sticky extends BaseComponent { // Gets background of nearest parent element that has a declared background-color attribute private _getBackground(): string | null { - if (!this.root.value) { + if (!this.root.current) { return null; } - let curr: HTMLElement = this.root.value; + let curr: HTMLElement = this.root.current; while (window.getComputedStyle(curr).getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' || window.getComputedStyle(curr).getPropertyValue('background-color') === 'transparent') { diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx index 309fd7ee2ca28a..18999147b804d9 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx @@ -214,8 +214,8 @@ export class TextField extends BaseComponent i * Sets focus on the text field */ public focus() { - if (this._textElement.value) { - this._textElement.value.focus(); + if (this._textElement.current) { + this._textElement.current.focus(); } } @@ -223,8 +223,8 @@ export class TextField extends BaseComponent i * Selects the text field */ public select() { - if (this._textElement.value) { - this._textElement.value.select(); + if (this._textElement.current) { + this._textElement.current.select(); } } @@ -232,8 +232,8 @@ export class TextField extends BaseComponent i * Sets the selection start of the text field to a specified value */ public setSelectionStart(value: number) { - if (this._textElement.value) { - this._textElement.value.selectionStart = value; + if (this._textElement.current) { + this._textElement.current.selectionStart = value; } } @@ -241,8 +241,8 @@ export class TextField extends BaseComponent i * Sets the selection end of the text field to a specified value */ public setSelectionEnd(value: number) { - if (this._textElement.value) { - this._textElement.value.selectionEnd = value; + if (this._textElement.current) { + this._textElement.current.selectionEnd = value; } } @@ -250,14 +250,14 @@ export class TextField extends BaseComponent i * Gets the selection start of the text field */ public get selectionStart(): number | null { - return this._textElement.value ? this._textElement.value.selectionStart : -1; + return this._textElement.current ? this._textElement.current.selectionStart : -1; } /** * Gets the selection end of the text field */ public get selectionEnd(): number | null { - return this._textElement.value ? this._textElement.value.selectionEnd : -1; + return this._textElement.current ? this._textElement.current.selectionEnd : -1; } /** @@ -266,8 +266,8 @@ export class TextField extends BaseComponent i * @param end Index of the end of the selection. */ public setSelectionRange(start: number, end: number) { - if (this._textElement.value) { - (this._textElement.value as HTMLInputElement).setSelectionRange(start, end); + if (this._textElement.current) { + (this._textElement.current as HTMLInputElement).setSelectionRange(start, end); } } @@ -465,8 +465,8 @@ export class TextField extends BaseComponent i } private _adjustInputHeight(): void { - if (this._textElement.value && this.props.autoAdjustHeight && this.props.multiline) { - const textField = this._textElement.value; + if (this._textElement.current && this.props.autoAdjustHeight && this.props.multiline) { + const textField = this._textElement.current; textField.style.height = ''; const scrollHeight = textField.scrollHeight + 2; // +2 to avoid vertical scroll bars textField.style.height = scrollHeight + 'px'; diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx index c1b30f53390983..f57a7e86d4e076 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx @@ -117,8 +117,8 @@ export class Toggle extends BaseComponent implements } public focus() { - if (this._toggleButton.value) { - this._toggleButton.value.focus(); + if (this._toggleButton.current) { + this._toggleButton.current.focus(); } } diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx index 0f2d029f8e6f00..dc3758e8c1e51c 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx @@ -100,7 +100,7 @@ export class TooltipHost extends BaseComponent> extends BaseComponent< } public focus() { - if (this.focusZone.value) { - this.focusZone.value.focus(); + if (this.focusZone.current) { + this.focusZone.current.focus(); } } public focusInput() { - if (this.input.value) { - this.input.value.focus(); + if (this.input.current) { + this.input.current.focus(); } } @@ -148,10 +148,10 @@ export class BasePicker> extends BaseComponent< } public completeSuggestion() { - if (this.suggestionStore.hasSelectedSuggestion() && this.input.value) { + if (this.suggestionStore.hasSelectedSuggestion() && this.input.current) { this.addItem(this.suggestionStore.currentSuggestion!.item); this.updateValue(''); - this.input.value.clear(); + this.input.current.clear(); } } @@ -235,7 +235,7 @@ export class BasePicker> extends BaseComponent< > extends BaseComponent< const { items } = this.state; if (items.length && index! >= 0) { - const newEl: HTMLElement | null = this.root.value && this.root.value.querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement | null; - if (newEl && this.focusZone.value) { - this.focusZone.value.focusElement(newEl); + const newEl: HTMLElement | null = this.root.current && this.root.current.querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement | null; + if (newEl && this.focusZone.current) { + this.focusZone.current.focusElement(newEl); } } else if (!this.canAddItems()) { (items[items.length - 1] as IPickerItemProps).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 onSuggestionSelect() { if (this.suggestionStore.currentSuggestion) { - const currentValue: string = this.input.value ? this.input.value.value : ''; + const currentValue: string = this.input.current ? this.input.current.value : ''; const itemValue: string = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue); this.setState({ suggestedDisplayValue: itemValue }); } @@ -347,11 +347,11 @@ export class BasePicker> extends BaseComponent< if (updatedValue !== undefined) { this.setState({ - suggestionsVisible: this.input.value ? (this.input.value.value !== '' && this.input.value.inputElement === document.activeElement) : false + suggestionsVisible: this.input.current ? (this.input.current.value !== '' && this.input.current.inputElement === document.activeElement) : false }); } else { this.setState({ - suggestionsVisible: this.input.value ? this.input.value.inputElement === document.activeElement : false + suggestionsVisible: this.input.current ? this.input.current.inputElement === document.activeElement : false }); } @@ -387,7 +387,7 @@ export class BasePicker> extends BaseComponent< this.setState({ suggestionsLoading: false, suggestedDisplayValue: itemValue, - suggestionsVisible: this.input.value ? (this.input.value.value !== '' && this.input.value.inputElement === document.activeElement) : false + suggestionsVisible: this.input.current ? (this.input.current.value !== '' && this.input.current.inputElement === document.activeElement) : false }); } @@ -424,14 +424,14 @@ export class BasePicker> extends BaseComponent< if (!this.state.isFocused) { this.setState({ isFocused: true }); this.selection.setAllSelected(false); - if (this.input.value && this.input.value.value === '' && this.props.onEmptyInputFocus) { + if (this.input.current && this.input.current.value === '' && this.props.onEmptyInputFocus) { this.onEmptyInputFocus(); this.setState({ isMostRecentlyUsedVisible: true, moreSuggestionsAvailable: false, suggestionsVisible: true }); - } else if (this.input.value && this.input.value.value) { + } else if (this.input.current && this.input.current.value) { this.setState({ isMostRecentlyUsedVisible: false, suggestionsVisible: true @@ -445,7 +445,7 @@ export class BasePicker> extends BaseComponent< protected onInputBlur = (ev: React.FocusEvent): void => { // Only blur if an unrelated element gets focus. Otherwise treat it as though it still has focus. - if (!elementContains(this.root.value!, ev.relatedTarget as HTMLElement)) { + if (!elementContains(this.root.current!, ev.relatedTarget as HTMLElement)) { this.setState({ isFocused: false }); if (this.props.inputProps && this.props.inputProps.onBlur) { this.props.inputProps.onBlur(ev as React.FocusEvent); @@ -466,8 +466,8 @@ export class BasePicker> extends BaseComponent< case KeyCodes.tab: case KeyCodes.enter: - if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedActionSelected()) { - this.suggestionElement.value.executeSelectedAction(); + if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedActionSelected()) { + this.suggestionElement.current.executeSelectedAction(); } else if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) { this.completeSuggestion(); ev.preventDefault(); @@ -487,7 +487,7 @@ export class BasePicker> extends BaseComponent< case KeyCodes.del: if (!this.props.disabled) { - if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) { + if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) { if (this.props.onRemoveSuggestion) { (this.props.onRemoveSuggestion as any)(this.suggestionStore.currentSuggestion!.item); } @@ -501,15 +501,15 @@ export class BasePicker> extends BaseComponent< break; case KeyCodes.up: - if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible) { - if (this.suggestionElement.value && this.suggestionElement.value.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) { + if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible) { + if (this.suggestionElement.current && this.suggestionElement.current.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) { ev.preventDefault(); ev.stopPropagation(); } else { - if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedAction() && this.suggestionStore.currentIndex === 0) { + if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedAction() && this.suggestionStore.currentIndex === 0) { ev.preventDefault(); ev.stopPropagation(); - this.suggestionElement.value.focusAboveSuggestions(); + this.suggestionElement.current.focusAboveSuggestions(); this.suggestionStore.deselectAllSuggestions(); this.forceUpdate(); } else { @@ -524,15 +524,15 @@ export class BasePicker> extends BaseComponent< break; case KeyCodes.down: - if (this.input.value && ev.target === this.input.value.inputElement && this.state.suggestionsVisible) { - if (this.suggestionElement.value && this.suggestionElement.value.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) { + if (this.input.current && ev.target === this.input.current.inputElement && this.state.suggestionsVisible) { + if (this.suggestionElement.current && this.suggestionElement.current.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) { ev.preventDefault(); ev.stopPropagation(); } else { - if (this.suggestionElement.value && this.suggestionElement.value.hasSuggestedAction() && (this.suggestionStore.currentIndex + 1) === this.suggestionStore.suggestions.length) { + if (this.suggestionElement.current && this.suggestionElement.current.hasSuggestedAction() && (this.suggestionStore.currentIndex + 1) === this.suggestionStore.suggestions.length) { ev.preventDefault(); ev.stopPropagation(); - this.suggestionElement.value.focusBelowSuggestions(); + this.suggestionElement.current.focusBelowSuggestions(); this.suggestionStore.deselectAllSuggestions(); this.forceUpdate(); } else { @@ -563,8 +563,8 @@ export class BasePicker> extends BaseComponent< this.setState({ isSearching: true }, () => { - if (this.props.onGetMoreResults && this.input.value) { - const suggestions: T[] | PromiseLike = (this.props.onGetMoreResults as any)(this.input.value.value, this.state.items); + if (this.props.onGetMoreResults && this.input.current) { + const suggestions: T[] | PromiseLike = (this.props.onGetMoreResults as any)(this.input.current.value, this.state.items); const suggestionsArray: T[] = suggestions as T[]; const suggestionsPromiseLike: PromiseLike = suggestions as PromiseLike; @@ -581,8 +581,8 @@ export class BasePicker> extends BaseComponent< this.setState({ isSearching: false }); } - if (this.input.value) { - this.input.value.focus(); + if (this.input.current) { + this.input.current.focus(); } this.setState({ @@ -594,8 +594,8 @@ export class BasePicker> extends BaseComponent< protected addItemByIndex = (index: number): void => { this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item); - if (this.input.value) { - this.input.value.clear(); + if (this.input.current) { + this.input.current.clear(); } this.updateValue(''); } @@ -645,7 +645,7 @@ export class BasePicker> extends BaseComponent< // This is protected because we may expect the backspace key to work differently in a different kind of picker. // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow protected onBackspace(ev: React.KeyboardEvent) { - if (this.state.items.length && !this.input.value || this.input.value && (!this.input.value.isValueSelected && this.input.value.cursorLocation === 0)) { + if (this.state.items.length && !this.input.current || this.input.current && (!this.input.current.isValueSelected && this.input.current.cursorLocation === 0)) { if (this.selection.getSelectedCount() > 0) { this.removeItems(this.selection.getSelection()); } else { @@ -700,8 +700,8 @@ export class BasePicker> extends BaseComponent< } private _onValidateInput() { - if (this.props.onValidateInput && this.input.value && (this.props.onValidateInput as any)(this.input.value.value) !== ValidationState.invalid && this.props.createGenericItem) { - const itemToConvert = this.props.createGenericItem(this.input.value.value, this.props.onValidateInput(this.input.value.value)); + if (this.props.onValidateInput && this.input.current && (this.props.onValidateInput as any)(this.input.current.value) !== ValidationState.invalid && this.props.createGenericItem) { + const itemToConvert = this.props.createGenericItem(this.input.current.value, this.props.onValidateInput(this.input.current.value)); this.suggestionStore.createGenericSuggestion(itemToConvert); this.completeSuggestion(); } diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx index 6a928a6039e632..15ee6b4c804223 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx @@ -58,7 +58,7 @@ export class SelectedItemWithMenu extends BaseComponent) diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx index 761e45cc7bafff..3747bfaa936260 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx @@ -77,15 +77,15 @@ export class Suggestions extends BaseComponent, ISuggest } public componentDidMount() { this.scrollSelected(); - this.activeSelectedElement = this._selectedElement ? this._selectedElement.value : null; + this.activeSelectedElement = this._selectedElement ? this._selectedElement.current : null; } public componentDidUpdate() { // Only scroll to selected element if the selected element has changed. Otherwise do nothing. // This prevents some odd behavior where scrolling the active element out of view and clicking on a selected element // will trigger a focus event and not give the clicked element the click. - if (this.activeSelectedElement && this._selectedElement.value && this.activeSelectedElement !== this._selectedElement.value) { + if (this.activeSelectedElement && this._selectedElement.current && this.activeSelectedElement !== this._selectedElement.current) { this.scrollSelected(); - this.activeSelectedElement = this._selectedElement.value; + this.activeSelectedElement = this._selectedElement.current; } } @@ -218,14 +218,14 @@ export class Suggestions extends BaseComponent, ISuggest if (suggestionLength > 0) { this._refocusOnSuggestions(keyCode); newSelectedActionType = SuggestionActionType.none; - } else if (this._searchForMoreButton.value) { + } else if (this._searchForMoreButton.current) { newSelectedActionType = SuggestionActionType.searchMore; } else { newSelectedActionType = SuggestionActionType.forceResolve; } break; case SuggestionActionType.searchMore: - if (this._forceResolveButton.value) { + if (this._forceResolveButton.current) { newSelectedActionType = SuggestionActionType.forceResolve; } else if (suggestionLength > 0) { this._refocusOnSuggestions(keyCode); @@ -235,7 +235,7 @@ export class Suggestions extends BaseComponent, ISuggest } break; case SuggestionActionType.none: - if (currentSuggestionIndex === -1 && this._forceResolveButton.value) { + if (currentSuggestionIndex === -1 && this._forceResolveButton.current) { newSelectedActionType = SuggestionActionType.forceResolve; } break; @@ -243,7 +243,7 @@ export class Suggestions extends BaseComponent, ISuggest } else if (keyCode === KeyCodes.up) { switch (currentSelectedAction) { case SuggestionActionType.forceResolve: - if (this._searchForMoreButton.value) { + if (this._searchForMoreButton.current) { newSelectedActionType = SuggestionActionType.searchMore; } else if (suggestionLength > 0) { this._refocusOnSuggestions(keyCode); @@ -254,12 +254,12 @@ export class Suggestions extends BaseComponent, ISuggest if (suggestionLength > 0) { this._refocusOnSuggestions(keyCode); newSelectedActionType = SuggestionActionType.none; - } else if (this._forceResolveButton.value) { + } else if (this._forceResolveButton.current) { newSelectedActionType = SuggestionActionType.forceResolve; } break; case SuggestionActionType.none: - if (currentSuggestionIndex === -1 && this._searchForMoreButton.value) { + if (currentSuggestionIndex === -1 && this._searchForMoreButton.current) { newSelectedActionType = SuggestionActionType.searchMore; } break; @@ -275,7 +275,7 @@ export class Suggestions extends BaseComponent, ISuggest } public hasSuggestedAction(): boolean { - return this._searchForMoreButton.value !== undefined || this._forceResolveButton.value !== undefined; + return this._searchForMoreButton.current !== undefined || this._forceResolveButton.current !== undefined; } public hasSuggestedActionSelected(): boolean { @@ -294,31 +294,31 @@ export class Suggestions extends BaseComponent, ISuggest } public focusAboveSuggestions(): void { - if (this._forceResolveButton.value) { + if (this._forceResolveButton.current) { this.setState({ selectedActionType: SuggestionActionType.forceResolve }); - } else if (this._searchForMoreButton.value) { + } else if (this._searchForMoreButton.current) { this.setState({ selectedActionType: SuggestionActionType.searchMore }); } } public focusBelowSuggestions(): void { - if (this._searchForMoreButton.value) { + if (this._searchForMoreButton.current) { this.setState({ selectedActionType: SuggestionActionType.searchMore }); - } else if (this._forceResolveButton.value) { + } else if (this._forceResolveButton.current) { this.setState({ selectedActionType: SuggestionActionType.forceResolve }); } } public focusSearchForMoreButton() { - if (this._searchForMoreButton.value) { - this._searchForMoreButton.value.focus(); + if (this._searchForMoreButton.current) { + this._searchForMoreButton.current.focus(); } } // TODO get the element to scroll into view properly regardless of direction. public scrollSelected() { - if (this._selectedElement.value && this._selectedElement.value.scrollIntoView !== undefined) { - this._selectedElement.value.scrollIntoView(false); + if (this._selectedElement.current && this._selectedElement.current.scrollIntoView !== undefined) { + this._selectedElement.current.scrollIntoView(false); } } diff --git a/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx b/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx index f7c2137e4a12ca..f9ea0029dc36e7 100644 --- a/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx +++ b/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx @@ -88,7 +88,7 @@ export function withViewport(Co /* Note: using lambda here because decorators don't seem to work in decorators. */ private _updateViewport = (withForceUpdate?: boolean) => { const { viewport } = this.state; - const viewportElement = this._root.value; + const viewportElement = this._root.current; const scrollElement = findScrollableParent(viewportElement); const scrollRect = getRect(scrollElement); const clientRect = getRect(viewportElement); diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx index f9ff08cfc0df97..be9efb36651daa 100644 --- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx +++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx @@ -72,8 +72,8 @@ export class SelectionZone extends BaseComponent { private _isTouchTimeoutId: number | undefined; public componentDidMount() { - const win = getWindow(this._root.value); - const scrollElement = findScrollableParent(this._root.value); + const win = getWindow(this._root.current); + const scrollElement = findScrollableParent(this._root.current); // Track the latest modifier keys globally. this._events.on(win, 'keydown, keyup', this._updateModifiers, true); @@ -121,13 +121,13 @@ export class SelectionZone extends BaseComponent { return; } - if (!elementContains(ev.target, this._root.value)) { + if (!elementContains(ev.target, this._root.current)) { return; } let target = ev.target as HTMLElement; - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) { this.ignoreNextFocus(); break; @@ -185,7 +185,7 @@ export class SelectionZone extends BaseComponent { return; } - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) { break; } else if (itemRoot) { @@ -220,7 +220,7 @@ export class SelectionZone extends BaseComponent { return; } - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) { this._onToggleAllClick(ev); break; @@ -271,7 +271,7 @@ export class SelectionZone extends BaseComponent { } private _isSelectionDisabled(target: HTMLElement): boolean { - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) { return true; } @@ -300,7 +300,7 @@ export class SelectionZone extends BaseComponent { if (itemRoot && onItemInvoked && selectionMode !== SelectionMode.none && !this._isInputElement(target)) { const index = this._getItemIndex(itemRoot); - while (target !== this._root.value) { + while (target !== this._root.current) { if ( this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) || this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) { @@ -366,7 +366,7 @@ export class SelectionZone extends BaseComponent { if (itemRoot) { const index = this._getItemIndex(itemRoot); - while (target !== this._root.value) { + while (target !== this._root.current) { if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) { // For toggle elements, assuming they are rendered as buttons, they will generate a click event, // so we can no-op for any keydowns in this case. @@ -513,7 +513,7 @@ export class SelectionZone extends BaseComponent { private _findItemRoot(target: HTMLElement): HTMLElement | undefined { const { selection } = this.props; - while (target !== this._root.value) { + while (target !== this._root.current) { const indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME); const index = Number(indexValue); @@ -524,7 +524,7 @@ export class SelectionZone extends BaseComponent { target = getParent(target) as HTMLElement; } - if (target === this._root.value) { + if (target === this._root.current) { return undefined; } @@ -538,7 +538,7 @@ export class SelectionZone extends BaseComponent { private _hasAttribute(element: HTMLElement, attributeName: string): boolean { let isToggle = false; - while (!isToggle && element !== this._root.value) { + while (!isToggle && element !== this._root.current) { isToggle = element.getAttribute(attributeName) === 'true'; element = getParent(element) as HTMLElement; } diff --git a/packages/utilities/src/createRef.test.ts b/packages/utilities/src/createRef.test.ts index ba1c9130c8b44b..0f37ddba100b54 100644 --- a/packages/utilities/src/createRef.test.ts +++ b/packages/utilities/src/createRef.test.ts @@ -2,17 +2,26 @@ import * as React from 'react'; import { createRef } from './createRef'; describe('createRef', () => { - it('to have a value prop that is null on creation', () => { - expect(createRef().value).toEqual(null); + it('to have a current prop that is null on creation', () => { + expect(createRef().current).toEqual(null); }); - it('when called with ReactElement it sets the value to the passed component', () => { + it('when called with ReactElement it sets the current property to the passed component', () => { const component = React.createElement('span'); const refObject = createRef>(); refObject(component); - expect(refObject.value).toBe(component); + expect(refObject.current).toBe(component); + }); + + it('when called with HTMLElement it sets the current property to the passed element', () => { + const component = document.createElement('span'); + const refObject = createRef(); + + refObject(component); + + expect(refObject.current).toBe(component); }); it('when called with HTMLElement it sets the value to the passed element', () => { @@ -21,6 +30,30 @@ describe('createRef', () => { refObject(component); - expect(refObject.value).toBe(component); + expect(refObject.current).toBe(component); + }); + + describe('the deprecated value prop', () => { + it('is initialized to null', () => { + expect(createRef().value).toEqual(null); + }); + + it('is set to the passed element', () => { + const component = document.createElement('span'); + const refObject = createRef(); + + refObject(component); + + expect(refObject.value).toBe(component); + }); + + it('is the same value as current', () => { + const component = document.createElement('span'); + const refObject = createRef(); + + refObject(component); + + expect(refObject.value).toBe(refObject.current); + }); }); }); diff --git a/packages/utilities/src/createRef.ts b/packages/utilities/src/createRef.ts index b08cd78f3290e0..ac72b96147a0e6 100644 --- a/packages/utilities/src/createRef.ts +++ b/packages/utilities/src/createRef.ts @@ -1,13 +1,33 @@ export type RefObject = { (component: T | null): void; + current: T | null; + + /** + * @deprecated Use .current as that is consistent the official React Api. + */ value: T | null; }; +/** + * This is a polyfill for the React.createRef() api. + * For more info on React.createRef() see the official React documentation + * on creating and accessing refs. + * @see https://reactjs.org/docs/refs-and-the-dom.html#creating-refs + * @see https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs + */ export function createRef(): RefObject { const refObject = ((element: T | null): void => { - refObject.value = element; + refObject.current = element; }) as RefObject; - refObject.value = null; + + // This getter is here to support the deprecated value prop on the refObject. + Object.defineProperty(refObject, 'value', { + get(): T | null { + return refObject.current; + } + }); + + refObject.current = null; return refObject; } \ No newline at end of file