Merge branch 'myListView' of https://github.com/Abderahman88/sp-dev-f…

…x-controls-react into Abderahman88-myListView
pnp · Oct 12, 2020 · 00cb86e · 00cb86e
2 parents 0d44ee6 + 4b17156
commit 00cb86e
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 3 deletions.
diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts
@@ -63,6 +63,11 @@ export interface IListViewProps {
    * Specify the initial filter to be applied to the list.
    */
   defaultFilter?: string;
+    /**
+   * Boolean value to create a fixed/sticky header.
+   * Set to false by default
+   */
+  stickyHeader?: boolean;
 }
 
 export interface IListViewState {

diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx
@@ -1,19 +1,52 @@
 import * as React from 'react';
 import styles from './ListView.DragDrop.module.scss';
-import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup } from 'office-ui-fabric-react/lib/DetailsList';
+import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup, IDetailsHeaderProps } from 'office-ui-fabric-react/lib/DetailsList';
 import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView';
 import { IColumn, IGroupRenderProps, IObjectWithKey } from 'office-ui-fabric-react/lib/components/DetailsList';
+import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
+import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
+import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
 import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
 import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';
 import { IGroupsItems } from './IListView';
 import * as telemetry from '../../common/telemetry';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
 
 import filter from 'lodash/filter';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { Guid } from '@microsoft/sp-core-library';
 
+const classNames = mergeStyleSets({
+  wrapper: {
+    height: '50vh',
+    position: 'relative'
+  }
+});
+
+/**
+* Wrap the listview in a scrollable pane if sticky header = true
+*/
+const ListViewWrapper = ({ stickyHeader, children }) => (stickyHeader ?
+  <div className ={classNames.wrapper} >
+    <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
+    {children}
+    </ScrollablePane>
+  </div>
+  : children
+);
+
+/**
+* Lock the searchbox when scrolling if sticky header = true
+*/
+const SearchBoxWrapper = ({ stickyHeader, children }) => (stickyHeader ?
+  <Sticky stickyPosition={StickyPositionType.Header}>
+    {children}
+  </Sticky>
+  : children
+);
+
 /**
  * File type icon component
  */
@@ -27,7 +60,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
 
   constructor(props: IListViewProps) {
     super(props);
-
+    
     telemetry.track('ReactListView', {
       viewFields: !!props.viewFields,
       groupByFields: !!props.groupByFields,
@@ -563,6 +596,24 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     }
   }
 
+  /**
+   * Custom render of header
+   * @param props
+   * @param defaultRender
+   */
+  private _onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
+    if (!props) {
+      return null;
+    }
+    return (
+      <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
+        {defaultRender!({
+          ...props,
+        })}
+      </Sticky>
+    );
+  }
+
   /**
    * Default React component render method
    */
@@ -584,9 +635,13 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     }
 
     return (
+      <ListViewWrapper stickyHeader={!!this.props.stickyHeader}>
       <div>
         {
-          showFilter && <SearchBox placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onSearch={this._updateFilterValue} onChange={this._updateFilterValue} value={filterValue} />
+          showFilter && 
+            <SearchBoxWrapper stickyHeader={!!this.props.stickyHeader}>
+              <SearchBox placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onSearch={this._updateFilterValue} onChange={this._updateFilterValue} value={filterValue} /> 
+            </SearchBoxWrapper>
         }
 
         <div className={styles.DragDropArea}
@@ -611,9 +666,11 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
             compact={this.props.compact}
             setKey="ListViewControl"
             groupProps={groupProps}
+            onRenderDetailsHeader={this._onRenderDetailsHeader}
           />
         </div>
       </div>
+      </ListViewWrapper>
     );
   }
 }
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -975,6 +975,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           showFilter={true}
           dragDropFiles={true}
           onDrop={this._getDropFiles}
+          stickyHeader={true}
         // defaultFilter="Team"
         />