Fixed #2063 - New Component: VirtualScroll

exports/virtualscroll.d.ts

@@ -0,0 +1 @@
+export * from './components/virtualscroll/VirtualScroll';

exports/virtualscroll.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./components/virtualscroll/VirtualScroll');

src/assets/style/primereact.css

@@ -74,3 +74,4 @@
 @import '../../components/chip/Chip.css';
 @import '../../components/cascadeselect/CascadeSelect.css';
 @import '../../components/treeselect/TreeSelect.css';
+@import '../../components/virtualscroll/VirtualScroll.css';

src/components/virtualscroll/VirtualScroll.css

@@ -0,0 +1,40 @@
+.p-virtual-scroll {
+    position: relative;
+    overflow: auto;
+    contain: strict;
+    transform: translateZ(0);
+    will-change: scroll-position;
+}
+
+.p-virtual-scroll-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    contain: content;
+    min-height: 100%;
+    min-width: 100%;
+}
+
+.p-virtual-scroll-spacer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1px;
+    width: 1px;
+    transform-origin: 0 0;
+    pointer-events: none;
+}
+
+.p-virtual-scroll-loader {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.p-virtual-scroll-loader.p-component-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/components/virtualscroll/VirtualScroll.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+type VirtualScrollItemsType = any[] | any[][] | undefined | null;
+
+type VirtualScrollItemSizeType = number | number[];
+
+type VirtualScrollOrientationType = 'vertical' | 'horizontal' | 'both';
+
+type VirtualScrollLoadingTemplateType = React.ReactNode | ((options: VirtualScrollLoadingTemplateOptions) => React.ReactNode);
+
+type VirtualScrollItemTemplateType = React.ReactNode | ((item: any, options: VirtualScrollTemplateOptions) => React.ReactNode);
+
+type VirtualScrollContentTemplateType = React.ReactNode | ((options: VirtualScrollContentTemplateOptions) => React.ReactNode);
+
+type VirtualScrollStateType = number | VirtualScrollState;
+
+type VirtualScrollToIndexType = number | number[];
+
+interface VirtualScrollState {
+    rows: number;
+    cols: number;
+}
+
+interface VirtualScrollTemplateOptions {
+    index: number;
+    count: number;
+    first: boolean;
+    last: boolean;
+    even: boolean;
+    odd: boolean;
+    props: VirtualScrollProps;
+}
+
+interface VirtualScrollLoadingTemplateOptions extends VirtualScrollTemplateOptions {
+    numCols: number;
+}
+
+interface VirtualScrollContentTemplateOptions {
+    className: string;
+    ref: any;
+    children: any;
+    element: JSX.Element;
+    props: VirtualScrollProps;
+}
+
+interface VirtualScrollChangeParams {
+    first: VirtualScrollStateType;
+    numItems: VirtualScrollStateType;
+}
+
+export interface VirtualScrollProps {
+    id?: string;
+    style?: object;
+    className?: string;
+    items?: VirtualScrollItemsType;
+    itemSize?: VirtualScrollItemSizeType;
+    orientation?: VirtualScrollOrientationType;
+    numToleratedItems?: number;
+    delay?: number;
+    lazy?: boolean;
+    showLoader?: boolean;
+    loadingTemplate?: VirtualScrollLoadingTemplateType;
+    itemTemplate?: VirtualScrollItemTemplateType;
+    contentTemplate?: VirtualScrollContentTemplateType;
+    onScrollChange?(e: VirtualScrollChangeParams): void;
+}
+
+export declare class VirtualScroll extends React.Component<VirtualScrollProps, any> {
+    public scrollToIndex(index: VirtualScrollToIndexType): void;
+}