From 580bb087328dc32759581c73d349bbfef986f566 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Thu, 21 Mar 2019 14:21:36 -0700 Subject: [PATCH 01/10] Conditionally render GroupSpacer --- .../src/components/DetailsList/DetailsHeader.base.tsx | 4 +++- .../src/components/DetailsList/DetailsRow.base.tsx | 10 ++++++---- .../src/components/GroupedList/GroupFooter.base.tsx | 2 +- .../src/components/GroupedList/GroupHeader.base.tsx | 2 +- .../src/components/GroupedList/GroupShowAll.base.tsx | 2 +- 5 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx index 6664e5ecda9176..c8d0a31f12a087 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx @@ -281,7 +281,9 @@ export class DetailsHeaderBase extends BaseComponent ) : null} - + + {groupNestingDepth! > 1 ? : null} + {columns.map((column: IColumn, columnIndex: number) => { const _isDraggable = columnReorderProps ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx index bbdedc2b92f278..992cc7490fa513 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx @@ -254,10 +254,12 @@ export class DetailsRowBase extends BaseComponent )} - + {groupNestingDepth! > (this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0) ? ( + + ) : null} {item && rowFields} {columnMeasureInfo && ( diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx index fc5e5ff552fafa..b6ef86690aaa15 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx @@ -12,7 +12,7 @@ export class GroupFooterBase extends BaseComponent { if (group && footerText) { return (
- + {groupLevel! > 0 ? : null} {footerText}
); diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx index f3bf25c2db1c3d..2669b98f8783b4 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx @@ -109,7 +109,7 @@ export class GroupHeaderBase extends BaseComponent )} - + {groupLevel! > 0 ? : null}
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx index 87b1177a8ffd13..551d4e14cbd563 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx @@ -19,7 +19,7 @@ export class GroupShowAllBase extends BaseComponent { if (group) { return (
- + {groupLevel! > 0 ? : null} {showAllLinkText}
); From bb8e63e16395d3adcc65bb7695c6a5ecd52b6ab7 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Thu, 21 Mar 2019 14:32:49 -0700 Subject: [PATCH 02/10] Refactor complex conditional render GroupSpacer to method --- .../components/DetailsList/DetailsHeader.base.tsx | 8 +++++++- .../src/components/DetailsList/DetailsRow.base.tsx | 14 ++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx index c8d0a31f12a087..b0f794776df490 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx @@ -282,7 +282,7 @@ export class DetailsHeaderBase extends BaseComponent ) : null} - {groupNestingDepth! > 1 ? : null} + {this._renderGroupSpacer()} {columns.map((column: IColumn, columnIndex: number) => { const _isDraggable = columnReorderProps @@ -325,6 +325,12 @@ export class DetailsHeaderBase extends BaseComponent 1 ? : null; + } + private _getHeaderDragDropOptions(): IDragDropOptions { const options = { selectionIndex: 1, diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx index 992cc7490fa513..609bd4e73e9247 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx @@ -254,12 +254,7 @@ export class DetailsRowBase extends BaseComponent )} - {groupNestingDepth! > (this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0) ? ( - - ) : null} + {this._renderGroupSpacer()} {item && rowFields} {columnMeasureInfo && ( @@ -312,6 +307,13 @@ export class DetailsRowBase extends BaseComponent; } + private _renderGroupSpacer(): JSX.Element | null { + const { groupNestingDepth, indentWidth } = this.props; + const offset = this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0; + + return groupNestingDepth! > offset ? : null; + } + private _getSelectionState(props: IDetailsRowBaseProps): IDetailsRowSelectionState { const { itemIndex, selection } = props; From 0024f847cec1f931a4c525e1648e428008319f7a Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Thu, 21 Mar 2019 20:34:15 -0700 Subject: [PATCH 03/10] Refactor GroupSpacer to React.SFC & remove styled HOC --- .../GroupedList/GroupSpacer.styles.ts | 17 ------------- .../components/GroupedList/GroupSpacer.tsx | 24 +++++-------------- 2 files changed, 6 insertions(+), 35 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.styles.ts diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.styles.ts b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.styles.ts deleted file mode 100644 index 2d859ff6e02e4b..00000000000000 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { IGroupSpacerProps, IGroupSpacerStyleProps, IGroupSpacerStyles } from './GroupSpacer.types'; -import { getGlobalClassNames } from '../../Styling'; - -export { IGroupSpacerProps }; - -const GlobalClassNames = { - root: 'ms-GroupSpacer' -}; - -export const getStyles = (props: IGroupSpacerStyleProps): IGroupSpacerStyles => { - const { theme, width } = props; - const classNames = getGlobalClassNames(GlobalClassNames, theme); - - return { - root: [classNames.root, theme.fonts.medium, { display: 'inline-block', width: width }] - }; -}; diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx index dae21d8aafaf73..919395753b567e 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx @@ -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(); +import { IGroupSpacerProps } from './GroupSpacer.types'; export const SPACER_WIDTH = 32; -export const GroupSpacer = styled( - (props: IGroupSpacerProps) => { - const { count, styles, theme, indentWidth = SPACER_WIDTH } = props; - const classNames = getClassNames(styles, { - theme: theme!, - width: count * indentWidth - }); +export const GroupSpacer: React.SFC = (props: IGroupSpacerProps): JSX.Element | null => { + const { count, indentWidth = SPACER_WIDTH } = props; + const width = count * indentWidth; - return count > 0 ? : null; - }, - getStyles, - undefined, - { scope: 'GroupSpacer' } -); + return count > 0 ? : null; +}; From 1e03d976e06642fcf61638893433e1eb03bc1557 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Thu, 21 Mar 2019 20:34:56 -0700 Subject: [PATCH 04/10] Revert "Refactor complex conditional render GroupSpacer to method" This reverts commit bb8e63e16395d3adcc65bb7695c6a5ecd52b6ab7. --- .../components/DetailsList/DetailsHeader.base.tsx | 8 +------- .../src/components/DetailsList/DetailsRow.base.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx index b0f794776df490..c8d0a31f12a087 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx @@ -282,7 +282,7 @@ export class DetailsHeaderBase extends BaseComponent ) : null} - {this._renderGroupSpacer()} + {groupNestingDepth! > 1 ? : null} {columns.map((column: IColumn, columnIndex: number) => { const _isDraggable = columnReorderProps @@ -325,12 +325,6 @@ export class DetailsHeaderBase extends BaseComponent 1 ? : null; - } - private _getHeaderDragDropOptions(): IDragDropOptions { const options = { selectionIndex: 1, diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx index 609bd4e73e9247..992cc7490fa513 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx @@ -254,7 +254,12 @@ export class DetailsRowBase extends BaseComponent )} - {this._renderGroupSpacer()} + {groupNestingDepth! > (this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0) ? ( + + ) : null} {item && rowFields} {columnMeasureInfo && ( @@ -307,13 +312,6 @@ export class DetailsRowBase extends BaseComponent; } - private _renderGroupSpacer(): JSX.Element | null { - const { groupNestingDepth, indentWidth } = this.props; - const offset = this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0; - - return groupNestingDepth! > offset ? : null; - } - private _getSelectionState(props: IDetailsRowBaseProps): IDetailsRowSelectionState { const { itemIndex, selection } = props; From 727ab0416cfd9923b55469f80eabb8d620b3f3ed Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Thu, 21 Mar 2019 20:35:12 -0700 Subject: [PATCH 05/10] Revert "Conditionally render GroupSpacer" This reverts commit 580bb087328dc32759581c73d349bbfef986f566. --- .../src/components/DetailsList/DetailsHeader.base.tsx | 4 +--- .../src/components/DetailsList/DetailsRow.base.tsx | 10 ++++------ .../src/components/GroupedList/GroupFooter.base.tsx | 2 +- .../src/components/GroupedList/GroupHeader.base.tsx | 2 +- .../src/components/GroupedList/GroupShowAll.base.tsx | 2 +- 5 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx index c8d0a31f12a087..6664e5ecda9176 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx @@ -281,9 +281,7 @@ export class DetailsHeaderBase extends BaseComponent
) : null} - - {groupNestingDepth! > 1 ? : null} - + {columns.map((column: IColumn, columnIndex: number) => { const _isDraggable = columnReorderProps ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx index 992cc7490fa513..bbdedc2b92f278 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx @@ -254,12 +254,10 @@ export class DetailsRowBase extends BaseComponent )} - {groupNestingDepth! > (this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0) ? ( - - ) : null} + {item && rowFields} {columnMeasureInfo && ( diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx index b6ef86690aaa15..fc5e5ff552fafa 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx @@ -12,7 +12,7 @@ export class GroupFooterBase extends BaseComponent { if (group && footerText) { return (
- {groupLevel! > 0 ? : null} + {footerText}
); diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx index 2669b98f8783b4..f3bf25c2db1c3d 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx @@ -109,7 +109,7 @@ export class GroupHeaderBase extends BaseComponent )} - {groupLevel! > 0 ? : null} +
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx index 551d4e14cbd563..87b1177a8ffd13 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx @@ -19,7 +19,7 @@ export class GroupShowAllBase extends BaseComponent { if (group) { return (
- {groupLevel! > 0 ? : null} + {showAllLinkText}
); From b489fc15020a8f370b2aaa6faf5a49d401586f33 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Thu, 21 Mar 2019 20:40:47 -0700 Subject: [PATCH 06/10] Add deprecations to GroupSpacer style props --- .../src/components/GroupedList/GroupSpacer.types.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.types.ts b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.types.ts index eb11bfb6a6c887..546d11e1c76894 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.types.ts +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.types.ts @@ -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; @@ -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> & { width?: number; }; +/** + * @deprecated unused, to be removed in 7.0. + */ export interface IGroupSpacerStyles { root: IStyle; } From a5d7f94b81ec55a02dd2d4ed2ab1922bafc39ef8 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Thu, 21 Mar 2019 20:42:26 -0700 Subject: [PATCH 07/10] Update API file --- .../office-ui-fabric-react/etc/office-ui-fabric-react.api.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts index f460239649ff5c..7a1512ae9e1d45 100644 --- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts +++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts @@ -8369,11 +8369,13 @@ interface IGroupShowAllStyles { interface IGroupSpacerProps { count: number; indentWidth?: number; + // @deprecated styles?: IStyleFunctionOrObject; + // @deprecated theme?: ITheme; } -// @public (undocumented) +// @public @deprecated (undocumented) interface IGroupSpacerStyles { // (undocumented) root: IStyle; From f7b55a1ce67736cda2787466ed984f5b9cfd0775 Mon Sep 17 00:00:00 2001 From: Kevin Coughlin Date: Thu, 21 Mar 2019 21:37:57 -0700 Subject: [PATCH 08/10] Update snapshot --- .../__snapshots__/DetailsList.test.tsx.snap | 90 ++++++++----------- 1 file changed, 35 insertions(+), 55 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap index f3fb20508755de..d4724c666cb723 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap @@ -5206,17 +5206,13 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = ` } >