diff --git a/src/controls/listView/ListView.stickyHeader.css b/src/controls/listView/ListView.stickyHeader.css new file mode 100644 index 000000000..dc43687cf --- /dev/null +++ b/src/controls/listView/ListView.stickyHeader.css @@ -0,0 +1,5 @@ +.StickyHeader .ms-DetailsList-contentWrapper { + max-height: 40vh; + overflow-y: auto; + overflow-x: hidden; +} diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index bc51f1b2a..664c054c1 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -3,49 +3,18 @@ import styles from './ListView.DragDrop.module.scss'; 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 './ListView.stickyHeader.css'; 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 ? -
- - {children} - -
- : children -); - -/** -* Lock the searchbox when scrolling if sticky header = true -*/ -const SearchBoxWrapper = ({ stickyHeader, children }) => (stickyHeader ? - - {children} - - : children -); /** * File type icon component @@ -596,22 +565,15 @@ export class ListView extends React.Component { } } - /** - * Custom render of header - * @param props - * @param defaultRender - */ - private _onRenderDetailsHeader: IRenderFunction = (props, defaultRender) => { - if (!props) { - return null; +/** +* Return Classname with StickyHeader +*/ + private _getClassName() { + if (this.props.stickyHeader) { + return "StickyHeader"; + } else { + return ""; } - return ( - - {defaultRender!({ - ...props, - })} - - ); } /** @@ -645,13 +607,9 @@ export class ListView extends React.Component { } - -
{ showFilter && - - } { compact={compact} setKey="ListViewControl" groupProps={groupProps} - onRenderDetailsHeader={this._onRenderDetailsHeader} + className={this._getClassName()} /> -
-
); }