{"ast":null,"code":"import _slicedToArray from \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\n\nvar _this = this,\n _jsxFileName = \"/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/MediaDemo.js\";\n\nimport React, { useEffect, useState } from 'react';\nimport { Carousel } from 'primereact/carousel';\nimport { Galleria } from 'primereact/galleria';\nimport { Button } from 'primereact/button';\nimport { Image } from \"primereact/image\";\nimport { ProductService } from '../service/ProductService';\nimport { PhotoService } from '../service/PhotoService';\n\nvar MediaDemo = function MediaDemo() {\n var _useState = useState([]),\n _useState2 = _slicedToArray(_useState, 2),\n products = _useState2[0],\n setProducts = _useState2[1];\n\n var _useState3 = useState([]),\n _useState4 = _slicedToArray(_useState3, 2),\n images = _useState4[0],\n setImages = _useState4[1];\n\n var galleriaResponsiveOptions = [{\n breakpoint: \"1024px\",\n numVisible: 5\n }, {\n breakpoint: \"960px\",\n numVisible: 4\n }, {\n breakpoint: \"768px\",\n numVisible: 3\n }, {\n breakpoint: \"560px\",\n numVisible: 1\n }];\n var carouselResponsiveOptions = [{\n breakpoint: \"1024px\",\n numVisible: 3,\n numScroll: 3\n }, {\n breakpoint: \"768px\",\n numVisible: 2,\n numScroll: 2\n }, {\n breakpoint: \"560px\",\n numVisible: 1,\n numScroll: 1\n }];\n useEffect(function () {\n var productService = new ProductService();\n productService.getProductsSmall().then(function (products) {\n return setProducts(products);\n });\n var photoService = new PhotoService();\n photoService.getImages().then(function (images) {\n return setImages(images);\n });\n }, []);\n\n var carouselItemTemplate = function carouselItemTemplate(product) {\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"product-item\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 58,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"product-item-content\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 59,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 60,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/demo/images/product/\".concat(product.image),\n alt: product.name,\n className: \"product-image\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 25\n }\n })), /*#__PURE__*/React.createElement(\"div\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 63,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(\"h4\", {\n className: \"p-mb-1\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 64,\n columnNumber: 25\n }\n }, product.name), /*#__PURE__*/React.createElement(\"h6\", {\n className: \"mt-0 mb-3\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 67,\n columnNumber: 25\n }\n }, \"$\", product.price), /*#__PURE__*/React.createElement(\"span\", {\n className: \"product-badge status-\".concat(product.inventoryStatus.toLowerCase()),\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 68,\n columnNumber: 25\n }\n }, product.inventoryStatus), /*#__PURE__*/React.createElement(\"div\", {\n className: \"car-buttons mt-5\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 69,\n columnNumber: 25\n }\n }, /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n className: \"p-button p-button-rounded mr-2\",\n icon: \"pi pi-search\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 70,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n className: \"p-button-success p-button-rounded mr-2\",\n icon: \"pi pi-star\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 71,\n columnNumber: 29\n }\n }), /*#__PURE__*/React.createElement(Button, {\n type: \"button\",\n className: \"p-button-help p-button-rounded\",\n icon: \"pi pi-cog\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 72,\n columnNumber: 29\n }\n })))));\n };\n\n var galleriaItemTemplate = function galleriaItemTemplate(item) {\n return /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/\".concat(item.itemImageSrc),\n alt: item.alt,\n style: {\n width: '100%',\n display: 'block'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 80,\n columnNumber: 44\n }\n });\n };\n\n var galleriaThumbnailTemplate = function galleriaThumbnailTemplate(item) {\n return /*#__PURE__*/React.createElement(\"img\", {\n src: \"assets/\".concat(item.thumbnailImageSrc),\n alt: item.alt,\n style: {\n width: '100%',\n display: 'block'\n },\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 81,\n columnNumber: 49\n }\n });\n };\n\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"grid p-fluid media-demo\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 84,\n columnNumber: 9\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 85,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 86,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 87,\n columnNumber: 21\n }\n }, \"Carousel\"), /*#__PURE__*/React.createElement(Carousel, {\n value: products,\n numVisible: 3,\n numScroll: 3,\n responsiveOptions: carouselResponsiveOptions,\n itemTemplate: carouselItemTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 88,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 92,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 93,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 94,\n columnNumber: 21\n }\n }, \"Galleria\"), /*#__PURE__*/React.createElement(Galleria, {\n value: images,\n responsiveOptions: galleriaResponsiveOptions,\n numVisible: 7,\n circular: true,\n style: {\n maxWidth: '800px',\n margin: 'auto'\n },\n item: galleriaItemTemplate,\n thumbnail: galleriaThumbnailTemplate,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 95,\n columnNumber: 21\n }\n }))), /*#__PURE__*/React.createElement(\"div\", {\n className: \"col-12\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 100,\n columnNumber: 13\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"card\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 101,\n columnNumber: 17\n }\n }, /*#__PURE__*/React.createElement(\"h5\", {\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 102,\n columnNumber: 21\n }\n }, \"Image\"), /*#__PURE__*/React.createElement(\"div\", {\n className: \"flex justify-content-center\",\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 103,\n columnNumber: 21\n }\n }, /*#__PURE__*/React.createElement(Image, {\n src: \"assets/demo/images/galleria/galleria11.jpg\",\n alt: \"galleria\",\n width: 250,\n preview: true,\n __self: _this,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 104,\n columnNumber: 25\n }\n })))));\n};\n\nvar comparisonFn = function comparisonFn(prevProps, nextProps) {\n return prevProps.location.pathname === nextProps.location.pathname;\n};\n\nexport default React.memo(MediaDemo, comparisonFn);","map":{"version":3,"names":["React","useEffect","useState","Carousel","Galleria","Button","Image","ProductService","PhotoService","MediaDemo","products","setProducts","images","setImages","galleriaResponsiveOptions","breakpoint","numVisible","carouselResponsiveOptions","numScroll","productService","getProductsSmall","then","photoService","getImages","carouselItemTemplate","product","image","name","price","inventoryStatus","toLowerCase","galleriaItemTemplate","item","itemImageSrc","alt","width","display","galleriaThumbnailTemplate","thumbnailImageSrc","maxWidth","margin","comparisonFn","prevProps","nextProps","location","pathname","memo"],"sources":["/Users/paolasanchez/Desktop/Pry4/Katoikia/katoikia-app/web-ui/sakai-react/src/components/MediaDemo.js"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Carousel } from 'primereact/carousel';\nimport { Galleria } from 'primereact/galleria';\nimport { Button } from 'primereact/button';\nimport { Image } from \"primereact/image\";\nimport { ProductService } from '../service/ProductService';\nimport { PhotoService } from '../service/PhotoService';\n\nconst MediaDemo = () => {\n const [products, setProducts] = useState([]);\n const [images, setImages] = useState([]);\n const galleriaResponsiveOptions = [\n {\n breakpoint: \"1024px\",\n numVisible: 5,\n },\n {\n breakpoint: \"960px\",\n numVisible: 4,\n },\n {\n breakpoint: \"768px\",\n numVisible: 3,\n },\n {\n breakpoint: \"560px\",\n numVisible: 1,\n },\n ];\n const carouselResponsiveOptions = [\n {\n breakpoint: \"1024px\",\n numVisible: 3,\n numScroll: 3,\n },\n {\n breakpoint: \"768px\",\n numVisible: 2,\n numScroll: 2,\n },\n {\n breakpoint: \"560px\",\n numVisible: 1,\n numScroll: 1,\n },\n ];\n\n useEffect(() => {\n const productService = new ProductService();\n productService.getProductsSmall().then((products) => setProducts(products));\n\n const photoService = new PhotoService();\n photoService.getImages().then((images) => setImages(images));\n }, []);\n\n const carouselItemTemplate = (product) => {\n return (\n