Add new Galleria Docs:

FullScreen, AutoPlay, Caption, Advanced
primefaces · Nov 23, 2022 · 9bed77d · 9bed77d
1 parent 85d8afb
commit 9bed77d
Show file tree

Hide file tree

Showing 10 changed files with 1,514 additions and 2,214 deletions.
diff --git a/components/doc/galleria/advanced/default.js b/components/doc/galleria/advanced/default.js
diff --git a/components/doc/galleria/autoplay/default.js b/components/doc/galleria/autoplay/default.js
@@ -0,0 +1,142 @@
+import { useState, useEffect, useRef } from 'react';
+import { Galleria } from '../../../lib/galleria/Galleria';
+import { DocSectionText } from '../../common/docsectiontext';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { PhotoService } from '../../../../service/PhotoService';
+import getConfig from 'next/config';
+
+export function AutoPlayDemoDoc(props) {
+    const [images, setImages] = useState(null);
+    const galleriaService = new PhotoService();
+    const contextPath = getConfig().publicRuntimeConfig.contextPath;
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        galleriaService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={`${contextPath}/${item.itemImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={`${contextPath}/${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }}
+    item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
+        `,
+        javascript: `
+import { useState, useEffect, useRef } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from '../service/PhotoService';
+
+export default function AutoPlayDemoDoc() {
+    const [images, setImages] = useState(null)
+    const galleriaService = new PhotoService();
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        galleriaService.getImages().then(data => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }}
+            item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
+    )
+}
+        `,
+        typescript: `
+import { useState, useEffect, useRef } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from '../service/PhotoService';
+
+export default function AutoPlayDemoDoc() {
+    const [images, setImages] = useState(null)
+    const galleriaService = new PhotoService();
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        galleriaService.getImages().then(data => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />;
+    }
+    
+    return (
+        <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }}
+            item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>AutoPlay</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/caption/default.js b/components/doc/galleria/caption/default.js
@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from 'react';
+import { Galleria } from '../../../lib/galleria/Galleria';
+import { DocSectionText } from '../../common/docsectiontext';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { PhotoService } from '../../../../service/PhotoService';
+import getConfig from 'next/config';
+
+export function CaptionDoc(props) {
+    const [images, setImages] = useState(null);
+    const galleriaService = new PhotoService();
+    const contextPath = getConfig().publicRuntimeConfig.contextPath;
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        galleriaService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={`${contextPath}/${item.itemImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={`${contextPath}/${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const caption = (item) => {
+        return (
+            <React.Fragment>
+                <h4 className="mb-2">{item.title}</h4>
+                <p>{item.alt}</p>
+            </React.Fragment>
+        );
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5}
+    item={itemTemplate} thumbnail={thumbnailTemplate}
+    caption={caption} style={{ maxWidth: '640px' }} />
+        `,
+        javascript: `
+import { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from '../service/PhotoService';
+
+export default function CaptionDoc() {
+    const [images, setImages] = useState(null);
+    const galleriaService = new PhotoService();
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        galleriaService.getImages().then(data => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    const caption = (item) => {
+        return (
+            <React.Fragment>
+                <h4 className="mb-2">{item.title}</h4>
+                <p>{item.alt}</p>
+            </React.Fragment>
+        );
+    }
+
+    return (
+        <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5}
+            item={itemTemplate} thumbnail={thumbnailTemplate}
+            caption={caption} style={{ maxWidth: '640px' }} />
+    )
+}
+        `,
+        typescript: `
+import { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from '../service/PhotoService';
+
+export default function CaptionDoc() {
+    const [images, setImages] = useState(null);
+    const galleriaService = new PhotoService();
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        galleriaService.getImages().then(data => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    const caption = (item) => {
+        return (
+            <React.Fragment>
+                <h4 className="mb-2">{item.title}</h4>
+                <p>{item.alt}</p>
+            </React.Fragment>
+        );
+    }
+    
+    return (
+        <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5}
+            item={itemTemplate} thumbnail={thumbnailTemplate}
+            caption={caption} style={{ maxWidth: '640px' }} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Caption</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} item={itemTemplate} thumbnail={thumbnailTemplate} caption={caption} style={{ maxWidth: '640px' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}