Skip to content

Commit

Permalink
Refactor #4393 - For Carousel
Browse files Browse the repository at this point in the history
  • Loading branch information
ulasturann committed May 18, 2023
1 parent b2d0a80 commit 13c5b23
Show file tree
Hide file tree
Showing 7 changed files with 784 additions and 33 deletions.
294 changes: 294 additions & 0 deletions components/doc/carousel/pt/ptdoc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,294 @@
import { useEffect, useState } from 'react';
import { ProductService } from '../../../../service/ProductService';
import { Button } from '../../../lib/button/Button';
import { Carousel } from '../../../lib/carousel/Carousel';
import { Tag } from '../../../lib/tag/Tag';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function PTDoc(props) {
const [products, setProducts] = useState([]);
const responsiveOptions = [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1
}
];

const getSeverity = (product) => {
switch (product.inventoryStatus) {
case 'INSTOCK':
return 'success';

case 'LOWSTOCK':
return 'warning';

case 'OUTOFSTOCK':
return 'danger';

default:
return null;
}
};

useEffect(() => {
ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
}, []); // eslint-disable-line react-hooks/exhaustive-deps

const productTemplate = (product) => {
return (
<div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div className="mb-3">
<img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
</div>
<div>
<h4 className="mb-1">{product.name}</h4>
<h6 className="mt-0 mb-3">${product.price}</h6>
<Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
<div className="mt-5 flex flex-wrap gap-2 justify-content-center">
<Button icon="pi pi-search" className="p-button p-button-rounded" />
<Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
</div>
</div>
</div>
);
};

const code = {
basic: `
<Carousel
value={products}
numVisible={3}
numScroll={3}
responsiveOptions={responsiveOptions}
itemTemplate={productTemplate}
pt={{
indicatorButton: { className: 'border-round-lg' }
}}
/>
`,
javascript: `
import React, { useState, useEffect } from 'react';
import { Button } from 'primereact/button';
import { Carousel } from 'primereact/carousel';
import { Tag } from 'primereact/tag';
import { ProductService } from './service/ProductService';
export default function PTDemo() {
const [products, setProducts] = useState([]);
const responsiveOptions = [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1
}
];
const getSeverity = (product) => {
switch (product.inventoryStatus) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warning';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
};
useEffect(() => {
ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
}, []);
const productTemplate = (product) => {
return (
<div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div className="mb-3">
<img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
</div>
<div>
<h4 className="mb-1">{product.name}</h4>
<h6 className="mt-0 mb-3">\${product.price}</h6>
<Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
<div className="mt-5 flex flex-wrap gap-2 justify-content-center">
<Button icon="pi pi-search" className="p-button p-button-rounded" />
<Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
</div>
</div>
</div>
);
};
return (
<div className="card">
<Carousel
value={products}
numVisible={3}
numScroll={3}
responsiveOptions={responsiveOptions}
itemTemplate={productTemplate}
pt={{
indicatorButton: { className: 'border-round-lg' }
}}
/>
</div>
)
}
`,
typescript: `
import React, { useState, useEffect } from 'react';
import { Button } from 'primereact/button';
import { Carousel, CarouselResponsiveOption } from 'primereact/carousel';
import { Tag } from 'primereact/tag';
import { ProductService } from './service/ProductService';
interface Product {
id: string;
code: string;
name: string;
description: string;
image: string;
price: number;
category: string;
quantity: number;
inventoryStatus: string;
rating: number;
}
export default function PTDemo() {
const [products, setProducts] = useState<Product[]>([]);
const responsiveOptions: CarouselResponsiveOption[] = [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1
}
];
const getSeverity = (product: Product) => {
switch (product.inventoryStatus) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warning';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
};
useEffect(() => {
ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
}, []);
const productTemplate = (product: Product) => {
return (
<div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div className="mb-3">
<img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
</div>
<div>
<h4 className="mb-1">{product.name}</h4>
<h6 className="mt-0 mb-3">\${product.price}</h6>
<Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
<div className="mt-5 flex flex-wrap gap-2 justify-content-center">
<Button icon="pi pi-search" className="p-button p-button-rounded" />
<Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
</div>
</div>
</div>
);
};
return (
<div className="card">
<Carousel
value={products}
numVisible={3}
numScroll={3}
responsiveOptions={responsiveOptions}
itemTemplate={productTemplate}
pt={{
indicatorButton: { className: 'border-round-lg' }
}}
/>
</div>
)
}
`,
data: `
/* ProductService */
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
...
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<div className="card">
<Carousel
value={products}
numVisible={3}
numScroll={3}
responsiveOptions={responsiveOptions}
itemTemplate={productTemplate}
pt={{
indicatorButton: { className: 'border-round-lg' }
}}
/>
</div>
<DocSectionCode code={code} service={['ProductService']} />
</>
);
}
13 changes: 13 additions & 0 deletions components/doc/carousel/pt/wireframe.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { DocSectionText } from '../../common/docsectiontext';

export const Wireframe = (props) => {
return (
<>
<DocSectionText {...props} />
<div>
<img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="carousel" />
</div>
</>
);
};
Loading

0 comments on commit 13c5b23

Please sign in to comment.