Fixed #5798 - Remove primeflex dependency from DataView

primefaces · Jan 18, 2024 · af1d89b · af1d89b
1 parent 2510b7e
commit af1d89b
Show file tree

Hide file tree

Showing 10 changed files with 266 additions and 157 deletions.
diff --git a/components/doc/dataview/basicdoc.js b/components/doc/dataview/basicdoc.js
@@ -4,6 +4,7 @@ import { Button } from '@/components/lib/button/Button';
 import { DataView } from '@/components/lib/dataview/DataView';
 import { Rating } from '@/components/lib/rating/Rating';
 import { Tag } from '@/components/lib/tag/Tag';
+import { classNames } from '@/components/lib/utils/Utils';
 import { useEffect, useState } from 'react';
 import { ProductService } from '../../../service/ProductService';
 
@@ -30,10 +31,10 @@ export function BasicDoc(props) {
         }
     };
 
-    const itemTemplate = (product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -57,16 +58,27 @@ export function BasicDoc(props) {
         );
     };
 
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     const code = {
         basic: `
-<DataView value={products} itemTemplate={itemTemplate} />
+<DataView value={products} listTemplate={listTemplate} />
         `,
         javascript: `
 import React, { useState, useEffect } from 'react';
 import { Button } from 'primereact/button';
 import { DataView } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
 import { ProductService } from './service/ProductService';
 
 export default function BasicDemo() {
@@ -92,10 +104,10 @@ export default function BasicDemo() {
         }
     };
 
-    const itemTemplate = (product) => {
+    const itemTemplate = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -119,9 +131,19 @@ export default function BasicDemo() {
         );
     };
 
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} />
+            <DataView value={products} listTemplate={listTemplate} />
         </div>
     )
 }
@@ -132,6 +154,7 @@ import { Button } from 'primereact/button';
 import { DataView } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
 import { ProductService } from './service/ProductService';
 
 interface Product {
@@ -170,10 +193,10 @@ export default function BasicDemo() {
         }
     };
 
-    const itemTemplate = (product: Product) => {
+    const itemTemplate = (product: Product, index: number) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -197,15 +220,25 @@ export default function BasicDemo() {
         );
     };
 
+    const listTemplate = (items: Product[]) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} />
+            <DataView value={products} listTemplate={listTemplate} />
         </div>
     )
 }
         `,
         data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
@@ -226,12 +259,11 @@ export default function BasicDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    DataView requires a <i>value</i> to display along with an <i>itemTemplate</i> that receives an object in the collection to return content. The root element should have the PrimeFlex Grid classes e.g. col-12 to define how items are
-                    displayed.
+                    DataView requires a <i>value</i> to display along with an <i>listTemplate</i> that receives an object in the collection to return content.
                 </p>
             </DocSectionText>
             <div className="card">
-                <DataView value={products} itemTemplate={itemTemplate} />
+                <DataView value={products} listTemplate={listTemplate} />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>

diff --git a/components/doc/dataview/layoutdoc.js b/components/doc/dataview/layoutdoc.js
@@ -3,6 +3,7 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import { Button } from '@/components/lib/button/Button';
 import { DataView, DataViewLayoutOptions } from '@/components/lib/dataview/DataView';
 import { Rating } from '@/components/lib/rating/Rating';
+import { classNames } from '@/components/lib/utils/Utils';
 import { Tag } from '@/components/lib/tag/Tag';
 import { useEffect, useState } from 'react';
 import { ProductService } from '../../../service/ProductService';
@@ -31,10 +32,10 @@ export function LayoutDoc(props) {
         }
     };
 
-    const listItem = (product) => {
+    const listItem = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -60,7 +61,7 @@ export function LayoutDoc(props) {
 
     const gridItem = (product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="flex align-items-center gap-2">
@@ -83,15 +84,19 @@ export function LayoutDoc(props) {
         );
     };
 
-    const itemTemplate = (product, layout) => {
+    const itemTemplate = (product, layout, index) => {
         if (!product) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -111,6 +116,7 @@ import { Button } from 'primereact/button';
 import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
 
 export default function BasicDemo() {
     const [products, setProducts] = useState([]);
@@ -136,10 +142,10 @@ export default function BasicDemo() {
         }
     };
 
-    const listItem = (product) => {
+    const listItem = (product, index) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -165,7 +171,7 @@ export default function BasicDemo() {
 
     const gridItem = (product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="flex align-items-center gap-2">
@@ -188,15 +194,19 @@ export default function BasicDemo() {
         );
     };
 
-    const itemTemplate = (product, layout) => {
+    const itemTemplate = (product, layout, index) => {
         if (!product) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -207,7 +217,7 @@ export default function BasicDemo() {
 
     return (
         <div className="card">
-            <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+            <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
         </div>
     )
 }
@@ -219,6 +229,7 @@ import { Button } from 'primereact/button';
 import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
 import { Rating } from 'primereact/rating';
 import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
 
 interface Product {
     id: string;
@@ -257,10 +268,10 @@ export default function BasicDemo() {
         }
     };
 
-    const listItem = (product: Product) => {
+    const listItem = (product: Product, index: number) => {
         return (
-            <div className="col-12">
-                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
                     <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
                     <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div className="flex flex-column align-items-center sm:align-items-start gap-3">
@@ -286,7 +297,7 @@ export default function BasicDemo() {
 
     const gridItem = (product: Product) => {
         return (
-            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
                 <div className="p-4 border-1 surface-border surface-card border-round">
                     <div className="flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="flex align-items-center gap-2">
@@ -309,15 +320,19 @@ export default function BasicDemo() {
         );
     };
 
-    const itemTemplate = (product: Product, layout: string) => {
+    const itemTemplate = (product: Product, layout: string, index: number) => {
         if (!product) {
             return;
         }
 
-        if (layout === 'list') return listItem(product);
+        if (layout === 'list') return listItem(product: Product, index);
         else if (layout === 'grid') return gridItem(product);
     };
 
+    const listTemplate = (products: Product[], layout: string) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
     const header = () => {
         return (
             <div className="flex justify-content-end">
@@ -334,7 +349,7 @@ export default function BasicDemo() {
 }
         `,
         data: `
-/* ProductService */        
+/* ProductService */
 {
     id: '1000',
     code: 'f230fh0g3',
@@ -360,7 +375,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+                <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>