Fix select all alignment

ecraig12345 · Aug 10, 2016 · 903c915 · 903c915
1 parent 485e9b5
commit 903c915
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/src/components/DetailsList/DetailsHeader.tsx b/src/components/DetailsList/DetailsHeader.tsx
@@ -31,7 +31,13 @@ export interface IDetailsHeaderProps {
   /** ariaLabel for the header checkbox that selects or deselects everything */
   ariaLabelForSelectAllCheckbox?: string;
   ref?: string;
-  isSelectAllVisible?: boolean;
+  selectAllVisibility?: SelectAllVisibility;
+}
+
+export enum SelectAllVisibility {
+  none,
+  hidden,
+  visible
 }
 
 export interface IDetailsHeaderState {
@@ -50,7 +56,7 @@ export interface IColumnResizeDetails {
 
 export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHeaderState> {
   public static defaultProps = {
-    isSelectAllVisible: true
+    isSelectAllVisible: SelectAllVisibility.visible
   };
 
   public refs: {
@@ -88,25 +94,24 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 
   public render() {
-    let { selectionMode, columns, ariaLabel, ariaLabelForSelectAllCheckbox, isSelectAllVisible } = this.props;
+    let { columns, ariaLabel, ariaLabelForSelectAllCheckbox, selectAllVisibility } = 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': selectAllVisibility === SelectAllVisibility.hidden,
           '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 }>
-          { showSelectAllCheckbox ? (
+          { (selectAllVisibility === SelectAllVisibility.visible) ? (
             <div className='ms-DetailsHeader-cellWrapper' role='columnheader'>
               <button
                 className='ms-DetailsHeader-cell is-check'
@@ -133,7 +138,8 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                 <button
                   key={ column.fieldName }
                   disabled={ column.columnActionsMode === ColumnActionsMode.disabled }
-                  className={ css('ms-DetailsHeader-cell', {
+                  className={ css('ms-DetailsHeader-cell',
+                    ( column.className ? column.className : '' ), {
                     'is-actionable': column.columnActionsMode !== ColumnActionsMode.disabled,
                     'is-empty': !column.name,
                     'is-icon-visible': column.isSorted || column.isGrouped || column.isFiltered
@@ -147,8 +153,8 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                   data-automationid='ColumnsHeaderColumn'
                   >
 
-                  { column.isGrouped && (
-                    <i className='ms-Icon ms-Icon--listGroup2' />
+                  { column.isFiltered && (
+                    <i className='ms-Icon ms-Icon--filter' />
                   ) }
 
                   { column.isSorted && (
@@ -158,8 +164,8 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                     }) } />
                   ) }
 
-                  { column.isFiltered && (
-                    <i className='ms-Icon ms-Icon--filter' />
+                  { column.isGrouped && (
+                    <i className='ms-Icon ms-Icon--listGroup2' />
                   ) }
 
                   { column.iconClassName && (

diff --git a/src/components/DetailsList/DetailsList.tsx b/src/components/DetailsList/DetailsList.tsx
@@ -8,7 +8,7 @@ import {
   IDetailsList,
   CheckboxVisibility
 } from '../DetailsList/DetailsList.Props';
-import { DetailsHeader } from '../DetailsList/DetailsHeader';
+import { DetailsHeader, SelectAllVisibility } from '../DetailsList/DetailsHeader';
 import { DetailsRow } from '../DetailsList/DetailsRow';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { GroupedList } from '../../GroupedList';
@@ -193,12 +193,19 @@ 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 selectAllVisibility = SelectAllVisibility.none; // for SelectionMode.none
+    if (selectionMode === SelectionMode.single) {
+      selectAllVisibility = SelectAllVisibility.hidden;
+    }
+    if (selectionMode === SelectionMode.multiple) {
+      // 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;
+      selectAllVisibility = isSelectAllVisible ? SelectAllVisibility.visible : SelectAllVisibility.hidden;
     }
-    let isSelectAllVisible = isCollapsedGroupSelectVisible || !isCollapsed;
 
     return (
       // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
@@ -232,7 +239,7 @@ export class DetailsList extends React.Component<IDetailsListProps, IDetailsList
                 onToggleCollapseAll={ this._onToggleCollapse }
                 ariaLabel={ ariaLabelForListHeader }
                 ariaLabelForSelectAllCheckbox={ ariaLabelForSelectAllCheckbox }
-                isSelectAllVisible={ isSelectAllVisible }
+                selectAllVisibility={ selectAllVisibility }
                 />
             ) }
           </div>