Fixed #3036 - Add autoSize, resizeDelay and loaderIconTemplate proper…

…ties to VirtualScroller
primefaces · Jul 6, 2022 · b52834a · b52834a
1 parent a6b4850
commit b52834a
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 67 deletions.
diff --git a/api-generator/components/virtualscroller.js b/api-generator/components/virtualscroller.js
@@ -59,6 +59,12 @@ const VirtualScrollerProps = [
         default: '0',
         description: 'Delay in scroll before new data is loaded.'
     },
+    {
+        name: 'resizeDelay',
+        type: 'number',
+        default: '10',
+        description: 'Delay after window\'s resize finishes.'
+    },
     {
         name: 'lazy',
         type: 'boolean',
@@ -71,12 +77,24 @@ const VirtualScrollerProps = [
         default: 'false',
         description: 'Whether to show loader.'
     },
+    {
+        name: 'autoSize',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether to dynamically change the height or width of scrollable container.'
+    },
     {
         name: 'loadingTemplate',
         type: 'any',
         default: 'null',
         description: 'The template of loader.'
     },
+    {
+        name: 'loaderIconTemplate',
+        type: 'any',
+        default: 'null',
+        description: 'The template of loader\'s icon.'
+    },
     {
         name: 'itemTemplate',
         type: 'any',

diff --git a/components/doc/virtualscroller/index.js b/components/doc/virtualscroller/index.js
@@ -41,7 +41,7 @@ export class VirtualScrollerDemo extends Component {
     componentDidMount() {
         this.setState({
             lazyItems: Array.from({ length: 100000 }),
-            lazyLoading: false
+            lazyLoading: true
         });
     }
 
@@ -222,7 +222,7 @@ import './VirtualScrollerDemo.css';
 
 const VirtualScrollerDemo = () => {
     const [lazyItems, setLazyItems] = useState([]);
-    const [lazyLoading, setLazyLoading] = useState(false);
+    const [lazyLoading, setLazyLoading] = useState(true);
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
     const [multiItems] = useState(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
     const [templateItems] = useState(Array.from({ length: 10000 }).map((_, i) => \`Item #\${i}\`));
@@ -406,7 +406,7 @@ import './VirtualScrollerDemo.css';
 
 const VirtualScrollerDemo = () => {
     const [lazyItems, setLazyItems] = useState([]);
-    const [lazyLoading, setLazyLoading] = useState(false);
+    const [lazyLoading, setLazyLoading] = useState(true);
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
     const [multiItems] = useState(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
     const [templateItems] = useState(Array.from({ length: 10000 }).map((_, i) => \`Item #\${i}\`));
@@ -596,7 +596,7 @@ const { Skeleton } = primereact.skeleton;
 
 const VirtualScrollerDemo = () => {
     const [lazyItems, setLazyItems] = useState([]);
-    const [lazyLoading, setLazyLoading] = useState(false);
+    const [lazyLoading, setLazyLoading] = useState(true);
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
     const [multiItems] = useState(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
     const [templateItems] = useState(Array.from({ length: 10000 }).map((_, i) => \`Item #\${i}\`));
@@ -1036,6 +1036,12 @@ const itemTemplate = (item, options) => {
                                     <td>0</td>
                                     <td>Delay in scroll before new data is loaded.</td>
                                 </tr>
+                                <tr>
+                                    <td>resizeDelay</td>
+                                    <td>number</td>
+                                    <td>10</td>
+                                    <td>Delay after window's resize finishes.</td>
+                                </tr>
                                 <tr>
                                     <td>lazy</td>
                                     <td>boolean</td>
@@ -1060,6 +1066,12 @@ const itemTemplate = (item, options) => {
                                     <td>false</td>
                                     <td>Whether the data is loaded.</td>
                                 </tr>
+                                <tr>
+                                    <td>autoSize</td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Whether to dynamically change the height or width of scrollable container.</td>
+                                </tr>
                                 <tr>
                                     <td>showSpacer</td>
                                     <td>boolean</td>
@@ -1078,6 +1090,12 @@ const itemTemplate = (item, options) => {
                                     <td>null</td>
                                     <td>The template of loader.</td>
                                 </tr>
+                                <tr>
+                                    <td>loaderIconTemplate</td>
+                                    <td>any</td>
+                                    <td>null</td>
+                                    <td>The template of loader's icon.</td>
+                                </tr>
                                 <tr>
                                     <td>itemTemplate</td>
                                     <td>any</td>
@@ -1170,6 +1188,11 @@ const itemTemplate = (item, options) => {
                                     <td>-</td>
                                     <td>Returns the range of items added to the DOM.</td>
                                 </tr>
+                                <tr>
+                                    <td>getElementRef</td>
+                                    <td>-</td>
+                                    <td>Returns the reference of virtualScroller's container.</td>
+                                </tr>
                             </tbody>
                         </table>
                     </div>

diff --git a/components/lib/virtualscroller/VirtualScroller.d.ts b/components/lib/virtualscroller/VirtualScroller.d.ts
@@ -12,6 +12,8 @@ type VirtualScrollerToType = 'to-start' | 'to-end';
 
 type VirtualScrollerLoadingTemplateType = React.ReactNode | ((options: VirtualScrollerLoadingTemplateOptions) => React.ReactNode);
 
+type VirtualScrollerLoaderIconTemplateType = React.ReactNode | ((options: VirtualScrollerLoaderIconTemplateOptions) => React.ReactNode);
+
 type VirtualScrollerItemTemplateType = React.ReactNode | ((item: any, options: VirtualScrollerTemplateOptions) => React.ReactNode);
 
 type VirtualScrollerContentTemplateType = React.ReactNode | ((options: VirtualScrollerContentTemplateOptions) => React.ReactNode);
@@ -57,6 +59,12 @@ interface VirtualScrollerLoadingTemplateOptions extends VirtualScrollerTemplateO
     [key: string]: any;
 }
 
+interface VirtualScrollerLoaderIconTemplateOptions {
+    className: string;
+    element: JSX.Element;
+    props: VirtualScrollerProps;
+}
+
 interface VirtualScrollerContentTemplateOptions {
     className: string;
     contentRef: any;
@@ -96,14 +104,17 @@ export interface VirtualScrollerProps {
     orientation?: VirtualScrollerOrientationType;
     numToleratedItems?: number;
     delay?: number;
+    resizeDelay?: number;
     lazy?: boolean;
     disabled?: boolean;
     loaderDisabled?: boolean;
     columns?: any;
     loading?: boolean;
+    autoSize?: boolean;
     showSpacer?: boolean;
     showLoader?: boolean;
     loadingTemplate?: VirtualScrollerLoadingTemplateType;
+    loaderIconTemplate?: VirtualScrollerLoaderIconTemplateType;
     itemTemplate?: VirtualScrollerItemTemplateType;
     contentTemplate?: VirtualScrollerContentTemplateType;
     onScroll?(e: React.UIEvent<HTMLElement>): void;
@@ -113,6 +124,7 @@ export interface VirtualScrollerProps {
 }
 
 export declare class VirtualScroller extends React.Component<VirtualScrollerProps, any> {
+    public getElementRef(): React.Ref<HTMLDivElement>;
     public scrollTo(options: VirtualScrollerOptionsType): void;
     public scrollToIndex(index: VirtualScrollerToIndexType, behavior?: VirtualScrollerScrollBehavior): void;
     public scrollInView(index: VirtualScrollerToIndexType, to: VirtualScrollerToType, behavior?: VirtualScrollerScrollBehavior): void;