Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

withResponsiveMode: reverting previous change that broke some scenarios. #10763

Merged
merged 5 commits into from Oct 9, 2019
Merged

withResponsiveMode: reverting previous change that broke some scenarios. #10763

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b129b4b
Updating responsivemode fix to default to large if none is provided.
dzearing Oct 9, 2019
4e5088e
Change files
dzearing Oct 9, 2019
5b74e27
Tweaking logic to default to last mode rather than large every time.
dzearing Oct 9, 2019
c7b3814
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
dzearing Oct 9, 2019
ff6f34e
snapshots.
dzearing Oct 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions change/office-ui-fabric-react-2019-10-09-08-09-39-revert-responsive-mode-change.json
View file
Open in desktop
@@ -0,0 +1,9 @@
{
"type": "minor",
"comment": "ResponsiveMode: defaulting to large to avoid breaking changes for scenarios assuming it would be available on first render.",
"packageName": "office-ui-fabric-react",
"email": "dzearing@microsoft.com",
"commit": "b129b4bb7ba3bb6cef8989ff5fb4dd7977e67c6c",
"date": "2019-10-09T15:09:39.177Z",
"file": "/Users/david/fabric/branch6/change/office-ui-fabric-react-2019-10-09-08-09-39-revert-responsive-mode-change.json"
}
19 changes: 16 additions & 3 deletions packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.tsx
View file
Open in desktop
Expand Up @@ -19,7 +19,16 @@ export enum ResponsiveMode {

const RESPONSIVE_MAX_CONSTRAINT = [479, 639, 1023, 1365, 1919, 99999999];

let _defaultMode: ResponsiveMode | undefined = ResponsiveMode.unknown;
/**
* User specified mode to default to, useful for server side rendering scenarios.
*/
let _defaultMode: ResponsiveMode | undefined;

/**
* Tracking the last mode we successfully rendered, which allows us to
* paint initial renders with the correct size.
*/
let _lastMode: ResponsiveMode | undefined;

/**
* Allows a server rendered scenario to provide a default responsive mode.
Expand All @@ -37,7 +46,7 @@ export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveM
this._updateComposedComponentRef = this._updateComposedComponentRef.bind(this);

this.state = {
responsiveMode: _defaultMode
responsiveMode: _defaultMode || _lastMode || ResponsiveMode.large
};
}

Expand Down Expand Up @@ -80,8 +89,12 @@ export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveM
}
} catch (e) {
// Return a best effort result in cases where we're in the browser but it throws on getting innerWidth.
responsiveMode = ResponsiveMode.large;
responsiveMode = _defaultMode || _lastMode || ResponsiveMode.large;
}

// Tracking last mode just gives us a better default in future renders,
// which avoids starting with the wrong value if we've measured once.
_lastMode = responsiveMode;
} else {
if (_defaultMode !== undefined) {
responsiveMode = _defaultMode;
Expand Down