Fix for #86

pnp · Jun 19, 2018 · 1ad5309 · 1ad5309
1 parent 16b13aa
commit 1ad5309
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON
@@ -11,10 +11,11 @@
         ],
         "fixes": [
           "Bug in `TaxonomyPicker` where values are not updated by an async change [#83](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/83)",
-          "`FieldUserRenderer` uses email prop for `GetPropertiesFor` [#84](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/84)"
+          "`FieldUserRenderer` uses email prop for `GetPropertiesFor` [#84](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/84)",
+          "Fixed issue in single selection mode when all group items were selected in the `ListView` when user clicked on the group header [#86](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/86)"
         ]
       },
-      "contributions": []
+      "contributions": ["Asish Padhy", "Alex Terentiev"]
     },
     {
       "version": "1.4.0",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
 
 - Bug in `TaxonomyPicker` where values are not updated by an async change [#83](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/83)
 - `FieldUserRenderer` uses email prop for `GetPropertiesFor` [#84](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/84)
+- Fixed issue in single selection mode when all group items were selected in the `ListView` when user clicked on the group header [#86](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/86)
 
 ## 1.4.0
 

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -14,6 +14,7 @@
 
 - Bug in `TaxonomyPicker` where values are not updated by an async change [#83](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/83)
 - `FieldUserRenderer` uses email prop for `GetPropertiesFor` [#84](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/84)
+- Fixed issue in single selection mode when all group items were selected in the `ListView` when user clicked on the group header [#86](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/86)
 
 ## 1.4.0
 

diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup } from 'office-ui-fabric-react/lib/DetailsList';
 import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView';
-import { IColumn } from 'office-ui-fabric-react/lib/components/DetailsList';
+import { IColumn, IGroupRenderProps } from 'office-ui-fabric-react/lib/components/DetailsList';
 import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
 import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';
@@ -376,6 +376,18 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
    * Default React component render method
    */
   public render(): React.ReactElement<IListViewProps> {
+    let groupProps: IGroupRenderProps = {};
+    // Check if selection mode is single selection,
+    // if that is the case, disable the selection on grouping headers
+    if (this.props.selectionMode === SelectionMode.single) {
+      groupProps = {
+        headerProps: {
+          onToggleSelectGroup: () => null,
+          onGroupHeaderClick: () => null,
+        }
+      };
+    }
+
     return (
       <div>
         <DetailsList
@@ -386,7 +398,8 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
           selection={this._selection}
           layoutMode={DetailsListLayoutMode.justified}
           compact={this.props.compact}
-          setKey="ListViewControl" />
+          setKey="ListViewControl"
+          groupProps={groupProps} />
       </div>
     );
   }

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -296,7 +296,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           iconFieldName='ServerRelativeUrl'
           groupByFields={groupByFields}
           compact={true}
-          selectionMode={SelectionMode.multiple}
+          selectionMode={SelectionMode.single}
           selection={this._getSelection} />
 
           <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>