Merge branch 'master' into zoarif/DetailsListAriaSelected

gokunymbus · Aug 8, 2016 · 82f6931 · 82f6931
2 parents ea055a2 + 9f1f4fd
commit 82f6931
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

diff --git a/src/components/DetailsList/DetailsHeader.tsx b/src/components/DetailsList/DetailsHeader.tsx
@@ -31,6 +31,7 @@ export interface IDetailsHeaderProps {
   /** ariaLabel for the header checkbox that selects or deselects everything */
   ariaLabelForSelectAllCheckbox?: string;
   ref?: string;
+  isSelectAllVisible?: boolean;
 }
 
 export interface IDetailsHeaderState {
@@ -48,6 +49,10 @@ export interface IColumnResizeDetails {
 }
 
 export class DetailsHeader extends React.Component<IDetailsHeaderProps, IDetailsHeaderState> {
+  public static defaultProps = {
+    isSelectAllVisible: true
+  };
+
   public refs: {
     [key: string]: React.ReactInstance;
     focusZone: FocusZone;
@@ -89,23 +94,24 @@ export class DetailsHeader extends React.Component<IDetailsHeaderProps, IDetails
   }
 
   public render() {
-    let { selectionMode, columns, ariaLabel, ariaLabelForSelectAllCheckbox } = this.props;
+    let { selectionMode, columns, ariaLabel, ariaLabelForSelectAllCheckbox, isSelectAllVisible } = this.props;
     let { isAllSelected, columnResizeDetails, isSizing, groupNestingDepth, isAllCollapsed } = this.state;
+    let showSelectAllCheckbox = isSelectAllVisible && selectionMode === SelectionMode.multiple;
 
     return (
       <div
         role='row'
         aria-label= { ariaLabel }
         className={ css('ms-DetailsHeader', {
           'is-allSelected': isAllSelected,
-          'is-singleSelect': selectionMode === SelectionMode.single,
+          'is-singleSelect': !showSelectAllCheckbox,
           'is-resizingColumn': !!columnResizeDetails && isSizing
         }) }
         onMouseMove={ this._onMove.bind(this) }
         onMouseUp={ this._onUp.bind(this) }
         ref='root' data-automationid='DetailsHeader'>
         <FocusZone ref='focusZone' direction={ FocusZoneDirection.horizontal }>
-          { (selectionMode === SelectionMode.multiple) ? (
+          { showSelectAllCheckbox ? (
             <div className='ms-DetailsHeader-cellWrapper' role='columnheader'>
               <button
                 className='ms-DetailsHeader-cell is-check'

diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx
@@ -95,7 +95,8 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       adjustedColumns: this._getAdjustedColumns(props),
       layoutMode: props.layoutMode,
       isSizing: false,
-      isDropping: false
+      isDropping: false,
+      isCollapsed: props.groupProps && props.groupProps.isAllGroupsCollapsed
     };
 
     this._events = new EventGroup(this);
@@ -192,6 +193,12 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
       renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
       renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND
     };
+    // if isCollapsedGroupSelectVisible is false, disable select all when the list has all collapsed groups
+    let isCollapsedGroupSelectVisible = groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible;
+    if (isCollapsedGroupSelectVisible === undefined) {
+      isCollapsedGroupSelectVisible = true;
+    }
+    let isSelectAllVisible = isCollapsedGroupSelectVisible || !isCollapsed;
 
     return (
       // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
@@ -225,6 +232,7 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
                 onToggleCollapseAll={ this._onToggleCollapse }
                 ariaLabel={ ariaLabelForListHeader }
                 ariaLabelForSelectAllCheckbox={ ariaLabelForSelectAllCheckbox }
+                isSelectAllVisible={ isSelectAllVisible }
                 />
             ) }
           </div>
@@ -385,8 +393,9 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
     this.setState({
       isCollapsed: collapsed
     });
-
-    this.forceUpdate();
+    if (this.refs.groups) {
+      this.refs.groups.toggleCollapseAll(collapsed);
+    }
   }
 
   private _forceListUpdates() {

diff --git a/src/components/GroupedList/Group.tsx b/src/components/GroupedList/Group.tsx
@@ -134,7 +134,8 @@ export class Group extends React.Component<IGroupProps, IGroupState> {
       groupIndex,
       headerProps,
       footerProps,
-      viewport
+      viewport,
+      selectionMode
     } = this.props;
     let renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
     let isFooterVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll && group.count > renderCount;
@@ -155,6 +156,7 @@ export class Group extends React.Component<IGroupProps, IGroupState> {
             groupLevel={ group ? group.level : 0 }
             headerProps={ headerProps }
             viewport={ viewport }
+            canSelectGroup={ selectionMode === SelectionMode.multiple }
             ref={ 'header' }
           />
         }
@@ -227,16 +229,16 @@ export class Group extends React.Component<IGroupProps, IGroupState> {
       group,
       items,
       onRenderCell,
-      listProps
+      listProps,
+      groupNestingDepth
     } = this.props;
     let count = group ? group.count : items.length;
     let startIndex = group ? group.startIndex : 0;
-    let level = group ? group.level : 0;
 
     return (
       <List
         items={ items }
-        onRenderCell={ (item, itemIndex) => onRenderCell(level, item, itemIndex) }
+        onRenderCell={ (item, itemIndex) => onRenderCell(groupNestingDepth, item, itemIndex) }
         ref={ 'list' }
         renderCount={ Math.min(count, renderCount) }
         startIndex={ startIndex }

diff --git a/src/components/GroupedList/GroupHeader.tsx b/src/components/GroupedList/GroupHeader.tsx
@@ -17,6 +17,7 @@ export interface IGroupHeader {
   groupLevel: number;
   headerProps?: IGroupHeaderProps;
   viewport?: IViewport;
+  canSelectGroup?: boolean;
 }
 
 export interface IGroupHeaderState {
@@ -56,12 +57,17 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
       group,
       groupLevel,
       headerProps,
-      viewport
+      viewport,
+      canSelectGroup
     } = this.props;
     let { isCollapsed, isLoadingVisible } = this.state;
-    let showCheckBox = true;
-    let isSelected = group && group.isSelected;
     let loadingText = headerProps && headerProps.loadingText;
+    let isCollapsedGroupSelectVisible = headerProps && headerProps.isCollapsedGroupSelectVisible;
+    if (isCollapsedGroupSelectVisible === undefined) {
+      isCollapsedGroupSelectVisible = true;
+    }
+    let isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
+    let isSelected = group && group.isSelected && isSelectionCheckVisible;
 
     return group && (
       <div
@@ -74,14 +80,15 @@ export class GroupHeader extends React.Component<IGroupHeader, IGroupHeaderState
 
         <FocusZone direction={ FocusZoneDirection.horizontal }>
 
-          { showCheckBox && (
+          { isSelectionCheckVisible ? (
             <button
               className='ms-GroupHeader-check'
               data-selection-toggle={ true }
               onClick={ this._onToggleSelectGroup } >
               <Check isChecked={ isSelected } />
             </button>
-          )}
+            ) : ( GroupSpacer({ count: 1 }) )
+          }
 
           { GroupSpacer({ count: groupLevel }) }
 

diff --git a/src/components/GroupedList/GroupedList.Props.ts b/src/components/GroupedList/GroupedList.Props.ts
@@ -24,6 +24,11 @@ export interface IGroupedList {
    * call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly.
    */
   forceUpdate: () => void;
+
+  /**
+   * Toggles the collapsed state of all the groups in the list.
+   */
+  toggleCollapseAll: (allCollapsed: boolean) => void;
 }
 
 export interface IGroupedListProps extends React.Props<GroupedList> {
@@ -167,6 +172,9 @@ export interface IGroupHeaderProps {
 
   /** Callback for when the group is selected. */
   onToggleSelectGroup?: (group: IGroup) => void;
+
+  /** Determines if the group selection check box is shown for collapsed groups. */
+  isCollapsedGroupSelectVisible?: boolean;
 }
 
 export interface IGroupFooterProps {

diff --git a/src/components/GroupedList/GroupedList.tsx b/src/components/GroupedList/GroupedList.tsx
@@ -110,6 +110,24 @@ export class GroupedList extends React.Component<IGroupedListProps, IGroupedList
     this._forceListUpdates();
   }
 
+  public toggleCollapseAll(allCollapsed: boolean) {
+    let { groups } = this.state;
+    let { groupProps } = this.props;
+    let onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;
+
+    if (groups) {
+      if (onToggleCollapseAll) {
+        onToggleCollapseAll(allCollapsed);
+      }
+
+      for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
+        groups[groupIndex].isCollapsed = allCollapsed;
+      }
+
+      this.forceUpdate();
+    }
+  }
+
   private _renderGroup(group, groupIndex) {
     let {
       dragDropEvents,