Skip to content

DetailsList's GroupSpacer: Refactor to React.SFC & remove styled HOC to improve render performance #8435

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

Merged
dzearing merged 10 commits into from
Mar 22, 2019
Merged

DetailsList's GroupSpacer: Refactor to React.SFC & remove styled HOC to improve render performance #8435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
580bb08
Conditionally render GroupSpacer
KevinTCoughlin Mar 21, 2019
bb8e63e
Refactor complex conditional render GroupSpacer to method
KevinTCoughlin Mar 21, 2019
0024f84
Refactor GroupSpacer to React.SFC & remove styled HOC
KevinTCoughlin Mar 22, 2019
1e03d97
Revert "Refactor complex conditional render GroupSpacer to method"
KevinTCoughlin Mar 22, 2019
727ab04
Revert "Conditionally render GroupSpacer"
KevinTCoughlin Mar 22, 2019
b489fc1
Add deprecations to GroupSpacer style props
KevinTCoughlin Mar 22, 2019
a5d7f94
Update API file
KevinTCoughlin Mar 22, 2019
f7b55a1
Update snapshot
KevinTCoughlin Mar 22, 2019
b0783a8
Change file
KevinTCoughlin Mar 22, 2019
60d640e
Use ReturnType for GroupSpacer return type
KevinTCoughlin Mar 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions ...hanges/office-ui-fabric-react/keco-conditionally-render-groupspacer_2019-03-22-05-43.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "GroupSpacer: Reduce render calls by refactoring styled HOC to React.SFC",
"type": "minor"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
4 changes: 3 additions & 1 deletion packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8369,11 +8369,13 @@ interface IGroupShowAllStyles {
interface IGroupSpacerProps {
count: number;
indentWidth?: number;
// @deprecated
styles?: IStyleFunctionOrObject<IGroupSpacerStyleProps, IGroupSpacerStyles>;
// @deprecated
theme?: ITheme;
}

// @public (undocumented)
// @public @deprecated (undocumented)
interface IGroupSpacerStyles {
// (undocumented)
root: IStyle;
Expand Down
90 changes: 35 additions & 55 deletions ...office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5206,17 +5206,13 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
}
>
<span
className=
ms-GroupSpacer
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
width: 32px;
}
className="ms-GroupSpacer"
style={
Object {
"display": "inline-block",
"width": 32,
}
}
/>
<div
className=
Expand Down Expand Up @@ -5400,17 +5396,13 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
}
>
<span
className=
ms-GroupSpacer
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
width: 32px;
}
className="ms-GroupSpacer"
style={
Object {
"display": "inline-block",
"width": 32,
}
}
/>
<div
className=
Expand Down Expand Up @@ -5836,17 +5828,13 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
}
>
<span
className=
ms-GroupSpacer
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
width: 32px;
}
className="ms-GroupSpacer"
style={
Object {
"display": "inline-block",
"width": 32,
}
}
/>
<div
className=
Expand Down Expand Up @@ -6030,17 +6018,13 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
}
>
<span
className=
ms-GroupSpacer
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
width: 32px;
}
className="ms-GroupSpacer"
style={
Object {
"display": "inline-block",
"width": 32,
}
}
/>
<div
className=
Expand Down Expand Up @@ -6224,17 +6208,13 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
}
>
<span
className=
ms-GroupSpacer
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
width: 32px;
}
className="ms-GroupSpacer"
style={
Object {
"display": "inline-block",
"width": 32,
}
}
/>
<div
className=
Expand Down
17 changes: 0 additions & 17 deletions packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.styles.ts
View file
Open in desktop

This file was deleted.

24 changes: 6 additions & 18 deletions packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,11 @@
import * as React from 'react';
import { styled, classNamesFunction } from '../../Utilities';
import { IGroupSpacerProps, IGroupSpacerStyleProps, IGroupSpacerStyles } from './GroupSpacer.types';
import { getStyles } from './GroupSpacer.styles';

const getClassNames = classNamesFunction<IGroupSpacerStyleProps, IGroupSpacerStyles>();
import { IGroupSpacerProps } from './GroupSpacer.types';

export const SPACER_WIDTH = 32;

export const GroupSpacer = styled<IGroupSpacerProps, IGroupSpacerStyleProps, IGroupSpacerStyles>(
(props: IGroupSpacerProps) => {
const { count, styles, theme, indentWidth = SPACER_WIDTH } = props;
const classNames = getClassNames(styles, {
theme: theme!,
width: count * indentWidth
});
export const GroupSpacer: React.SFC<IGroupSpacerProps> = (props: IGroupSpacerProps): ReturnType<React.SFC<IGroupSpacerProps>> => {
const { count, indentWidth = SPACER_WIDTH } = props;
const width = count * indentWidth;

return count > 0 ? <span className={classNames.root} /> : null;
},
getStyles,
undefined,
{ scope: 'GroupSpacer' }
);
return count > 0 ? <span className={'ms-GroupSpacer'} style={{ display: 'inline-block', width }} /> : null;
};
10 changes: 10 additions & 0 deletions packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@ import { IStyleFunctionOrObject } from '../../Utilities';
export interface IGroupSpacerProps {
/**
* Theme from Higher Order Component
*
* @deprecated unused, to be removed in 7.0
*/
theme?: ITheme;

/**
* Style function to be passed in to override the themed or default styles
*
* @deprecated unused, to be removed in 7.0
*/
styles?: IStyleFunctionOrObject<IGroupSpacerStyleProps, IGroupSpacerStyles>;

Expand All @@ -19,10 +23,16 @@ export interface IGroupSpacerProps {
indentWidth?: number;
}

/**
* @deprecated unused, to be removed in 7.0. Use {@link IGroupSpacerProps.indentWidth}
*/
export type IGroupSpacerStyleProps = Required<Pick<IGroupSpacerProps, 'theme'>> & {
width?: number;
};

/**
* @deprecated unused, to be removed in 7.0.
*/
export interface IGroupSpacerStyles {
root: IStyle;
}