Skip to content

Commit

Permalink
Add new Doc DataView
Browse files Browse the repository at this point in the history
  • Loading branch information
@habubey
habubey committed Dec 5, 2022
1 parent bb21718 commit 2c54f31
Show file tree
Hide file tree
Showing 8 changed files with 1,314 additions and 2,196 deletions.
454 changes: 454 additions & 0 deletions components/doc/dataview/apidoc.js
View file

Large diffs are not rendered by default.

362 changes: 362 additions & 0 deletions components/doc/dataview/basicdoc.js
View file

Large diffs are not rendered by default.

17 changes: 17 additions & 0 deletions components/doc/dataview/importdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function ImportDoc(props) {
const code = {
basic: `
import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<DocSectionCode code={code} hideToggleCode hideCodeSandbox />
</>
);
}
1,186 changes: 0 additions & 1,186 deletions components/doc/dataview/index.js
View file

This file was deleted.

410 changes: 410 additions & 0 deletions components/doc/dataview/lazydoc.js
View file

Large diffs are not rendered by default.

9 changes: 2 additions & 7 deletions components/layout/menu.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -516,14 +516,9 @@
"meta": ["dataview"],
"children": [
{
"name": "Documentation",
"name": "DataViews",
"to": "/dataview",
"meta": ["documentation"]
},
{
"name": "Lazy",
"to": "/dataview/lazy",
"meta": ["lazy"]
"meta": ["dataviews"]
}
]
},
Expand Down
185 changes: 69 additions & 116 deletions pages/dataview/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,73 @@
import React, { useState, useEffect } from 'react';
import { DataView, DataViewLayoutOptions } from '../../components/lib/dataview/DataView';
import { Button } from '../../components/lib/button/Button';
import { Dropdown } from '../../components/lib/dropdown/Dropdown';
import { ProductService } from '../../service/ProductService';
import { Rating } from '../../components/lib/rating/Rating';
import DataViewDoc from '../../components/doc/dataview';
import { DocActions } from '../../components/doc/common/docactions';
import Head from 'next/head';
import getConfig from 'next/config';
import { DocSections } from '../../components/doc/common/docsections';
import { DocActions } from '../../components/doc/common/docactions';
import { DocSectionNav } from '../../components/doc/common/docsectionnav';
import { ImportDoc } from '../../components/doc/dataview/importdoc';
import { BasicDoc } from '../../components/doc/dataview/basicdoc';
import { ApiDoc } from '../../components/doc/dataview/apidoc';
import { LazyDataViewDoc } from '../../components/doc/dataview/lazydoc';

const DataViewDemo = () => {
const [products, setProducts] = useState(null);
const [layout, setLayout] = useState('grid');
const [sortKey, setSortKey] = useState(null);
const [sortOrder, setSortOrder] = useState(null);
const [sortField, setSortField] = useState(null);
const sortOptions = [
{ label: 'Price High to Low', value: '!price' },
{ label: 'Price Low to High', value: 'price' }
];

const productService = new ProductService();
const contextPath = getConfig().publicRuntimeConfig.contextPath;

useEffect(() => {
productService.getProducts().then((data) => setProducts(data));
}, []); // eslint-disable-line react-hooks/exhaustive-deps

const onSortChange = (event) => {
const value = event.value;

if (value.indexOf('!') === 0) {
setSortOrder(-1);
setSortField(value.substring(1, value.length));
setSortKey(value);
} else {
setSortOrder(1);
setSortField(value);
setSortKey(value);
}
};

const renderListItem = (data) => {
return (
<div className="col-12">
<div className="product-list-item">
<img src={`${contextPath}/images/product/${data.image}`} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} />
<div className="product-list-detail">
<div className="product-name">{data.name}</div>
<div className="product-description">{data.description}</div>
<Rating value={data.rating} readOnly cancel={false}></Rating>
<i className="pi pi-tag product-category-icon"></i>
<span className="product-category">{data.category}</span>
</div>
<div className="product-list-action">
<span className="product-price">${data.price}</span>
<Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
<span className={`product-badge status-${data.inventoryStatus.toLowerCase()}`}>{data.inventoryStatus}</span>
</div>
</div>
</div>
);
};

const renderGridItem = (data) => {
return (
<div className="col-12 md:col-4">
<div className="product-grid-item card">
<div className="product-grid-item-top">
<div>
<i className="pi pi-tag product-category-icon"></i>
<span className="product-category">{data.category}</span>
</div>
<span className={`product-badge status-${data.inventoryStatus.toLowerCase()}`}>{data.inventoryStatus}</span>
</div>
<div className="product-grid-item-content">
<img src={`${contextPath}/images/product/${data.image}`} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={data.name} />
<div className="product-name">{data.name}</div>
<div className="product-description">{data.description}</div>
<Rating value={data.rating} readOnly cancel={false}></Rating>
</div>
<div className="product-grid-item-bottom">
<span className="product-price">${data.price}</span>
<Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
</div>
</div>
</div>
);
};

const itemTemplate = (product, layout) => {
if (!product) {
return;
const docs = [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'lazy',
label: 'Lazy',
component: LazyDataViewDoc
},
{
id: 'api',
label: 'API',
component: ApiDoc,
children: [
{
id: 'propertiesofdataviewlayout',
label: 'Properties of DataViewLayoutOptions'
},
{
id: 'eventsofdataview',
label: 'Events of DataViewLayoutOptions'
},
{
id: 'paginator',
label: 'Paginator'
},
{
id: 'sorting',
label: 'Sorting'
},
{
id: 'lazyloading',
label: 'Lazy Loading'
},
{
id: 'properties',
label: 'Properties'
},
{
id: 'events',
label: 'Events'
},
{
id: 'styling',
label: 'Styling'
},
{
id: 'accessibility',
label: 'Accessibility'
}
]
}

if (layout === 'list') return renderListItem(product);
else if (layout === 'grid') return renderGridItem(product);
};

const renderHeader = () => {
return (
<div className="grid grid-nogutter">
<div className="col-6" style={{ textAlign: 'left' }}>
<Dropdown options={sortOptions} value={sortKey} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} />
</div>
<div className="col-6" style={{ textAlign: 'right' }}>
<DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
</div>
</div>
);
};

const header = renderHeader();
];

return (
<div>
Expand All @@ -128,13 +84,10 @@ const DataViewDemo = () => {
<DocActions github="dataview/index.js" />
</div>

<div className="content-section implementation dataview-demo">
<div className="card">
<DataView value={products} layout={layout} header={header} itemTemplate={itemTemplate} paginator rows={9} sortOrder={sortOrder} sortField={sortField} />
</div>
<div className="content-section doc dataview-demo">
<DocSections docs={docs} />
<DocSectionNav docs={docs} />
</div>

<DataViewDoc />
</div>
);
};
Expand Down
Loading

0 comments on commit 2c54f31

Please sign in to comment.