Add ext files to VirtualScroller components

primefaces · Dec 23, 2022 · aa596e0 · aa596e0
1 parent 996ec5e
commit aa596e0
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,15 +125,18 @@ 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: `
 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 (