From 62f97b465e16f8a81adf3bd5958149646fccc5c0 Mon Sep 17 00:00:00 2001 From: habubey Date: Mon, 21 Nov 2022 20:42:59 +0300 Subject: [PATCH] Add new GalleriaDemo Docs. --- components/doc/galleria/apidoc.js | 408 ++++++++++++++ components/doc/galleria/galeriademo.js | 143 +++++ components/doc/galleria/importdoc.js | 17 + components/doc/galleria/index.js | 729 ------------------------- pages/galleria/index.js | 72 +-- 5 files changed, 604 insertions(+), 765 deletions(-) create mode 100644 components/doc/galleria/apidoc.js create mode 100644 components/doc/galleria/galeriademo.js create mode 100644 components/doc/galleria/importdoc.js delete mode 100644 components/doc/galleria/index.js diff --git a/components/doc/galleria/apidoc.js b/components/doc/galleria/apidoc.js new file mode 100644 index 0000000000..66da463159 --- /dev/null +++ b/components/doc/galleria/apidoc.js @@ -0,0 +1,408 @@ +import Link from 'next/link'; +import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSubSection } from '../common/docsubsection'; + +export function ApiDoc(props) { + return ( + <> + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuearraynullAn array of objects to display.
activeIndexnumber0Index of the first item.
headeranynullLabel of header.
footeranynullLabel of footer.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
itemfunctionnullFunction that gets an item in the value and returns the content for preview item.
thumbnailfunctionnullFunction that gets an item in the value and returns the content for thumbnail item.
indicatorfunctionnullFunction that gets an item in the value and returns the content for indicator item.
captionfunctionnullFunction that gets an item in the value and returns the content for caption item.
circularbooleanfalseDefines if scrolling would be infinite.
autoPlaybooleanfalseItems are displayed with a slideshow in autoPlay mode.
transitionIntervalnumber4000Time in milliseconds to scroll items.
numVisiblenumber3Number of items per page.
responsiveOptionsanynullAn array of options for responsive design.
thumbnailsPositionstringbottomPosition of thumbnails. Valid values are "bottom", "top", "left" and "right".
indicatorsPositionstringbottomPosition of indicators. Valid values are "bottom", "top", "left" and "right".
verticalThumbnailViewPortHeightstring300pxHeight of the viewport in vertical thumbnail.
showItemNavigatorsbooleanfalseWhether to display navigation buttons in item container.
showThumbnailNavigatorsbooleantrueWhether to display navigation buttons in thumbnail container.
showThumbnailsbooleantrueWhether to display thumbnail container.
showIndicatorsbooleanfalseWhether to display indicator container.
showIndicatorsOnItembooleanfalseWhen enabled, indicator container is displayed on item container.
showItemNavigatorsOnHoverbooleanfalseWhether to display navigation buttons on item container's hover.
changeItemOnIndicatorHoverbooleanfalseWhen enabled, item is changed on indicator item's hover.
fullScreenbooleanfalseWhether to display the component on fullscreen.
baseZIndexnumber0Base zIndex value to use in layering.
transitionOptionsobjectnull + The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. +
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
onItemChangeevent.index = index of the new item.Callback to invoke after changing item.
onShow-Callback to invoke when modal becomes visible.
onHide-Callback to invoke when modal becomes hidden.
+
+ + + +

Following is the list of structural style classes

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-galleriaContainer element.
p-galleria-headerHeader section.
p-galleria-footerFooter section.
p-galleria-item-wrapperItem wrapper element. It contains item container and indicators.
p-galleria-item-containerContainer of the item wrapper. It contains navigation buttons, items and caption content.
p-galleria-indicatorsContainer of the indicators. It contains indicator items.
p-galleria-thumbnail-contentThumbnail content element.
p-galleria-thumbnail-containerContainer of the thumbnail content. It contains navigation buttons and thumbnail items.
p-galleria-captionContent of the item caption.
+
+ + + + +

Screen Reader

+

+ Galleria uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has{' '} + aria-live attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay. +

+ +

+ A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of + the item. Inactive slides are hidden from the readers with aria-hidden. +

+ +

+ Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default + respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps. +

+ +

+ Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a tablist role whereas each item has a tab role with aria-selected and aria-controls{' '} + attributes. The aria-label attribute of a quick navigation item refers to the aria.pageLabel of the locale API. Current page is marked with aria-current. +

+ +

+ In full screen mode, modal element uses dialog role with aria-modal enabled. The close button retrieves aria-label from the aria.close property of the locale API. +

+ +

Next/Prev Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus through interactive elements in the carousel.
+ enter + Activates navigation.
+ space + Activates navigation.
+
+ +

Quick Navigation Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus through the active slide link.
+ enter + Activates the focused slide link.
+ space + Activates the focused slide link.
+ right arrow + Moves focus to the next slide link.
+ left arrow + Moves focus to the previous slide link.
+ home + Moves focus to the first slide link.
+ end + Moves focus to the last slide link.
+
+ + + + ); +} diff --git a/components/doc/galleria/galeriademo.js b/components/doc/galleria/galeriademo.js new file mode 100644 index 0000000000..c45f1ce55b --- /dev/null +++ b/components/doc/galleria/galeriademo.js @@ -0,0 +1,143 @@ +import { 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 GaleriaDemo(props) { + const [images, setImages] = useState(null); + + const contextPath = getConfig().publicRuntimeConfig.contextPath; + const galleriaService = new PhotoService(); + + useEffect(() => { + galleriaService.getImages().then((data) => setImages(data)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const responsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 5 + }, + { + breakpoint: '768px', + numVisible: 3 + }, + { + breakpoint: '560px', + numVisible: 1 + } + ]; + + const itemTemplate = (item) => { + return {item.alt}; + }; + + const thumbnailTemplate = (item) => { + return {item.alt}; + }; + + const code = { + basic: ` + + `, + javascript: ` +import { useState, useEffect } from 'react'; +import { Galleria } from 'primereact/galleria'; +import { PhotoService } from '../service/PhotoService'; + +export default function GaleriaDemo() { + const [images, setImages] = useState(null); + const galleriaService = new PhotoService(); + + useEffect(() => { + galleriaService.getImages().then(data => setImages(data)); + }, []) + + const responsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 5 + }, + { + breakpoint: '768px', + numVisible: 3 + }, + { + breakpoint: '560px', + numVisible: 1 + } + ]; + + const itemTemplate = (item) => { + return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%' }} /> + } + + const thumbnailTemplate = (item) => { + return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} /> + } + + return ( + + ) +} + `, + typescript: ` +import { useState, useEffect } from 'react'; +import { Galleria } from 'primereact/galleria'; +import { PhotoService } from '../service/PhotoService'; + +export default function GaleriaDemo() { + const [images, setImages] = useState(null); + const galleriaService = new PhotoService(); + + useEffect(() => { + galleriaService.getImages().then(data => setImages(data)); + }, []) + + const responsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 5 + }, + { + breakpoint: '768px', + numVisible: 3 + }, + { + breakpoint: '560px', + numVisible: 1 + } + ]; + + const itemTemplate = (item) => { + return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%' }} /> + } + + const thumbnailTemplate = (item) => { + return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} /> + } + + return ( + + ) +} + ` + }; + + return ( + <> + +

+ +
+ +
+ + + ); +} diff --git a/components/doc/galleria/importdoc.js b/components/doc/galleria/importdoc.js new file mode 100644 index 0000000000..2f974eff7b --- /dev/null +++ b/components/doc/galleria/importdoc.js @@ -0,0 +1,17 @@ +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { Galleria } from 'primereact/galleria'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/galleria/index.js b/components/doc/galleria/index.js deleted file mode 100644 index fe2fd582b7..0000000000 --- a/components/doc/galleria/index.js +++ /dev/null @@ -1,729 +0,0 @@ -import React, { memo } from 'react'; -import Link from 'next/link'; -import { TabView, TabPanel } from '../../lib/tabview/TabView'; -import { CodeHighlight } from '../common/codehighlight'; -import { useLiveEditorTabs } from '../common/liveeditor'; -import { DevelopmentSection } from '../common/developmentsection'; - -const GalleriaDoc = memo(() => { - const sources = { - class: { - tabName: 'Class Source', - content: ` -import React, { Component } from 'react'; -import { PhotoService } from '../service/PhotoService'; -import { Galleria } from 'primereact/galleria'; - -export class GalleriaDemo extends Component { - - constructor(props) { - super(props); - - this.state = { - images: null - }; - - this.galleriaService = new PhotoService(); - this.itemTemplate = this.itemTemplate.bind(this); - this.thumbnailTemplate = this.thumbnailTemplate.bind(this); - } - - componentDidMount() { - this.galleriaService.getImages().then(data => this.setState({ images: data })); - } - - itemTemplate(item) { - return {item.alt} - } - - thumbnailTemplate(item) { - return {item.alt} - } - - render() { - return ( -
-
- -
-
- ); - } - ` - }, - hooks: { - tabName: 'Hooks Source', - content: ` -import React, { useState, useEffect } from 'react'; -import { PhotoService } from '../service/PhotoService'; -import { Galleria } from 'primereact/galleria'; - -const GalleriaDemo = () => { - - const [images, setImages] = useState(null); - const galleriaService = new PhotoService(); - - useEffect(() => { - galleriaService.getImages().then(data => setImages(data)); - }, []) - - const responsiveOptions = [ - { - breakpoint: '1024px', - numVisible: 5 - }, - { - breakpoint: '768px', - numVisible: 3 - }, - { - breakpoint: '560px', - numVisible: 1 - } - ]; - - const itemTemplate = (item) => { - return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%' }} /> - } - - const thumbnailTemplate = (item) => { - return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} /> - } - - return ( -
-
- -
-
- ); -} - ` - }, - ts: { - tabName: 'TS Source', - content: ` -import React, { useState, useEffect } from 'react'; -import { PhotoService } from '../service/PhotoService'; -import { Galleria } from 'primereact/galleria'; - -const GalleriaDemo = () => { - - const [images, setImages] = useState(null); - const galleriaService = new PhotoService(); - - useEffect(() => { - galleriaService.getImages().then(data => setImages(data)); - }, []) - - const responsiveOptions = [ - { - breakpoint: '1024px', - numVisible: 5 - }, - { - breakpoint: '768px', - numVisible: 3 - }, - { - breakpoint: '560px', - numVisible: 1 - } - ]; - - const itemTemplate = (item) => { - return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%' }} /> - } - - const thumbnailTemplate = (item) => { - return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} /> - } - - return ( -
-
- -
-
- ); -} - ` - }, - browser: { - tabName: 'Browser Source', - imports: ` - - - `, - content: ` -const { useEffect, useState, useRef } = React; -const { Galleria } = primereact.galleria; - - -const GalleriaDemo = () => { - - const [images, setImages] = useState(null); - const galleriaService = new PhotoService(); - - useEffect(() => { - galleriaService.getImages().then(data => setImages(data)); - }, []) - - const responsiveOptions = [ - { - breakpoint: '1024px', - numVisible: 5 - }, - { - breakpoint: '768px', - numVisible: 3 - }, - { - breakpoint: '560px', - numVisible: 1 - } - ]; - - const itemTemplate = (item) => { - return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} style={{ width: '100%' }} /> - } - - const thumbnailTemplate = (item) => { - return e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.alt} /> - } - - return ( -
-
- -
-
- ); -} - ` - } - }; - - return ( -
- - -
Import via Module
- - {` -import { Galleria } from 'primereact/galleria'; -`} - - -
Import via CDN
- - {` - - -`} - - -
Getting Started
-

Galleria requires a value as an array of objects and can either be used as a Controlled or Uncontrolled component.

- - - {` - -`} - - - {` -const itemTemplate = (item) => { - // custom item content -} - -const thumbnailTemplate = (item) => { - // custom thumbnail content -} -`} - - -
Items per page
-

- Number of items per page is defined using the numVisible property. -

- - {` - -`} - - -
Responsive
-

- For responsive design, numVisible can be defined using the responsiveOptions property that should be an array of objects whose breakpoint defines the max-width to apply the settings. -

- - {` - -`} - - - - {` -const responsiveOptions = [ - { - breakpoint: '1024px', - numVisible: 5 - }, - { - breakpoint: '768px', - numVisible: 3 - }, - { - breakpoint: '560px', - numVisible: 1 - } -]; -`} - - -
Header and Footer
-

- Custom content projection is available using the header and footer properties. -

- - {` -Header}> - -`} - - -
Controlled vs Uncontrolled
-

- In controlled mode, activeIndex and onItemChange properties need to be defined to control the first visible item. -

- - - {` - setActiveIndex(e.index)}> -`} - - -
Uncontrolled
-

- In uncontrolled mode, no additional properties are required. Initial item can be provided using the activeItemIndex property in uncontrolled mode however it is evaluated at initial rendering and ignored in further - updates. If you programmatically need to update the first visible item index, prefer to use the component as controlled. -

- - - {` - -`} - - -
Properties
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuearraynullAn array of objects to display.
activeIndexnumber0Index of the first item.
headeranynullLabel of header.
footeranynullLabel of footer.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
itemfunctionnullFunction that gets an item in the value and returns the content for preview item.
thumbnailfunctionnullFunction that gets an item in the value and returns the content for thumbnail item.
indicatorfunctionnullFunction that gets an item in the value and returns the content for indicator item.
captionfunctionnullFunction that gets an item in the value and returns the content for caption item.
circularbooleanfalseDefines if scrolling would be infinite.
autoPlaybooleanfalseItems are displayed with a slideshow in autoPlay mode.
transitionIntervalnumber4000Time in milliseconds to scroll items.
numVisiblenumber3Number of items per page.
responsiveOptionsanynullAn array of options for responsive design.
thumbnailsPositionstringbottomPosition of thumbnails. Valid values are "bottom", "top", "left" and "right".
indicatorsPositionstringbottomPosition of indicators. Valid values are "bottom", "top", "left" and "right".
verticalThumbnailViewPortHeightstring300pxHeight of the viewport in vertical thumbnail.
showItemNavigatorsbooleanfalseWhether to display navigation buttons in item container.
showThumbnailNavigatorsbooleantrueWhether to display navigation buttons in thumbnail container.
showThumbnailsbooleantrueWhether to display thumbnail container.
showIndicatorsbooleanfalseWhether to display indicator container.
showIndicatorsOnItembooleanfalseWhen enabled, indicator container is displayed on item container.
showItemNavigatorsOnHoverbooleanfalseWhether to display navigation buttons on item container's hover.
changeItemOnIndicatorHoverbooleanfalseWhen enabled, item is changed on indicator item's hover.
fullScreenbooleanfalseWhether to display the component on fullscreen.
baseZIndexnumber0Base zIndex value to use in layering.
transitionOptionsobjectnull - The properties of{' '} - - CSSTransition - {' '} - can be customized, except for "nodeRef" and "in" properties. -
-
- -
Events
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onItemChangeevent.index = index of the new item.Callback to invoke after changing item.
onShow-Callback to invoke when modal becomes visible.
onHide-Callback to invoke when modal becomes hidden.
-
- -
Styling
-

Following is the list of structural style classes

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-galleriaContainer element.
p-galleria-headerHeader section.
p-galleria-footerFooter section.
p-galleria-item-wrapperItem wrapper element. It contains item container and indicators.
p-galleria-item-containerContainer of the item wrapper. It contains navigation buttons, items and caption content.
p-galleria-indicatorsContainer of the indicators. It contains indicator items.
p-galleria-thumbnail-contentThumbnail content element.
p-galleria-thumbnail-containerContainer of the thumbnail content. It contains navigation buttons and thumbnail items.
p-galleria-captionContent of the item caption.
-
- -
Accessibility
- -
Screen Reader
-

- Galleria uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has{' '} - aria-live attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay. -

- -

- A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription{' '} - of the item. Inactive slides are hidden from the readers with aria-hidden. -

- -

- Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by - default respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps. -

- -

- Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a tablist role whereas each item has a tab role with aria-selected and aria-controls{' '} - attributes. The aria-label attribute of a quick navigation item refers to the aria.pageLabel of the locale API. Current page is marked with aria-current. -

- -

- In full screen mode, modal element uses dialog role with aria-modal enabled. The close button retrieves aria-label from the aria.close property of the locale API. -

- -
Next/Prev Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus through interactive elements in the carousel.
- enter - Activates navigation.
- space - Activates navigation.
-
- -
Quick Navigation Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus through the active slide link.
- enter - Activates the focused slide link.
- space - Activates the focused slide link.
- right arrow - Moves focus to the next slide link.
- left arrow - Moves focus to the previous slide link.
- home - Moves focus to the first slide link.
- end - Moves focus to the last slide link.
-
- - -
Dependencies
-

None.

- - {useLiveEditorTabs({ name: 'GalleriaDemo', sources: sources, service: 'PhotoService', data: 'photos' })} - -
- ); -}); - -export default GalleriaDoc; diff --git a/pages/galleria/index.js b/pages/galleria/index.js index fbe58d1830..0683898b5f 100644 --- a/pages/galleria/index.js +++ b/pages/galleria/index.js @@ -1,43 +1,47 @@ -import React, { useState, useEffect } from 'react'; -import { PhotoService } from '../../service/PhotoService'; -import { Galleria } from '../../components/lib/galleria/Galleria'; -import GalleriaDoc from '../../components/doc/galleria'; import Head from 'next/head'; -import getConfig from 'next/config'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; +import { ImportDoc } from '../../components/doc/galleria/importdoc'; +import { GaleriaDemo } from '../../components/doc/galleria/galeriademo'; +import { ApiDoc } from '../../components/doc/galleria/apidoc'; const GalleriaDemo = () => { - const [images, setImages] = useState(null); - - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const galleriaService = new PhotoService(); - - useEffect(() => { - galleriaService.getImages().then((data) => setImages(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const responsiveOptions = [ + const docs = [ { - breakpoint: '1024px', - numVisible: 5 + id: 'import', + label: 'Import', + component: ImportDoc }, { - breakpoint: '768px', - numVisible: 3 + id: 'galeriademo', + label: 'Galeria', + component: GaleriaDemo }, { - breakpoint: '560px', - numVisible: 1 + id: 'api', + label: 'API', + component: ApiDoc, + children: [ + { + id: 'properties', + label: 'Properties' + }, + { + id: 'events', + label: 'Events' + }, + { + id: 'styling', + label: 'Styling' + }, + { + id: 'accessibility', + label: 'Accessibility' + } + ] } ]; - const itemTemplate = (item) => { - return {item.alt}; - }; - - const thumbnailTemplate = (item) => { - return {item.alt}; - }; - return (
@@ -50,14 +54,10 @@ const GalleriaDemo = () => {

Galleria is a content gallery component.

- -
-
- -
+
+ +
- -
); };