From aa596e059d1bd0b7bf04f874b058be026a309fcc Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Fri, 23 Dec 2022 19:05:30 +0300
Subject: [PATCH] Add ext files to VirtualScroller components

---
 components/doc/virtualscroller/basicdoc.js    | 40 +++++++++++++++--
 components/doc/virtualscroller/lazydoc.js     | 44 +++++++++++++++++--
 components/doc/virtualscroller/loadingdoc.js  | 40 +++++++++++++++--
 .../doc/virtualscroller/scrolldelaydoc.js     | 40 +++++++++++++++--
 components/doc/virtualscroller/templatedoc.js | 44 +++++++++++++++++--
 5 files changed, 193 insertions(+), 15 deletions(-)

diff --git a/components/doc/virtualscroller/basicdoc.js b/components/doc/virtualscroller/basicdoc.js
index 877b77d055..cd24205563 100644
--- a/components/doc/virtualscroller/basicdoc.js
+++ b/components/doc/virtualscroller/basicdoc.js
@@ -49,6 +49,7 @@ export function BasicDoc(props) {
 import { useState } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function BasicDoc() {
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
@@ -86,7 +87,7 @@ export default function BasicDoc() {
     };
 
     return ( 
-        <div>
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} />
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} orientation="horizontal" />
             <VirtualScroller items={multiItems} itemSize={[50, 100]} itemTemplate={multiItemTemplate} orientation="both" />
@@ -98,6 +99,7 @@ export default function BasicDoc() {
 import { useState } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function BasicDoc() {
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
@@ -135,14 +137,46 @@ export default function BasicDoc() {
     };
 
     return (
-        <div>
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} />
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} orientation="horizontal" />
             <VirtualScroller items={multiItems} itemSize={[50, 100]} itemTemplate={multiItemTemplate} orientation="both" />
         </div>
     )
 }
-        `
+        `,
+        css: `
+/* VirtualScrollerDemo.css */
+
+.virtualscroller-demo .scroll-item {
+    display: flex;
+    align-items: center;
+}
+
+.virtualscroller-demo .custom-scroll-item {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.virtualscroller-demo .odd {
+    background-color: var(--surface-b);
+}
+
+.virtualscroller-demo .p-virtualscroller {
+    height: 200px;
+    width: 200px;
+    border: 1px solid var(--surface-d);
+}
+
+.virtualscroller-demo .p-horizontal-scroll .p-virtualscroller-content {
+    display: flex;
+    flex-direction: row;
+}
+
+.virtualscroller-demo .p-horizontal-scroll .scroll-item {
+    writing-mode: vertical-lr;
+}
+    `
     };
 
     return (
diff --git a/components/doc/virtualscroller/lazydoc.js b/components/doc/virtualscroller/lazydoc.js
index c0ca9e33c5..965242ab2e 100644
--- a/components/doc/virtualscroller/lazydoc.js
+++ b/components/doc/virtualscroller/lazydoc.js
@@ -56,6 +56,7 @@ export function LazyDoc(props) {
 import { useState, useEffect, useRef } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function LazyDoc() {
     const [lazyItems, setLazyItems] = useState([]);
@@ -102,14 +103,17 @@ export default function LazyDoc() {
     };
 
     return ( 
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={lazyItems} itemSize={50} itemTemplate={basicItemTemplate} lazy onLazyLoad={onLazyLoad} showLoader loading={lazyLoading} />
-    );
+        </div>
+        );
 }
         `,
         typescript: `
 import { useState, useEffect, useRef } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function LazyDoc() {
     const [lazyItems, setLazyItems] = useState([]);
@@ -156,10 +160,44 @@ export default function LazyDoc() {
     };
 
     return (
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={lazyItems} itemSize={50} itemTemplate={basicItemTemplate} lazy onLazyLoad={onLazyLoad} showLoader loading={lazyLoading} />
-    )
+        </div>
+        )
+}
+        `,
+        css: `
+/* VirtualScrollerDemo.css */
+
+.virtualscroller-demo .scroll-item {
+    display: flex;
+    align-items: center;
+}
+
+.virtualscroller-demo .custom-scroll-item {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.virtualscroller-demo .odd {
+    background-color: var(--surface-b);
+}
+
+.virtualscroller-demo .p-virtualscroller {
+    height: 200px;
+    width: 200px;
+    border: 1px solid var(--surface-d);
+}
+
+.virtualscroller-demo .p-horizontal-scroll .p-virtualscroller-content {
+    display: flex;
+    flex-direction: row;
+}
+
+.virtualscroller-demo .p-horizontal-scroll .scroll-item {
+    writing-mode: vertical-lr;
 }
-        `
+    `
     };
 
     return (
diff --git a/components/doc/virtualscroller/loadingdoc.js b/components/doc/virtualscroller/loadingdoc.js
index c5262545d9..dbcf385c39 100644
--- a/components/doc/virtualscroller/loadingdoc.js
+++ b/components/doc/virtualscroller/loadingdoc.js
@@ -43,6 +43,7 @@ import { useState } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { Skeleton } from 'primereact/skeleton';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function LoadingDoc() {
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
@@ -69,7 +70,7 @@ export default function LoadingDoc() {
     }
 
     return ( 
-        <div>
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} showLoader delay={250}/>
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} showLoader delay={250} loadingTemplate={basicLoadingTemplate} />
         </div>
@@ -81,6 +82,7 @@ import { useState } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { Skeleton } from 'primereact/skeleton';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function LoadingDoc() {
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
@@ -107,13 +109,45 @@ export default function LoadingDoc() {
     }
 
     return (
-        <div>
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} showLoader delay={250}/>
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} showLoader delay={250} loadingTemplate={basicLoadingTemplate} />
         </div>
     )
 }
-        `
+        `,
+        css: `
+/* VirtualScrollerDemo.css */
+
+.virtualscroller-demo .scroll-item {
+    display: flex;
+    align-items: center;
+}
+
+.virtualscroller-demo .custom-scroll-item {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.virtualscroller-demo .odd {
+    background-color: var(--surface-b);
+}
+
+.virtualscroller-demo .p-virtualscroller {
+    height: 200px;
+    width: 200px;
+    border: 1px solid var(--surface-d);
+}
+
+.virtualscroller-demo .p-horizontal-scroll .p-virtualscroller-content {
+    display: flex;
+    flex-direction: row;
+}
+
+.virtualscroller-demo .p-horizontal-scroll .scroll-item {
+    writing-mode: vertical-lr;
+}
+    `
     };
 
     return (
diff --git a/components/doc/virtualscroller/scrolldelaydoc.js b/components/doc/virtualscroller/scrolldelaydoc.js
index 96922009d0..b61f3bce79 100644
--- a/components/doc/virtualscroller/scrolldelaydoc.js
+++ b/components/doc/virtualscroller/scrolldelaydoc.js
@@ -30,6 +30,7 @@ export function ScrollDelayDoc(props) {
 import { useState } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function ScrollDelayDoc() {
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
@@ -44,7 +45,7 @@ export default function ScrollDelayDoc() {
     }
 
     return ( 
-        <div>
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} />
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} delay={150} />
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} delay={250} />
@@ -56,6 +57,7 @@ export default function ScrollDelayDoc() {
 import { useState } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function ScrollDelayDoc() {
     const [basicItems] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
@@ -70,14 +72,46 @@ export default function ScrollDelayDoc() {
     }
 
     return (
-        <div>
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} />
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} delay={150} />
             <VirtualScroller items={basicItems} itemSize={50} itemTemplate={basicItemTemplate} delay={250} />
         </div>
     )
 }
-        `
+        `,
+        css: `
+/* VirtualScrollerDemo.css */
+
+.virtualscroller-demo .scroll-item {
+    display: flex;
+    align-items: center;
+}
+
+.virtualscroller-demo .custom-scroll-item {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.virtualscroller-demo .odd {
+    background-color: var(--surface-b);
+}
+
+.virtualscroller-demo .p-virtualscroller {
+    height: 200px;
+    width: 200px;
+    border: 1px solid var(--surface-d);
+}
+
+.virtualscroller-demo .p-horizontal-scroll .p-virtualscroller-content {
+    display: flex;
+    flex-direction: row;
+}
+
+.virtualscroller-demo .p-horizontal-scroll .scroll-item {
+    writing-mode: vertical-lr;
+}
+    `
     };
 
     return (
diff --git a/components/doc/virtualscroller/templatedoc.js b/components/doc/virtualscroller/templatedoc.js
index 4de282af5a..79d0ca3ab9 100644
--- a/components/doc/virtualscroller/templatedoc.js
+++ b/components/doc/virtualscroller/templatedoc.js
@@ -68,6 +68,7 @@ import { useState } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { Skeleton } from 'primereact/skeleton';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function TemplateDoc() {
     const [templateItems] = useState(Array.from({ length: 10000 }).map((_, i) => \`Item #\${i}\`));
@@ -124,8 +125,10 @@ export default function TemplateDoc() {
     };
 
     return ( 
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={templateItems} itemSize={25 * 7} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} />
-    );
+        </div>
+        );
 }
         `,
         typescript: `
@@ -133,6 +136,7 @@ import { useState } 'react';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { Skeleton } from 'primereact/skeleton';
 import { classNames } from 'primereact/utils';
+import './VirtualScrollerDemo.css';
 
 export default function TemplateDoc() {
     const [templateItems] = useState(Array.from({ length: 10000 }).map((_, i) => \`Item #\${i}\`));
@@ -189,10 +193,44 @@ export default function TemplateDoc() {
     };
 
     return (
+        <div className="card virtualscroller-demo">
             <VirtualScroller items={templateItems} itemSize={25 * 7} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} />
-    )
+        </div>
+        )
+}
+        `,
+        css: `
+/* VirtualScrollerDemo.css */
+
+.virtualscroller-demo .scroll-item {
+    display: flex;
+    align-items: center;
+}
+
+.virtualscroller-demo .custom-scroll-item {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.virtualscroller-demo .odd {
+    background-color: var(--surface-b);
+}
+
+.virtualscroller-demo .p-virtualscroller {
+    height: 200px;
+    width: 200px;
+    border: 1px solid var(--surface-d);
+}
+
+.virtualscroller-demo .p-horizontal-scroll .p-virtualscroller-content {
+    display: flex;
+    flex-direction: row;
+}
+
+.virtualscroller-demo .p-horizontal-scroll .scroll-item {
+    writing-mode: vertical-lr;
 }
-        `
+    `
     };
 
     return (