Sticky ScrollablePane new props 7.x

apps/vr-tests/src/stories/ScrollablePane.Sticky.DetailsList.stories.tsx

@@ -0,0 +1,267 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { FabricDecorator } from '../utilities';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import {
+  DetailsList,
+  DetailsListLayoutMode,
+  IDetailsHeaderProps,
+  Selection,
+  IColumn,
+  ConstrainMode,
+  IDetailsFooterProps,
+  DetailsRow
+} from 'office-ui-fabric-react/lib/DetailsList';
+import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { TooltipHost, ITooltipHostProps } from 'office-ui-fabric-react/lib/Tooltip';
+import {
+  ScrollablePane,
+  ScrollbarVisibility,
+  IStickyContainerBehavior,
+  StickyContainerBehaviorType
+} from 'office-ui-fabric-react/lib/ScrollablePane';
+import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
+import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
+import { SelectionMode } from 'office-ui-fabric-react/lib/utilities/selection/index';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
+import { getTheme, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+
+const classNames = mergeStyleSets({
+  wrapper: {
+    height: '80vh',
+    position: 'relative'
+  },
+  filter: {
+    paddingBottom: 20,
+    maxWidth: 300
+  },
+  header: {
+    margin: 0
+  },
+  row: {
+    display: 'inline-block'
+  }
+});
+
+const _footerItem: IScrollablePaneDetailsListExampleItem = {
+  key: 'footer',
+  test1: 'Footer 1',
+  test2: 'Footer 2',
+  test3: 'Footer 3'
+};
+
+interface IScrollablePaneDetailsListExampleItem {
+  key: number | string;
+  test1: string;
+  test2: string;
+  test3: string;
+}
+
+interface IScrollablePaneDetailsListExampleState {
+  items: IScrollablePaneDetailsListExampleItem[];
+}
+
+export class ScrollablePaneDetailsListExample extends React.Component<
+  {},
+  IScrollablePaneDetailsListExampleState
+> {
+  private _selection: Selection;
+  private _allItems: IScrollablePaneDetailsListExampleItem[];
+  private _columns: IColumn[];
+
+  constructor(props: {}) {
+    super(props);
+
+    this._selection = new Selection();
+
+    this._allItems = [];
+    let rowData = '';
+    for (let i = 0; i < 200; i++) {
+      rowData = 'row ' + (i + 1).toString() + ', column ';
+      this._allItems.push({
+        key: i,
+        test1: rowData + '1',
+        test2: rowData + '2',
+        test3: rowData + '3'
+      });
+    }
+
+    this._columns = [];
+    for (let i = 1; i < 4; i++) {
+      this._columns.push({
+        key: 'column' + i,
+        name: 'Test ' + i,
+        fieldName: 'test' + i,
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true
+      });
+    }
+
+    this.state = {
+      items: this._allItems
+    };
+  }
+
+  public render(): JSX.Element {
+    const { items } = this.state;
+    const stickyAboveContainer: IStickyContainerBehavior = {
+      arrangeStickiesBasedOnOrder: true,
+      containerBehavior: StickyContainerBehaviorType.StickyOnScroll,
+      notUsePlaceHolder: true
+    };
+    const stickyBelowContainer: IStickyContainerBehavior = {
+      arrangeStickiesBasedOnOrder: true,
+      containerBehavior: StickyContainerBehaviorType.StickyAlways,
+      notUsePlaceHolder: true
+    };
+    const stickyBackgroundColor = getTheme().palette.white;
+    return (
+      <div
+        style={{
+          height: '80vh',
+          position: 'relative',
+          maxHeight: 'inherit',
+          width: '900px'
+        }}
+      >
+        <Fabric>
+          <div className={classNames.wrapper}>
+            <ScrollablePane
+              style={{ maxWidth: '900px', border: '1px solid #edebe9' }}
+              scrollbarVisibility={ScrollbarVisibility.always}
+              stickyAboveContainerBehavior={stickyAboveContainer}
+              stickyBelowContainerBehavior={stickyBelowContainer}
+            >
+              <Sticky
+                stickyPosition={StickyPositionType.Header}
+                order={1}
+                stickyBackgroundColor={stickyBackgroundColor}
+              >
+                <TextField
+                  className={classNames.filter}
+                  label="Filter by name:"
+                  onChange={this._onFilterChange}
+                />
+              </Sticky>
+              <Sticky
+                stickyPosition={StickyPositionType.Header}
+                order={2}
+                stickyBackgroundColor={stickyBackgroundColor}
+              >
+                <h1 className={classNames.header}>Item list</h1>
+              </Sticky>
+              <MarqueeSelection selection={this._selection}>
+                <DetailsList
+                  items={items}
+                  columns={this._columns}
+                  setKey="set"
+                  layoutMode={DetailsListLayoutMode.fixedColumns}
+                  constrainMode={ConstrainMode.unconstrained}
+                  onRenderDetailsHeader={onRenderDetailsHeader}
+                  onRenderDetailsFooter={onRenderDetailsFooter}
+                  selection={this._selection}
+                  selectionPreservedOnEmptyClick={true}
+                  ariaLabelForSelectionColumn="Toggle selection"
+                  ariaLabelForSelectAllCheckbox="Toggle selection for all items"
+                  onItemInvoked={_onItemInvoked}
+                />
+              </MarqueeSelection>
+            </ScrollablePane>
+          </div>
+        </Fabric>
+      </div>
+    );
+  }
+
+  private _onFilterChange = (ev: React.FormEvent<HTMLElement>, text: string) => {
+    this.setState({
+      items: text
+        ? this._allItems.filter((item: IScrollablePaneDetailsListExampleItem) =>
+            hasText(item, text)
+          )
+        : this._allItems
+    });
+  };
+}
+
+function _onItemInvoked(item: IScrollablePaneDetailsListExampleItem): void {
+  alert('Item invoked: ' + item.test1);
+}
+
+function onRenderDetailsHeader(
+  props: IDetailsHeaderProps,
+  defaultRender?: IRenderFunction<IDetailsHeaderProps>
+): JSX.Element {
+  return (
+    <Sticky
+      stickyPosition={StickyPositionType.Header}
+      isScrollSynced={true}
+      order={3}
+      stickyBackgroundColor={getTheme().palette.white}
+    >
+      {defaultRender!({
+        ...props,
+        onRenderColumnHeaderTooltip: (tooltipHostProps: ITooltipHostProps) => (
+          <TooltipHost {...tooltipHostProps} />
+        )
+      })}
+    </Sticky>
+  );
+}
+
+function onRenderDetailsFooter(
+  props: IDetailsFooterProps,
+  defaultRender?: IRenderFunction<IDetailsFooterProps>
+): JSX.Element {
+  return (
+    <Sticky
+      stickyPosition={StickyPositionType.Footer}
+      isScrollSynced={true}
+      order={1}
+      stickyBackgroundColor={getTheme().palette.white}
+    >
+      <div className={classNames.row}>
+        <DetailsRow
+          columns={props.columns}
+          item={_footerItem}
+          itemIndex={-1}
+          selection={props.selection}
+          selectionMode={(props.selection && props.selection.mode) || SelectionMode.none}
+          viewport={props.viewport}
+        />
+      </div>
+    </Sticky>
+  );
+}
+
+function hasText(item: IScrollablePaneDetailsListExampleItem, text: string): boolean {
+  return `${item.test1}|${item.test2}|${item.test3}`.indexOf(text) > -1;
+}
+const getElement = "document.getElementsByClassName('ms-ScrollablePane--contentContainer')[0]";
+const cropTo = { cropTo: '.testWrapper' };
+
+storiesOf('ScrollablePane-Sticky Details List', module)
+  .addDecorator(FabricDecorator)
+  .addDecorator(story => (
+    <Screener
+      steps={new Screener.Steps()
+        .snapshot('default', cropTo)
+        .executeScript(`${getElement}.scrollTop=2`)
+        .snapshot('scroll down by a small amount so that the first row is still visible', cropTo)
+        .executeScript(`${getElement}.scrollTop=999999`)
+        .snapshot('scroll down to the bottom', cropTo)
+        .executeScript(`${getElement}.scrollTop=0`)
+        .snapshot('scroll up to the top', cropTo)
+        .executeScript(`${getElement}.scrollLeft=500`)
+        .snapshot('scroll left', cropTo)
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('ScrollablePane Details List with sticky header & footer (1)', () => (
+    <ScrollablePaneDetailsListExample />
+  ));

common/changes/office-ui-fabric-react/sticky-scrollablePane-newProps-7.x_2019-06-20-14-06.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Adding new props for Sticky and ScrollablePane",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "hatrived@microsoft.com"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md

@@ -6310,6 +6310,10 @@ export interface IScrollablePaneContext {
         sortSticky: (sticky: Sticky, sortAgain?: boolean) => void;
         notifySubscribers: (sort?: boolean) => void;
         syncScrollSticky: (sticky: Sticky) => void;
+        usePlaceholderForSticky: (placeholderPosition: PlaceholderPosition) => boolean;
+        getScrollPosition: (horizontal?: boolean) => number;
+        verifyStickyContainerBehavior: (stickyContainerPosition: StickyContainerPosition, stickyContainerBehavior: StickyContainerBehaviorType) => boolean;
+        getUserInteractionStatus: () => boolean;
     };
 }
 
@@ -6318,8 +6322,9 @@ export interface IScrollablePaneProps extends React.HTMLAttributes<HTMLElement |
     className?: string;
     componentRef?: IRefObject<IScrollablePane>;
     initialScrollPosition?: number;
-    // (undocumented)
     scrollbarVisibility?: ScrollbarVisibility;
+    stickyAboveContainerBehavior?: IStickyContainerBehavior;
+    stickyBelowContainerBehavior?: IStickyContainerBehavior;
     styles?: IStyleFunctionOrObject<IScrollablePaneStyleProps, IScrollablePaneStyles>;
     theme?: ITheme;
 }
@@ -7003,6 +7008,13 @@ export interface IStackTokens {
     padding?: number | string;
 }
 
+// @public (undocumented)
+export interface IStickyContainerBehavior {
+    arrangeStickiesBasedOnOrder: boolean;
+    containerBehavior: StickyContainerBehaviorType;
+    notUsePlaceHolder: boolean;
+}
+
 // @public (undocumented)
 export interface IStickyContext {
     // (undocumented)
@@ -7013,6 +7025,7 @@ export interface IStickyContext {
 export interface IStickyProps extends React.Props<Sticky> {
     componentRef?: IRefObject<IStickyProps>;
     isScrollSynced?: boolean;
+    order?: number;
     stickyBackgroundColor?: string;
     stickyClassName?: string;
     stickyPosition?: StickyPositionType;
@@ -8301,6 +8314,9 @@ export enum PivotLinkSize {
     normal = 0
 }
 
+// @public (undocumented)
+export type PlaceholderPosition = 'top' | 'bottom';
+
 // @public (undocumented)
 export const PlainCard: React.StatelessComponent<IPlainCardProps>;
 
@@ -8480,7 +8496,9 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, IScr
     // (undocumented)
     forceLayoutUpdate(): void;
     // (undocumented)
-    getScrollPosition: () => number;
+    getScrollPosition: (horizontal?: boolean | undefined) => number;
+    // (undocumented)
+    getUserInteractionStatus: () => boolean;
     // (undocumented)
     notifySubscribers: () => void;
     // (undocumented)
@@ -8507,6 +8525,10 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, IScr
     unsubscribe: (handler: Function) => void;
     // (undocumented)
     updateStickyRefHeights: () => void;
+    // (undocumented)
+    usePlaceholderForSticky: (placeholderPosition: PlaceholderPosition) => boolean;
+    // (undocumented)
+    verifyStickyContainerBehavior: (stickyContainerPosition: StickyContainerPosition, stickyContainerBehavior: StickyContainerBehaviorType) => boolean;
 }
 
 // @public (undocumented)
@@ -8813,7 +8835,7 @@ export const StackItem: React.StatelessComponent<IStackItemProps>;
 export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
     constructor(props: IStickyProps);
     // (undocumented)
-    addSticky(stickyContent: HTMLDivElement): void;
+    addSticky(stickyContent: HTMLDivElement, placeholderPosition: PlaceholderPosition): void;
     // (undocumented)
     readonly canStickyBottom: boolean;
     // (undocumented)
@@ -8850,6 +8872,16 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
     syncScroll: (container: HTMLElement) => void;
 }
 
+// @public (undocumented)
+export enum StickyContainerBehaviorType {
+    Default = 0,
+    StickyAlways = 2,
+    StickyOnScroll = 1
+}
+
+// @public (undocumented)
+export type StickyContainerPosition = 'above' | 'below';
+
 // @public (undocumented)
 export enum StickyPositionType {
     // (undocumented)

packages/office-ui-fabric-react/src/components/ComponentExamples.test.tsx

@@ -79,7 +79,8 @@ const excludedExampleFiles: string[] = [
   'Picker.CustomResult.Example.tsx',
   'ScrollablePane.Default.Example.tsx',
   'ScrollablePane.DetailsList.Example.tsx',
-  'SelectedPeopleList.Basic.Example.tsx'
+  'SelectedPeopleList.Basic.Example.tsx',
+  'ScrollablePane.Sticky.Optimized.DetailsList'
 ];
 
 declare const global: any;