diff --git a/components/doc/common/docsectioncode.js b/components/doc/common/docsectioncode.js index 9f238dde9b..09d27593c5 100644 --- a/components/doc/common/docsectioncode.js +++ b/components/doc/common/docsectioncode.js @@ -77,7 +77,7 @@ export function DocSectionCode(props) { )} {codeMode !== 'basic' && codeLang === 'typescript' && (
- {props.code.typescript} + {props.code.typescript}
)} diff --git a/components/doc/overlaypanel/apidoc.js b/components/doc/overlaypanel/apidoc.js new file mode 100644 index 0000000000..a1da3b8a6b --- /dev/null +++ b/components/doc/overlaypanel/apidoc.js @@ -0,0 +1,253 @@ +import Link from 'next/link'; +import { CodeHighlight } from '../common/codehighlight'; +import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionText } from '../common/docsectiontext'; + +export function ApiDoc(props) { + return ( + <> + +

Properties

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
dismissablebooleantrueEnables to hide the overlay when outside is clicked.
showCloseIconbooleanfalseWhen enabled, displays a close icon at top right corner.
stylestringnullInline style of the element.
classNamestringnullStyle class of the element.
appendToDOM element | stringdocument.body + DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located. +
ariaCloseLabelstringcloseAria label of the close icon.
breakpointsobjectnullObject literal to define widths per screen size.
transitionOptionsobjectnull + The properties of{' '} + + CSSTransition + {' '} + can be customized, except for "nodeRef" and "in" properties. +
+
+ +

Events

+
+ + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
onShow-Callback to invoke when overlay becomes visible.
onHide-Callback to invoke when overlay becomes hidden.
+
+ +

Methods

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
toggleevent: Browser eventToggles the visiblity of the overlay.
show + event: Browser event
+ target: Optional target if event.target should not be used + 		Shows the overlay.
hide-Hides the overlay.
+
+ +

Styling

+

+ Following is the list of structural style classes, for theming classes visit theming page. +

+
+ + + + + + + + + + + + + + + + + + + + + +
NameElement
p-overlaypanelContainer element.
p-overlaypanel-contentContent of the panel.
p-overlaypanel-closeClose icon.
+
+ +

Accessibility

+ +

Screen Reader

+

+ OverlayPanel component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition{' '} + aria-modal is added since focus is kept within the popup. +

+

+ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. OverlayPanel adds aria-expanded state attribute and aria-controls to + the trigger so that the relation between the trigger and the popup is defined. +

+ +

OverlayPanel Keyboard Support

+

+ When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup. +

+ +
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the next the focusable element within the popup.
+ shift + tab + Moves focus to the previous the focusable element within the popup.
+ escape + Closes the popup and moves focus to the trigger.
+
+ +

Close Button Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ enter + Closes the popup and moves focus to the trigger.
+ space + Closes the popup and moves focus to the trigger.
+
+ +

Dependencies

+

None.

+ + ); +} diff --git a/components/doc/overlaypanel/importdoc.js b/components/doc/overlaypanel/importdoc.js new file mode 100644 index 0000000000..5187b14ac1 --- /dev/null +++ b/components/doc/overlaypanel/importdoc.js @@ -0,0 +1,17 @@ +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { OverlayPanel } from 'primereact/overlaypanel'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/overlaypanel/index.js b/components/doc/overlaypanel/index.js deleted file mode 100644 index a175a8fc7f..0000000000 --- a/components/doc/overlaypanel/index.js +++ /dev/null @@ -1,673 +0,0 @@ -import React, { memo } from 'react'; -import Link from 'next/link'; -import { TabView, TabPanel } from '../../lib/tabview/TabView'; -import { useLiveEditorTabs } from '../common/liveeditor'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; - -const OverlayPanelDoc = memo(() => { - const sources = { - class: { - tabName: 'Class Source', - content: ` -import React, { Component } from 'react'; -import { OverlayPanel } from 'primereact/overlaypanel'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; -import { Column } from 'primereact/column'; -import { DataTable } from 'primereact/datatable'; -import { ProductService } from '../service/ProductService'; -import './OverlayPanelDemo.css'; - -export class OverlayPanelDemo extends Component { - - constructor(props) { - super(props); - - this.state = { - products: null, - selectedProduct: null - }; - - this.productService = new ProductService(); - this.onProductSelect = this.onProductSelect.bind(this); - this.imageBody = this.imageBody.bind(this); - this.priceBody = this.priceBody.bind(this); - } - - componentDidMount() { - this.productService.getProductsSmall().then(data => this.setState({ products: data })); - } - - formatCurrency(value) { - return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'}); - } - - onProductSelect(e) { - this.setState({ selectedProduct: e.value }, () => { - this.op.hide(); - this.toast.show({severity:'info', summary: 'Product Selected', detail: this.state.selectedProduct.name, life: 3000}); - }); - } - - imageBody(rowData) { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={rowData.image} className="product-image" /> - } - - priceBody(rowData) { - return this.formatCurrency(rowData.price); - } - - render() { - return ( -
- this.toast = el} /> - -
-
-
- ) - } -} - ` - }, - hooks: { - tabName: 'Hooks Source', - content: ` -import React, { useState, useEffect, useRef } from 'react'; -import { OverlayPanel } from 'primereact/overlaypanel'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; -import { Column } from 'primereact/column'; -import { DataTable } from 'primereact/datatable'; -import { ProductService } from '../service/ProductService'; -import './OverlayPanelDemo.css'; - -const OverlayPanelDemo = () => { - const [products, setProducts] = useState(null); - const [selectedProduct, setSelectedProduct] = useState(null); - const productService = new ProductService(); - const op = useRef(null); - const toast = useRef(null); - const isMounted = useRef(false); - - useEffect(() => { - if (isMounted.current && selectedProduct) { - op.current.hide(); - toast.current.show({severity:'info', summary: 'Product Selected', detail: selectedProduct.name, life: 3000}); - } - }, [selectedProduct]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - isMounted.current = true; - productService.getProductsSmall().then(data => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const formatCurrency = (value) => { - return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'}); - } - - const onProductSelect = (e) => { - setSelectedProduct(e.value); - } - - const imageBody = (rowData) => { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={rowData.image} className="product-image" /> - } - - const priceBody = (rowData) => { - return formatCurrency(rowData.price); - } - - return ( -
- - -
-
-
- ) -} - ` - }, - ts: { - tabName: 'TS Source', - content: ` -import React, { useState, useEffect, useRef } from 'react'; -import { OverlayPanel } from 'primereact/overlaypanel'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; -import { Column } from 'primereact/column'; -import { DataTable, DataTableSelectionChangeParams } from 'primereact/datatable'; -import { ProductService } from '../service/ProductService'; -import './OverlayPanelDemo.css'; - -type ProductItem = { - id?: string; - code?: string; - name?: string; - description?: string; - image?: string; - price?: number; - category?: string; - quantity?: number; - inventoryStatus?: string; - rating?: number; - }; - - const OverlayPanelDemo = () => { - const [products, setProducts] = useState(null); - const [selectedProduct, setSelectedProduct] = useState( - null - ); - const productService = new ProductService(); - const op = useRef(null); - const toast = useRef(null); - const isMounted = useRef(false); - - useEffect(() => { - if (isMounted.current && selectedProduct) { - op.current?.hide(); - toast.current?.show({ - severity: "info", - summary: "Product Selected", - detail: selectedProduct?.name, - life: 3000 - }); - } - }, [selectedProduct]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - isMounted.current = true; - productService.getProductsSmall().then((data) => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const formatCurrency = (value: number) => { - return value.toLocaleString("en-US", { - style: "currency", - currency: "USD" - }); - }; - - const onProductSelect = (e: DataTableSelectionChangeParams) => { - setSelectedProduct(e.value); - }; - - const imageBody = (rowData: ProductItem) => { - return ( - - (e.currentTarget.src = - "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png") - } - alt={rowData.image} - className="product-image" - /> - ); - }; - - const priceBody = (rowData: ProductItem) => { - return formatCurrency(rowData.price ?? 0); - }; - - return ( -
- - -
-
-
- ); - }; - ` - }, - browser: { - tabName: 'Browser Source', - imports: ` - - - - - - - - `, - content: ` -const { useEffect, useState, useRef } = React; -const { OverlayPanel } = primereact.overlaypanel; -const { Button } = primereact.button; -const { Toast } = primereact.toast; -const { Column } = primereact.column; -const { DataTable } = primereact.datatable; - -const OverlayPanelDemo = () => { - const [products, setProducts] = useState(null); - const [selectedProduct, setSelectedProduct] = useState(null); - const productService = new ProductService(); - const op = useRef(null); - const toast = useRef(null); - const isMounted = useRef(false); - - useEffect(() => { - if (isMounted.current && selectedProduct) { - op.current.hide(); - toast.current.show({severity:'info', summary: 'Product Selected', detail: selectedProduct.name, life: 3000}); - } - }, [selectedProduct]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - isMounted.current = true; - productService.getProductsSmall().then(data => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const formatCurrency = (value) => { - return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'}); - } - - const onProductSelect = (e) => { - setSelectedProduct(e.value); - } - - const imageBody = (rowData) => { - return e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={rowData.image} className="product-image" /> - } - - const priceBody = (rowData) => { - return formatCurrency(rowData.price); - } - - return ( -
- - -
-
-
- ) -} - ` - } - }; - - const extFiles = { - 'demo/OverlayPanelDemo.css': { - content: ` -.overlaypanel-demo .select-product-button { - min-width: 15rem; -} - -.overlaypanel-demo .product-image { - width: 50px; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -} - ` - } - }; - - return ( -
- - -
Import via Module
- - {` -import { OverlayPanel } from 'primereact/overlaypanel'; -`} - - -
Import via CDN
- - {` - - -`} - - -
Getting Started
-

OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.

- - {` -
- ); -}); - -export default OverlayPanelDoc; diff --git a/components/doc/overlaypanel/overlaypaneldoc.js b/components/doc/overlaypanel/overlaypaneldoc.js new file mode 100644 index 0000000000..50b6991712 --- /dev/null +++ b/components/doc/overlaypanel/overlaypaneldoc.js @@ -0,0 +1,205 @@ +import { useState, useEffect, useRef } from 'react'; +import { Button } from '../../lib/button/Button'; +import { Toast } from '../../lib/toast/Toast'; +import { OverlayPanel } from '../../lib/overlaypanel/OverlayPanel'; +import { DataTable } from '../../lib/datatable/DataTable'; +import { Column } from '../../lib/column/Column'; +import { ProductService } from '../../../service/ProductService'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function OverlayPanelDoc(props) { + const [products, setProducts] = useState(null); + const [selectedProduct, setSelectedProduct] = useState(null); + const productService = new ProductService(); + const op = useRef(null); + const toast = useRef(null); + const isMounted = useRef(false); + + useEffect(() => { + if (isMounted.current && selectedProduct) { + op.current.hide(); + toast.current.show({ severity: 'info', summary: 'Product Selected', detail: selectedProduct.name, life: 3000 }); + } + }, [selectedProduct]); // eslint-disable-line react-hooks/exhaustive-deps + + useEffect(() => { + isMounted.current = true; + productService.getProductsSmall().then((data) => setProducts(data)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const formatCurrency = (value) => { + return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); + }; + + const onProductSelect = (e) => { + setSelectedProduct(e.value); + }; + + const imageBody = (rowData) => { + return (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={rowData.image} className="product-image" />; + }; + + const priceBody = (rowData) => { + return formatCurrency(rowData.price); + }; + + const code = { + basic: ` + +