From a3e648378b80c9f11a6416c535f003f1a5f4fa0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Sat, 3 Jun 2023 14:47:24 +0300 Subject: [PATCH 01/53] Refactor #4432 - For TreeTable --- components/doc/common/apidoc/index.json | 393 ++++++++++++++++++ components/doc/treetable/pt/ptdoc.js | 203 +++++++++ components/doc/treetable/pt/wireframe.js | 13 + components/lib/treetable/TreeTable.js | 137 +++++- components/lib/treetable/TreeTableBody.js | 32 +- components/lib/treetable/TreeTableBodyCell.js | 45 +- components/lib/treetable/TreeTableFooter.js | 52 ++- components/lib/treetable/TreeTableHeader.js | 139 +++++-- components/lib/treetable/TreeTableRow.js | 126 +++++- .../lib/treetable/TreeTableScrollableView.js | 104 ++++- components/lib/treetable/treetable.d.ts | 240 ++++++++++- pages/treetable/index.js | 27 +- 12 files changed, 1394 insertions(+), 117 deletions(-) create mode 100644 components/doc/treetable/pt/ptdoc.js create mode 100644 components/doc/treetable/pt/wireframe.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 964f385455..a2ba4af36e 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -44555,6 +44555,396 @@ "interfaces": { "description": "Defines the custom interfaces used by the module.", "values": { + "TreeTablePassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "TreeTableProps" + }, + { + "name": "state", + "optional": false, + "readonly": false, + "type": "TreeTableState" + } + ], + "callbacks": [] + }, + "TreeTablePassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "TreeTableProps.pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the root's DOM element." + }, + { + "name": "loadingWrapper", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the loading wrapper's DOM element." + }, + { + "name": "loadingOverlay", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the loading overlay's DOM element." + }, + { + "name": "loadingIcon", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the loading icon's DOM element." + }, + { + "name": "header", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the header's DOM element." + }, + { + "name": "paginator", + "optional": true, + "readonly": false, + "type": "PaginatorPassThroughOptions", + "description": "Uses to pass attributes to the Paginator component." + }, + { + "name": "wrapper", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the wrapper's DOM element." + }, + { + "name": "table", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the table's DOM element." + }, + { + "name": "thead", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the thead's DOM element." + }, + { + "name": "headerRow", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the header row's DOM element." + }, + { + "name": "headerCell", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the header cell's DOM element." + }, + { + "name": "tbody", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the tbody's DOM element." + }, + { + "name": "emptyMessage", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the empty message's DOM element." + }, + { + "name": "bodyCell", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the body cell's DOM element." + }, + { + "name": "tfoot", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the tfoot's DOM element." + }, + { + "name": "footerRow", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the footer row's DOM element." + }, + { + "name": "footer", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the footer's DOM element." + }, + { + "name": "resizeHelper", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the resize helper's DOM element." + }, + { + "name": "rowToggler", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the row toggler's DOM element." + }, + { + "name": "rowTogglerIcon", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the row toggler icon's DOM element." + }, + { + "name": "columnResizer", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the column resizer's DOM element." + }, + { + "name": "sortBadge", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the sort badge's DOM element." + }, + { + "name": "headerTitle", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the header title's DOM element." + }, + { + "name": "checkboxWrapper", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the checkbox wrapper's DOM element." + }, + { + "name": "checkbox", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the checkbox's DOM element." + }, + { + "name": "checkboxIcon", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the checkbox icon's DOM element." + }, + { + "name": "filterInput", + "optional": true, + "readonly": false, + "type": "InputTextPassThroughOptions", + "description": "Uses to pass attributes to the resize helper's DOM element." + }, + { + "name": "sortIcon", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the sort icon label's DOM element." + }, + { + "name": "scrollableWrapper", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable wrapper's DOM element." + }, + { + "name": "scrollable", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable's DOM element." + }, + { + "name": "scrollableHeader", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable header's DOM element." + }, + { + "name": "scrollableHeaderBox", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable header box's DOM element." + }, + { + "name": "scrollableHeaderTable", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable header table's DOM element." + }, + { + "name": "scrollableBody", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable body's DOM element." + }, + { + "name": "scrollableBodyBox", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable body box's DOM element." + }, + { + "name": "scrollableBodyTable", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable body table's DOM element." + }, + { + "name": "scrollableFooter", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable footer's DOM element." + }, + { + "name": "scrollableFooterBox", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable footer box's DOM element." + }, + { + "name": "scrollableFooterTable", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the scrollable footer table's DOM element." + }, + { + "name": "editorKeyHelper", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the editor key helper's DOM element." + }, + { + "name": "editorKeyHelperLabel", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the editor key helper label's DOM element." + }, + { + "name": "hiddenInputWrapper", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the hidden input wrapper's DOM element." + }, + { + "name": "hiddenInput", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType>", + "description": "Uses to pass attributes to the hidden input's DOM element." + } + ], + "callbacks": [] + }, + "TreeTableState": { + "description": "Defines current inline state in TreeTable component.", + "relatedProp": "", + "props": [ + { + "name": "first", + "optional": false, + "readonly": false, + "type": "number", + "description": "Current index of first record as a number." + }, + { + "name": "rows", + "optional": false, + "readonly": false, + "type": "number", + "description": "Current number of rows to display in new page as a number." + }, + { + "name": "sortField", + "optional": false, + "readonly": false, + "type": "undefined | string | Function", + "description": "Current sort field." + }, + { + "name": "sortOrder", + "optional": false, + "readonly": false, + "type": "number", + "description": "Current order to sort the data by default." + }, + { + "name": "multiSortMeta", + "optional": false, + "readonly": false, + "type": "TreeTableSortMeta[]", + "description": "Current sortmeta objects to sort the data." + }, + { + "name": "columnOrder", + "optional": false, + "readonly": false, + "type": "string[]", + "description": "Current order of the columns." + }, + { + "name": "filters", + "optional": false, + "readonly": false, + "type": "TreeTableFilterMeta", + "description": "Current filters object." + }, + { + "name": "editing", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Current editing as a boolean." + } + ], + "callbacks": [] + }, "TreeTableSelectionKeysType": { "description": "Custom selection keys type.", "relatedProp": "", @@ -44649,6 +45039,9 @@ "types": { "description": "Defines the custom types used by the module.", "values": { + "TreeTablePassThroughType": { + "values": "PassThroughType" + }, "TreeTableExpandedKeysType": { "values": "{}", "description": "Custom expanded keys type." diff --git a/components/doc/treetable/pt/ptdoc.js b/components/doc/treetable/pt/ptdoc.js new file mode 100644 index 0000000000..f9ba6de6de --- /dev/null +++ b/components/doc/treetable/pt/ptdoc.js @@ -0,0 +1,203 @@ +import React, { useEffect, useState } from 'react'; +import { NodeService } from '../../../../service/NodeService'; +import { Column } from '../../../lib/column/Column'; +import { TreeTable } from '../../../lib/treetable/TreeTable'; +import { DocSectionCode } from '../../common/docsectioncode'; +import { DocSectionText } from '../../common/docsectiontext'; + +export function PTDoc(props) { + const [nodes, setNodes] = useState([]); + + useEffect(() => { + NodeService.getTreeTableNodes().then((data) => setNodes(data)); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + const code = { + basic: ` + + + + + + `, + javascript: ` +import React, { useState, useEffect } from 'react'; +import { TreeTable } from 'primereact/treetable'; +import { Column } from 'primereact/column'; +import { NodeService } from './service/NodeService'; + +export default function PTDemo() { + const [nodes, setNodes] = useState([]); + + useEffect(() => { + NodeService.getTreeTableNodes().then((data) => setNodes(data)); + }, []); + + return ( +
+ + + + + +
+ ); +} + `, + typescript: ` +import React, { useState, useEffect } from 'react'; +import { TreeTable } from 'primereact/treetable'; +import { Column } from 'primereact/column'; +import { TreeNode } from 'primereact/treenode'; +import { NodeService } from './service/NodeService'; + +export default function PTDemo() { + const [nodes, setNodes] = useState([]); + + useEffect(() => { + NodeService.getTreeTableNodes().then((data) => setNodes(data)); + }, []); + + return ( +
+ + + + + +
+ ); +} + `, + data: ` +{ + key: '0', + label: 'Documents', + data: 'Documents Folder', + icon: 'pi pi-fw pi-inbox', + children: [ + { + key: '0-0', + label: 'Work', + data: 'Work Folder', + icon: 'pi pi-fw pi-cog', + children: [ + { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' }, + { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' } + ] + }, + { + key: '0-1', + label: 'Home', + data: 'Home Folder', + icon: 'pi pi-fw pi-home', + children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }] + } + ] +}, +... +` + }; + + return ( + <> + +
+ + + + + +
+ + + ); +} diff --git a/components/doc/treetable/pt/wireframe.js b/components/doc/treetable/pt/wireframe.js new file mode 100644 index 0000000000..c2cd27cdfc --- /dev/null +++ b/components/doc/treetable/pt/wireframe.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { DocSectionText } from '../../common/docsectiontext'; + +export const Wireframe = (props) => { + return ( + <> + +
+ treetable +
+ + ); +}; diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js index 96df5a9aec..0778a7dd74 100644 --- a/components/lib/treetable/TreeTable.js +++ b/components/lib/treetable/TreeTable.js @@ -3,7 +3,7 @@ import PrimeReact, { FilterService } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { useEventListener } from '../hooks/Hooks'; import { Paginator } from '../paginator/Paginator'; -import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { TreeTableBase } from './TreeTableBase'; import { TreeTableBody } from './TreeTableBody'; import { TreeTableFooter } from './TreeTableFooter'; @@ -15,7 +15,6 @@ import { ArrowUpIcon } from '../icons/arrowup'; export const TreeTable = React.forwardRef((inProps, ref) => { const props = TreeTableBase.getProps(inProps); - const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys); const [firstState, setFirstState] = React.useState(props.first); const [rowsState, setRowsState] = React.useState(props.rows); @@ -24,6 +23,20 @@ export const TreeTable = React.forwardRef((inProps, ref) => { const [multiSortMetaState, setMultiSortMetaState] = React.useState(props.multiSortMeta); const [filtersState, setFiltersState] = React.useState(props.filters); const [columnOrderState, setColumnOrderState] = React.useState([]); + const metaData = { + props, + state: { + expandedKeys: expandedKeysState, + first: firstState, + rows: rowsState, + sortField: sortFieldState, + sortOrder: sortOrderState, + multiSortMeta: multiSortMetaState, + filters: filtersState, + columnOrder: columnOrderState + } + }; + const ptCallbacks = TreeTableBase.setMetaData(metaData); const elementRef = React.useRef(null); const tableRef = React.useRef(null); const resizerHelperRef = React.useRef(null); @@ -844,12 +857,14 @@ export const TreeTable = React.forwardRef((inProps, ref) => { onFilter={onFilter} filters={filters} filterDelay={props.filterDelay} + ptCallbacks={ptCallbacks} + metaData={metaData} /> ); }; const createTableFooter = (columns, columnGroup) => { - return ; + return ; }; const createTableBody = (value, columns) => { @@ -882,6 +897,8 @@ export const TreeTable = React.forwardRef((inProps, ref) => { contextMenuSelectionKey={props.contextMenuSelectionKey} onContextMenuSelectionChange={props.onContextMenuSelectionChange} onContextMenu={props.onContextMenu} + ptCallbacks={ptCallbacks} + metaData={metaData} /> ); }; @@ -904,6 +921,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => { rightContent={props.paginatorRight} alwaysShow={props.alwaysShowPaginator} dropdownAppendTo={props.paginatorDropdownAppendTo} + pt={ptCallbacks.ptm('paginator')} /> ); }; @@ -913,7 +931,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => { const footer = createTableFooter(columns, footerColumnGroup); const body = createTableBody(value, columns); - return ; + return ; }; const createScrollableTable = (value) => { @@ -927,9 +945,15 @@ export const TreeTable = React.forwardRef((inProps, ref) => { } scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup); + const scrollableWrapper = mergeProps( + { + className: 'p-treetable-wrapper p-treetable-scrollable-wrapper' + }, + ptCallbacks.ptm('scrollableWrapper') + ); return ( -
+
{frozenView} {scrollableView}
@@ -951,9 +975,25 @@ export const TreeTable = React.forwardRef((inProps, ref) => { props.tableClassName ); + const wrapperProps = mergeProps( + { + className: 'p-treetable-wrapper' + }, + ptCallbacks.ptm('wrapper') + ); + + const tableProps = mergeProps( + { + ref: tableRef, + style: props.tableStyle, + className: tableClassName + }, + ptCallbacks.ptm('table') + ); + return ( -
- +
+
{header} {footer} {body} @@ -969,12 +1009,31 @@ export const TreeTable = React.forwardRef((inProps, ref) => { const createLoader = () => { if (props.loading) { const iconClassName = 'p-treetable-loading-icon'; - const icon = props.loadingIcon || ; - const loadingIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props }); + const loadingIconProps = mergeProps( + { + className: iconClassName + }, + ptCallbacks.ptm('loadingIcon') + ); + const icon = props.loadingIcon || ; + const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props }); + const loadingWrapperProps = mergeProps( + { + className: 'p-treetable-loading' + }, + ptCallbacks.ptm('loadingWrapper') + ); + + const loadingOverlayProps = mergeProps( + { + className: 'p-treetable-loading-overlay p-component-overlay' + }, + ptCallbacks.ptm('loadingOverlay') + ); return ( -
-
{loadingIcon}
+
+
{loadingIcon}
); } @@ -984,7 +1043,6 @@ export const TreeTable = React.forwardRef((inProps, ref) => { const data = processData(); - const otherProps = ObjectUtils.findDiffKeys(props, TreeTable.defaultProps); const className = classNames( 'p-treetable p-component', { @@ -999,30 +1057,71 @@ export const TreeTable = React.forwardRef((inProps, ref) => { ); const table = createTable(data); const totalRecords = getTotalRecords(data); - const headerFacet = props.header &&
{props.header}
; - const footerFacet = props.footer &&
{props.footer}
; + const headerProps = mergeProps( + { + className: 'p-treetable-header' + }, + ptCallbacks.ptm('header') + ); + const footerProps = mergeProps( + { + className: 'p-treetable-footer' + }, + ptCallbacks.ptm('footer') + ); + const resizeHelperProps = mergeProps( + { + ref: resizerHelperRef, + className: 'p-column-resizer-helper', + style: { display: 'none' } + }, + ptCallbacks.ptm('resizeHelper') + ); + + const headerFacet = props.header &&
{props.header}
; + const footerFacet = props.footer &&
{props.footer}
; const paginatorTop = props.paginator && props.paginatorPosition !== 'bottom' && createPaginator('top', totalRecords); const paginatorBottom = props.paginator && props.paginatorPosition !== 'top' && createPaginator('bottom', totalRecords); const loader = createLoader(); - const resizeHelper = props.resizableColumns &&
; + const resizeHelper = props.resizableColumns &&
; const style = { position: 'absolute', display: 'none' }; - const reorderIndicatorUpProps = { className: 'p-datatable-reorder-indicator-up', style: { ...style } }; - const reorderIndicatorUpIcon = props.reorderableColumns && IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || , undefined, { props }); + const reorderIndicatorUpProps = mergeProps( + { + className: 'p-datatable-reorder-indicator-up', + style: { ...style } + }, + ptCallbacks.ptm('reorderIndicatorUp') + ); + const reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon')); + const reorderIndicatorUpIcon = props.reorderableColumns && IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || , { ...reorderIndicatorUpIconProps }, { props }); const reorderIndicatorUp = props.reorderableColumns && ( {reorderIndicatorUpIcon} ); const reorderIndicatorDownProps = { className: 'p-datatable-reorder-indicator-down', style: { ...style } }; - const reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || , undefined, { props }); + const reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon')); + const reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || , { ...reorderIndicatorDownIconProps }, { props }); const reorderIndicatorDown = props.reorderableColumns && ( {reorderIndicatorDownIcon} ); + const rootProps = mergeProps( + { + ref: elementRef, + id: props.id, + className, + style: props.style, + 'data-scrollselectors': '.p-treetable-wrapper' + }, + ObjectUtils.findDiffKeys(props, TreeTable.defaultProps), + ptCallbacks.ptm('root') + ); + return ( -
+
{loader} {headerFacet} {paginatorTop} diff --git a/components/lib/treetable/TreeTableBody.js b/components/lib/treetable/TreeTableBody.js index 25a7cfdaac..a48bdfb7d7 100644 --- a/components/lib/treetable/TreeTableBody.js +++ b/components/lib/treetable/TreeTableBody.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; -import { DomHandler } from '../utils/Utils'; +import { DomHandler, mergeProps } from '../utils/Utils'; import { TreeTableRow } from './TreeTableRow'; export const TreeTableBody = React.memo((props) => { @@ -186,6 +186,8 @@ export const TreeTableBody = React.memo((props) => { contextMenuSelectionKey={props.contextMenuSelectionKey} onContextMenuSelectionChange={props.onContextMenuSelectionChange} onContextMenu={props.onContextMenu} + ptCallbacks={props.ptCallbacks} + metaData={props.metaData} /> ); }; @@ -216,20 +218,36 @@ export const TreeTableBody = React.memo((props) => { } else { const colSpan = props.columns ? props.columns.length : null; const content = props.emptyMessage || localeOption('emptyMessage'); + const emptyMessageProps = mergeProps( + { + className: 'p-treetable-emptymessage' + }, + props.ptCallbacks.ptm('emptyMessage') + ); + const bodyCellProps = mergeProps( + { + colSpan + }, + props.ptCallbacks.ptm('bodyCell') + ); return ( -
- + + ); } }; const content = props.value && props.value.length ? createRows() : createEmptyMessage(); - - return {content}; + const tbodyProps = mergeProps( + { + className: 'p-treetable-tbody' + }, + props.ptCallbacks.ptm('tbody') + ); + + return {content}; }); TreeTableBody.displayName = 'TreeTableBody'; diff --git a/components/lib/treetable/TreeTableBodyCell.js b/components/lib/treetable/TreeTableBodyCell.js index aca9315a23..2d614a12ca 100644 --- a/components/lib/treetable/TreeTableBodyCell.js +++ b/components/lib/treetable/TreeTableBodyCell.js @@ -1,7 +1,8 @@ import * as React from 'react'; import { useEventListener, useUnmountEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; +import { ColumnBase } from '../column/ColumnBase'; export const TreeTableBodyCell = (props) => { const [editingState, setEditingState] = React.useState(false); @@ -10,6 +11,20 @@ export const TreeTableBodyCell = (props) => { const selfClick = React.useRef(false); const overlayEventListener = React.useRef(null); const tabIndexTimeout = React.useRef(null); + const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); + const getColumnProps = (column) => ColumnBase.getCProps(column); + + const getColumnPTOptions = (key) => { + const cProps = getColumnProps(props.column); + + return props.ptCallbacks.ptmo(getColumnProp('pt'), key, { + props: cProps, + parent: props.metaData, + state: { + editing: editingState + } + }); + }; const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({ type: 'click', @@ -125,16 +140,38 @@ export const TreeTableBodyCell = (props) => { else content = ObjectUtils.resolveFieldData(props.node.data, props.field); } + const editorKeyHelperProps = mergeProps( + { + tabIndex: 0, + ref: keyHelperRef, + className: 'p-cell-editor-key-helper p-hidden-accessible', + onFocus: (e) => onEditorFocus(e) + }, + getColumnPTOptions('editorKeyHelperLabel') + ); + + const editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper')); /* eslint-disable */ const editorKeyHelper = props.editor && ( - - + + ); /* eslint-enable */ + const bodyCellProps = mergeProps( + { + ref: elementRef, + className, + style, + onClick: (e) => onClick(e), + onKeyDown: (e) => onKeyDown(e) + }, + getColumnPTOptions('bodyCell'), + getColumnPTOptions('root') + ); return ( - + const footerCellProps = mergeProps( + { + key: column.field || index, + className: getColumnProp(column, 'footerClassName') || getColumnProp(column, 'className'), + style: getColumnProp(column, 'footerStyle') || getColumnProp(column, 'style'), + rowSpan: getColumnProp(column, 'rowSpan'), + colSpan: getColumnProp(column, 'colSpan') + }, + getColumnPTOptions(column, 'footerCell') ); + + return ; }; const createFooterRow = (row, index) => { const rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children')); const rowFooterCells = rowColumns.map(createFooterCell); + const footerRowProps = mergeProps(props.ptCallbacks.ptm('footerRow')); - return {rowFooterCells}; + return ( + + {rowFooterCells} + + ); }; const createColumnGroup = () => { @@ -38,8 +56,9 @@ export const TreeTableFooter = React.memo((props) => { const createColumns = (columns) => { if (columns) { const headerCells = columns.map(createFooterCell); + const footerRowProps = mergeProps(props.ptCallbacks.ptm('footerRow')); - return {headerCells}; + return {headerCells}; } else { return null; } @@ -62,7 +81,14 @@ export const TreeTableFooter = React.memo((props) => { const content = props.columnGroup ? createColumnGroup() : createColumns(props.columns); if (hasFooter()) { - return {content}; + const tfootProps = mergeProps( + { + className: 'p-treetable-tfoot' + }, + props.ptCallbacks.ptm('tfoot') + ); + + return {content}; } else { return null; } diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js index ab05423505..76f2a5b969 100644 --- a/components/lib/treetable/TreeTableHeader.js +++ b/components/lib/treetable/TreeTableHeader.js @@ -4,7 +4,7 @@ import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { InputText } from '../inputtext/InputText'; import { RowBase } from '../row/RowBase'; import { Tooltip } from '../tooltip/Tooltip'; -import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { SortAltIcon } from '../icons/sortalt'; import { SortAmountDownIcon } from '../icons/sortamountdown'; import { SortAmountUpAltIcon } from '../icons/sortamountupalt'; @@ -12,6 +12,17 @@ import { SortAmountUpAltIcon } from '../icons/sortamountupalt'; export const TreeTableHeader = React.memo((props) => { const filterTimeout = React.useRef(null); + const getColumnProps = (column) => { + return props.ptCallbacks.ptmo(ColumnBase.getCProps(column)); + }; + + const getColumnPTOptions = (column, key) => { + return props.ptCallbacks.ptmo(ColumnBase.getCProp(column, 'pt'), key, { + props: getColumnProps(column), + parent: props.metaData + }); + }; + const onHeaderClick = (event, column) => { if (getColumnProp(column, 'sortable')) { const targetNode = event.target; @@ -154,7 +165,13 @@ export const TreeTableHeader = React.memo((props) => { const createSortIcon = (column, sorted, sortOrder) => { if (getColumnProp(column, 'sortable')) { let iconClassName = 'p-sortable-column-icon'; - let icon = sorted ? sortOrder < 0 ? : : ; + const sortIconProps = mergeProps( + { + className: iconClassName + }, + getColumnPTOptions(column, 'sortIcon') + ); + let icon = sorted ? sortOrder < 0 ? : : ; let sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, { className: iconClassName }, { props, sorted, sortOrder }); return sortIcon; @@ -165,15 +182,30 @@ export const TreeTableHeader = React.memo((props) => { const createResizer = (column) => { if (props.resizableColumns) { - return onResizerMouseDown(e, column)} />; + const columnResizerProps = mergeProps( + { + className: 'p-column-resizer p-clickable', + onMouseDown: (e) => onResizerMouseDown(e, column) + }, + getColumnPTOptions(column, 'columnResizer') + ); + + return ; } else { return null; } }; - const createSortBadge = (sortMetaDataIndex) => { + const createSortBadge = (column, sortMetaDataIndex) => { if (sortMetaDataIndex !== -1 && props.multiSortMeta && props.multiSortMeta.length > 1) { - return {sortMetaDataIndex + 1}; + const sortBadgeProps = mergeProps( + { + className: 'p-sortable-column-badge' + }, + getColumnPTOptions(column, 'sortBadge') + ); + + return {sortMetaDataIndex + 1}; } return null; @@ -181,8 +213,14 @@ export const TreeTableHeader = React.memo((props) => { const createTitle = (column, options) => { const title = ObjectUtils.getJSXElement(getColumnProp(column, 'header'), { props: options }); - - return {title}; + const headerTitleProps = mergeProps( + { + className: 'p-column-title' + }, + getColumnPTOptions(column, 'headerTitle') + ); + + return {title}; }; const createHeaderCell = (column, options) => { @@ -197,22 +235,25 @@ export const TreeTableHeader = React.memo((props) => { className="p-column-filter" placeholder={getColumnProp(column, 'filterPlaceholder')} maxLength={getColumnProp(column, 'filterMaxLength')} + pt={getColumnPTOptions(column, 'filterInput')} /> ); } if (options.filterOnly) { - return ( - + const headerCellProps = mergeProps( + { + key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index, + className: classNames('p-filter-column', getColumnProp(column, 'filterHeaderClassName')), + style: getColumnProp(column, 'filterHeaderStyle') || getColumnProp(column, 'style'), + rowSpan: getColumnProp(column, 'rowSpan'), + colSpan: getColumnProp(column, 'colSpan') + }, + getColumnPTOptions(column, 'headerCell'), + getColumnPTOptions(column, 'root') ); + + return ; } else { const headerCellRef = React.createRef(null); const sortMetaDataIndex = getMultiSortMetaDataIndex(column); @@ -227,7 +268,7 @@ export const TreeTableHeader = React.memo((props) => { const sortIconElement = createSortIcon(column, sorted, sortOrder); const ariaSortData = getAriaSort(column, sorted, sortOrder); - const sortBadge = createSortBadge(sortMetaDataIndex); + const sortBadge = createSortBadge(column, sortMetaDataIndex); const className = classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), { 'p-sortable-column': getColumnProp(column, 'sortable'), @@ -239,25 +280,30 @@ export const TreeTableHeader = React.memo((props) => { const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip); const title = createTitle(column, options); const resizer = createResizer(column); + const headerCellProps = mergeProps( + { + ref: headerCellRef, + className: className, + style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'), + tabIndex: getColumnProp(column, 'sortable') ? props.tabIndex : null, + onClick: (e) => onHeaderClick(e, column), + onMouseDown: (e) => onHeaderMouseDown(e, column), + onKeyDown: (e) => onHeaderKeyDown(e, column), + rowSpan: getColumnProp(column, 'rowSpan'), + colSpan: getColumnProp(column, 'colSpan'), + 'aria-sort': ariaSortData, + onDragStart: (e) => onDragStart(e, column), + onDragOver: (e) => onDragOver(e, column), + onDragLeave: (e) => onDragLeave(e, column), + onDrop: (e) => onDrop(e, column) + }, + getColumnPTOptions(column, 'headerCell'), + getColumnPTOptions(column, 'root') + ); return ( - {rowHeaderCells}; + return ( + + {rowHeaderCells} + + ); }; const createColumnGroup = () => { @@ -285,15 +336,17 @@ export const TreeTableHeader = React.memo((props) => { const createColumns = (columns) => { if (columns) { + const headerRowProps = mergeProps(props.ptCallbacks.ptm('headerRow')); + if (hasColumnFilter(columns)) { return ( <> - {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: false }))} - {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: true, renderFilter: true }))} + {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: false }))} + {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: true, renderFilter: true }))} ); } else { - return {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: false }))}; + return {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: false }))}; } } else { return null; @@ -301,8 +354,14 @@ export const TreeTableHeader = React.memo((props) => { }; const content = props.columnGroup ? createColumnGroup() : createColumns(props.columns); - - return {content}; + const theadProps = mergeProps( + { + className: 'p-treetable-thead' + }, + props.ptCallbacks.ptm('thead') + ); + + return {content}; }); TreeTableHeader.displayName = 'TreeTableHeader'; diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js index 828cbd92c5..8424fc2067 100644 --- a/components/lib/treetable/TreeTableRow.js +++ b/components/lib/treetable/TreeTableRow.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { ColumnBase } from '../column/ColumnBase'; import { Ripple } from '../ripple/Ripple'; -import { classNames, DomHandler, IconUtils } from '../utils/Utils'; +import { classNames, DomHandler, IconUtils, mergeProps } from '../utils/Utils'; import { TreeTableBodyCell } from './TreeTableBodyCell'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronRightIcon } from '../icons/chevronright'; @@ -15,6 +15,25 @@ export const TreeTableRow = React.memo((props) => { const checkboxBoxRef = React.useRef(null); const nodeTouched = React.useRef(false); const expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false; + const getColumnProps = (column) => ColumnBase.getCProps(column); + + const getColumnPTOptions = (column, key) => { + return props.ptCallbacks.ptmo(ColumnBase.getCProp(column, 'pt'), key, { + props: getColumnProps(column), + parent: props.metaData + }); + }; + + const getColumnCheckboxPTOptions = (column, key) => { + return props.ptCallbacks.ptmo(ColumnBase.getCProp(column, 'pt'), key, { + props: getColumnProps(column), + parent: props.metaData, + context: { + checked: isChecked(), + partialChecked: isPartialChecked() + } + }); + }; const isLeaf = () => { return props.node.leaf === false ? false : !(props.node.children && props.node.children.length); @@ -276,38 +295,92 @@ export const TreeTableRow = React.memo((props) => { return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false; }; - const createToggler = () => { + const createToggler = (column) => { const label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'); - const iconProps = { className: 'p-treetable-toggler-icon', 'aria-hidden': true }; - const icon = expanded ? : ; - const togglerIcon = IconUtils.getJSXIcon(props.togglerIcon || icon, { ...iconProps }, { props }); + const rowTogglerIconProps = mergeProps( + { + className: 'p-treetable-toggler-icon', + 'aria-hidden': true + }, + getColumnPTOptions(column, 'rowTogglerIcon') + ); + const icon = expanded ? : ; + const togglerIcon = IconUtils.getJSXIcon(props.togglerIcon || icon, { ...rowTogglerIconProps }, { props }); const style = { marginLeft: props.level * 16 + 'px', visibility: props.node.leaf === false || (props.node.children && props.node.children.length) ? 'visible' : 'hidden' }; + const rowTogglerProps = mergeProps( + { + type: 'button', + className: 'p-treetable-toggler p-link p-unselectable-text', + onClick: (e) => onTogglerClick(e), + tabIndex: -1, + style, + 'aria-label': label + }, + getColumnPTOptions(column, 'rowToggler') + ); return ( - ); }; - const createCheckbox = () => { + const createCheckbox = (column) => { if (props.selectionMode === 'checkbox' && props.node.selectable !== false) { const checked = isChecked(); const partialChecked = isPartialChecked(); const className = classNames('p-checkbox-box', { 'p-highlight': checked, 'p-indeterminate': partialChecked }); const iconClassName = 'p-checkbox-icon p-c'; - const icon = checked ? props.checkboxIcon || : partialChecked ? props.checkboxIcon || : null; + const checboxIconProps = mergeProps( + { + className: iconClassName + }, + getColumnCheckboxPTOptions(column, 'checkboxIcon') + ); + const icon = checked ? props.checkboxIcon || : partialChecked ? props.checkboxIcon || : null; const checkIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props, checked, partialChecked }); + const hiddenInputProps = mergeProps( + { + type: 'checkbox', + onFocus: (e) => onCheckboxFocus(e), + onBlur: (e) => onCheckboxBlur(e) + }, + getColumnCheckboxPTOptions(column, 'hiddenInput') + ); + const checkboxWrapperProps = mergeProps( + { + className: 'p-checkbox p-treetable-checkbox p-component', + ref: checkboxRef, + onClick: (e) => onCheckboxChange(e), + role: 'checkbox', + 'aria-checked': checked + }, + getColumnCheckboxPTOptions(column, 'checkboxWrapper') + ); + + const hiddenInputWrapperProps = mergeProps( + { + className: 'p-hidden-accessible' + }, + getColumnCheckboxPTOptions(column, 'hiddenInputWrapper') + ); + + const checkboxProps = mergeProps( + { + className, + ref: checkboxBoxRef + }, + getColumnCheckboxPTOptions(column, 'checkbox') + ); return ( -
-
- -
-
- {checkIcon} +
+
+
+
{checkIcon}
); } else { @@ -319,8 +392,8 @@ export const TreeTableRow = React.memo((props) => { let toggler, checkbox; if (getColumnProp(column, 'expander')) { - toggler = createToggler(); - checkbox = createCheckbox(); + toggler = createToggler(column); + checkbox = createCheckbox(column); } return ( @@ -332,6 +405,8 @@ export const TreeTableRow = React.memo((props) => { selected={isSelected()} node={props.node} rowIndex={props.rowIndex} + ptCallbacks={props.ptCallbacks} + metaData={props.metaData} > {toggler} {checkbox} @@ -369,6 +444,8 @@ export const TreeTableRow = React.memo((props) => { contextMenuSelectionKey={props.contextMenuSelectionKey} onContextMenuSelectionChange={props.onContextMenuSelectionChange} onContextMenu={props.onContextMenu} + ptCallbacks={props.ptCallbacks} + metaData={props.metaData} /> ); }); @@ -391,12 +468,23 @@ export const TreeTableRow = React.memo((props) => { } className = classNames(className, props.node.className); + const rowProps = mergeProps( + { + ref: elementRef, + tabIndex: 0, + className, + style: props.node.style, + onClick: (e) => onClick(e), + onTouchEnd: (e) => onTouchEnd(e), + onContextMenu: (e) => onRightClick(e), + onKeyDown: (e) => onKeyDown(e) + }, + props.ptCallbacks.ptm('row') + ); return ( <> -
- {cells} - + {cells} {children} ); diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js index c20edac9b9..8f88c64349 100644 --- a/components/lib/treetable/TreeTableScrollableView.js +++ b/components/lib/treetable/TreeTableScrollableView.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { useMountEffect } from '../hooks/Hooks'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; +import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; export const TreeTableScrollableView = React.memo((props) => { const elementRef = React.useRef(null); @@ -90,8 +90,14 @@ export const TreeTableScrollableView = React.memo((props) => { const createColGroup = () => { if (ObjectUtils.isNotEmpty(props.columns)) { const cols = props.columns.map((col, i) => ); - - return {cols}; + const scrollableColgroupProps = mergeProps( + { + className: 'p-treetable-scrollable-colgroup' + }, + props.ptCallbacks.ptm('scrollableColgroup') + ); + + return {cols}; } else { return null; } @@ -102,26 +108,100 @@ export const TreeTableScrollableView = React.memo((props) => { const left = props.frozen ? null : props.frozenWidth; const colGroup = createColGroup(); const scrollableBodyStyle = !props.frozen && props.scrollHeight ? { overflowY: 'scroll' } : null; + const scrollableProps = mergeProps( + { + className, + style: { width: width, left: left }, + ref: elementRef + }, + props.ptCallbacks.ptm('scrollable') + ); + + const scrollableHeaderProps = mergeProps( + { + className: 'p-treetable-scrollable-header', + ref: scrollHeaderRef, + onScroll: (e) => onHeaderScroll(e) + }, + props.ptCallbacks.ptm('scrollableHeader') + ); + + const scrollableHeaderBoxProps = mergeProps( + { + className: 'p-treetable-scrollable-header-box', + ref: scrollHeaderBoxRef + }, + props.ptCallbacks.ptm('scrollableHeaderBox') + ); + + const scrollableHeaderTableProps = mergeProps( + { + className: 'p-treetable-scrollable-header-table' + }, + props.ptCallbacks.ptm('scrollableHeaderTable') + ); + + const scrollableBodyProps = mergeProps( + { + className: 'p-treetable-scrollable-body', + ref: scrollBodyRef, + style: scrollableBodyStyle, + onScroll: (e) => onBodyScroll(e) + }, + props.ptCallbacks.ptm('scrollableBody') + ); + + const scrollableBodyTableProps = mergeProps( + { + ref: scrollTableRef, + style: { top: '0' }, + className: 'p-treetable-scrollable-body-table' + }, + props.ptCallbacks.ptm('scrollableBodyTable') + ); + + const scrollableFooterProps = mergeProps( + { + className: 'p-treetable-scrollable-footer', + ref: scrollFooterRef + }, + props.ptCallbacks.ptm('scrollableFooter') + ); + + const scrollableFooterBoxProps = mergeProps( + { + className: 'p-treetable-scrollable-footer-box', + ref: scrollFooterBoxRef + }, + props.ptCallbacks.ptm('scrollableFooterBox') + ); + + const scrollableFooterTableProps = mergeProps( + { + className: 'p-treetable-scrollable-footer-table' + }, + props.ptCallbacks.ptm('scrollableFooterTable') + ); return ( -
-
-
-
- {content} -
{content}
+ {props.children} {editorKeyHelper} {content} diff --git a/components/lib/treetable/TreeTableFooter.js b/components/lib/treetable/TreeTableFooter.js index d7f4166b57..c405af2362 100644 --- a/components/lib/treetable/TreeTableFooter.js +++ b/components/lib/treetable/TreeTableFooter.js @@ -2,31 +2,49 @@ import * as React from 'react'; import { ColumnBase } from '../column/ColumnBase'; import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { RowBase } from '../row/RowBase'; +import { mergeProps } from '../utils/Utils'; export const TreeTableFooter = React.memo((props) => { const getColumnProp = (column, name) => { return ColumnBase.getCProp(column, name); }; + const getColumnProps = (column) => { + return props.ptCallbacks.ptmo(ColumnBase.getCProps(column)); + }; + + const getColumnPTOptions = (column, key) => { + return props.ptCallbacks.ptmo(getColumnProp(column, 'pt'), key, { + props: getColumnProps(column), + parent: props.metaData + }); + }; + const createFooterCell = (column, index) => { - return ( - - {getColumnProp(column, 'footer')} - {getColumnProp(column, 'footer')}
- {filterElement} - {filterElement} onHeaderClick(e, column)} - onMouseDown={(e) => onHeaderMouseDown(e, column)} - onKeyDown={(e) => onHeaderKeyDown(e, column)} - rowSpan={getColumnProp(column, 'rowSpan')} - colSpan={getColumnProp(column, 'colSpan')} - aria-sort={ariaSortData} - onDragStart={(e) => onDragStart(e, column)} - onDragOver={(e) => onDragOver(e, column)} - onDragLeave={(e) => onDragLeave(e, column)} - onDrop={(e) => onDrop(e, column)} - > + {resizer} {title} {sortIconElement} @@ -273,8 +319,13 @@ export const TreeTableHeader = React.memo((props) => { const createHeaderRow = (row, index) => { const rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children')); const rowHeaderCells = rowColumns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: true })); + const headerRowProps = mergeProps(props.ptCallbacks.ptm('headerRow')); - return
+
+
+
+
{colGroup} {props.header}
-
- +
+
{colGroup} {props.body}
-
-
- +
+
+
{colGroup} {props.footer}
diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 2d7eec1282..23960949b3 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -9,9 +9,240 @@ */ import * as React from 'react'; import { ColumnProps } from '../column'; -import { PaginatorTemplate } from '../paginator'; +import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator'; import { TreeNode } from '../treenode'; -import { IconType } from '../utils/utils'; +import { IconType, PassThroughType } from '../utils/utils'; +import { InputTextPassThroughOptions } from '../inputtext/inputtext'; + +export declare type TreeTablePassThroughType = PassThroughType; + +/** + * Custom passthrough(pt) option method. + */ +export interface TreeTablePassThroughMethodOptions { + props: TreeTableProps; + state: TreeTableState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link TreeTableProps.pt} + */ +export interface TreeTablePassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the loading wrapper's DOM element. + */ + loadingWrapper?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the loading overlay's DOM element. + */ + loadingOverlay?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the loading icon's DOM element. + */ + loadingIcon?: TreeTablePassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the header's DOM element. + */ + header?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the Paginator component. + * @see {@link PaginatorPassThroughOptions} + */ + paginator?: PaginatorPassThroughOptions; + /** + * Uses to pass attributes to the wrapper's DOM element. + */ + wrapper?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the table's DOM element. + */ + table?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the thead's DOM element. + */ + thead?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the header row's DOM element. + */ + headerRow?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the header cell's DOM element. + */ + headerCell?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the tbody's DOM element. + */ + tbody?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the empty message's DOM element. + */ + emptyMessage?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the body cell's DOM element. + */ + bodyCell?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the tfoot's DOM element. + */ + tfoot?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the footer row's DOM element. + */ + footerRow?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the footer's DOM element. + */ + footer?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the resize helper's DOM element. + */ + resizeHelper?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the row toggler's DOM element. + */ + rowToggler?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the row toggler icon's DOM element. + */ + rowTogglerIcon?: TreeTablePassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the column resizer's DOM element. + */ + columnResizer?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the sort badge's DOM element. + */ + sortBadge?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the header title's DOM element. + */ + headerTitle?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the checkbox wrapper's DOM element. + */ + checkboxWrapper?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the checkbox's DOM element. + */ + checkbox?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the checkbox icon's DOM element. + */ + checkboxIcon?: TreeTablePassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the resize helper's DOM element. + * @see {@link InputTextPassThroughOptions} + */ + filterInput?: InputTextPassThroughOptions; + /** + * Uses to pass attributes to the sort icon label's DOM element. + */ + sortIcon?: TreeTablePassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the scrollable wrapper's DOM element. + */ + scrollableWrapper?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable's DOM element. + */ + scrollable?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable header's DOM element. + */ + scrollableHeader?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable header box's DOM element. + */ + scrollableHeaderBox?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable header table's DOM element. + */ + scrollableHeaderTable?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable body's DOM element. + */ + scrollableBody?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable body box's DOM element. + */ + scrollableBodyBox?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable body table's DOM element. + */ + scrollableBodyTable?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable footer's DOM element. + */ + scrollableFooter?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable footer box's DOM element. + */ + scrollableFooterBox?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the scrollable footer table's DOM element. + */ + scrollableFooterTable?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the editor key helper's DOM element. + */ + editorKeyHelper?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the editor key helper label's DOM element. + */ + editorKeyHelperLabel?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the hidden input wrapper's DOM element. + */ + hiddenInputWrapper?: TreeTablePassThroughType>; + /** + * Uses to pass attributes to the hidden input's DOM element. + */ + hiddenInput?: TreeTablePassThroughType>; +} + +/** + * Defines current inline state in TreeTable component. + */ +export interface TreeTableState { + /** + * Current index of first record as a number. + */ + first: number; + /** + * Current number of rows to display in new page as a number. + */ + rows: number; + /** + * Current sort field. + */ + sortField: string | ((item: any) => string) | undefined; + /** + * Current order to sort the data by default. + */ + sortOrder: number; + /** + * Current sortmeta objects to sort the data. + */ + multiSortMeta: TreeTableSortMeta[]; + /** + * Current order of the columns. + */ + columnOrder: string[]; + /** + * Current filters object. + */ + filters: TreeTableFilterMeta; + /** + * Current editing as a boolean. + * @defaultValue false + */ + editing: boolean; +} /** * Custom selection keys type. @@ -240,6 +471,11 @@ export interface TreeTableProps extends Omit { component: AccessibilityDoc } ]; + const ptDocs = [ + { + id: 'pt.wireframe', + label: 'Wireframe', + component: Wireframe + }, + { + id: 'pt.treetable.options', + label: 'TreeTable PT Options', + component: DocApiTable + }, + { + id: 'pt.column.options', + label: 'Column PT Options', + component: DocApiTable + }, + { + id: 'pt.demo', + label: 'Example', + component: PTDoc + } + ]; - return ; + return ; }; export default TreeTableDemo; From f7bfa69478d60076a403557a824e5d82970fdb7f Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Sat, 3 Jun 2023 11:48:16 +0000 Subject: [PATCH 02/53] Update API doc --- components/doc/common/apidoc/index.json | 74 ++++++++++++++----------- 1 file changed, 41 insertions(+), 33 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index a2ba4af36e..d2dca15633 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -166,7 +166,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -2564,7 +2564,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -3958,7 +3958,7 @@ "name": "severity", "optional": true, "readonly": false, - "type": "\"success\" | \"help\" | \"warning\" | \"secondary\" | \"info\" | \"danger\"", + "type": "\"success\" | \"help\" | \"warning\" | \"info\" | \"secondary\" | \"danger\"", "default": "", "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"help\"." }, @@ -4696,7 +4696,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -6532,7 +6532,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -8295,7 +8295,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -11169,7 +11169,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." } @@ -11733,7 +11733,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -12114,7 +12114,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -12569,7 +12569,7 @@ }, { "name": "mode", - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Filter match mode" }, { @@ -14723,7 +14723,7 @@ "name": "matchMode", "optional": false, "readonly": false, - "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Type of filter match." } ], @@ -16473,7 +16473,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -17585,7 +17585,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -18425,7 +18425,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -20006,7 +20006,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -26584,7 +26584,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -27013,7 +27013,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -27837,7 +27837,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -28559,7 +28559,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -30586,7 +30586,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -31965,7 +31965,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -32355,7 +32355,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -32823,7 +32823,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -35182,7 +35182,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -35755,7 +35755,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -36211,7 +36211,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -37168,7 +37168,7 @@ "name": "severity", "optional": true, "readonly": false, - "type": "\"success\" | \"warning\" | \"secondary\" | \"info\" | \"danger\"", + "type": "\"success\" | \"warning\" | \"info\" | \"secondary\" | \"danger\"", "default": "", "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\"." }, @@ -37304,7 +37304,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -39422,7 +39422,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -39885,7 +39885,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -43036,7 +43036,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -43665,6 +43665,14 @@ "default": "", "description": "Used to get the child elements of the component." }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughOptions", + "default": "", + "description": "Uses to pass attributes to DOM elements inside the component." + }, { "name": "className", "optional": true, @@ -43813,7 +43821,7 @@ "name": "globalFilterMatchMode", "optional": true, "readonly": false, - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "default": "contains", "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"." }, @@ -44576,7 +44584,7 @@ }, "TreeTablePassThroughOptions": { "description": "Custom passthrough(pt) options.", - "relatedProp": "TreeTableProps.pt", + "relatedProp": "pt", "props": [ { "name": "root", From dae1fcb95aa5c1c679c4545b2e20ff03fe3df40b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Sat, 3 Jun 2023 14:56:23 +0300 Subject: [PATCH 03/53] Refactor --- components/lib/treetable/treetable.d.ts | 20 ++++++++++---------- pages/autocomplete/index.js | 2 +- pages/cascadeselect/index.js | 2 +- pages/checkbox/index.js | 2 +- pages/chips/index.js | 2 +- pages/editor/index.js | 2 +- pages/inputmask/index.js | 2 +- pages/inputtext/index.js | 2 +- pages/picklist/index.js | 2 +- pages/rating/index.js | 2 +- pages/slider/index.js | 2 +- pages/timeline/index.js | 2 +- pages/treetable/index.js | 2 +- 13 files changed, 22 insertions(+), 22 deletions(-) diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 23960949b3..bf38b1603a 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -69,31 +69,31 @@ export interface TreeTablePassThroughOptions { /** * Uses to pass attributes to the header row's DOM element. */ - headerRow?: TreeTablePassThroughType>; + headerRow?: TreeTablePassThroughType>; /** * Uses to pass attributes to the header cell's DOM element. */ - headerCell?: TreeTablePassThroughType>; + headerCell?: TreeTablePassThroughType>; /** * Uses to pass attributes to the tbody's DOM element. */ - tbody?: TreeTablePassThroughType>; + tbody?: TreeTablePassThroughType>; /** * Uses to pass attributes to the empty message's DOM element. */ - emptyMessage?: TreeTablePassThroughType>; + emptyMessage?: TreeTablePassThroughType>; /** * Uses to pass attributes to the body cell's DOM element. */ - bodyCell?: TreeTablePassThroughType>; + bodyCell?: TreeTablePassThroughType>; /** * Uses to pass attributes to the tfoot's DOM element. */ - tfoot?: TreeTablePassThroughType>; + tfoot?: TreeTablePassThroughType>; /** * Uses to pass attributes to the footer row's DOM element. */ - footerRow?: TreeTablePassThroughType>; + footerRow?: TreeTablePassThroughType>; /** * Uses to pass attributes to the footer's DOM element. */ @@ -113,15 +113,15 @@ export interface TreeTablePassThroughOptions { /** * Uses to pass attributes to the column resizer's DOM element. */ - columnResizer?: TreeTablePassThroughType>; + columnResizer?: TreeTablePassThroughType>; /** * Uses to pass attributes to the sort badge's DOM element. */ - sortBadge?: TreeTablePassThroughType>; + sortBadge?: TreeTablePassThroughType>; /** * Uses to pass attributes to the header title's DOM element. */ - headerTitle?: TreeTablePassThroughType>; + headerTitle?: TreeTablePassThroughType>; /** * Uses to pass attributes to the checkbox wrapper's DOM element. */ diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js index a4d820f170..c7d845f62d 100644 --- a/pages/autocomplete/index.js +++ b/pages/autocomplete/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/autocomplete/pt/ptdoc'; import { Wireframe } from '../../components/doc/autocomplete/pt/wireframe'; -import React from 'react'; import { AccessibilityDoc } from '../../components/doc/autocomplete/accessibilitydoc'; import { BasicDoc } from '../../components/doc/autocomplete/basicdoc'; import { DisabledDoc } from '../../components/doc/autocomplete/disableddoc'; diff --git a/pages/cascadeselect/index.js b/pages/cascadeselect/index.js index 9746d30628..83bb219c79 100644 --- a/pages/cascadeselect/index.js +++ b/pages/cascadeselect/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/cascadeselect/pt/ptdoc'; import { Wireframe } from '../../components/doc/cascadeselect/pt/wireframe'; -import React from 'react'; import { AccessibilityDoc } from '../../components/doc/cascadeselect/accessibilitydoc'; import { BasicDoc } from '../../components/doc/cascadeselect/basicdoc'; import { DisabledDoc } from '../../components/doc/cascadeselect/disableddoc'; diff --git a/pages/checkbox/index.js b/pages/checkbox/index.js index 92c9c426cd..2ed11ef50c 100644 --- a/pages/checkbox/index.js +++ b/pages/checkbox/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/checkbox/pt/ptdoc'; import { Wireframe } from '../../components/doc/checkbox/pt/wireframe'; -import React from 'react'; import { AccessibilityDoc } from '../../components/doc/checkbox/accessibilitydoc'; import { BasicDoc } from '../../components/doc/checkbox/basicdoc'; import { DisabledDoc } from '../../components/doc/checkbox/disableddoc'; diff --git a/pages/chips/index.js b/pages/chips/index.js index 3c7b9fc5af..7400647f05 100644 --- a/pages/chips/index.js +++ b/pages/chips/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/chips/pt/ptdoc'; import { Wireframe } from '../../components/doc/chips/pt/wireframe'; -import React from 'react'; import { AccessibilityDoc } from '../../components/doc/chips/accessibilitydoc'; import { BasicDoc } from '../../components/doc/chips/basicdoc'; import { DisabledDoc } from '../../components/doc/chips/disableddoc'; diff --git a/pages/editor/index.js b/pages/editor/index.js index cabf54f978..53fc814101 100644 --- a/pages/editor/index.js +++ b/pages/editor/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/editor/pt/ptdoc'; import { Wireframe } from '../../components/doc/editor/pt/wireframe'; -import React from 'react'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/editor/accessibilitydoc'; import { BasicDoc } from '../../components/doc/editor/basicdoc'; diff --git a/pages/inputmask/index.js b/pages/inputmask/index.js index ab224f56de..e62009c02e 100644 --- a/pages/inputmask/index.js +++ b/pages/inputmask/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/inputmask/pt/ptdoc'; import { Wireframe } from '../../components/doc/inputmask/pt/wireframe'; -import React from 'react'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/inputmask/accessibilitydoc'; import { BasicDoc } from '../../components/doc/inputmask/basicdoc'; diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js index b0fe18ea0e..e4eb776ab8 100644 --- a/pages/inputtext/index.js +++ b/pages/inputtext/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/inputtext/pt/ptdoc'; import { Wireframe } from '../../components/doc/inputtext/pt/wireframe'; -import React from 'react'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/inputtext/accessibilitydoc'; import { BasicDoc } from '../../components/doc/inputtext/basicdoc'; diff --git a/pages/picklist/index.js b/pages/picklist/index.js index 5d8b2e7e49..870650d768 100644 --- a/pages/picklist/index.js +++ b/pages/picklist/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/picklist/pt/ptdoc'; import { Wireframe } from '../../components/doc/picklist/pt/wireframe'; -import React from 'react'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/picklist/accessibilitydoc'; import { BasicDoc } from '../../components/doc/picklist/basicdoc'; diff --git a/pages/rating/index.js b/pages/rating/index.js index 8a7c03c78b..429af3688e 100644 --- a/pages/rating/index.js +++ b/pages/rating/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/rating/pt/ptdoc'; import { Wireframe } from '../../components/doc/rating/pt/wireframe'; -import React from 'react'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/rating/accessibilitydoc'; import { BasicDoc } from '../../components/doc/rating/basicdoc'; diff --git a/pages/slider/index.js b/pages/slider/index.js index d2fd195fd0..78c23650e3 100644 --- a/pages/slider/index.js +++ b/pages/slider/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/slider/pt/ptdoc'; import { Wireframe } from '../../components/doc/slider/pt/wireframe'; -import React from 'react'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/slider/accessibilitydoc'; import { BasicDoc } from '../../components/doc/slider/basicdoc'; diff --git a/pages/timeline/index.js b/pages/timeline/index.js index 9593ed7e5c..e46865092f 100644 --- a/pages/timeline/index.js +++ b/pages/timeline/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/timeline/pt/ptdoc'; import { Wireframe } from '../../components/doc/timeline/pt/wireframe'; -import React from 'react'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/timeline/accessibilitydoc'; import { AlignmentDoc } from '../../components/doc/timeline/alignmentdoc'; diff --git a/pages/treetable/index.js b/pages/treetable/index.js index 3aced4817c..b039f7dca6 100644 --- a/pages/treetable/index.js +++ b/pages/treetable/index.js @@ -1,7 +1,7 @@ +import React from 'react'; import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/treetable/pt/ptdoc'; import { Wireframe } from '../../components/doc/treetable/pt/wireframe'; -import React from 'react'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/treetable/accessibilitydoc'; import { BasicDoc } from '../../components/doc/treetable/basicdoc'; From e2f8e1b7f1e68ff90f458a1fbdfe19068d7965ed Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Sat, 3 Jun 2023 11:57:13 +0000 Subject: [PATCH 04/53] Update API doc --- components/doc/common/apidoc/index.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index d2dca15633..c6cb3143fb 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -44653,49 +44653,49 @@ "name": "headerRow", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the header row's DOM element." }, { "name": "headerCell", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the header cell's DOM element." }, { "name": "tbody", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the tbody's DOM element." }, { "name": "emptyMessage", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the empty message's DOM element." }, { "name": "bodyCell", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the body cell's DOM element." }, { "name": "tfoot", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the tfoot's DOM element." }, { "name": "footerRow", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the footer row's DOM element." }, { @@ -44730,21 +44730,21 @@ "name": "columnResizer", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the column resizer's DOM element." }, { "name": "sortBadge", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the sort badge's DOM element." }, { "name": "headerTitle", "optional": true, "readonly": false, - "type": "TreeTablePassThroughType>", + "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the header title's DOM element." }, { From e54409c1b2841a8fb501a4dc0cff26aa12e02da4 Mon Sep 17 00:00:00 2001 From: habubey Date: Mon, 5 Jun 2023 09:43:37 +0200 Subject: [PATCH 05/53] Refactor #4360 - for SplitButton --- components/doc/common/apidoc/index.json | 132 +++++++++++++----- components/doc/splitbutton/pt/ptdoc.js | 17 ++- components/lib/splitbutton/SplitButton.js | 98 +++++++------ components/lib/splitbutton/SplitButtonItem.js | 57 ++++++-- .../lib/splitbutton/SplitButtonPanel.js | 27 +++- components/lib/splitbutton/splitbutton.d.ts | 50 +++++-- 6 files changed, 258 insertions(+), 123 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index c6cb3143fb..5126bced22 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -166,7 +166,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -2564,7 +2564,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -3958,7 +3958,7 @@ "name": "severity", "optional": true, "readonly": false, - "type": "\"success\" | \"help\" | \"warning\" | \"info\" | \"secondary\" | \"danger\"", + "type": "\"success\" | \"help\" | \"warning\" | \"secondary\" | \"info\" | \"danger\"", "default": "", "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"help\"." }, @@ -4696,7 +4696,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -6532,7 +6532,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -8295,7 +8295,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -11169,7 +11169,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." } @@ -11733,7 +11733,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -12114,7 +12114,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -12569,7 +12569,7 @@ }, { "name": "mode", - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Filter match mode" }, { @@ -14723,7 +14723,7 @@ "name": "matchMode", "optional": false, "readonly": false, - "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Type of filter match." } ], @@ -16473,7 +16473,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -17585,7 +17585,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -18425,7 +18425,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -20006,7 +20006,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -26584,7 +26584,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -27013,7 +27013,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -27837,7 +27837,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -28559,7 +28559,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -30586,7 +30586,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -31965,7 +31965,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -32355,7 +32355,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -32823,7 +32823,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -35182,7 +35182,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -35755,7 +35755,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -36211,7 +36211,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -37168,7 +37168,7 @@ "name": "severity", "optional": true, "readonly": false, - "type": "\"success\" | \"warning\" | \"info\" | \"secondary\" | \"danger\"", + "type": "\"success\" | \"warning\" | \"secondary\" | \"info\" | \"danger\"", "default": "", "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\"." }, @@ -37304,7 +37304,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -37394,18 +37394,18 @@ "description": "Uses to pass attributes to the root's DOM element." }, { - "name": "button", + "name": "icon", "optional": true, "readonly": false, - "type": "SplitButtonPassThroughType>", - "description": "Uses to pass attributes to the button's DOM element." + "type": "SplitButtonPassThroughType | HTMLAttributes>", + "description": "Uses to pass attributes to the icon's DOM element." }, { - "name": "icon", + "name": "button", "optional": true, "readonly": false, - "type": "SplitButtonPassThroughType | HTMLAttributes>", - "description": "Uses to pass attributes to the icon's DOM element." + "type": "ButtonPassThroughOptions", + "description": "Uses to pass attributes to the Button component." }, { "name": "menuButton", @@ -37413,6 +37413,62 @@ "readonly": false, "type": "ButtonPassThroughOptions", "description": "Uses to pass attributes to the Button component." + }, + { + "name": "menu", + "optional": true, + "readonly": false, + "type": "SplitButtonPassThroughType>", + "description": "Uses to pass attributes to the menu's DOM element." + }, + { + "name": "menuList", + "optional": true, + "readonly": false, + "type": "SplitButtonPassThroughType>", + "description": "Uses to pass attributes to the menu list's DOM element." + }, + { + "name": "separator", + "optional": true, + "readonly": false, + "type": "SplitButtonPassThroughType>", + "description": "Uses to pass attributes to the separator's DOM element." + }, + { + "name": "menuIcon", + "optional": true, + "readonly": false, + "type": "SplitButtonPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the menu icon's DOM element." + }, + { + "name": "menuLabel", + "optional": true, + "readonly": false, + "type": "SplitButtonPassThroughType>", + "description": "Uses to pass attributes to the menu label's DOM element." + }, + { + "name": "anchor", + "optional": true, + "readonly": false, + "type": "SplitButtonPassThroughType>", + "description": "Uses to pass attributes to the anchor's DOM element." + }, + { + "name": "menuItem", + "optional": true, + "readonly": false, + "type": "SplitButtonPassThroughType>", + "description": "Uses to pass attributes to the menu item's DOM element." + }, + { + "name": "tooltip", + "optional": true, + "readonly": false, + "type": "TooltipPassThroughOptions", + "description": "Uses to pass attributes tooltip's DOM element." } ], "callbacks": [] @@ -39422,7 +39478,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -39885,7 +39941,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -43036,7 +43092,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -43821,7 +43877,7 @@ "name": "globalFilterMatchMode", "optional": true, "readonly": false, - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "default": "contains", "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"." }, diff --git a/components/doc/splitbutton/pt/ptdoc.js b/components/doc/splitbutton/pt/ptdoc.js index 8fecd52ed4..5bcb507ba6 100644 --- a/components/doc/splitbutton/pt/ptdoc.js +++ b/components/doc/splitbutton/pt/ptdoc.js @@ -27,8 +27,8 @@ export function PTDoc(props) { basic: `
- ); diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js index 6a18eb184c..4c0bf0c828 100644 --- a/components/lib/splitbutton/SplitButton.js +++ b/components/lib/splitbutton/SplitButton.js @@ -105,7 +105,7 @@ export const SplitButton = React.memo( const createItems = () => { if (props.model) { return props.model.map((menuitem, index) => { - return ; + return ; }); } @@ -152,52 +152,6 @@ export const SplitButton = React.memo( return dropdownIcon; }; - const menuButtonProps = mergeProps({ - type: 'button', - className: menuButtonClassName, - icon: dropdownIcon, - onClick: onDropdownButtonClick, - disabled: props.disabled, - 'aria-expanded': overlayVisibleState, - 'aria-haspopup': true, - 'aria-controls': overlayVisibleState ? menuId : null, - ...props.menuButtonProps, - pt: ptm('menuButton') - }); - - const menuProps = mergeProps( - { - ref: overlayRef, - appendTo: props.appendTo, - menuId: menuId, - menuStyle: props.menuStyle, - menuClassName: props.menuClassName, - onClick: onPanelClick, - in: overlayVisibleState, - onEnter: onOverlayEnter, - onEntered: onOverlayEntered, - onExit: onOverlayExit, - onExited: onOverlayExited, - transitionOptions: props.transitionOptions - }, - ptm('menu') - ); - - const splitButtonProps = mergeProps({ - ref: defaultButtonRef, - type: 'button', - className: buttonClassName, - icon: props.icon, - loading: props.loading, - loadingIcon: props.loadingIcon, - label: props.label, - onClick: props.onClick, - disabled: props.disabled, - tabIndex: props.tabIndex, - ...props.buttonProps, - pt: ptm('button') - }); - const rootProps = mergeProps( { ref: elementRef, @@ -212,11 +166,53 @@ export const SplitButton = React.memo( return ( <>
- - +
- {hasTooltip && } + {hasTooltip && } ); }) diff --git a/components/lib/splitbutton/SplitButtonItem.js b/components/lib/splitbutton/SplitButtonItem.js index 1198088464..52aa3f043b 100644 --- a/components/lib/splitbutton/SplitButtonItem.js +++ b/components/lib/splitbutton/SplitButtonItem.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; export const SplitButtonItem = React.memo((props) => { const onClick = (e) => { @@ -15,7 +15,15 @@ export const SplitButtonItem = React.memo((props) => { }; const createSeparator = () => { - return
  • ; + const separatorProps = mergeProps( + { + className: 'p-menu-separator', + role: 'separator' + }, + props.ptm('separator') + ); + + return
  • ; }; const createMenuitem = () => { @@ -26,10 +34,37 @@ export const SplitButtonItem = React.memo((props) => { const { disabled, icon: _icon, label: _label, template, url, target, className: _className } = props.menuitem; const className = classNames('p-menuitem-link', _className, { 'p-disabled': disabled }); const iconClassName = classNames('p-menuitem-icon', _icon); - const icon = IconUtils.getJSXIcon(_icon, { className: 'p-menuitem-icon' }, { props: props.splitButtonProps }); - const label = _label && {_label}; + + const menuIconProps = mergeProps( + { + className: 'p-menuitem-icon' + }, + props.ptm('menuIcon') + ); + const icon = IconUtils.getJSXIcon(_icon, { ...menuIconProps }, { props: props.splitButtonProps }); + + const menuLabelProps = mergeProps( + { + className: 'p-menuitem-text' + }, + props.ptm('menuLabel') + ); + const label = _label && {_label}; + + const anchorProps = mergeProps( + { + href: url || '#', + role: 'menuitem', + className: className, + target: target, + onClick: onClick, + 'aria-label': _label + }, + props.ptm('anchor') + ); + let content = ( - + {icon} {label} @@ -48,11 +83,15 @@ export const SplitButtonItem = React.memo((props) => { content = ObjectUtils.getJSXElement(template, props.menuitem, defaultContentOptions); } - return ( -
  • - {content} -
    • + const menuItemProps = mergeProps( + { + className: 'p-menuitem', + role: 'none' + }, + props.ptm('menuItem') ); + + return
  • {content}
    • ; }; const createItem = () => { diff --git a/components/lib/splitbutton/SplitButtonPanel.js b/components/lib/splitbutton/SplitButtonPanel.js index 67b26ba25b..16be7c0224 100644 --- a/components/lib/splitbutton/SplitButtonPanel.js +++ b/components/lib/splitbutton/SplitButtonPanel.js @@ -1,12 +1,31 @@ import * as React from 'react'; import { CSSTransition } from '../csstransition/CSSTransition'; import { Portal } from '../portal/Portal'; -import { classNames } from '../utils/Utils'; +import { classNames, mergeProps } from '../utils/Utils'; export const SplitButtonPanel = React.forwardRef((props, ref) => { const createElement = () => { const className = classNames('p-menu p-menu-overlay p-component', props.menuClassName); + const menuProps = mergeProps( + { + ref: ref, + className: className, + style: props.menuStyle, + onClick: props.onClick + }, + props.ptm('menu') + ); + + const menuListProps = mergeProps( + { + id: props.menuId, + className: 'p-menu-list p-reset', + role: 'menu' + }, + props.ptm('menuList') + ); + return ( { onExit={props.onExit} onExited={props.onExited} > -
    - +
    +
      {props.children}
    ); diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts index 0d54377e89..8160da8a33 100644 --- a/components/lib/splitbutton/splitbutton.d.ts +++ b/components/lib/splitbutton/splitbutton.d.ts @@ -8,11 +8,12 @@ * */ import * as React from 'react'; +import { ButtonPassThroughOptions } from '../button/button'; import { CSSTransitionProps } from '../csstransition'; import { MenuItem } from '../menuitem'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { IconType, PassThroughType, TemplateType } from '../utils'; -import { ButtonPassThroughOptions } from '../button/button'; export declare type SplitButtonPassThroughType = PassThroughType; @@ -32,24 +33,51 @@ export interface SplitButtonPassThroughOptions { * Uses to pass attributes to the root's DOM element. */ root?: SplitButtonPassThroughType>; - /** - * Uses to pass attributes to the button's DOM element. - */ - button?: SplitButtonPassThroughType>; /** * Uses to pass attributes to the icon's DOM element. */ icon?: SplitButtonPassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the Button component. - * @see {@link ButtonPassThroughOptions} + */ + button?: ButtonPassThroughOptions; + /** + * Uses to pass attributes to the Button component. */ menuButton?: ButtonPassThroughOptions; - // /** - // * Uses to pass attributes to the TieredMenu component. - // * @see {@link TieredMenuPassThroughOptions} - // */ - // menu?: TieredMenuPassThroughOptions; @TODO + /** + * Uses to pass attributes to the menu's DOM element. + */ + menu?: SplitButtonPassThroughType>; + /** + * Uses to pass attributes to the menu list's DOM element. + */ + menuList?: SplitButtonPassThroughType>; + /** + * Uses to pass attributes to the separator's DOM element. + */ + separator?: SplitButtonPassThroughType>; + /** + * Uses to pass attributes to the menu icon's DOM element. + */ + menuIcon?: SplitButtonPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the menu label's DOM element. + */ + menuLabel?: SplitButtonPassThroughType>; + /** + * Uses to pass attributes to the anchor's DOM element. + */ + anchor?: SplitButtonPassThroughType>; + /** + * Uses to pass attributes to the menu item's DOM element. + */ + menuItem?: SplitButtonPassThroughType>; + /** + * Uses to pass attributes tooltip's DOM element. + * @type {TooltipPassThroughOptions} + */ + tooltip?: TooltipPassThroughOptions; } /** From 51fd029d9c278901319c73a3668c0eda11a83376 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 5 Jun 2023 07:44:21 +0000 Subject: [PATCH 06/53] Update API doc --- components/doc/common/apidoc/index.json | 64 ++++++++++++------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 5126bced22..6bd62b54e5 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -166,7 +166,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -2564,7 +2564,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -3958,7 +3958,7 @@ "name": "severity", "optional": true, "readonly": false, - "type": "\"success\" | \"help\" | \"warning\" | \"secondary\" | \"info\" | \"danger\"", + "type": "\"success\" | \"help\" | \"warning\" | \"info\" | \"secondary\" | \"danger\"", "default": "", "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"help\"." }, @@ -4696,7 +4696,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -6532,7 +6532,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -8295,7 +8295,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -11169,7 +11169,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." } @@ -11733,7 +11733,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -12114,7 +12114,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -12569,7 +12569,7 @@ }, { "name": "mode", - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Filter match mode" }, { @@ -14723,7 +14723,7 @@ "name": "matchMode", "optional": false, "readonly": false, - "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Type of filter match." } ], @@ -16473,7 +16473,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -17585,7 +17585,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -18425,7 +18425,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -20006,7 +20006,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -26584,7 +26584,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -27013,7 +27013,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -27837,7 +27837,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -28559,7 +28559,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -30586,7 +30586,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -31965,7 +31965,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -32355,7 +32355,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -32823,7 +32823,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -35182,7 +35182,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -35755,7 +35755,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -36211,7 +36211,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -37168,7 +37168,7 @@ "name": "severity", "optional": true, "readonly": false, - "type": "\"success\" | \"warning\" | \"secondary\" | \"info\" | \"danger\"", + "type": "\"success\" | \"warning\" | \"info\" | \"secondary\" | \"danger\"", "default": "", "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\"." }, @@ -37304,7 +37304,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -39478,7 +39478,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -39941,7 +39941,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -43092,7 +43092,7 @@ "name": "transitionOptions", "optional": true, "readonly": false, - "type": "CSSTransitionProps", + "type": "CSSTransitionProps", "default": "", "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties." }, @@ -43877,7 +43877,7 @@ "name": "globalFilterMatchMode", "optional": true, "readonly": false, - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "default": "contains", "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"." }, From 9dafafd7682cd44bc7701974ded8d09e79dc0672 Mon Sep 17 00:00:00 2001 From: habubey Date: Mon, 5 Jun 2023 11:45:23 +0200 Subject: [PATCH 07/53] Refactor #4431 - CascadeSelect pt demo --- components/doc/cascadeselect/pt/ptdoc.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/doc/cascadeselect/pt/ptdoc.js b/components/doc/cascadeselect/pt/ptdoc.js index 577eaf94be..fc7e4828cd 100644 --- a/components/doc/cascadeselect/pt/ptdoc.js +++ b/components/doc/cascadeselect/pt/ptdoc.js @@ -89,7 +89,6 @@ export function PTDoc(props) { optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} - className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" pt={{ @@ -189,7 +188,6 @@ export default function PTDemo() { optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} - className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" pt={{ @@ -332,7 +330,6 @@ export default function PTDemo() { optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} - className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" pt={{ From 39cf673aab599cec80dc86f7858d8e624e7b1947 Mon Sep 17 00:00:00 2001 From: habubey Date: Mon, 5 Jun 2023 11:56:49 +0200 Subject: [PATCH 08/53] Refactor #4431 - Editor PT demo --- components/doc/editor/pt/ptdoc.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/doc/editor/pt/ptdoc.js b/components/doc/editor/pt/ptdoc.js index 543a21e75b..aa44560fc2 100644 --- a/components/doc/editor/pt/ptdoc.js +++ b/components/doc/editor/pt/ptdoc.js @@ -11,7 +11,6 @@ export function PTDoc(props) { setText(e.htmlValue)} - style={{ height: '320px' }} pt={{ content: { style: { height: '320px' } }, toolbar: { className: 'surface-ground' } @@ -30,7 +29,6 @@ export default function PTDemo() { setText(e.htmlValue)} - style={{ height: '320px' }} pt={{ content: { style: { height: '320px' } }, toolbar: { className: 'surface-ground' } @@ -52,7 +50,6 @@ export default function PTDemo() { setText(e.htmlValue)} - style={{ height: '320px' }} pt={{ content: { style: { height: '320px' } }, toolbar: { className: 'surface-ground' } @@ -71,7 +68,6 @@ export default function PTDemo() { setText(e.htmlValue)} - style={{ height: '320px' }} pt={{ content: { style: { height: '320px' } }, toolbar: { className: 'surface-ground' } From b92b961d83fc65ab835264e5dd9d3c697f85c36d Mon Sep 17 00:00:00 2001 From: habubey Date: Mon, 5 Jun 2023 12:10:00 +0200 Subject: [PATCH 09/53] Refactor #4431 - InputTextarea PT demo --- components/doc/inputtextarea/pt/ptdoc.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/components/doc/inputtextarea/pt/ptdoc.js b/components/doc/inputtextarea/pt/ptdoc.js index 225dab43a2..c36251ef71 100644 --- a/components/doc/inputtextarea/pt/ptdoc.js +++ b/components/doc/inputtextarea/pt/ptdoc.js @@ -52,15 +52,15 @@ export default function PTDemo() { return (
    ) => setValue(e.target.value)} - pt={{ - root: { - rows: 5, - cols: 30 - } - }} - /> + value={value} + onChange={(e: React.ChangeEvent) => setValue(e.target.value)} + pt={{ + root: { + rows: 5, + cols: 30 + } + }} + />
    ) } From e5adf53260b3f2aeba5e9411fe60583e80176526 Mon Sep 17 00:00:00 2001 From: habubey Date: Mon, 5 Jun 2023 14:47:42 +0200 Subject: [PATCH 10/53] Refactor #4432 - VirtualScroller PT demo --- components/doc/virtualscroller/pt/ptdoc.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/doc/virtualscroller/pt/ptdoc.js b/components/doc/virtualscroller/pt/ptdoc.js index 10d96192f2..d1a4554fd9 100644 --- a/components/doc/virtualscroller/pt/ptdoc.js +++ b/components/doc/virtualscroller/pt/ptdoc.js @@ -25,7 +25,6 @@ export function PTDoc(props) { items={items} itemSize={50} itemTemplate={itemTemplate} - style={{ width: '200px', height: '200px' }} pt={{ root: { className: 'border-1 surface-border border-round', @@ -60,7 +59,6 @@ export default function PTDemo() { items={items} itemSize={50} itemTemplate={itemTemplate} - style={{ width: '200px', height: '200px' }} pt={{ root: { className: 'border-1 surface-border border-round', @@ -98,7 +96,6 @@ export default function PTDemo() { items={items} itemSize={50} itemTemplate={itemTemplate} - style={{ width: '200px', height: '200px' }} pt={{ root: { className: 'border-1 surface-border border-round', @@ -120,7 +117,6 @@ export default function PTDemo() { items={items} itemSize={50} itemTemplate={itemTemplate} - style={{ width: '200px', height: '200px' }} pt={{ root: { className: 'border-1 surface-border border-round', From 2a6168a130063ad4a2ddf615045aeb1dd04f358f Mon Sep 17 00:00:00 2001 From: habubey Date: Tue, 6 Jun 2023 12:17:53 +0200 Subject: [PATCH 11/53] Refactor #4431 - For Calendar --- components/lib/calendar/Calendar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 2f4c111f26..851fc0236d 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -2853,7 +2853,7 @@ export const Calendar = React.memo( const weekHeaderProps = mergeProps( { scope: 'col', - classNam: 'p-datepicker-weekheader p-disabled' + className: 'p-datepicker-weekheader p-disabled' }, ptm('weekHeader') ); From f8dc62693afa60f4f848a584db562546f670b5ab Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 7 Jun 2023 09:51:03 -0400 Subject: [PATCH 12/53] Fix #4489: Dropdown add getVirtualScroller (#4490) --- components/lib/dropdown/dropdown.d.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index ed53664044..415b1c3e3b 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -14,7 +14,7 @@ import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { FormEvent } from '../ts-helpers'; import { IconType, PassThroughType } from '../utils'; -import { VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller'; +import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller'; export declare type DropdownPassThroughType = PassThroughType; @@ -523,4 +523,9 @@ export declare class Dropdown extends React.Component { * @return {HTMLElement} Overlay element */ public getOverlay(): HTMLElement; + /** + * Used to get the options of inline virtualScroller component. + * @return {VirtualScroller} VirtualScroller component + */ + public getVirtualScroller(): VirtualScroller; } From 51d856d9395d3fa62c1225a16573990f05f58a13 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Wed, 7 Jun 2023 13:51:44 +0000 Subject: [PATCH 13/53] Update API doc --- components/doc/common/apidoc/index.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 6bd62b54e5..baa0a67f4f 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -17182,6 +17182,12 @@ "parameters": [], "returnType": "HTMLElement", "description": "Used to get overlay element." + }, + { + "name": "getVirtualScroller", + "parameters": [], + "returnType": "VirtualScroller", + "description": "Used to get the options of inline virtualScroller component." } ] }, From 8adf29c5a05a67e1466a3b9041c3bb1edd0c6791 Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 7 Jun 2023 10:31:14 -0400 Subject: [PATCH 14/53] Fix #4489: Dropdown add getVirtualScroller (#4491) --- components/lib/dropdown/Dropdown.js | 5 ++++- components/lib/dropdown/DropdownPanel.js | 9 ++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index ca48fc280e..cd76ffc459 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -27,6 +27,7 @@ export const Dropdown = React.memo( const overlayRef = React.useRef(null); const inputRef = React.useRef(props.inputRef); const focusInputRef = React.useRef(props.focusInputRef); + const virtualScrollerRef = React.useRef(null); const searchTimeout = React.useRef(null); const searchValue = React.useRef(null); const currentSearchChar = React.useRef(null); @@ -621,7 +622,8 @@ export const Dropdown = React.memo( getElement: () => elementRef.current, getOverlay: () => overlayRef.current, getInput: () => inputRef.current, - getFocusInput: () => focusInputRef.current + getFocusInput: () => focusInputRef.current, + getVirtualScroller: () => virtualScrollerRef.current })); React.useEffect(() => { @@ -875,6 +877,7 @@ export const Dropdown = React.memo( { const ptm = props.ptm; - const virtualScrollerRef = React.useRef(null); const filterInputRef = React.useRef(null); const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter; const filterOptions = { @@ -21,11 +20,11 @@ export const DropdownPanel = React.memo( const onEnter = () => { props.onEnter(() => { - if (virtualScrollerRef.current) { + if (props.virtualScrollerRef.current) { const selectedIndex = props.getSelectedOptionIndex(); if (selectedIndex !== -1) { - setTimeout(() => virtualScrollerRef.current.scrollToIndex(selectedIndex), 0); + setTimeout(() => props.virtualScrollerRef.current.scrollToIndex(selectedIndex), 0); } } }); @@ -40,7 +39,7 @@ export const DropdownPanel = React.memo( }; const onFilterInputChange = (event) => { - virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0); + props.virtualScrollerRef.current && props.virtualScrollerRef.current.scrollToIndex(0); props.onFilterInputChange && props.onFilterInputChange(event); }; @@ -242,7 +241,7 @@ export const DropdownPanel = React.memo( } }; - return ; + return ; } else { const items = createItems(); const wrapperProps = mergeProps( From 58d617004066594aa976877d9a33a8ff8ce0de7e Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 7 Jun 2023 11:24:41 -0400 Subject: [PATCH 15/53] Fix #4492: Datatable check/radio respect isDataSelectable (#4493) --- components/lib/datatable/BodyCell.js | 24 ++++++++++++++++++++-- components/lib/datatable/RowCheckbox.js | 8 ++++---- components/lib/datatable/RowRadioButton.js | 6 +++--- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index f1a2351478..1aea1f762d 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -589,10 +589,30 @@ export const BodyCell = React.memo((props) => { content = showSelection && ( <> {selectionMode === 'single' && ( - + )} {selectionMode === 'multiple' && ( - + )} ); diff --git a/components/lib/datatable/RowCheckbox.js b/components/lib/datatable/RowCheckbox.js index e7f7a59191..a03e7a0eac 100644 --- a/components/lib/datatable/RowCheckbox.js +++ b/components/lib/datatable/RowCheckbox.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IconUtils, classNames, mergeProps } from '../utils/Utils'; -import { CheckIcon } from '../icons/check'; import { ColumnBase } from '../column/ColumnBase'; +import { CheckIcon } from '../icons/check'; +import { IconUtils, classNames, mergeProps } from '../utils/Utils'; export const RowCheckbox = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); @@ -45,8 +45,8 @@ export const RowCheckbox = React.memo((props) => { } }; - const className = classNames('p-checkbox p-component', { 'p-checkbox-focused': focusedState }); - const boxClassName = classNames('p-checkbox-box p-component', { 'p-highlight': props.checked, 'p-disabled': props.disabled, 'p-focus': focusedState }); + const className = classNames('p-checkbox p-component', { 'p-checkbox-focused': focusedState, 'p-disabled': props.disabled }); + const boxClassName = classNames('p-checkbox-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState }); const iconClassName = 'p-checkbox-icon'; const checkboxIconProps = mergeProps( { diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js index 44b26b8397..0158e2f8cf 100644 --- a/components/lib/datatable/RowRadioButton.js +++ b/components/lib/datatable/RowRadioButton.js @@ -1,6 +1,6 @@ import * as React from 'react'; -import { classNames, DomHandler, mergeProps } from '../utils/Utils'; import { ColumnBase } from '../column/ColumnBase'; +import { classNames, DomHandler, mergeProps } from '../utils/Utils'; export const RowRadioButton = React.memo((props) => { const [focusedState, setFocusedState] = React.useState(false); @@ -49,8 +49,8 @@ export const RowRadioButton = React.memo((props) => { onClick(event); }; - const className = classNames('p-radiobutton p-component', { 'p-radiobutton-focused': focusedState }); - const boxClassName = classNames('p-radiobutton-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState, 'p-disabled': props.disabled }); + const className = classNames('p-radiobutton p-component', { 'p-radiobutton-focused': focusedState, 'p-disabled': props.disabled }); + const boxClassName = classNames('p-radiobutton-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState }); const name = `${props.tableSelector}_dt_radio`; const radiobuttonWrapperProps = mergeProps( { From 88062ef710ef0c4ee952a661c10e2b7801b442a6 Mon Sep 17 00:00:00 2001 From: Melloware Date: Thu, 8 Jun 2023 08:13:04 -0400 Subject: [PATCH 16/53] Fix #4486: PassThrough Image does not support referrerpolicy (#4494) --- components/lib/avatar/avatar.d.ts | 2 +- components/lib/chip/chip.d.ts | 2 +- components/lib/fileupload/fileupload.d.ts | 6 +++--- components/lib/image/image.d.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/lib/avatar/avatar.d.ts b/components/lib/avatar/avatar.d.ts index 7b10c7d590..0ad2a695d6 100644 --- a/components/lib/avatar/avatar.d.ts +++ b/components/lib/avatar/avatar.d.ts @@ -38,7 +38,7 @@ export interface AvatarPassThroughOptions { /** * Uses to pass attributes to the image's DOM element. */ - image?: AvatarPassThroughType>; + image?: AvatarPassThroughType>; } /** diff --git a/components/lib/chip/chip.d.ts b/components/lib/chip/chip.d.ts index f85771fa4f..a140de3375 100644 --- a/components/lib/chip/chip.d.ts +++ b/components/lib/chip/chip.d.ts @@ -31,7 +31,7 @@ export interface ChipPassThroughOptions { /** * Uses to pass attributes to the image's DOM element. */ - image?: ChipPassThroughType>; + image?: ChipPassThroughType>; /** * Uses to pass attributes to the icon's DOM element. */ diff --git a/components/lib/fileupload/fileupload.d.ts b/components/lib/fileupload/fileupload.d.ts index 8531efaab4..535e833776 100644 --- a/components/lib/fileupload/fileupload.d.ts +++ b/components/lib/fileupload/fileupload.d.ts @@ -8,11 +8,11 @@ * */ import * as React from 'react'; -import { IconType, PassThroughType } from '../utils'; +import { BadgePassThroughOptions } from '../badge/badge'; import { ButtonPassThroughOptions } from '../button/button'; import { MessagePassThroughOptions } from '../message/message'; import { ProgressBarPassThroughOptions } from '../progressbar/progressbar'; -import { BadgePassThroughOptions } from '../badge/badge'; +import { IconType, PassThroughType } from '../utils'; export declare type FileUploadPassThroughType = PassThroughType; @@ -84,7 +84,7 @@ export interface FileUploadPassThroughOptions { /** * Uses to pass attributes to the thumbnail's DOM element. */ - thumbnail?: FileUploadPassThroughType>; + thumbnail?: FileUploadPassThroughType>; /** * Uses to pass attributes to the details's DOM element. */ diff --git a/components/lib/image/image.d.ts b/components/lib/image/image.d.ts index be3fcf7268..6c4a3469f4 100644 --- a/components/lib/image/image.d.ts +++ b/components/lib/image/image.d.ts @@ -32,7 +32,7 @@ export interface ImagePassThroughOptions { /** * Uses to pass attributes to the image's DOM element. */ - image?: ImagePassThroughType>; + image?: ImagePassThroughType>; /** * Uses to pass attributes to the button's DOM element. */ @@ -104,7 +104,7 @@ export interface ImagePassThroughOptions { /** * Uses to pass attributes to the preview's DOM element. */ - preview?: ImagePassThroughType>; + preview?: ImagePassThroughType>; } /** From 4949fb9759e508d9226a9093339c2b9a050330e7 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Thu, 8 Jun 2023 12:13:47 +0000 Subject: [PATCH 17/53] Update API doc --- components/doc/common/apidoc/index.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index baa0a67f4f..0899294fa5 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -3320,7 +3320,7 @@ "name": "image", "optional": true, "readonly": false, - "type": "AvatarPassThroughType>", + "type": "AvatarPassThroughType>", "description": "Uses to pass attributes to the image's DOM element." } ], @@ -7609,7 +7609,7 @@ "name": "image", "optional": true, "readonly": false, - "type": "ChipPassThroughType>", + "type": "ChipPassThroughType>", "description": "Uses to pass attributes to the image's DOM element." }, { @@ -19426,7 +19426,7 @@ "name": "thumbnail", "optional": true, "readonly": false, - "type": "FileUploadPassThroughType>", + "type": "FileUploadPassThroughType>", "description": "Uses to pass attributes to the thumbnail's DOM element." }, { @@ -23201,7 +23201,7 @@ "name": "image", "optional": true, "readonly": false, - "type": "ImagePassThroughType>", + "type": "ImagePassThroughType>", "description": "Uses to pass attributes to the image's DOM element." }, { @@ -23327,7 +23327,7 @@ "name": "preview", "optional": true, "readonly": false, - "type": "ImagePassThroughType>", + "type": "ImagePassThroughType>", "description": "Uses to pass attributes to the preview's DOM element." } ], From ccea0c70fe24104423ca3322678a43ebfa749be8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Fri, 9 Jun 2023 12:40:11 +0300 Subject: [PATCH 18/53] Migrate from PrimeReact api to Context Add globalPT option Refact ptdoc --- components/doc/dock/advanceddoc.js | 17 +- .../doc/inputtextarea/form/formikdoc.js | 8 +- components/doc/slidemenu/pt/ptdoc.js | 463 ++++++++++++++++++ components/doc/slidemenu/pt/wireframe.js | 15 + components/layout/layout.js | 28 +- components/lib/accordion/Accordion.js | 7 +- components/lib/api/PrimeReact.js | 2 + components/lib/api/api.d.ts | 183 +++++++ components/lib/api/context.js | 82 ++++ components/lib/autocomplete/AutoComplete.js | 9 +- .../lib/autocomplete/AutoCompletePanel.js | 7 +- components/lib/avatar/Avatar.js | 4 +- components/lib/avatargroup/AvatarGroup.js | 4 +- components/lib/badge/Badge.js | 4 +- components/lib/blockui/BlockUI.js | 7 +- components/lib/breadcrumb/BreadCrumb.js | 4 +- components/lib/button/Button.js | 4 +- components/lib/calendar/Calendar.js | 27 +- components/lib/card/Card.js | 4 +- components/lib/carousel/Carousel.js | 8 +- components/lib/cascadeselect/CascadeSelect.js | 11 +- .../lib/cascadeselect/CascadeSelectSub.js | 6 +- components/lib/chart/Chart.js | 4 +- components/lib/checkbox/Checkbox.js | 5 +- components/lib/chip/Chip.js | 5 +- components/lib/chips/Chips.js | 4 +- components/lib/colorpicker/ColorPicker.js | 12 +- .../lib/colorpicker/ColorPickerPanel.js | 7 +- components/lib/componentbase/ComponentBase.js | 49 +- components/lib/confirmdialog/ConfirmDialog.js | 4 +- components/lib/confirmpopup/ConfirmPopup.js | 10 +- components/lib/contextmenu/ContextMenu.js | 12 +- components/lib/csstransition/CSSTransition.js | 5 +- components/lib/datascroller/DataScroller.js | 4 +- components/lib/datatable/ColumnFilter.js | 20 +- components/lib/datatable/DataTable.js | 24 +- components/lib/datatable/TableHeader.js | 2 +- components/lib/dataview/DataView.js | 9 +- .../lib/deferredcontent/DeferredContent.js | 4 +- components/lib/dialog/Dialog.js | 12 +- components/lib/divider/Divider.js | 4 +- components/lib/dock/Dock.js | 4 +- components/lib/dropdown/Dropdown.js | 10 +- components/lib/dropdown/DropdownPanel.js | 7 +- components/lib/editor/Editor.js | 4 +- components/lib/fieldset/Fieldset.js | 4 +- components/lib/fileupload/FileUpload.js | 4 +- components/lib/galleria/Galleria.js | 10 +- components/lib/galleria/GalleriaThumbnails.js | 6 +- components/lib/hooks/useLocale.js | 123 +++++ .../lib/hooks/useOverlayScrollListener.js | 5 +- components/lib/image/Image.js | 6 +- components/lib/inplace/Inplace.js | 4 +- components/lib/inputmask/InputMask.js | 4 +- components/lib/inputnumber/InputNumber.js | 4 +- components/lib/inputswitch/InputSwitch.js | 4 +- components/lib/inputtext/InputText.js | 4 +- components/lib/inputtextarea/InputTextarea.js | 4 +- components/lib/knob/Knob.js | 4 +- components/lib/listbox/ListBox.js | 4 +- components/lib/megamenu/MegaMenu.js | 26 +- components/lib/mention/Mention.js | 6 +- components/lib/menu/Menu.js | 10 +- components/lib/menubar/Menubar.js | 6 +- components/lib/message/Message.js | 4 +- components/lib/messages/Messages.js | 4 +- components/lib/multiselect/MultiSelect.js | 20 +- .../lib/multiselect/MultiSelectPanel.js | 6 +- .../multistatecheckbox/MultiStateCheckbox.js | 4 +- components/lib/orderlist/OrderList.js | 6 +- .../organizationchart/OrganizationChart.js | 4 +- components/lib/overlaypanel/OverlayPanel.js | 12 +- components/lib/paginator/CurrentPageReport.js | 4 +- components/lib/paginator/FirstPageLink.js | 4 +- components/lib/paginator/JumpToPageInput.js | 4 +- components/lib/paginator/LastPageLink.js | 4 +- components/lib/paginator/NextPageLink.js | 4 +- components/lib/paginator/PageLinks.js | 4 +- components/lib/paginator/Paginator.js | 14 +- components/lib/paginator/PrevPageLink.js | 4 +- .../lib/paginator/RowsPerPageDropdown.js | 4 +- components/lib/panel/Panel.js | 5 +- components/lib/panelmenu/PanelMenu.js | 4 +- components/lib/password/Password.js | 12 +- components/lib/picklist/PickList.js | 6 +- components/lib/portal/Portal.js | 5 +- components/lib/progressbar/ProgressBar.js | 4 +- .../lib/progressspinner/ProgressSpinner.js | 4 +- components/lib/radiobutton/RadioButton.js | 4 +- components/lib/rating/Rating.js | 4 +- components/lib/ripple/Ripple.js | 5 +- components/lib/row/Row.js | 4 +- components/lib/scrollpanel/ScrollPanel.js | 4 +- components/lib/scrolltop/ScrollTop.js | 6 +- components/lib/selectbutton/SelectButton.js | 4 +- components/lib/sidebar/Sidebar.js | 12 +- components/lib/skeleton/Skeleton.js | 4 +- components/lib/slidemenu/SlideMenu.js | 6 +- components/lib/slider/Slider.js | 4 +- components/lib/speeddial/SpeedDial.js | 4 +- components/lib/splitbutton/SplitButton.js | 8 +- components/lib/splitter/Splitter.js | 6 +- components/lib/steps/Steps.js | 4 +- components/lib/styleclass/StyleClass.js | 4 +- components/lib/tabmenu/TabMenu.js | 4 +- components/lib/tabview/TabView.js | 6 +- components/lib/tag/Tag.js | 4 +- components/lib/terminal/Terminal.js | 4 +- components/lib/tieredmenu/TieredMenu.js | 12 +- components/lib/timeline/Timeline.js | 4 +- components/lib/toast/Toast.js | 10 +- components/lib/togglebutton/ToggleButton.js | 4 +- components/lib/toolbar/Toolbar.js | 4 +- components/lib/tooltip/Tooltip.js | 6 +- components/lib/tree/Tree.js | 4 +- components/lib/treeselect/TreeSelect.js | 10 +- components/lib/treeselect/TreeSelectPanel.js | 8 +- components/lib/treetable/TreeTable.js | 8 +- .../lib/tristatecheckbox/TriStateCheckbox.js | 4 +- components/lib/utils/ObjectUtils.js | 12 +- .../lib/virtualscroller/VirtualScroller.js | 4 +- pages/_app.js | 13 +- pages/slidemenu/index.js | 4 +- 123 files changed, 1432 insertions(+), 285 deletions(-) create mode 100644 components/doc/slidemenu/pt/ptdoc.js create mode 100644 components/doc/slidemenu/pt/wireframe.js create mode 100644 components/lib/api/context.js create mode 100644 components/lib/hooks/useLocale.js diff --git a/components/doc/dock/advanceddoc.js b/components/doc/dock/advanceddoc.js index 3102297f5e..deb31ca907 100644 --- a/components/doc/dock/advanceddoc.js +++ b/components/doc/dock/advanceddoc.js @@ -1,7 +1,6 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useContext, useEffect, useRef, useState } from 'react'; import { NodeService } from '../../../service/NodeService'; import { PhotoService } from '../../../service/PhotoService'; -import PrimeReact from '../../lib/api/Api'; import { Dialog } from '../../lib/dialog/Dialog'; import { Dock } from '../../lib/dock/Dock'; import { Galleria } from '../../lib/galleria/Galleria'; @@ -13,6 +12,7 @@ import { Tooltip } from '../../lib/tooltip/Tooltip'; import { Tree } from '../../lib/tree/Tree'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; +import { PrimeReactContext } from '../../lib/api/context'; export function AdvancedDoc(props) { const [displayTerminal, setDisplayTerminal] = useState(false); @@ -22,6 +22,7 @@ export function AdvancedDoc(props) { const toast = useRef(null); const toast2 = useRef(null); const galleria = useRef(null); + const { setAppendTo } = useContext(PrimeReactContext); const dockItems = [ { @@ -254,13 +255,13 @@ export function AdvancedDoc(props) { PhotoService.getImages().then((data) => setImages(data)); NodeService.getTreeNodes().then((data) => setNodes(data)); - PrimeReact.appendTo = 'self'; + setAppendTo('self'); return () => { TerminalService.off('command', commandHandler); // reset - PrimeReact.appendTo = null; + setAppendTo(null); }; }, []); @@ -548,13 +549,13 @@ export default function AdvanceDemo() { PhotoService.getImages().then((data) => setImages(data)); NodeService.getTreeNodes().then((data) => setNodes(data)); - PrimeReact.appendTo = 'self'; + setAppendTo('self'); return () => { TerminalService.off('command', commandHandler); // reset - PrimeReact.appendTo = null; + setAppendTo(null); }; }, []); @@ -847,13 +848,13 @@ export default function AdvanceDemo() { PhotoService.getImages().then((data) => setImages(data)); NodeService.getTreeNodes().then((data) => setNodes(data)); - PrimeReact.appendTo = 'self'; + setAppendTo('self'); return () => { TerminalService.off('command', commandHandler); // reset - PrimeReact.appendTo = null; + setAppendTo(null); }; }, []); diff --git a/components/doc/inputtextarea/form/formikdoc.js b/components/doc/inputtextarea/form/formikdoc.js index e8baa61955..6a5fdd8d99 100644 --- a/components/doc/inputtextarea/form/formikdoc.js +++ b/components/doc/inputtextarea/form/formikdoc.js @@ -43,7 +43,7 @@ export function FormikDoc(props) { basic: ` Toast ref={toast} /> Description Description Description +`, + javascript: ` +import React from 'react'; +import { SlideMenu } from 'primereact/slidemenu'; + +export default function PTDemo() { + const items = [ + { + label:'File', + icon:'pi pi-fw pi-file', + items:[ + { + label:'New', + icon:'pi pi-fw pi-plus', + items:[ + { + label:'Bookmark', + icon:'pi pi-fw pi-bookmark' + }, + { + label:'Video', + icon:'pi pi-fw pi-video' + }, + + ] + }, + { + label:'Delete', + icon:'pi pi-fw pi-trash' + }, + { + separator:true + }, + { + label:'Export', + icon:'pi pi-fw pi-external-link' + } + ] + }, + { + label:'Edit', + icon:'pi pi-fw pi-pencil', + items:[ + { + label:'Left', + icon:'pi pi-fw pi-align-left' + }, + { + label:'Right', + icon:'pi pi-fw pi-align-right' + }, + { + label:'Center', + icon:'pi pi-fw pi-align-center' + }, + { + label:'Justify', + icon:'pi pi-fw pi-align-justify' + }, + + ] + }, + { + label:'Users', + icon:'pi pi-fw pi-user', + items:[ + { + label:'New', + icon:'pi pi-fw pi-user-plus', + + }, + { + label:'Delete', + icon:'pi pi-fw pi-user-minus', + + }, + { + label:'Search', + icon:'pi pi-fw pi-users', + items:[ + { + label:'Filter', + icon:'pi pi-fw pi-filter', + items:[ + { + label:'Print', + icon:'pi pi-fw pi-print' + } + ] + }, + { + icon:'pi pi-fw pi-bars', + label:'List' + } + ] + } + ] + }, + { + label:'Events', + icon:'pi pi-fw pi-calendar', + items:[ + { + label:'Edit', + icon:'pi pi-fw pi-pencil', + items:[ + { + label:'Save', + icon:'pi pi-fw pi-calendar-plus' + }, + { + label:'Delete', + icon:'pi pi-fw pi-calendar-minus' + } + ] + }, + { + label:'Archive', + icon:'pi pi-fw pi-calendar-times', + items:[ + { + label:'Remove', + icon:'pi pi-fw pi-calendar-minus' + } + ] + } + ] + }, + { + separator:true + }, + { + label:'Quit', + icon:'pi pi-fw pi-power-off' + } + ]; + + return ( +
    + +
    + ) +} + `, + typescript: ` +import React from 'react'; +import { SlideMenu } from 'primereact/slidemenu'; +import { MenuItem } from 'primereact/menuitem'; + +export default function PTDemo() { + const items: MenuItem[] = [ + { + label:'File', + icon:'pi pi-fw pi-file', + items:[ + { + label:'New', + icon:'pi pi-fw pi-plus', + items:[ + { + label:'Bookmark', + icon:'pi pi-fw pi-bookmark' + }, + { + label:'Video', + icon:'pi pi-fw pi-video' + }, + + ] + }, + { + label:'Delete', + icon:'pi pi-fw pi-trash' + }, + { + separator:true + }, + { + label:'Export', + icon:'pi pi-fw pi-external-link' + } + ] + }, + { + label:'Edit', + icon:'pi pi-fw pi-pencil', + items:[ + { + label:'Left', + icon:'pi pi-fw pi-align-left' + }, + { + label:'Right', + icon:'pi pi-fw pi-align-right' + }, + { + label:'Center', + icon:'pi pi-fw pi-align-center' + }, + { + label:'Justify', + icon:'pi pi-fw pi-align-justify' + }, + + ] + }, + { + label:'Users', + icon:'pi pi-fw pi-user', + items:[ + { + label:'New', + icon:'pi pi-fw pi-user-plus', + + }, + { + label:'Delete', + icon:'pi pi-fw pi-user-minus', + + }, + { + label:'Search', + icon:'pi pi-fw pi-users', + items:[ + { + label:'Filter', + icon:'pi pi-fw pi-filter', + items:[ + { + label:'Print', + icon:'pi pi-fw pi-print' + } + ] + }, + { + icon:'pi pi-fw pi-bars', + label:'List' + } + ] + } + ] + }, + { + label:'Events', + icon:'pi pi-fw pi-calendar', + items:[ + { + label:'Edit', + icon:'pi pi-fw pi-pencil', + items:[ + { + label:'Save', + icon:'pi pi-fw pi-calendar-plus' + }, + { + label:'Delete', + icon:'pi pi-fw pi-calendar-minus' + } + ] + }, + { + label:'Archive', + icon:'pi pi-fw pi-calendar-times', + items:[ + { + label:'Remove', + icon:'pi pi-fw pi-calendar-minus' + } + ] + } + ] + }, + { + separator:true + }, + { + label:'Quit', + icon:'pi pi-fw pi-power-off' + } + ]; + + return ( +
    + +
    + ) +} + ` + }; + + return ( + <> + +
    + +
    + + + ); +} diff --git a/components/doc/slidemenu/pt/wireframe.js b/components/doc/slidemenu/pt/wireframe.js new file mode 100644 index 0000000000..fdf23d7b4a --- /dev/null +++ b/components/doc/slidemenu/pt/wireframe.js @@ -0,0 +1,15 @@ + +import React from 'react'; +import { DocSectionText } from '../../common/docsectiontext'; + +export const Wireframe = (props) => { + + return ( + <> + +
    + slidemenu +
    + + ); +}; diff --git a/components/layout/layout.js b/components/layout/layout.js index 7a71bc7179..beee18861e 100644 --- a/components/layout/layout.js +++ b/components/layout/layout.js @@ -1,7 +1,6 @@ import Head from 'next/head'; import { useRouter } from 'next/router'; -import { useEffect, useState } from 'react'; -import PrimeReact from '../lib/api/PrimeReact'; +import { useContext, useEffect, useState } from 'react'; import { classNames } from '../lib/utils/ClassNames'; import NewsSection from '../news/newssection'; import AppContentContext from './appcontentcontext'; @@ -9,13 +8,13 @@ import Config from './config'; import Footer from './footer'; import Menu from './menu'; import Topbar from './topbar'; +import { PrimeReactContext } from '../lib/api/context'; export default function Layout(props) { - const [inputStyle, setInputStyle] = useState('outlined'); - const [ripple, setRipple] = useState(true); const [sidebarActive, setSidebarActive] = useState(false); const [configActive, setConfigActive] = useState(false); const router = useRouter(); + const { ripple, setRipple, inputStyle, setInputStyle, setPt } = useContext(PrimeReactContext); const wrapperClassName = classNames('layout-wrapper', { 'layout-news-active': props.newsActive, @@ -64,6 +63,26 @@ export default function Layout(props) { setConfigActive(true); }; + useEffect(() => { + setRipple(true); + setInputStyle('outlined'); + setPt({ + panel: { + header: { + className: 'bg-green-500' + }, + footer: { + className: 'bg-red-500' + } + }, + autocomplete: { + root: { + className: 'bg-red-500' + } + } + }); + }, []); // eslint-disable-line react-hooks/exhaustive-deps + useEffect(() => { if (sidebarActive) document.body.classList.add('blocked-scroll'); else document.body.classList.remove('blocked-scroll'); @@ -81,7 +100,6 @@ export default function Layout(props) { }; }, []); // eslint-disable-line react-hooks/exhaustive-deps - PrimeReact.ripple = ripple; return (
    diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js index cc4ac3b73c..28447592c1 100644 --- a/components/lib/accordion/Accordion.js +++ b/components/lib/accordion/Accordion.js @@ -6,12 +6,13 @@ import { classNames, IconUtils, mergeProps, ObjectUtils, UniqueComponentId } fro import { AccordionBase, AccordionTabBase } from './AccordionBase'; import { ChevronRightIcon } from '../icons/chevronright'; import { ChevronDownIcon } from '../icons/chevrondown'; +import { PrimeReactContext } from '../api/context'; -export const AccordionTab = () => {}; +export const AccordionTab = () => { }; export const Accordion = React.forwardRef((inProps, ref) => { - const props = AccordionBase.getProps(inProps); - + const context = React.useContext(PrimeReactContext); + const props = AccordionBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex); const elementRef = React.useRef(null); diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js index 477604449a..72f3758c41 100644 --- a/components/lib/api/PrimeReact.js +++ b/components/lib/api/PrimeReact.js @@ -27,6 +27,8 @@ export default class PrimeReact { toast: 1200 }; + static pt = undefined; + static filterMatchModeOptions = { text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS], numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO], diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index e0271602f4..5cfcfd3ec0 100644 --- a/components/lib/api/api.d.ts +++ b/components/lib/api/api.d.ts @@ -6,6 +6,94 @@ * */ +import { AccordionPassThroughOptions, AccordionTabPassThroughOptions } from '../accordion/accordion'; +import { AutoCompletePassThroughOptions } from '../autocomplete/autocomplete'; +import { AvatarPassThroughOptions } from '../avatar/avatar'; +import { AvatarGroupPassThroughOptions } from '../avatargroup/avatargroup'; +import { BadgePassThroughOptions } from '../badge/badge'; +import { BlockUIPassThroughOptions } from '../blockui/blockui'; +import { BreadCrumbPassThroughOptions } from '../breadcrumb/breadcrumb'; +import { ButtonPassThroughOptions } from '../button/button'; +import { CalendarPassThroughOptions } from '../calendar/calendar'; +import { PanelPassThroughOptions } from '../panel/panel'; +import { CardPassThroughOptions } from '../card/card'; +import { CarouselPassThroughOptions } from '../carousel/carousel'; +import { CascadeSelectPassThroughOptions } from '../cascadeselect/cascadeselect'; +import { ChartPassThroughOptions } from '../chart/chart'; +import { CheckboxPassThroughOptions } from '../checkbox/checkbox'; +import { ChipPassThroughOptions } from '../chip/chip'; +import { ChipsPassThroughOptions } from '../chips/chips'; +import { ColorPickerPassThroughOptions } from '../colorpicker/colorpicker'; +import { ColumnGroupPassThroughOptions } from '../columngroup/columngroup'; +import { ConfirmDialogPassThroughOptions } from '../confirmdialog/confirmdialog'; +import { ConfirmPopupPassThroughOptions } from '../confirmpopup/confirmpopup'; +import { ContextMenuPassThroughOptions } from '../contextmenu/contextmenu'; +import { DataTablePassThroughOptions } from '../datatable/datatable'; +import { DataViewLayoutOptionsPassThroughOptions, DataViewPassThroughOptions } from '../dataview/dataview'; +import { DeferredContentPassThroughOptions } from '../deferredcontent/deferredcontent'; +import { DividerPassThroughOptions } from '../divider/divider'; +import { DockPassThroughOptions } from '../dock/dock'; +import { DialogPassThroughOptions } from '../dialog/dialog'; +import { DropdownPassThroughOptions } from '../dropdown/dropdown'; +import { EditorPassThroughOptions } from '../editor/editor'; +import { FieldsetPassThroughOptions } from '../fieldset/fieldset'; +import { FileUploadPassThroughOptions } from '../fileupload/fileupload'; +import { GalleriaPassThroughOptions } from '../galleria/galleria'; +import { ImagePassThroughOptions } from '../image/image'; +import { InplacePassThroughOptions } from '../inplace/inplace'; +import { InputNumberPassThroughOptions } from '../inputnumber/inputnumber'; +import { InputSwitchPassThroughOptions } from '../inputswitch/inputswitch'; +import { InputTextPassThroughOptions } from '../inputtext/inputtext'; +import { KnobPassThroughOptions } from '../knob/knob'; +import { ListboxPassThroughOptions } from '../listbox/listbox'; +import { MegaMenuPassThroughOptions } from '../megamenu/megamenu'; +import { MenuPassThroughOptions } from '../menu/menu'; +import { MenubarPassThroughOptions } from '../menubar/menubar'; +import { MessagePassThroughOptions } from '../message/message'; +import { MultiSelectPassThroughOptions } from '../multiselect/multiselect'; +import { OrderListPassThroughOptions } from '../orderlist/orderlist'; +import { OrganizationChartPassThroughOptions } from '../organizationchart/organizationchart'; +import { OverlayPanelPassThroughOptions } from '../overlaypanel/overlaypanel'; +import { PaginatorPassThroughOptions } from '../paginator/paginator'; +import { PanelMenuPassThroughOptions } from '../panelmenu/panelmenu'; +import { PasswordPassThroughOptions } from '../password/password'; +import { PickListPassThroughOptions } from '../picklist/picklist'; +import { ProgressBarPassThroughOptions } from '../progressbar/progressbar'; +import { ProgressSpinnerPassThroughOptions } from '../progressspinner/progressspinner'; +import { RadioButtonPassThroughOptions } from '../radiobutton/radiobutton'; +import { RowPassThroughOptions } from '../row/row'; +import { ScrollPanelPassThroughOptions } from '../scrollpanel/scrollpanel'; +import { ScrollTopPassThroughOptions } from '../scrolltop/scrolltop'; +import { SelectButtonPassThroughOptions } from '../selectbutton/selectbutton'; +import { SidebarPassThroughOptions } from '../sidebar/sidebar'; +import { SkeletonPassThroughOptions } from '../skeleton/skeleton'; +import { SpeedDialPassThroughOptions } from '../speeddial/speeddial'; +import { SplitButtonPassThroughOptions } from '../splitbutton/splitbutton'; +import { SplitterPassThroughOptions } from '../splitter/splitter'; +import { TabMenuPassThroughOptions } from '../tabmenu/tabmenu'; +import { TabPanelPassThroughOptions, TabViewPassThroughOptions } from '../tabview/tabview'; +import { TagPassThroughOptions } from '../tag/tag'; +import { TerminalPassThroughOptions } from '../terminal/terminal'; +import { TieredMenuPassThroughOptions } from '../tieredmenu/tieredmenu'; +import { TimelinePassThroughOptions } from '../timeline/timeline'; +import { ToastPassThroughOptions } from '../toast/toast'; +import { ToolbarPassThroughOptions } from '../toolbar/toolbar'; +import { TreePassThroughOptions } from '../tree/tree'; +import { TreeSelectPassThroughOptions } from '../treeselect/treeselect'; +import { TreeTablePassThroughOptions } from '../treetable/treetable'; +import { VirtualScrollerPassThroughOptions } from '../virtualscroller/virtualscroller'; +import { InputTextareaPassThroughOptions } from '../inputtextarea/inputtextarea'; +import { MessagesPassThroughOptions } from '../messages/messages'; +import { ColumnPassThroughOptions } from '../column/column'; +import { MentionPassThroughOptions } from '../mention/mention'; +import { MultiStateCheckboxPassThroughOptions } from '../multistatecheckbox/multistatecheckbox'; +import { RatingPassThroughOptions } from '../rating/rating'; +import { SlideMenuPassThroughOptions } from '../slidemenu/slidemenu'; +import { SliderPassThroughOptions } from '../slider/slider'; +import { StepsPassThroughOptions } from '../steps/steps'; +import { ToggleButtonPassThroughOptions } from '../togglebutton/togglebutton'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; + // Config export interface ZIndexOptions { modal: number; @@ -37,9 +125,104 @@ export interface APIOptions { nullSortOrder?: number; ripple?: boolean; zIndex?: ZIndexOptions; + pt?: PrimeReactPTOptions; changeTheme?(theme?: string, newTheme?: string, linkElementId?: string, callback?: () => void): void; } +export interface PrimeReactPTOptions { + accordion?: AccordionPassThroughOptions; + accordiontab?: AccordionTabPassThroughOptions; + autocomplete?: AutoCompletePassThroughOptions; + avatar?: AvatarPassThroughOptions; + avatargroup?: AvatarGroupPassThroughOptions; + badge?: BadgePassThroughOptions; + blockui?: BlockUIPassThroughOptions; + breadcrumb?: BreadCrumbPassThroughOptions; + button?: ButtonPassThroughOptions; + calendar?: CalendarPassThroughOptions; + card?: CardPassThroughOptions; + carousel?: CarouselPassThroughOptions; + cascadeselect?: CascadeSelectPassThroughOptions; + chart?: ChartPassThroughOptions; + checkbox?: CheckboxPassThroughOptions; + chip?: ChipPassThroughOptions; + chips?: ChipsPassThroughOptions; + colorpicker?: ColorPickerPassThroughOptions; + column?: ColumnPassThroughOptions; + columngroup?: ColumnGroupPassThroughOptions; + confirmdialog?: ConfirmDialogPassThroughOptions; + confirmpopup?: ConfirmPopupPassThroughOptions; + contextmenu?: ContextMenuPassThroughOptions; + datatable?: DataTablePassThroughOptions; + dataview?: DataViewPassThroughOptions; + dataviewlayoutoptions?: DataViewLayoutOptionsPassThroughOptions; + deferredcontent?: DeferredContentPassThroughOptions; + dialog?: DialogPassThroughOptions; + divider?: DividerPassThroughOptions; + dock?: DockPassThroughOptions; + dropdown?: DropdownPassThroughOptions; + editor?: EditorPassThroughOptions; + fieldset?: FieldsetPassThroughOptions; + fileupload?: FileUploadPassThroughOptions; + galleria?: GalleriaPassThroughOptions; + image?: ImagePassThroughOptions; + inplace?: InplacePassThroughOptions; + inputmask?: InputTextPassThroughOptions; + inputnumber?: InputNumberPassThroughOptions; + inputswitch?: InputSwitchPassThroughOptions; + inputtext?: InputTextPassThroughOptions; + inputtextarea?: InputTextareaPassThroughOptions; + knob?: KnobPassThroughOptions; + listbox?: ListboxPassThroughOptions; + megamenu?: MegaMenuPassThroughOptions; + mention?: MentionPassThroughOptions; + menu?: MenuPassThroughOptions; + menubar?: MenubarPassThroughOptions; + message?: MessagePassThroughOptions; + messages?: MessagesPassThroughOptions; + multiselect?: MultiSelectPassThroughOptions; + multisatecheckbox?: MultiStateCheckboxPassThroughOptions; + orderlist?: OrderListPassThroughOptions; + organizationchart?: OrganizationChartPassThroughOptions; + overlaypanel?: OverlayPanelPassThroughOptions; + paginator?: PaginatorPassThroughOptions; + panel?: PanelPassThroughOptions; + panelmenu?: PanelMenuPassThroughOptions; + password?: PasswordPassThroughOptions; + picklist?: PickListPassThroughOptions; + progressbar?: ProgressBarPassThroughOptions; + progressspinner?: ProgressSpinnerPassThroughOptions; + radiobutton?: RadioButtonPassThroughOptions; + rating?: RatingPassThroughOptions; + row?: RowPassThroughOptions; + scrollpanel?: ScrollPanelPassThroughOptions; + scrolltop?: ScrollTopPassThroughOptions; + selectbutton?: SelectButtonPassThroughOptions; + sidebar?: SidebarPassThroughOptions; + skeleton?: SkeletonPassThroughOptions; + slidemenu?: SlideMenuPassThroughOptions; + slider?: SliderPassThroughOptions; + speeddial?: SpeedDialPassThroughOptions; + splitbutton?: SplitButtonPassThroughOptions; + splitter?: SplitterPassThroughOptions; + steps?: StepsPassThroughOptions; + tabmenu?: TabMenuPassThroughOptions; + tabpanel?: TabPanelPassThroughOptions; + tabview?: TabViewPassThroughOptions; + tag?: TagPassThroughOptions; + terminal?: TerminalPassThroughOptions; + tieredmenu?: TieredMenuPassThroughOptions; + timeline?: TimelinePassThroughOptions; + toast?: ToastPassThroughOptions; + togglebutton?: ToggleButtonPassThroughOptions; + toolbar?: ToolbarPassThroughOptions; + tooltip?: TooltipPassThroughOptions; + tree?: TreePassThroughOptions; + treeselect?: TreeSelectPassThroughOptions; + treetable?: TreeTablePassThroughOptions; + virtualscroller?: VirtualScrollerPassThroughOptions; +} + declare const PrimeReact: APIOptions; export default PrimeReact; diff --git a/components/lib/api/context.js b/components/lib/api/context.js new file mode 100644 index 0000000000..cdf193290e --- /dev/null +++ b/components/lib/api/context.js @@ -0,0 +1,82 @@ +import React, { useState } from 'react'; +import { FilterMatchMode } from './FilterMatchMode'; + +export const PrimeReactContext = React.createContext(); + +export const PrimeReactProvider = (props) => { + const [ripple, setRipple] = useState(false); + const [inputStyle, setInputStyle] = useState('outlined'); + const [locale, setLocale] = useState('en'); + const [appendTo, setAppendTo] = useState(null); + const [cssTransition, setCssTransition] = useState(true); + const [autoZIndex, setAutoZIndex] = useState(true); + const [hideOverlaysOnDocumentScrolling, setHideOverlaysOnDocumentScrolling] = useState(false); + const [nonce, setNonce] = useState(null); + const [nullSortOrder, setNullSortOrder] = useState(1); + const [zIndex, setZIndex] = useState({ + modal: 1100, + overlay: 1000, + menu: 1000, + tooltip: 1100, + toast: 1200 + }); + const [pt, setPt] = useState(undefined); + const [filterMatchModeOptions, setFilterMatchModeOptions] = useState({ + text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS], + numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO], + date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER] + }); + + const changeTheme = (currentTheme, newTheme, linkElementId, callback) => { + const linkElement = document.getElementById(linkElementId); + const cloneLinkElement = linkElement.cloneNode(true); + const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme); + + cloneLinkElement.setAttribute('id', linkElementId + '-clone'); + cloneLinkElement.setAttribute('href', newThemeUrl); + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', linkElementId); + + if (callback) { + callback(); + } + }); + linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); + }; + + + const value = { + changeTheme, + ripple, + setRipple, + inputStyle, + setInputStyle, + locale, + setLocale, + appendTo, + setAppendTo, + cssTransition, + setCssTransition, + autoZIndex, + setAutoZIndex, + hideOverlaysOnDocumentScrolling, + setHideOverlaysOnDocumentScrolling, + nonce, + setNonce, + nullSortOrder, + setNullSortOrder, + zIndex, + setZIndex, + pt, + setPt, + filterMatchModeOptions, + setFilterMatchModeOptions + }; + + return ( + + {props.children} + + ); +}; diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index 149011bd33..5eb929a8e8 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -11,10 +11,12 @@ import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { AutoCompleteBase } from './AutoCompleteBase'; import { AutoCompletePanel } from './AutoCompletePanel'; +import { PrimeReactContext } from '../api/context'; export const AutoComplete = React.memo( React.forwardRef((inProps, ref) => { - const props = AutoCompleteBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = AutoCompleteBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); const [searchingState, setSearchingState] = React.useState(false); const [focusedState, setFocusedState] = React.useState(false); @@ -35,7 +37,6 @@ export const AutoComplete = React.memo( const virtualScrollerRef = React.useRef(null); const timeout = React.useRef(null); const selectedItem = React.useRef(null); - const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({ target: elementRef, overlay: overlayRef, @@ -188,7 +189,7 @@ export const AutoComplete = React.memo( }; const onOverlayEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); }; @@ -218,7 +219,7 @@ export const AutoComplete = React.memo( const alignOverlay = () => { const target = props.multiple ? multiContainerRef.current : inputRef.current; - DomHandler.alignOverlay(overlayRef.current, target, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, target, props.appendTo || context.appendTo); }; const onPanelClick = (event) => { diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js index fe9277ae42..453cb46c24 100644 --- a/components/lib/autocomplete/AutoCompletePanel.js +++ b/components/lib/autocomplete/AutoCompletePanel.js @@ -5,9 +5,12 @@ import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; +import { PrimeReactContext } from '../api/context'; export const AutoCompletePanel = React.memo( React.forwardRef((props, ref) => { + const { inputStyle, ripple } = React.useContext(PrimeReactContext); + const getPTOptions = (item, key) => { return props.ptm(key, { context: { @@ -194,8 +197,8 @@ export const AutoCompletePanel = React.memo( const createElement = () => { const className = classNames('p-autocomplete-panel p-component', props.panelClassName, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': inputStyle === 'filled', + 'p-ripple-disabled': ripple === false }); const style = { ...(props.panelStyle || {}) }; const content = createContent(); diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js index 94274af3ea..04bb57e50f 100644 --- a/components/lib/avatar/Avatar.js +++ b/components/lib/avatar/Avatar.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { classNames, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; import { AvatarBase } from './AvatarBase'; +import { PrimeReactContext } from '../api/context'; export const Avatar = React.forwardRef((inProps, ref) => { - const props = AvatarBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = AvatarBase.getProps(inProps, context); const elementRef = React.useRef(null); const [imageFailed, setImageFailed] = React.useState(false); diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js index 6950104cb1..f6c83c1e78 100644 --- a/components/lib/avatargroup/AvatarGroup.js +++ b/components/lib/avatargroup/AvatarGroup.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { classNames, mergeProps } from '../utils/Utils'; import { AvatarGroupBase } from './AvatarGroupBase'; +import { PrimeReactContext } from '../api/context'; export const AvatarGroup = React.forwardRef((inProps, ref) => { - const props = AvatarGroupBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = AvatarGroupBase.getProps(inProps, context); const { ptm } = AvatarGroupBase.setMetaData({ props diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js index 6b54d123ad..e171a603de 100644 --- a/components/lib/badge/Badge.js +++ b/components/lib/badge/Badge.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { classNames, ObjectUtils, mergeProps } from '../utils/Utils'; import { BadgeBase } from './BadgeBase'; +import { PrimeReactContext } from '../api/context'; export const Badge = React.memo( React.forwardRef((inProps, ref) => { - const props = BadgeBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = BadgeBase.getProps(inProps, context); const { ptm } = BadgeBase.setMetaData({ props diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js index 831b6ad7db..b10c7ffb7b 100644 --- a/components/lib/blockui/BlockUI.js +++ b/components/lib/blockui/BlockUI.js @@ -1,12 +1,13 @@ import * as React from 'react'; -import PrimeReact from '../api/Api'; import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils'; import { BlockUIBase } from './BlockUIBase'; +import { PrimeReactContext } from '../api/context'; export const BlockUI = React.forwardRef((inProps, ref) => { - const props = BlockUIBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = BlockUIBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(props.blocked); const elementRef = React.useRef(null); @@ -48,7 +49,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => { if (props.autoZIndex) { const key = props.fullScreen ? 'modal' : 'overlay'; - ZIndexUtils.set(key, maskRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex[key]); + ZIndexUtils.set(key, maskRef.current, context.autoZIndex, props.baseZIndex || context.zIndex[key]); } props.onBlocked && props.onBlocked(); diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js index 938732bdec..2cbc47a70a 100644 --- a/components/lib/breadcrumb/BreadCrumb.js +++ b/components/lib/breadcrumb/BreadCrumb.js @@ -2,10 +2,12 @@ import * as React from 'react'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { BreadCrumbBase } from './BreadCrumbBase'; import { ChevronRightIcon } from '../icons/chevronright'; +import { PrimeReactContext } from '../api/context'; export const BreadCrumb = React.memo( React.forwardRef((inProps, ref) => { - const props = BreadCrumbBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = BreadCrumbBase.getProps(inProps, context); const { ptm } = BreadCrumbBase.setMetaData({ props }); diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js index aa5e69d7b7..c5b8c5bb96 100644 --- a/components/lib/button/Button.js +++ b/components/lib/button/Button.js @@ -4,10 +4,12 @@ import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { ButtonBase } from './ButtonBase'; +import { PrimeReactContext } from '../api/context'; export const Button = React.memo( React.forwardRef((inProps, ref) => { - const props = ButtonBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ButtonBase.getProps(inProps, context); const { ptm } = ButtonBase.setMetaData({ props diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 851fc0236d..8d389ffb43 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import PrimeReact, { localeOption, localeOptions } from '../api/Api'; +import { localeOption, localeOptions } from '../api/Api'; import { Button } from '../button/Button'; import { useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { CalendarIcon } from '../icons/calendar'; @@ -13,9 +13,12 @@ import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mask, mergeProps } from '../utils/Utils'; import { CalendarBase } from './CalendarBase'; import { CalendarPanel } from './CalendarPanel'; +import { PrimeReactContext } from '../api/context'; + export const Calendar = React.memo( React.forwardRef((inProps, ref) => { - const props = CalendarBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = CalendarBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [viewDateState, setViewDateState] = React.useState(null); @@ -1485,7 +1488,7 @@ export const Calendar = React.memo( if (props.autoZIndex) { const key = props.touchUI ? 'modal' : 'overlay'; - ZIndexUtils.set(key, overlayRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex[key]); + ZIndexUtils.set(key, overlayRef.current, context.autoZIndex, props.baseZIndex || context.zIndex[key]); } alignOverlay(); @@ -1514,7 +1517,7 @@ export const Calendar = React.memo( if (props.touchUI) { enableModality(); } else if (overlayRef && overlayRef.current && inputRef && inputRef.current) { - DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || context.appendTo); if (appendDisabled()) { DomHandler.relativePosition(overlayRef.current, inputRef.current); @@ -2048,14 +2051,14 @@ export const Calendar = React.memo( let iFormat; const lookAhead = (match) => { - const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match; + const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match; - if (matches) { - iFormat++; - } + if (matches) { + iFormat++; + } - return matches; - }, + return matches; + }, formatNumber = (match, value, len) => { let num = '' + value; @@ -3641,8 +3644,8 @@ export const Calendar = React.memo( 'p-datepicker-multiple-month': props.numberOfMonths > 1, 'p-datepicker-monthpicker': currentView === 'month', 'p-datepicker-touch-ui': props.touchUI, - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }); const content = createContent(); const datePicker = createDatePicker(); diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js index c9a30e927b..bb2397a13c 100644 --- a/components/lib/card/Card.js +++ b/components/lib/card/Card.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { classNames, ObjectUtils, mergeProps } from '../utils/Utils'; import { CardBase } from './CardBase'; +import { PrimeReactContext } from '../api/context'; export const Card = React.forwardRef((inProps, ref) => { - const props = CardBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = CardBase.getProps(inProps, context); const elementRef = React.useRef(ref); diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js index cc85d65a31..6d4c044e8b 100644 --- a/components/lib/carousel/Carousel.js +++ b/components/lib/carousel/Carousel.js @@ -8,6 +8,7 @@ import { ChevronUpIcon } from '../icons/chevronup'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; import { CarouselBase } from './CarouselBase'; +import { PrimeReactContext } from '../api/context'; const CarouselItem = React.memo((props) => { const content = props.template(props.item); @@ -29,7 +30,8 @@ const CarouselItem = React.memo((props) => { export const Carousel = React.memo( React.forwardRef((inProps, ref) => { - const props = CarouselBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = CarouselBase.getProps(inProps, context); const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible); const [numScrollState, setNumScrollState] = React.useState(props.numScroll); @@ -252,7 +254,7 @@ export const Carousel = React.memo( const createStyle = () => { if (!carouselStyle.current) { - carouselStyle.current = DomHandler.createInlineStyle(PrimeReact.nonce); + carouselStyle.current = DomHandler.createInlineStyle(context.nonce); } let innerHTML = ` @@ -267,7 +269,7 @@ export const Carousel = React.memo( const value1 = data1.breakpoint; const value2 = data2.breakpoint; - return ObjectUtils.sort(value1, value2, -1, PrimeReact.locale, PrimeReact.nullSortOrder); + return ObjectUtils.sort(value1, value2, -1, context.locale, context.nullSortOrder); }); for (let i = 0; i < responsiveOptions.current.length; i++) { diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js index a357882c31..6b6481f4ca 100644 --- a/components/lib/cascadeselect/CascadeSelect.js +++ b/components/lib/cascadeselect/CascadeSelect.js @@ -8,9 +8,12 @@ import { Portal } from '../portal/Portal'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { CascadeSelectBase } from './CascadeSelectBase'; import { CascadeSelectSub } from './CascadeSelectSub'; +import { PrimeReactContext } from '../api/context'; + export const CascadeSelect = React.memo( React.forwardRef((inProps, ref) => { - const props = CascadeSelectBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = CascadeSelectBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [attributeSelectorState, setAttributeSelectorState] = React.useState(null); @@ -179,7 +182,7 @@ export const CascadeSelect = React.memo( }; const onOverlayEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); if (attributeSelectorState && props.breakpoint) { @@ -206,12 +209,12 @@ export const CascadeSelect = React.memo( }; const alignOverlay = () => { - DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || context.appendTo); }; const createStyle = () => { if (!styleElementRef.current) { - styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElementRef.current = DomHandler.createInlineStyle(context.nonce); const selector = `${attributeSelectorState}_panel`; const innerHTML = ` diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js index 1e2b625ae7..58da7e3a5b 100644 --- a/components/lib/cascadeselect/CascadeSelectSub.js +++ b/components/lib/cascadeselect/CascadeSelectSub.js @@ -4,10 +4,12 @@ import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { AngleRightIcon } from '../icons/angleright'; +import { PrimeReactContext } from '../api/context'; export const CascadeSelectSub = React.memo((props) => { const [activeOptionState, setActiveOptionState] = React.useState(null); const elementRef = React.useRef(null); const ptm = props.ptm; + const { inputStyle, ripple } = React.useContext(PrimeReactContext); const position = () => { const parentItem = elementRef.current.parentElement; @@ -262,8 +264,8 @@ export const CascadeSelectSub = React.memo((props) => { }; const className = classNames('p-cascadeselect-panel p-cascadeselect-items', props.className, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': inputStyle === 'filled', + 'p-ripple-disabled': ripple === false }); const submenu = createMenu(); const listProps = mergeProps( diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js index 851285135b..f5eb87dc92 100644 --- a/components/lib/chart/Chart.js +++ b/components/lib/chart/Chart.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { useUnmountEffect } from '../hooks/Hooks'; import { classNames, mergeProps } from '../utils/Utils'; import { ChartBase } from './ChartBase'; +import { PrimeReactContext } from '../api/context'; // GitHub #3059 wrapper if loaded by script tag const ChartJS = (function () { @@ -14,7 +15,8 @@ const ChartJS = (function () { const PrimeReactChart = React.memo( React.forwardRef((inProps, ref) => { - const props = ChartBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ChartBase.getProps(inProps, context); const { ptm } = ChartBase.setMetaData({ props }); diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index a43e3d9ae4..af8e62acdd 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -4,9 +4,12 @@ import { CheckIcon } from '../icons/check'; import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { CheckboxBase } from './CheckboxBase'; +import { PrimeReactContext } from '../api/context'; + export const Checkbox = React.memo( React.forwardRef((inProps, ref) => { - const props = CheckboxBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = CheckboxBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const { ptm } = CheckboxBase.setMetaData({ props, diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js index b1d0bad6dc..6cb30dc595 100644 --- a/components/lib/chip/Chip.js +++ b/components/lib/chip/Chip.js @@ -2,9 +2,12 @@ import * as React from 'react'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { ChipBase } from './ChipBase'; import { TimesCircleIcon } from '../icons/timescircle'; +import { PrimeReactContext } from '../api/context'; + export const Chip = React.memo( React.forwardRef((inProps, ref) => { - const props = ChipBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ChipBase.getProps(inProps, context); const elementRef = React.useRef(null); const [visibleState, setVisibleState] = React.useState(true); diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js index 468863bfa2..36ad94b355 100644 --- a/components/lib/chips/Chips.js +++ b/components/lib/chips/Chips.js @@ -5,10 +5,12 @@ import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { ChipsBase } from './ChipsBase'; +import { PrimeReactContext } from '../api/context'; export const Chips = React.memo( React.forwardRef((inProps, ref) => { - const props = ChipsBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ChipsBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const { ptm } = ChipsBase.setMetaData({ props, diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js index 2d78f57dbc..53172d9dc8 100644 --- a/components/lib/colorpicker/ColorPicker.js +++ b/components/lib/colorpicker/ColorPicker.js @@ -6,10 +6,12 @@ import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { ColorPickerBase } from './ColorPickerBase'; import { ColorPickerPanel } from './ColorPickerPanel'; +import { PrimeReactContext } from '../api/context'; export const ColorPicker = React.memo( React.forwardRef((inProps, ref) => { - const props = ColorPickerBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ColorPickerBase.getProps(inProps, context); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const { ptm } = ColorPickerBase.setMetaData({ props, @@ -222,8 +224,8 @@ export const ColorPicker = React.memo( if (props.onChange) { props.onChange({ value: value, - stopPropagation: () => {}, - preventDefault: () => {}, + stopPropagation: () => { }, + preventDefault: () => { }, target: { name: props.name, id: props.id, @@ -273,7 +275,7 @@ export const ColorPicker = React.memo( }; const onOverlayEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); }; @@ -482,7 +484,7 @@ export const ColorPicker = React.memo( const alignOverlay = () => { if (inputRef.current) { - DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context.appendTo); } }; diff --git a/components/lib/colorpicker/ColorPickerPanel.js b/components/lib/colorpicker/ColorPickerPanel.js index 18f7a68253..286f0a4c4e 100644 --- a/components/lib/colorpicker/ColorPickerPanel.js +++ b/components/lib/colorpicker/ColorPickerPanel.js @@ -3,14 +3,17 @@ import PrimeReact from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { Portal } from '../portal/Portal'; import { classNames, mergeProps } from '../utils/Utils'; +import { PrimeReactContext } from '../api/context'; export const ColorPickerPanel = React.forwardRef((props, ref) => { + const { inputStyle, ripple } = React.useContext(PrimeReactContext); + const createElement = () => { const className = classNames('p-colorpicker-panel', props.panelClassName, { 'p-colorpicker-overlay-panel': !props.inline, 'p-disabled': props.disabled, - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': inputStyle === 'filled', + 'p-ripple-disabled': ripple === false }); const panelProps = mergeProps( { diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index 67530a5d63..b81b6dbd4e 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -4,19 +4,58 @@ export const ComponentBase = { defaultProps: { pt: undefined }, + context: undefined, extend: (props = {}) => { const defaultProps = { ...props.defaultProps, ...ComponentBase.defaultProps }; - const getProps = (props) => ObjectUtils.getMergedProps(props, defaultProps); + const getProps = (props, context = {}) => { + ComponentBase.context = context; + + return ObjectUtils.getMergedProps(props, defaultProps) + }; + const getOtherProps = (props) => ObjectUtils.getDiffProps(props, defaultProps); - const getPTItem = (obj = {}, key = '') => { - const fKey = ObjectUtils.convertToFlatCase(key); + const getOptionValue = (obj = {}, key = '', params = {}) => { + const fKeys = String(ObjectUtils.convertToFlatCase(key)).split('.'); + const fKey = fKeys.shift(); + const matchedPTOption = Object.keys(obj).find(k => ObjectUtils.convertToFlatCase(k) === fKey) || ''; + + return fKey + ? ObjectUtils.isObject(obj) + ? getOptionValue(ObjectUtils.getJSXElement(obj[matchedPTOption], params), fKeys.join('.'), params) + : undefined + : ObjectUtils.getJSXElement(obj, params); - return obj[Object.keys(obj).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || '']; }; - const getPTValue = (obj = {}, key = '', params = {}) => ObjectUtils.getPropValue(getPTItem(obj, key), params); + const getPTValue = (obj = {}, key = '', params = {}) => { + const datasetPrefix = 'data-pc-'; + const componentName = params.props && params.props.__TYPE && ObjectUtils.convertToFlatCase(params.props.__TYPE) || ''; + const pt = ComponentBase.context.pt || {}; + + const defaultPT = (key) => pt && getOptionValue(pt[componentName], key); + const self = ObjectUtils.getPropValue(obj, key, params)[key]; + const globalPT = defaultPT(key); + const datasetProps = { + ...(key === 'root' && { [`${datasetPrefix}name`]: componentName }), + [`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key) + }; + + let merged = { + ...ObjectUtils.getMergedProps(globalPT, self) + }; + + if (Object.keys(datasetProps).length) { + merged = { + ...merged, + ...datasetProps + }; + } + + return merged; + + }; const setMetaData = (metadata = {}) => { const ptm = (key = '', params = {}) => ptmo((metadata.props || {}).pt, key, { ...metadata, ...params }); diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js index b3008fc1cd..389e47b0a8 100644 --- a/components/lib/confirmdialog/ConfirmDialog.js +++ b/components/lib/confirmdialog/ConfirmDialog.js @@ -7,6 +7,7 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { ConfirmDialogBase } from './ConfirmDialogBase'; +import { PrimeReactContext } from '../api/context'; export const confirmDialog = (props = {}) => { props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } }; @@ -25,7 +26,8 @@ export const confirmDialog = (props = {}) => { export const ConfirmDialog = React.memo( React.forwardRef((inProps, ref) => { - const props = ConfirmDialogBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ConfirmDialogBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(props.visible); const [reshowState, setReshowState] = React.useState(false); diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js index 70d35a7a3b..4ad13adb8b 100644 --- a/components/lib/confirmpopup/ConfirmPopup.js +++ b/components/lib/confirmpopup/ConfirmPopup.js @@ -7,6 +7,7 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { ConfirmPopupBase } from './ConfirmPopupBase'; +import { PrimeReactContext } from '../api/context'; export const confirmPopup = (props = {}) => { props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } }; @@ -25,7 +26,8 @@ export const confirmPopup = (props = {}) => { export const ConfirmPopup = React.memo( React.forwardRef((inProps, ref) => { - const props = ConfirmPopupBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ConfirmPopupBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(props.visible); const [reshowState, setReshowState] = React.useState(false); @@ -111,7 +113,7 @@ export const ConfirmPopup = React.memo( }; const onEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); align(); }; @@ -305,8 +307,8 @@ export const ConfirmPopup = React.memo( const createElement = () => { const className = classNames('p-confirm-popup p-component', getPropValue('className'), { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }); const content = createContent(); const footer = createFooter(); diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js index 2cc2406c27..f0c29e211f 100644 --- a/components/lib/contextmenu/ContextMenu.js +++ b/components/lib/contextmenu/ContextMenu.js @@ -6,10 +6,12 @@ import { Portal } from '../portal/Portal'; import { classNames, DomHandler, mergeProps, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; import { ContextMenuBase } from './ContextMenuBase'; import { ContextMenuSub } from './ContextMenuSub'; +import { PrimeReactContext } from '../api/context'; export const ContextMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = ContextMenuBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ContextMenuBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(false); const [reshowState, setReshowState] = React.useState(false); @@ -56,7 +58,7 @@ export const ContextMenu = React.memo( const createStyle = () => { if (!styleElementRef.current) { - styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElementRef.current = DomHandler.createInlineStyle(context.nonce); const selector = `${attributeSelectorState}`; const innerHTML = ` @@ -127,7 +129,7 @@ export const ContextMenu = React.memo( const onEnter = () => { if (props.autoZIndex) { - ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']); + ZIndexUtils.set('menu', menuRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['menu']); } position(currentEvent.current); @@ -250,8 +252,8 @@ export const ContextMenu = React.memo( const createContextMenu = () => { const className = classNames('p-contextmenu p-component', props.className, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }); const rootProps = mergeProps( diff --git a/components/lib/csstransition/CSSTransition.js b/components/lib/csstransition/CSSTransition.js index a06364d2f2..efd8652e14 100644 --- a/components/lib/csstransition/CSSTransition.js +++ b/components/lib/csstransition/CSSTransition.js @@ -1,14 +1,15 @@ import * as React from 'react'; import { CSSTransition as ReactCSSTransition } from 'react-transition-group'; -import PrimeReact from '../api/Api'; import { useUpdateEffect } from '../hooks/Hooks'; import { ObjectUtils } from '../utils/Utils'; import { CSSTransitionBase } from './CSSTransitionBase'; +import { PrimeReactContext } from '../api/context'; export const CSSTransition = React.forwardRef((inProps, ref) => { const props = CSSTransitionBase.getProps(inProps); + const { cssTransition } = React.useContext(PrimeReactContext); - const disabled = props.disabled || (props.options && props.options.disabled) || !PrimeReact.cssTransition; + const disabled = props.disabled || (props.options && props.options.disabled) || !cssTransition; const onEnter = (node, isAppearing) => { props.onEnter && props.onEnter(node, isAppearing); // component diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js index deb838eb63..eb219da6de 100644 --- a/components/lib/datascroller/DataScroller.js +++ b/components/lib/datascroller/DataScroller.js @@ -3,10 +3,12 @@ import { localeOption } from '../api/Api'; import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { classNames, ObjectUtils } from '../utils/Utils'; import { DataScrollerBase } from './DataScrollerBase'; +import { PrimeReactContext } from '../api/context'; export const DataScroller = React.memo( React.forwardRef((inProps, ref) => { - const props = DataScrollerBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DataScrollerBase.getProps(inProps, context); const [dataToRenderState, setDataToRenderState] = React.useState([]); const elementRef = React.useRef(null); diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js index aa1e52e87b..e946c53c13 100644 --- a/components/lib/datatable/ColumnFilter.js +++ b/components/lib/datatable/ColumnFilter.js @@ -14,6 +14,7 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; +import { PrimeReactContext } from '../api/context'; export const ColumnFilter = React.memo((props) => { const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -23,6 +24,7 @@ export const ColumnFilter = React.memo((props) => { const overlayEventListener = React.useRef(null); const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); const getColumnProps = () => ColumnBase.getCProps(props.column); + const { filterMatchModeOptions, zIndex, appendTo, autoZIndex, inputStyle, ripple } = React.useContext(PrimeReactContext); const getColumnPTOptions = (key) => { return props.ptCallbacks.ptmo(getColumnProps(), key, { @@ -74,7 +76,7 @@ export const ColumnFilter = React.memo((props) => { }; const matchModes = () => { - return getColumnProp('filterMatchModeOptions') || PrimeReact.filterMatchModeOptions[findDataType()].map((key) => ({ label: localeOption(key), value: key })); + return getColumnProp('filterMatchModeOptions') || filterMatchModeOptions[findDataType()].map((key) => ({ label: localeOption(key), value: key })); }; const isShowMatchModes = () => { @@ -119,14 +121,14 @@ export const ColumnFilter = React.memo((props) => { const findDataType = () => { const dataType = getColumnProp('dataType'); const matchMode = getColumnProp('filterMatchMode'); - const hasMatchMode = (key) => PrimeReact.filterMatchModeOptions[key].some((mode) => mode === matchMode); + const hasMatchMode = (key) => filterMatchModeOptions[key].some((mode) => mode === matchMode); if (matchMode === 'custom' && !hasMatchMode(dataType)) { - PrimeReact.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM); + filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM); return dataType; } else if (matchMode) { - return Object.keys(PrimeReact.filterMatchModeOptions).find((key) => hasMatchMode(key)) || dataType; + return Object.keys(filterMatchModeOptions).find((key) => hasMatchMode(key)) || dataType; } return dataType; @@ -358,8 +360,8 @@ export const ColumnFilter = React.memo((props) => { }; const onOverlayEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); - DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact.appendTo, false); + ZIndexUtils.set('overlay', overlayRef.current, autoZIndex, zIndex['overlay']); + DomHandler.alignOverlay(overlayRef.current, iconRef.current, appendTo, false); overlayEventListener.current = (e) => { if (!isOutsideClicked(e.target)) { @@ -444,7 +446,7 @@ export const ColumnFilter = React.memo((props) => { useUpdateEffect(() => { if (props.display === 'menu' && overlayVisibleState) { - DomHandler.alignOverlay(overlayRef.current, iconRef.current, PrimeReact.appendTo, false); + DomHandler.alignOverlay(overlayRef.current, iconRef.current, appendTo, false); } }); @@ -805,8 +807,8 @@ export const ColumnFilter = React.memo((props) => { const style = getColumnProp('filterMenuStyle'); const className = classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), { 'p-column-filter-overlay-menu': props.display === 'menu', - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': inputStyle === 'filled', + 'p-ripple-disabled': ripple === false }); const filterHeader = ObjectUtils.getJSXElement(getColumnProp('filterHeader'), { field, filterModel, filterApplyCallback }); const filterFooter = ObjectUtils.getJSXElement(getColumnProp('filterFooter'), { field, filterModel, filterApplyCallback }); diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index fb38519187..29176f966a 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -12,9 +12,11 @@ import { DataTableBase } from './DataTableBase'; import { TableBody } from './TableBody'; import { TableFooter } from './TableFooter'; import { TableHeader } from './TableHeader'; +import { PrimeReactContext } from '../api/context'; export const DataTable = React.forwardRef((inProps, ref) => { - const props = DataTableBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DataTableBase.getProps(inProps, context); const [firstState, setFirstState] = React.useState(props.first); const [rowsState, setRowsState] = React.useState(props.rows); const [sortFieldState, setSortFieldState] = React.useState(props.sortField); @@ -769,12 +771,12 @@ export const DataTable = React.forwardRef((inProps, ref) => { }; const createStyleElement = () => { - styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElement.current = DomHandler.createInlineStyle(context.nonce); }; const createResponsiveStyle = () => { if (!responsiveStyleElement.current) { - responsiveStyleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce); + responsiveStyleElement.current = DomHandler.createInlineStyle(context.nonce); let tableSelector = `.p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`; let selector = `.p-datatable[${attributeSelector.current}] > ${tableSelector}`; @@ -909,7 +911,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { }; const compareValuesOnSort = (value1, value2, order) => { - return ObjectUtils.sort(value1, value2, order, PrimeReact.locale, PrimeReact.nullSortOrder); + return ObjectUtils.sort(value1, value2, order, context.locale, context.nullSortOrder); }; const addSortMeta = (meta, multiSortMeta) => { @@ -995,7 +997,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { const value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field); // check if they are equal handling dates and locales - if (ObjectUtils.compare(value1, value2, PrimeReact.locale) === 0) { + if (ObjectUtils.compare(value1, value2, context.locale) === 0) { return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1) : 0; } @@ -1127,11 +1129,11 @@ export const DataTable = React.forwardRef((inProps, ref) => { Object.entries(filters).forEach(([prop, value]) => { cloned[prop] = value.operator ? { - operator: value.operator, - constraints: value.constraints.map((constraint) => { - return { ...constraint }; - }) - } + operator: value.operator, + constraints: value.constraints.map((constraint) => { + return { ...constraint }; + }) + } : { ...value }; }); } else { @@ -1141,7 +1143,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { const field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field'); const filterFunction = getColumnProp(col, 'filterFunction'); const dataType = getColumnProp(col, 'dataType'); - const matchMode = getColumnProp(col, 'filterMatchMode') || (PrimeReact.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH); + const matchMode = getColumnProp(col, 'filterMatchMode') || (context.filterMatchModeOptions[dataType] ? context.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH); let constraint = { value: null, matchMode }; if (filterFunction) { diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index f25ec889fc..f901d7fb36 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -23,7 +23,7 @@ export const TableHeader = React.memo((props) => { const getRowProps = (row) => ColumnGroupBase.getCProps(row); const getColumnGroupProps = () => { - return props.headerColumnGroup ? props.ptCallbacks.ptmo(ColumnGroupBase.getCProps(props.headerColumnGroup)) : undefined; //@todo + return props.headerColumnGroup ? props.ptCallbacks.ptmo(ColumnGroupBase.getCProps(props.headerColumnGroup)) : undefined; }; const getColumnGroupPTOptions = (key) => { diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js index 050ae68e6c..60d9186bfe 100644 --- a/components/lib/dataview/DataView.js +++ b/components/lib/dataview/DataView.js @@ -7,9 +7,11 @@ import { DataViewBase, DataViewLayoutOptionsBase } from './DataViewBase'; import { BarsIcon } from '../icons/bars'; import { ThLargeIcon } from '../icons/thlarge'; import { SpinnerIcon } from '../icons/spinner'; +import { PrimeReactContext } from '../api/context'; export const DataViewLayoutOptions = React.memo((inProps) => { - const props = DataViewLayoutOptionsBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DataViewLayoutOptionsBase.getProps(inProps, context); const { ptm } = DataViewLayoutOptionsBase.setMetaData({ props }); @@ -77,7 +79,8 @@ export const DataViewItem = React.memo((props) => { export const DataView = React.memo( React.forwardRef((inProps, ref) => { - const props = DataViewBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DataViewBase.getProps(inProps, context); const [firstState, setFirstState] = React.useState(props.first); const [rowsState, setRowsState] = React.useState(props.rows); const { ptm } = DataViewBase.setMetaData({ @@ -140,7 +143,7 @@ export const DataView = React.memo( let value1 = ObjectUtils.resolveFieldData(data1, props.sortField); let value2 = ObjectUtils.resolveFieldData(data2, props.sortField); - return ObjectUtils.sort(value1, value2, props.sortOrder, PrimeReact.locale, PrimeReact.nullSortOrder); + return ObjectUtils.sort(value1, value2, props.sortOrder, context.locale, context.nullSortOrder); }); return value; diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js index 41cdb8ca29..1cc144e750 100644 --- a/components/lib/deferredcontent/DeferredContent.js +++ b/components/lib/deferredcontent/DeferredContent.js @@ -2,9 +2,11 @@ import * as React from 'react'; import { useEventListener, useMountEffect } from '../hooks/Hooks'; import { DeferredContentBase } from './DeferredContentBase'; import { mergeProps } from '../utils/Utils'; +import { PrimeReactContext } from '../api/context'; export const DeferredContent = React.forwardRef((inProps, ref) => { - const props = DeferredContentBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DeferredContentBase.getProps(inProps, context); const [loadedState, setLoadedState] = React.useState(false); const elementRef = React.useRef(null); diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index c1244d6a64..14e77de0bc 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -9,9 +9,11 @@ import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { DialogBase } from './DialogBase'; +import { PrimeReactContext } from '../api/context'; export const Dialog = React.forwardRef((inProps, ref) => { - const props = DialogBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DialogBase.getProps(inProps, context); const uniqueId = props.id ? props.id : UniqueComponentId(); const [idState, setIdState] = React.useState(uniqueId); @@ -355,7 +357,7 @@ export const Dialog = React.forwardRef((inProps, ref) => { }; const createStyle = () => { - styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElement.current = DomHandler.createInlineStyle(context.nonce); let innerHTML = ''; @@ -402,7 +404,7 @@ export const Dialog = React.forwardRef((inProps, ref) => { useUpdateEffect(() => { if (maskVisibleState) { - ZIndexUtils.set('modal', maskRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['modal']); + ZIndexUtils.set('modal', maskRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['modal']); setVisibleState(true); } }, [maskVisibleState]); @@ -597,8 +599,8 @@ export const Dialog = React.forwardRef((inProps, ref) => { 'p-dialog-rtl': props.rtl, 'p-dialog-maximized': maximized, 'p-dialog-default': !maximized, - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }); const maskClassName = classNames( 'p-dialog-mask', diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js index fc7ff8cf30..1e4148b907 100644 --- a/components/lib/divider/Divider.js +++ b/components/lib/divider/Divider.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { classNames, mergeProps } from '../utils/Utils'; import { DividerBase } from './DividerBase'; +import { PrimeReactContext } from '../api/context'; export const Divider = React.forwardRef((inProps, ref) => { - const props = DividerBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DividerBase.getProps(inProps, context); const { ptm } = DividerBase.setMetaData({ props diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js index 893608693e..b81d4d2ffc 100644 --- a/components/lib/dock/Dock.js +++ b/components/lib/dock/Dock.js @@ -2,10 +2,12 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { DockBase } from './DockBase'; +import { PrimeReactContext } from '../api/context'; export const Dock = React.memo( React.forwardRef((inProps, ref) => { - const props = DockBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DockBase.getProps(inProps, context); const [currentIndexState, setCurrentIndexState] = React.useState(-3); const { ptm } = DockBase.setMetaData({ diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index cd76ffc459..c0a5776307 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -8,10 +8,12 @@ import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { DropdownBase } from './DropdownBase'; import { DropdownPanel } from './DropdownPanel'; +import { PrimeReactContext } from '../api/context'; export const Dropdown = React.memo( React.forwardRef((inProps, ref) => { - const props = DropdownBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = DropdownBase.getProps(inProps, context); const [filterState, setFilterState] = React.useState(''); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -33,7 +35,7 @@ export const Dropdown = React.memo( const currentSearchChar = React.useRef(null); const isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy; const hasFilter = ObjectUtils.isNotEmpty(filterState); - const appendTo = props.appendTo || PrimeReact.appendTo; + const appendTo = props.appendTo || context.appendTo; const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({ target: elementRef, @@ -523,7 +525,7 @@ export const Dropdown = React.memo( }; const onOverlayEnter = (callback) => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); callback && callback(); }; @@ -550,7 +552,7 @@ export const Dropdown = React.memo( }; const alignOverlay = () => { - DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context.appendTo); }; const scrollInView = () => { diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 51d7aa41e1..def448d129 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -7,10 +7,13 @@ import { Portal } from '../portal/Portal'; import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { DropdownItem } from './DropdownItem'; +import { PrimeReactContext } from '../api/context'; export const DropdownPanel = React.memo( React.forwardRef((props, ref) => { const ptm = props.ptm; + const { inputStyle, ripple } = React.useContext(PrimeReactContext); + const virtualScrollerRef = React.useRef(null); const filterInputRef = React.useRef(null); const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter; const filterOptions = { @@ -270,8 +273,8 @@ export const DropdownPanel = React.memo( const createElement = () => { const className = classNames('p-dropdown-panel p-component', props.panelClassName, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': inputStyle === 'filled', + 'p-ripple-disabled': ripple === false }); const filter = createFilter(); const content = createContent(); diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js index c3c26da373..7040f6a69c 100644 --- a/components/lib/editor/Editor.js +++ b/components/lib/editor/Editor.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { classNames, DomHandler, mergeProps } from '../utils/Utils'; import { EditorBase } from './EditorBase'; +import { PrimeReactContext } from '../api/context'; const QuillJS = (function () { try { @@ -13,7 +14,8 @@ const QuillJS = (function () { export const Editor = React.memo( React.forwardRef((inProps, ref) => { - const props = EditorBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = EditorBase.getProps(inProps, context); const { ptm } = EditorBase.setMetaData({ props }); diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js index 8df006355b..e329123537 100644 --- a/components/lib/fieldset/Fieldset.js +++ b/components/lib/fieldset/Fieldset.js @@ -6,9 +6,11 @@ import { classNames, IconUtils, mergeProps, UniqueComponentId } from '../utils/U import { FieldsetBase } from './FieldsetBase'; import { PlusIcon } from '../icons/plus'; import { MinusIcon } from '../icons/minus'; +import { PrimeReactContext } from '../api/context'; export const Fieldset = React.forwardRef((inProps, ref) => { - const props = FieldsetBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = FieldsetBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); const [collapsedState, setCollapsedState] = React.useState(props.collapsed); diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js index 6cccd5dbe1..8f1d212f79 100644 --- a/components/lib/fileupload/FileUpload.js +++ b/components/lib/fileupload/FileUpload.js @@ -10,10 +10,12 @@ import { Badge } from '../badge/Badge'; import { PlusIcon } from '../icons/plus'; import { UploadIcon } from '../icons/upload'; import { TimesIcon } from '../icons/times'; +import { PrimeReactContext } from '../api/context'; export const FileUpload = React.memo( React.forwardRef((inProps, ref) => { - const props = FileUploadBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = FileUploadBase.getProps(inProps, context); const [uploadedFilesState, setUploadedFilesState] = React.useState([]); const [filesState, setFilesState] = React.useState([]); const [progressState, setProgressState] = React.useState(0); diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js index cd8adff47b..3e1f6d0ca5 100644 --- a/components/lib/galleria/Galleria.js +++ b/components/lib/galleria/Galleria.js @@ -9,10 +9,12 @@ import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps import { GalleriaBase } from './GalleriaBase'; import { GalleriaItem } from './GalleriaItem'; import { GalleriaThumbnails } from './GalleriaThumbnails'; +import { PrimeReactContext } from '../api/context'; export const Galleria = React.memo( React.forwardRef((inProps, ref) => { - const props = GalleriaBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = GalleriaBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(false); const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible); @@ -70,7 +72,7 @@ export const Galleria = React.memo( }; const onEntering = () => { - ZIndexUtils.set('modal', maskRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['modal']); + ZIndexUtils.set('modal', maskRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['modal']); DomHandler.addMultipleClasses(maskRef.current, 'p-component-overlay p-component-overlay-enter'); }; @@ -177,8 +179,8 @@ export const Galleria = React.memo( 'p-galleria-fullscreen': props.fullScreen, 'p-galleria-indicator-onitem': props.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': props.showItemNavigatorsOnHover && !props.fullScreen, - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }, thumbnailsPosClassName, indicatorPosClassName diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js index 3152eeac65..134e7e497a 100644 --- a/components/lib/galleria/GalleriaThumbnails.js +++ b/components/lib/galleria/GalleriaThumbnails.js @@ -7,6 +7,7 @@ import { ChevronRightIcon } from '../icons/chevronright'; import { ChevronUpIcon } from '../icons/chevronup'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; +import { PrimeReactContext } from '../api/context'; const GalleriaThumbnailItem = React.memo((props) => { const onItemClick = (event) => { @@ -73,6 +74,7 @@ export const GalleriaThumbnails = React.memo( const responsiveOptions = React.useRef(null); const prevNumVisible = usePrevious(numVisibleState); const prevActiveItemIndex = usePrevious(props.activeItemIndex); + const { nonce, nullSortOrder, locale } = React.useContext(PrimeReactContext); const [bindWindowResizeListener] = useResizeListener({ listener: () => { @@ -233,7 +235,7 @@ export const GalleriaThumbnails = React.memo( const createStyle = () => { if (!thumbnailsStyle.current) { - thumbnailsStyle.current = DomHandler.createInlineStyle(PrimeReact.nonce); + thumbnailsStyle.current = DomHandler.createInlineStyle(nonce); } let innerHTML = ` @@ -248,7 +250,7 @@ export const GalleriaThumbnails = React.memo( const value1 = data1.breakpoint; const value2 = data2.breakpoint; - return ObjectUtils.sort(value1, value2, -1, PrimeReact.locale, PrimeReact.nullSortOrder); + return ObjectUtils.sort(value1, value2, -1, locale, nullSortOrder); }); for (let i = 0; i < responsiveOptions.current.length; i++) { diff --git a/components/lib/hooks/useLocale.js b/components/lib/hooks/useLocale.js new file mode 100644 index 0000000000..752de47af9 --- /dev/null +++ b/components/lib/hooks/useLocale.js @@ -0,0 +1,123 @@ +/* eslint-disable */ +import * as React from 'react'; +import { PrimeReactContext } from '../../lib/api/context'; + +let locales = { + en: { + startsWith: 'Starts with', + contains: 'Contains', + notContains: 'Not contains', + endsWith: 'Ends with', + equals: 'Equals', + notEquals: 'Not equals', + noFilter: 'No Filter', + filter: 'Filter', + lt: 'Less than', + lte: 'Less than or equal to', + gt: 'Greater than', + gte: 'Greater than or equal to', + dateIs: 'Date is', + dateIsNot: 'Date is not', + dateBefore: 'Date is before', + dateAfter: 'Date is after', + custom: 'Custom', + clear: 'Clear', + close: 'Close', + apply: 'Apply', + matchAll: 'Match All', + matchAny: 'Match Any', + addRule: 'Add Rule', + removeRule: 'Remove Rule', + accept: 'Yes', + reject: 'No', + choose: 'Choose', + upload: 'Upload', + cancel: 'Cancel', + dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], + dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], + monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], + monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + today: 'Today', + weekHeader: 'Wk', + firstDayOfWeek: 0, + dateFormat: 'mm/dd/yy', + weak: 'Weak', + medium: 'Medium', + strong: 'Strong', + passwordPrompt: 'Enter a password', + emptyFilterMessage: 'No available options', + emptyMessage: 'No results found', + aria: { + trueLabel: 'True', + falseLabel: 'False', + nullLabel: 'Not Selected', + pageLabel: 'Page', + firstPageLabel: 'First Page', + lastPageLabel: 'Last Page', + nextPageLabel: 'Next Page', + previousPageLabel: 'Previous Page', + selectLabel: 'Select', + unselectLabel: 'Unselect', + expandLabel: 'Expand', + collapseLabel: 'Collapse' + } + } +}; + +export const useLocale = () => { + const { locale: localeContext } = React.useContext(PrimeReactContext); + + const locale = (locale) => { + locale && (localeContext = locale); + + return { + locale: localeContext, + options: locales[localeContext] + }; + } + + const addLocale = (locale, options) => { + locales[locale] = { ...locales['en'], ...options }; + } + + const updateLocaleOption = (key, value, locale) => { + localeOptions(locale)[key] = value; + } + + const updateLocaleOptions = (options, locale) => { + const _locale = locale || localeContext; + + locales[_locale] = { ...locales[_locale], ...options }; + } + + const localeOption = (key, locale) => { + const _locale = locale || localeContext; + + try { + return localeOptions(_locale)[key]; + } catch (error) { + throw new Error(`The ${key} option is not found in the current locale('${_locale}').`); + } + } + + const ariaLabel = (key) => { + const _locale = localeContext; + + try { + return localeOptions(_locale)['aria'][key]; + } catch (error) { + throw new Error(`The ${key} option is not found in the current locale('${_locale}').`); + } + } + + const localeOptions = (locale) => { + const _locale = locale || localeContext; + + return locales[_locale]; + } + + return { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOption, localeOptions, ariaLabel }; + +}; +/* eslint-enable */ diff --git a/components/lib/hooks/useOverlayScrollListener.js b/components/lib/hooks/useOverlayScrollListener.js index 0e85995bb5..b2ea88f9a5 100644 --- a/components/lib/hooks/useOverlayScrollListener.js +++ b/components/lib/hooks/useOverlayScrollListener.js @@ -1,15 +1,16 @@ /* eslint-disable */ import * as React from 'react'; -import PrimeReact from '../api/Api'; import { DomHandler, ObjectUtils } from '../utils/Utils'; import { usePrevious } from './usePrevious'; import { useUnmountEffect } from './useUnmountEffect'; +import { PrimeReactContext } from '../api/context'; export const useOverlayScrollListener = ({ target, listener, options, when = true }) => { const targetRef = React.useRef(null); const listenerRef = React.useRef(null); const scrollableParents = React.useRef([]); const prevOptions = usePrevious(options); + const { hideOverlaysOnDocumentScrolling } = React.useContext(PrimeReactContext); const bind = (bindOptions = {}) => { if (ObjectUtils.isNotEmpty(bindOptions.target)) { @@ -18,7 +19,7 @@ export const useOverlayScrollListener = ({ target, listener, options, when = tru } if (!listenerRef.current && targetRef.current) { - const nodes = (scrollableParents.current = DomHandler.getScrollableParents(targetRef.current, PrimeReact.hideOverlaysOnDocumentScrolling)); + const nodes = (scrollableParents.current = DomHandler.getScrollableParents(targetRef.current, hideOverlaysOnDocumentScrolling)); listenerRef.current = (event) => listener && listener(event); nodes.forEach((node) => node.addEventListener('scroll', listenerRef.current, options)); diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js index 9f8358ba3d..e45c2b11bb 100644 --- a/components/lib/image/Image.js +++ b/components/lib/image/Image.js @@ -12,10 +12,12 @@ import { UndoIcon } from '../icons/undo'; import { Portal } from '../portal/Portal'; import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { ImageBase } from './ImageBase'; +import { PrimeReactContext } from '../api/context'; export const Image = React.memo( React.forwardRef((inProps, ref) => { - const props = ImageBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ImageBase.getProps(inProps, context); const [maskVisibleState, setMaskVisibleState] = React.useState(false); const [previewVisibleState, setPreviewVisibleState] = React.useState(false); @@ -88,7 +90,7 @@ export const Image = React.memo( }; const onEntering = () => { - ZIndexUtils.set('modal', maskRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['modal']); + ZIndexUtils.set('modal', maskRef.current, context.autoZIndex, context.zIndex['modal']); }; const onEntered = () => { diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js index b3f6df98f2..14144942de 100644 --- a/components/lib/inplace/Inplace.js +++ b/components/lib/inplace/Inplace.js @@ -4,12 +4,14 @@ import { Button } from '../button/Button'; import { TimesIcon } from '../icons/times'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { InplaceBase } from './InplaceBase'; +import { PrimeReactContext } from '../api/context'; export const InplaceDisplay = (props) => props.children; export const InplaceContent = (props) => props.children; export const Inplace = React.forwardRef((inProps, ref) => { - const props = InplaceBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = InplaceBase.getProps(inProps, context); const [activeState, setActiveState] = React.useState(props.active); const elementRef = React.useRef(null); diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js index 21c403daaa..a83ab6ef63 100644 --- a/components/lib/inputmask/InputMask.js +++ b/components/lib/inputmask/InputMask.js @@ -3,10 +3,12 @@ import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { InputText } from '../inputtext/InputText'; import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; import { InputMaskBase } from './InputMaskBase'; +import { PrimeReactContext } from '../api/context'; export const InputMask = React.memo( React.forwardRef((inProps, ref) => { - const props = InputMaskBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = InputMaskBase.getProps(inProps, context); const elementRef = React.useRef(ref); const firstNonMaskPos = React.useRef(null); const lastRequiredNonMaskPos = React.useRef(0); diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index ffe5405c87..b239cf0b86 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -7,10 +7,12 @@ import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { InputNumberBase } from './InputNumberBase'; +import { PrimeReactContext } from '../api/context'; export const InputNumber = React.memo( React.forwardRef((inProps, ref) => { - const props = InputNumberBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = InputNumberBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const { ptm } = InputNumberBase.setMetaData({ props, diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index 132a0c9029..a125e50411 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -3,10 +3,12 @@ import { useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { InputSwitchBase } from './InputSwitchBase'; +import { PrimeReactContext } from '../api/context'; export const InputSwitch = React.memo( React.forwardRef((inProps, ref) => { - const props = InputSwitchBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = InputSwitchBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const { ptm } = InputSwitchBase.setMetaData({ props, diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js index adcae8ff47..b4a3740690 100644 --- a/components/lib/inputtext/InputText.js +++ b/components/lib/inputtext/InputText.js @@ -3,10 +3,12 @@ import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { InputTextBase } from './InputTextBase'; +import { PrimeReactContext } from '../api/context'; export const InputText = React.memo( React.forwardRef((inProps, ref) => { - const props = InputTextBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = InputTextBase.getProps(inProps, context); const { ptm } = InputTextBase.setMetaData({ props }); diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js index 570103a1bf..ec908c20de 100644 --- a/components/lib/inputtextarea/InputTextarea.js +++ b/components/lib/inputtextarea/InputTextarea.js @@ -3,10 +3,12 @@ import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { InputTextareaBase } from './InputTextareaBase'; +import { PrimeReactContext } from '../api/context'; export const InputTextarea = React.memo( React.forwardRef((inProps, ref) => { - const props = InputTextareaBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = InputTextareaBase.getProps(inProps, context); const elementRef = React.useRef(ref); const cachedScrollHeight = React.useRef(0); diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js index 3e09a04412..959eca843b 100644 --- a/components/lib/knob/Knob.js +++ b/components/lib/knob/Knob.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { useEventListener } from '../hooks/Hooks'; import { classNames, mergeProps } from '../utils/Utils'; import { KnobBase } from './KnobBase'; +import { PrimeReactContext } from '../api/context'; const radius = 40; const midX = 50; @@ -11,7 +12,8 @@ const maxRadians = -Math.PI / 3; export const Knob = React.memo( React.forwardRef((inProps, ref) => { - const props = KnobBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = KnobBase.getProps(inProps, context); const { ptm } = KnobBase.setMetaData({ props }); diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index d27547ef08..54e8b1fc3a 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -7,10 +7,12 @@ import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { ListBoxBase } from './ListBoxBase'; import { ListBoxHeader } from './ListBoxHeader'; import { ListBoxItem } from './ListBoxItem'; +import { PrimeReactContext } from '../api/context'; export const ListBox = React.memo( React.forwardRef((inProps, ref) => { - const props = ListBoxBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ListBoxBase.getProps(inProps, context); const [filterValueState, setFilterValueState] = React.useState(''); const elementRef = React.useRef(null); diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js index a54ac07776..877d26db5b 100644 --- a/components/lib/megamenu/MegaMenu.js +++ b/components/lib/megamenu/MegaMenu.js @@ -7,10 +7,12 @@ import { BarsIcon } from '../icons/bars'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { MegaMenuBase } from './MegaMenuBase'; +import { PrimeReactContext } from '../api/context'; export const MegaMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = MegaMenuBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = MegaMenuBase.getProps(inProps, context); const [activeItemState, setActiveItemState] = React.useState(null); const [attributeSelectorState, setAttributeSelectorState] = React.useState(null); @@ -242,7 +244,7 @@ export const MegaMenu = React.memo( const currentPanel = DomHandler.findSingle(elementRef.current, '.p-menuitem-active > .p-megamenu-panel'); if (activeItemState && !isMobileMode) { - ZIndexUtils.set('menu', currentPanel, PrimeReact.autoZIndex, PrimeReact.zIndex['menu']); + ZIndexUtils.set('menu', currentPanel, context.autoZIndex, context.zIndex['menu']); } if (isMobileMode) { @@ -456,7 +458,7 @@ export const MegaMenu = React.memo( const createStyle = () => { if (!styleElementRef.current) { - styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElementRef.current = DomHandler.createInlineStyle(context.nonce); const selector = `${attributeSelectorState}`; const innerHTML = ` @@ -477,9 +479,8 @@ export const MegaMenu = React.memo( flex-wrap: wrap; } - ${ - horizontal - ? ` + ${horizontal + ? ` .p-megamenu[${selector}] .p-megamenu-button { display: flex; } @@ -508,12 +509,11 @@ export const MegaMenu = React.memo( z-index: 1; } ` - : '' - } + : '' + } - ${ - vertical - ? ` + ${vertical + ? ` .p-megamenu-vertical[${selector}] { width: 100%; } @@ -539,8 +539,8 @@ export const MegaMenu = React.memo( content: "\\e930"; } ` - : '' - } + : '' + } } `; diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js index 3a634e025b..693e418f56 100644 --- a/components/lib/mention/Mention.js +++ b/components/lib/mention/Mention.js @@ -8,10 +8,12 @@ import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { MentionBase } from './MentionBase'; +import { PrimeReactContext } from '../api/context'; export const Mention = React.memo( React.forwardRef((inProps, ref) => { - const props = MentionBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = MentionBase.getProps(inProps, context); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [focusedState, setFocusedState] = React.useState(false); @@ -61,7 +63,7 @@ export const Mention = React.memo( }; const onOverlayEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); }; diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index a76fb98b6b..d27107f176 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -6,10 +6,12 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils, ZIndexUtils } from '../utils/Utils'; import { MenuBase } from './MenuBase'; +import { PrimeReactContext } from '../api/context'; export const Menu = React.memo( React.forwardRef((inProps, ref) => { - const props = MenuBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = MenuBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(!props.popup); const { ptm } = MenuBase.setMetaData({ props, @@ -117,7 +119,7 @@ export const Menu = React.memo( }; const onEnter = () => { - ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']); + ZIndexUtils.set('menu', menuRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['menu']); DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment); }; @@ -275,8 +277,8 @@ export const Menu = React.memo( 'p-menu p-component', { 'p-menu-overlay': props.popup, - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }, props.className ); diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js index 241c773cd3..07e525cf41 100644 --- a/components/lib/menubar/Menubar.js +++ b/components/lib/menubar/Menubar.js @@ -5,10 +5,12 @@ import { BarsIcon } from '../icons/bars'; import { IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { MenubarBase } from './MenubarBase'; import { MenubarSub } from './MenubarSub'; +import { PrimeReactContext } from '../api/context'; export const Menubar = React.memo( React.forwardRef((inProps, ref) => { - const props = MenubarBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = MenubarBase.getProps(inProps, context); const [mobileActiveState, setMobileActiveState] = React.useState(false); const elementRef = React.useRef(null); @@ -46,7 +48,7 @@ export const Menubar = React.memo( useUpdateEffect(() => { if (mobileActiveState) { - ZIndexUtils.set('menu', rootMenuRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['menu']); + ZIndexUtils.set('menu', rootMenuRef.current, context.autoZIndex, context.zIndex['menu']); bindDocumentClickListener(); } else { unbindDocumentClickListener(); diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js index adf811cf20..b7794d6311 100644 --- a/components/lib/message/Message.js +++ b/components/lib/message/Message.js @@ -5,10 +5,12 @@ import { ExclamationTriangleIcon } from '../icons/exclamationtriangle'; import { InfoCircleIcon } from '../icons/infocircle'; import { TimesCircleIcon } from '../icons/timescircle'; import { CheckIcon } from '../icons/check'; +import { PrimeReactContext } from '../api/context'; export const Message = React.memo( React.forwardRef((inProps, ref) => { - const props = MessageBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = MessageBase.getProps(inProps, context); const elementRef = React.useRef(null); diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js index a18a20d04a..cf23437ddf 100644 --- a/components/lib/messages/Messages.js +++ b/components/lib/messages/Messages.js @@ -4,12 +4,14 @@ import { CSSTransition } from '../csstransition/CSSTransition'; import { MessagesBase } from './MessagesBase'; import { UIMessage } from './UIMessage'; import { mergeProps } from '../utils/Utils'; +import { PrimeReactContext } from '../api/context'; let messageIdx = 0; export const Messages = React.memo( React.forwardRef((inProps, ref) => { - const props = MessagesBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = MessagesBase.getProps(inProps, context); const [messagesState, setMessagesState] = React.useState([]); const elementRef = React.useRef(null); const metaData = { diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 99bbd37108..12748b18cc 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -9,10 +9,12 @@ import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { MultiSelectBase } from './MultiSelectBase'; import { MultiSelectPanel } from './MultiSelectPanel'; +import { PrimeReactContext } from '../api/context'; export const MultiSelect = React.memo( React.forwardRef((inProps, ref) => { - const props = MultiSelectBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = MultiSelectBase.getProps(inProps, context); const [filterState, setFilterState] = React.useState(''); const [focusedState, setFocusedState] = React.useState(false); @@ -203,12 +205,12 @@ export const MultiSelect = React.memo( value = []; options.forEach( (optionGroup) => - (value = [ - ...value, - ...getOptionGroupChildren(optionGroup) - .filter((option) => !isOptionDisabled(option)) - .map((option) => getOptionValue(option)) - ]) + (value = [ + ...value, + ...getOptionGroupChildren(optionGroup) + .filter((option) => !isOptionDisabled(option)) + .map((option) => getOptionValue(option)) + ]) ); } else { value = options.map((option) => getOptionValue(option)); @@ -275,7 +277,7 @@ export const MultiSelect = React.memo( }; const onOverlayEnter = (callback) => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); scrollInView(); callback && callback(); @@ -302,7 +304,7 @@ export const MultiSelect = React.memo( }; const alignOverlay = () => { - DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || context.appendTo); }; const isClearClicked = (event) => { diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index d61dea49d8..387ec18405 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -6,11 +6,13 @@ import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils' import { VirtualScroller } from '../virtualscroller/VirtualScroller'; import { MultiSelectHeader } from './MultiSelectHeader'; import { MultiSelectItem } from './MultiSelectItem'; +import { PrimeReactContext } from '../api/context'; export const MultiSelectPanel = React.memo( React.forwardRef((props, ref) => { const virtualScrollerRef = React.useRef(null); const filterInputRef = React.useRef(null); + const { inputStyle, ripple } = React.useContext(PrimeReactContext); const onEnter = () => { props.onEnter(() => { @@ -246,8 +248,8 @@ export const MultiSelectPanel = React.memo( 'p-multiselect-inline': props.inline, 'p-multiselect-flex': props.flex, 'p-multiselect-limited': !allowOptionSelect, - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': inputStyle === 'filled', + 'p-ripple-disabled': ripple === false }, props.panelClassName ); diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js index d45aaf6c2b..b0e386c487 100644 --- a/components/lib/multistatecheckbox/MultiStateCheckbox.js +++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js @@ -4,10 +4,12 @@ import { useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { MultiStateCheckboxBase } from './MultiStateCheckboxBase'; +import { PrimeReactContext } from '../api/context'; export const MultiStateCheckbox = React.memo( React.forwardRef((inProps, ref) => { - const props = MultiStateCheckboxBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = MultiStateCheckboxBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js index bc9399028b..7566d09975 100644 --- a/components/lib/orderlist/OrderList.js +++ b/components/lib/orderlist/OrderList.js @@ -5,10 +5,12 @@ import { DomHandler, ObjectUtils, UniqueComponentId, classNames, mergeProps } fr import { OrderListBase } from './OrderListBase'; import { OrderListControls } from './OrderListControls'; import { OrderListSubList } from './OrderListSubList'; +import { PrimeReactContext } from '../api/context'; export const OrderList = React.memo( React.forwardRef((inProps, ref) => { - const props = OrderListBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = OrderListBase.getProps(inProps, context); const [selectionState, setSelectionState] = React.useState([]); const [filterValueState, setFilterValueState] = React.useState(''); @@ -167,7 +169,7 @@ export const OrderList = React.memo( const createStyle = () => { if (!styleElementRef.current) { - styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElementRef.current = DomHandler.createInlineStyle(context.nonce); let innerHTML = ` @media screen and (max-width: ${props.breakpoint}) { diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js index 8e357184e1..47b6fe3b01 100644 --- a/components/lib/organizationchart/OrganizationChart.js +++ b/components/lib/organizationchart/OrganizationChart.js @@ -2,10 +2,12 @@ import * as React from 'react'; import { classNames, DomHandler, mergeProps } from '../utils/Utils'; import { OrganizationChartBase } from './OrganizationChartBase'; import { OrganizationChartNode } from './OrganizationChartNode'; +import { PrimeReactContext } from '../api/context'; export const OrganizationChart = React.memo( React.forwardRef((inProps, ref) => { - const props = OrganizationChartBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = OrganizationChartBase.getProps(inProps, context); const { ptm } = OrganizationChartBase.setMetaData({ props }); diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js index af6c9f538e..307479d1b0 100644 --- a/components/lib/overlaypanel/OverlayPanel.js +++ b/components/lib/overlaypanel/OverlayPanel.js @@ -8,9 +8,11 @@ import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, mergeProps, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; import { OverlayPanelBase } from './OverlayPanelBase'; import { TimesIcon } from '../icons/times'; +import { PrimeReactContext } from '../api/context'; export const OverlayPanel = React.forwardRef((inProps, ref) => { - const props = OverlayPanelBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = OverlayPanelBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(false); const { ptm } = OverlayPanelBase.setMetaData({ props, @@ -106,7 +108,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => { const onEnter = () => { overlayRef.current.setAttribute(attributeSelector.current, ''); - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); align(); }; @@ -148,7 +150,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => { const createStyle = () => { if (!styleElement.current) { - styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElement.current = DomHandler.createInlineStyle(context.nonce); let innerHTML = ''; @@ -228,8 +230,8 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => { const createElement = () => { const className = classNames('p-overlaypanel p-component', props.className, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }); const closeIcon = createCloseIcon(); const rootProps = mergeProps( diff --git a/components/lib/paginator/CurrentPageReport.js b/components/lib/paginator/CurrentPageReport.js index 946b262336..462ca0b94a 100644 --- a/components/lib/paginator/CurrentPageReport.js +++ b/components/lib/paginator/CurrentPageReport.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { ObjectUtils, mergeProps } from '../utils/Utils'; import { CurrentPageReportBase } from './PaginatorBase'; +import { PrimeReactContext } from '../api/context'; export const CurrentPageReport = React.memo((inProps) => { - const props = CurrentPageReportBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = CurrentPageReportBase.getProps(inProps, context); const report = { currentPage: props.page + 1, diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js index d80dbf7243..e4ad439cc2 100644 --- a/components/lib/paginator/FirstPageLink.js +++ b/components/lib/paginator/FirstPageLink.js @@ -4,9 +4,11 @@ import { AngleDoubleLeftIcon } from '../icons/angledoubleleft'; import { Ripple } from '../ripple/Ripple'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { FirstPageLinkBase } from './PaginatorBase'; +import { PrimeReactContext } from '../api/context'; export const FirstPageLink = React.memo((inProps) => { - const props = FirstPageLinkBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = FirstPageLinkBase.getProps(inProps, context); const getPTOptions = (key) => { return props.ptm(key, { diff --git a/components/lib/paginator/JumpToPageInput.js b/components/lib/paginator/JumpToPageInput.js index bade441bac..2594ebca02 100644 --- a/components/lib/paginator/JumpToPageInput.js +++ b/components/lib/paginator/JumpToPageInput.js @@ -2,9 +2,11 @@ import * as React from 'react'; import { InputNumber } from '../inputnumber/InputNumber'; import { ObjectUtils } from '../utils/Utils'; import { JumpToPageInputBase } from './PaginatorBase'; +import { PrimeReactContext } from '../api/context'; export const JumpToPageInput = React.memo((inProps) => { - const props = JumpToPageInputBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = JumpToPageInputBase.getProps(inProps, context); const onChange = (event) => { if (props.onChange) { diff --git a/components/lib/paginator/LastPageLink.js b/components/lib/paginator/LastPageLink.js index 89ea2b3059..57c28399cc 100644 --- a/components/lib/paginator/LastPageLink.js +++ b/components/lib/paginator/LastPageLink.js @@ -4,9 +4,11 @@ import { AngleDoubleRightIcon } from '../icons/angledoubleright'; import { Ripple } from '../ripple/Ripple'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { LastPageLinkBase } from './PaginatorBase'; +import { PrimeReactContext } from '../api/context'; export const LastPageLink = React.memo((inProps) => { - const props = LastPageLinkBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = LastPageLinkBase.getProps(inProps, context); const getPTOptions = (key) => { return props.ptm(key, { diff --git a/components/lib/paginator/NextPageLink.js b/components/lib/paginator/NextPageLink.js index 211f91c098..3883074f01 100644 --- a/components/lib/paginator/NextPageLink.js +++ b/components/lib/paginator/NextPageLink.js @@ -4,9 +4,11 @@ import { AngleRightIcon } from '../icons/angleright'; import { Ripple } from '../ripple/Ripple'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { NextPageLinkBase } from './PaginatorBase'; +import { PrimeReactContext } from '../api/context'; export const NextPageLink = React.memo((inProps) => { - const props = NextPageLinkBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = NextPageLinkBase.getProps(inProps, context); const getPTOptions = (key) => { return props.ptm(key, { diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js index 107763b6a7..6a75ca29f4 100644 --- a/components/lib/paginator/PageLinks.js +++ b/components/lib/paginator/PageLinks.js @@ -3,9 +3,11 @@ import { ariaLabel } from '../api/Api'; import { Ripple } from '../ripple/Ripple'; import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; import { PageLinksBase } from './PaginatorBase'; +import { PrimeReactContext } from '../api/context'; export const PageLinks = React.memo((inProps) => { - const props = PageLinksBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = PageLinksBase.getProps(inProps, context); const getPTOptions = (pageLink, key) => { return props.ptm(key, { diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js index 3eb042e82a..1db913157f 100644 --- a/components/lib/paginator/Paginator.js +++ b/components/lib/paginator/Paginator.js @@ -10,10 +10,12 @@ import { PageLinks } from './PageLinks'; import { PaginatorBase } from './PaginatorBase'; import { PrevPageLink } from './PrevPageLink'; import { RowsPerPageDropdown } from './RowsPerPageDropdown'; +import { PrimeReactContext } from '../api/context'; export const Paginator = React.memo( React.forwardRef((inProps, ref) => { - const props = PaginatorBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = PaginatorBase.getProps(inProps, context); const { ptm } = PaginatorBase.setMetaData({ props }); @@ -177,13 +179,13 @@ export const Paginator = React.memo( if (typeof template === 'object') { return template.layout ? template.layout.split(' ').map((value) => { - const key = value.trim(); + const key = value.trim(); - return createElement(key, template[key]); - }) + return createElement(key, template[key]); + }) : Object.entries(template).map(([key, _template]) => { - return createElement(key, _template); - }); + return createElement(key, _template); + }); } return template.split(' ').map((value) => { diff --git a/components/lib/paginator/PrevPageLink.js b/components/lib/paginator/PrevPageLink.js index 79cd4cbfa1..40e3fe3fb8 100644 --- a/components/lib/paginator/PrevPageLink.js +++ b/components/lib/paginator/PrevPageLink.js @@ -4,9 +4,11 @@ import { AngleLeftIcon } from '../icons/angleleft'; import { Ripple } from '../ripple/Ripple'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { PrevPageLinkBase } from './PaginatorBase'; +import { PrimeReactContext } from '../api/context'; export const PrevPageLink = React.memo((inProps) => { - const props = PrevPageLinkBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = PrevPageLinkBase.getProps(inProps, context); const getPTOptions = (key) => { return props.ptm(key, { diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js index d56e45d78f..e7187e2019 100644 --- a/components/lib/paginator/RowsPerPageDropdown.js +++ b/components/lib/paginator/RowsPerPageDropdown.js @@ -3,9 +3,11 @@ import { localeOption } from '../api/Api'; import { Dropdown } from '../dropdown/Dropdown'; import { ObjectUtils } from '../utils/Utils'; import { RowsPerPageDropdownBase } from './PaginatorBase'; +import { PrimeReactContext } from '../api/context'; export const RowsPerPageDropdown = React.memo((inProps) => { - const props = RowsPerPageDropdownBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = RowsPerPageDropdownBase.getProps(inProps, context); const hasOptions = props.options && props.options.length > 0; const options = hasOptions ? props.options.map((opt) => ({ label: String(opt), value: opt })) : []; diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js index 2691570fd3..c38946b417 100644 --- a/components/lib/panel/Panel.js +++ b/components/lib/panel/Panel.js @@ -6,10 +6,11 @@ import { PlusIcon } from '../icons/plus'; import { Ripple } from '../ripple/Ripple'; import { classNames, IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils'; import { PanelBase } from './PanelBase'; +import { PrimeReactContext } from '../api/context'; export const Panel = React.forwardRef((inProps, ref) => { - const props = PanelBase.getProps(inProps); - + const context = React.useContext(PrimeReactContext); + const props = PanelBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); const [collapsedState, setCollapsedState] = React.useState(props.collapsed); const elementRef = React.useRef(ref); diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index 048d9935aa..8a182065d6 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -6,10 +6,12 @@ import { ChevronRightIcon } from '../icons/chevronright'; import { IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; import { PanelMenuBase } from './PanelMenuBase'; import { PanelMenuSub } from './PanelMenuSub'; +import { PrimeReactContext } from '../api/context'; export const PanelMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = PanelMenuBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = PanelMenuBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); const [activeItemState, setActiveItemState] = React.useState(null); diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js index a68a362897..5c3b3b50d7 100644 --- a/components/lib/password/Password.js +++ b/components/lib/password/Password.js @@ -9,10 +9,12 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { PasswordBase } from './PasswordBase'; +import { PrimeReactContext } from '../api/context'; export const Password = React.memo( React.forwardRef((inProps, ref) => { - const props = PasswordBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = PasswordBase.getProps(inProps, context); const promptLabel = props.promptLabel || localeOption('passwordPrompt'); const weakLabel = props.weakLabel || localeOption('weak'); @@ -109,12 +111,12 @@ export const Password = React.memo( const alignOverlay = () => { if (inputRef.current) { - DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context.appendTo); } }; const onOverlayEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); }; @@ -288,8 +290,8 @@ export const Password = React.memo( const createPanel = () => { const panelClassName = classNames('p-password-panel p-component', props.panelClassName, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }); const { strength, width } = meterState || { strength: '', width: '0%' }; const header = ObjectUtils.getJSXElement(props.header, props); diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js index 22f19ce34d..c25740add3 100644 --- a/components/lib/picklist/PickList.js +++ b/components/lib/picklist/PickList.js @@ -6,10 +6,12 @@ import { PickListBase } from './PickListBase'; import { PickListControls } from './PickListControls'; import { PickListSubList } from './PickListSubList'; import { PickListTransferControls } from './PickListTransferControls'; +import { PrimeReactContext } from '../api/context'; export const PickList = React.memo( React.forwardRef((inProps, ref) => { - const props = PickListBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = PickListBase.getProps(inProps, context); const [sourceSelectionState, setSourceSelectionState] = React.useState([]); const [targetSelectionState, setTargetSelectionState] = React.useState([]); @@ -213,7 +215,7 @@ export const PickList = React.memo( const createStyle = () => { if (!styleElementRef.current) { - styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElementRef.current = DomHandler.createInlineStyle(context.nonce); let innerHTML = ` @media screen and (max-width: ${props.breakpoint}) { diff --git a/components/lib/portal/Portal.js b/components/lib/portal/Portal.js index 1d9912e1d9..84f9d3c309 100644 --- a/components/lib/portal/Portal.js +++ b/components/lib/portal/Portal.js @@ -1,12 +1,13 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; -import PrimeReact from '../api/Api'; import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { DomHandler } from '../utils/Utils'; import { PortalBase } from './PortalBase'; +import { PrimeReactContext } from '../api/context'; export const Portal = React.memo((inProps) => { const props = PortalBase.getProps(inProps); + const { appendTo: _appendTo } = React.useContext(PrimeReactContext); const [mountedState, setMountedState] = React.useState(props.visible && DomHandler.hasDOM()); @@ -28,7 +29,7 @@ export const Portal = React.memo((inProps) => { const element = props.element || props.children; if (element && mountedState) { - const appendTo = props.appendTo || PrimeReact.appendTo || document.body; + const appendTo = props.appendTo || _appendTo || document.body; return appendTo === 'self' ? element : ReactDOM.createPortal(element, appendTo); } diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js index f9fa103fd4..c67d761131 100644 --- a/components/lib/progressbar/ProgressBar.js +++ b/components/lib/progressbar/ProgressBar.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { classNames, mergeProps } from '../utils/Utils'; import { ProgressBarBase } from './ProgressBarBase'; +import { PrimeReactContext } from '../api/context'; export const ProgressBar = React.memo( React.forwardRef((inProps, ref) => { - const props = ProgressBarBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ProgressBarBase.getProps(inProps, context); const { ptm } = ProgressBarBase.setMetaData({ props }); diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js index babd0b1ac6..35ad2cdda3 100644 --- a/components/lib/progressspinner/ProgressSpinner.js +++ b/components/lib/progressspinner/ProgressSpinner.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { classNames, mergeProps } from '../utils/Utils'; import { ProgressSpinnerBase } from './ProgressSpinnerBase'; +import { PrimeReactContext } from '../api/context'; export const ProgressSpinner = React.memo( React.forwardRef((inProps, ref) => { - const props = ProgressSpinnerBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ProgressSpinnerBase.getProps(inProps, context); const elementRef = React.useRef(null); const className = classNames('p-progress-spinner', props.className); diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index 556dae9ed6..e10711f715 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -3,10 +3,12 @@ import { useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { RadioButtonBase } from './RadioButtonBase'; +import { PrimeReactContext } from '../api/context'; export const RadioButton = React.memo( React.forwardRef((inProps, ref) => { - const props = RadioButtonBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = RadioButtonBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js index ddb1f696db..c37a805002 100644 --- a/components/lib/rating/Rating.js +++ b/components/lib/rating/Rating.js @@ -5,10 +5,12 @@ import { StarFillIcon } from '../icons/starfill'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { RatingBase } from './RatingBase'; +import { PrimeReactContext } from '../api/context'; export const Rating = React.memo( React.forwardRef((inProps, ref) => { - const props = RatingBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = RatingBase.getProps(inProps, context); const elementRef = React.useRef(null); const { ptm } = RatingBase.setMetaData({ diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js index 078f29bc42..397ce2ff1e 100644 --- a/components/lib/ripple/Ripple.js +++ b/components/lib/ripple/Ripple.js @@ -1,12 +1,13 @@ import * as React from 'react'; -import PrimeReact from '../api/Api'; import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { DomHandler } from '../utils/Utils'; +import { PrimeReactContext } from '../api/context'; export const Ripple = React.memo( React.forwardRef(() => { const inkRef = React.useRef(null); const targetRef = React.useRef(null); + const { ripple } = React.useContext(PrimeReactContext); const getTarget = () => { return inkRef.current && inkRef.current.parentElement; @@ -97,7 +98,7 @@ export const Ripple = React.memo( } }); - return PrimeReact.ripple ? : null; + return ripple ? : null; }) ); diff --git a/components/lib/row/Row.js b/components/lib/row/Row.js index 037f334d0f..f4c2d5c8b6 100644 --- a/components/lib/row/Row.js +++ b/components/lib/row/Row.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { RowBase } from './RowBase'; import { mergeProps } from '../utils/Utils'; +import { PrimeReactContext } from '../api/context'; export const Row = (inProps) => { - const props = RowBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = RowBase.getProps(inProps, context); //@todo Pass Parent MetaData const { ptm } = RowBase.setMetaData({ props: props diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js index 60de269550..50d7c5a508 100644 --- a/components/lib/scrollpanel/ScrollPanel.js +++ b/components/lib/scrollpanel/ScrollPanel.js @@ -2,9 +2,11 @@ import * as React from 'react'; import { useMountEffect, useUnmountEffect } from '../hooks/Hooks'; import { classNames, DomHandler, mergeProps } from '../utils/Utils'; import { ScrollPanelBase } from './ScrollPanelBase'; +import { PrimeReactContext } from '../api/context'; export const ScrollPanel = React.forwardRef((inProps, ref) => { - const props = ScrollPanelBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ScrollPanelBase.getProps(inProps, context); const { ptm } = ScrollPanelBase.setMetaData({ props diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js index 19fc4eb5f6..36905eac63 100644 --- a/components/lib/scrolltop/ScrollTop.js +++ b/components/lib/scrolltop/ScrollTop.js @@ -6,11 +6,13 @@ import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, mergeProps, ZIndexUtils } from '../utils/Utils'; import { ScrollTopBase } from './ScrollTopBase'; import { ChevronUpIcon } from '../icons/chevronup'; +import { PrimeReactContext } from '../api/context'; export const ScrollTop = React.memo( React.forwardRef((inProps, ref) => { const [visibleState, setVisibleState] = React.useState(false); - const props = ScrollTopBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ScrollTopBase.getProps(inProps, context); const { ptm } = ScrollTopBase.setMetaData({ props, state: { @@ -52,7 +54,7 @@ export const ScrollTop = React.memo( }; const onEnter = () => { - ZIndexUtils.set('overlay', scrollElementRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', scrollElementRef.current, context.autoZIndex, context.zIndex['overlay']); }; const onEntered = () => { diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js index f910b41954..532ae323eb 100644 --- a/components/lib/selectbutton/SelectButton.js +++ b/components/lib/selectbutton/SelectButton.js @@ -3,10 +3,12 @@ import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { SelectButtonBase } from './SelectButtonBase'; import { SelectButtonItem } from './SelectButtonItem'; +import { PrimeReactContext } from '../api/context'; export const SelectButton = React.memo( React.forwardRef((inProps, ref) => { - const props = SelectButtonBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = SelectButtonBase.getProps(inProps, context); const elementRef = React.useRef(null); diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js index 8e445a69c5..af1e0d6078 100644 --- a/components/lib/sidebar/Sidebar.js +++ b/components/lib/sidebar/Sidebar.js @@ -7,9 +7,11 @@ import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils, IconUtils, mergeProps } from '../utils/Utils'; import { SidebarBase } from './SidebarBase'; import { TimesIcon } from '../icons/times'; +import { PrimeReactContext } from '../api/context'; export const Sidebar = React.forwardRef((inProps, ref) => { - const props = SidebarBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = SidebarBase.getProps(inProps, context); const [maskVisibleState, setMaskVisibleState] = React.useState(false); const [visibleState, setVisibleState] = React.useState(false); @@ -27,7 +29,7 @@ export const Sidebar = React.forwardRef((inProps, ref) => { type: 'keydown', listener: (event) => { if (event.key === 'Escape') { - if (ZIndexUtils.get(maskRef.current) === ZIndexUtils.getCurrent('modal', PrimeReact.autoZIndex)) { + if (ZIndexUtils.get(maskRef.current) === ZIndexUtils.getCurrent('modal', context.autoZIndex)) { onClose(event); } } @@ -145,7 +147,7 @@ export const Sidebar = React.forwardRef((inProps, ref) => { useUpdateEffect(() => { if (maskVisibleState) { - ZIndexUtils.set('modal', maskRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['modal']); + ZIndexUtils.set('modal', maskRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['modal']); setVisibleState(true); } }, [maskVisibleState]); @@ -208,8 +210,8 @@ export const Sidebar = React.forwardRef((inProps, ref) => { const createElement = () => { const className = classNames('p-sidebar p-component', props.className, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }); const maskClassName = classNames( 'p-sidebar-mask', diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js index 42934bb519..2b59afc674 100644 --- a/components/lib/skeleton/Skeleton.js +++ b/components/lib/skeleton/Skeleton.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { classNames, mergeProps } from '../utils/Utils'; import { SkeletonBase } from './SkeletonBase'; +import { PrimeReactContext } from '../api/context'; export const Skeleton = React.memo( React.forwardRef((inProps, ref) => { - const props = SkeletonBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = SkeletonBase.getProps(inProps, context); const { ptm } = SkeletonBase.setMetaData({ props }); diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js index 725e00e2ec..9c9b332996 100644 --- a/components/lib/slidemenu/SlideMenu.js +++ b/components/lib/slidemenu/SlideMenu.js @@ -8,10 +8,12 @@ import { classNames, DomHandler, IconUtils, mergeProps, ZIndexUtils } from '../u import { SlideMenuBase } from './SlideMenuBase'; import { SlideMenuSub } from './SlideMenuSub'; import { ChevronLeftIcon } from '../icons/chevronleft'; +import { PrimeReactContext } from '../api/context'; export const SlideMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = SlideMenuBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = SlideMenuBase.getProps(inProps, context); const [levelState, setLevelState] = React.useState(0); const [visibleState, setVisibleState] = React.useState(false); @@ -73,7 +75,7 @@ export const SlideMenu = React.memo( const onEnter = () => { if (props.autoZIndex) { - ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']); + ZIndexUtils.set('menu', menuRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['menu']); } DomHandler.absolutePosition(menuRef.current, targetRef.current); diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js index 7e409d316f..a0c04b782d 100644 --- a/components/lib/slider/Slider.js +++ b/components/lib/slider/Slider.js @@ -2,10 +2,12 @@ import * as React from 'react'; import { useEventListener } from '../hooks/Hooks'; import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { SliderBase } from './SliderBase'; +import { PrimeReactContext } from '../api/context'; export const Slider = React.memo( React.forwardRef((inProps, ref) => { - const props = SliderBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = SliderBase.getProps(inProps, context); const elementRef = React.useRef(null); const handleIndex = React.useRef(0); diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js index 05266f2cc8..e75bdfd58d 100644 --- a/components/lib/speeddial/SpeedDial.js +++ b/components/lib/speeddial/SpeedDial.js @@ -6,11 +6,13 @@ import { PlusIcon } from '../icons/plus'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { SpeedDialBase } from './SpeedDialBase'; +import { PrimeReactContext } from '../api/context'; export const SpeedDial = React.memo( React.forwardRef((inProps, ref) => { const [visibleState, setVisibleState] = React.useState(false); - const props = SpeedDialBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = SpeedDialBase.getProps(inProps, context); const { ptm } = SpeedDialBase.setMetaData({ props, state: { diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js index 4c0bf0c828..1d2221b0b8 100644 --- a/components/lib/splitbutton/SplitButton.js +++ b/components/lib/splitbutton/SplitButton.js @@ -9,10 +9,12 @@ import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, cla import { SplitButtonBase } from './SplitButtonBase'; import { SplitButtonItem } from './SplitButtonItem'; import { SplitButtonPanel } from './SplitButtonPanel'; +import { PrimeReactContext } from '../api/context'; export const SplitButton = React.memo( React.forwardRef((inProps, ref) => { - const props = SplitButtonBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = SplitButtonBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -61,7 +63,7 @@ export const SplitButton = React.memo( }; const onOverlayEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); }; @@ -82,7 +84,7 @@ export const SplitButton = React.memo( }; const alignOverlay = () => { - DomHandler.alignOverlay(overlayRef.current, defaultButtonRef.current.parentElement, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, defaultButtonRef.current.parentElement, props.appendTo || context.appendTo); }; useMountEffect(() => { diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js index d641915063..c8ea2b1239 100644 --- a/components/lib/splitter/Splitter.js +++ b/components/lib/splitter/Splitter.js @@ -2,12 +2,14 @@ import * as React from 'react'; import { useEventListener } from '../hooks/Hooks'; import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils'; import { SplitterBase, SplitterPanelBase } from './SplitterBase'; +import { PrimeReactContext } from '../api/context'; -export const SplitterPanel = () => {}; +export const SplitterPanel = () => { }; export const Splitter = React.memo( React.forwardRef((inProps, ref) => { - const props = SplitterBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = SplitterBase.getProps(inProps, context); const elementRef = React.useRef(null); const gutterRef = React.useRef(); diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js index d5571f324e..44cc6a679b 100644 --- a/components/lib/steps/Steps.js +++ b/components/lib/steps/Steps.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { classNames, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; import { StepsBase } from './StepsBase'; +import { PrimeReactContext } from '../api/context'; export const Steps = React.memo( React.forwardRef((inProps, ref) => { - const props = StepsBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = StepsBase.getProps(inProps, context); const elementRef = React.useRef(null); diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js index 19e6f16223..f019623a60 100644 --- a/components/lib/styleclass/StyleClass.js +++ b/components/lib/styleclass/StyleClass.js @@ -2,9 +2,11 @@ import * as React from 'react'; import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { DomHandler, ObjectUtils } from '../utils/Utils'; import { StyleClassBase } from './StyleClassBase'; +import { PrimeReactContext } from '../api/context'; export const StyleClass = React.forwardRef((inProps, ref) => { - const props = StyleClassBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = StyleClassBase.getProps(inProps, context); const targetRef = React.useRef(null); const animating = React.useRef(false); diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js index cba2b82868..964c8e3f28 100644 --- a/components/lib/tabmenu/TabMenu.js +++ b/components/lib/tabmenu/TabMenu.js @@ -2,10 +2,12 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils'; import { TabMenuBase } from './TabMenuBase'; +import { PrimeReactContext } from '../api/context'; export const TabMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = TabMenuBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TabMenuBase.getProps(inProps, context); const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex); const elementRef = React.useRef(null); diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js index d9c54b2e91..8e1f99a5be 100644 --- a/components/lib/tabview/TabView.js +++ b/components/lib/tabview/TabView.js @@ -7,11 +7,13 @@ import { TimesIcon } from '../icons/times'; import { Ripple } from '../ripple/Ripple'; import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils'; import { TabPanelBase, TabViewBase } from './TabViewBase'; +import { PrimeReactContext } from '../api/context'; -export const TabPanel = () => {}; +export const TabPanel = () => { }; export const TabView = React.forwardRef((inProps, ref) => { - const props = TabViewBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TabViewBase.getProps(inProps, context); const [idState, setIdState] = React.useState(props.id); const [backwardIsDisabledState, setBackwardIsDisabledState] = React.useState(true); diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js index c43221c54c..6496245cf1 100644 --- a/components/lib/tag/Tag.js +++ b/components/lib/tag/Tag.js @@ -1,9 +1,11 @@ import * as React from 'react'; import { classNames, IconUtils, mergeProps } from '../utils/Utils'; import { TagBase } from './TagBase'; +import { PrimeReactContext } from '../api/context'; export const Tag = React.forwardRef((inProps, ref) => { - const props = TagBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TagBase.getProps(inProps, context); const { ptm } = TagBase.setMetaData({ props }); diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js index 68d9a8bb44..344b7e8f6b 100644 --- a/components/lib/terminal/Terminal.js +++ b/components/lib/terminal/Terminal.js @@ -2,10 +2,12 @@ import * as React from 'react'; import { TerminalService } from '../terminalservice/TerminalService'; import { classNames, DomHandler, mergeProps } from '../utils/Utils'; import { TerminalBase } from './TerminalBase'; +import { PrimeReactContext } from '../api/context'; export const Terminal = React.memo( React.forwardRef((inProps, ref) => { - const props = TerminalBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TerminalBase.getProps(inProps, context); const [commandTextState, setCommandTextState] = React.useState(''); const [commandsState, setCommandsState] = React.useState([]); diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js index 664900c375..cd9a68fa41 100644 --- a/components/lib/tieredmenu/TieredMenu.js +++ b/components/lib/tieredmenu/TieredMenu.js @@ -7,10 +7,12 @@ import { Portal } from '../portal/Portal'; import { classNames, DomHandler, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils'; import { TieredMenuBase } from './TieredMenuBase'; import { TieredMenuSub } from './TieredMenuSub'; +import { PrimeReactContext } from '../api/context'; export const TieredMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = TieredMenuBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TieredMenuBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(!props.popup); const [attributeSelectorState, setAttributeSelectorState] = React.useState(null); @@ -72,7 +74,7 @@ export const TieredMenu = React.memo( const createStyle = () => { if (!styleElementRef.current) { - styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce); + styleElementRef.current = DomHandler.createInlineStyle(context.nonce); const selector = `${attributeSelectorState}`; const innerHTML = ` @@ -115,7 +117,7 @@ export const TieredMenu = React.memo( const onEnter = () => { if (props.autoZIndex) { - ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']); + ZIndexUtils.set('menu', menuRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['menu']); } DomHandler.absolutePosition(menuRef.current, targetRef.current); @@ -175,8 +177,8 @@ export const TieredMenu = React.memo( 'p-tieredmenu p-component', { 'p-tieredmenu-overlay': props.popup, - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }, props.className ); diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js index 7b3dd60323..da6e369301 100644 --- a/components/lib/timeline/Timeline.js +++ b/components/lib/timeline/Timeline.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { classNames, mergeProps, ObjectUtils } from '../utils/Utils'; import { TimelineBase } from './TimelineBase'; +import { PrimeReactContext } from '../api/context'; export const Timeline = React.memo( React.forwardRef((inProps, ref) => { - const props = TimelineBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TimelineBase.getProps(inProps, context); const { ptm } = TimelineBase.setMetaData({ props }); diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js index 31d9e5adfa..f1b62d9357 100644 --- a/components/lib/toast/Toast.js +++ b/components/lib/toast/Toast.js @@ -7,12 +7,14 @@ import { Portal } from '../portal/Portal'; import { ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { ToastBase } from './ToastBase'; import { ToastMessage } from './ToastMessage'; +import { PrimeReactContext } from '../api/context'; let messageIdx = 0; export const Toast = React.memo( React.forwardRef((inProps, ref) => { - const props = ToastBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ToastBase.getProps(inProps, context); const [messagesState, setMessagesState] = React.useState([]); const containerRef = React.useRef(null); @@ -90,7 +92,7 @@ export const Toast = React.memo( }; useUpdateEffect(() => { - ZIndexUtils.set('toast', containerRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['toast']); + ZIndexUtils.set('toast', containerRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['toast']); }, [messagesState, props.baseZIndex]); useUnmountEffect(() => { @@ -108,8 +110,8 @@ export const Toast = React.memo( const createElement = () => { const className = classNames('p-toast p-component p-toast-' + props.position, props.className, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': context.inputStyle === 'filled', + 'p-ripple-disabled': context.ripple === false }); const rootProps = mergeProps( diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js index c8f1964ed6..d657885140 100644 --- a/components/lib/togglebutton/ToggleButton.js +++ b/components/lib/togglebutton/ToggleButton.js @@ -4,10 +4,12 @@ import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { ToggleButtonBase } from './ToggleButtonBase'; +import { PrimeReactContext } from '../api/context'; export const ToggleButton = React.memo( React.forwardRef((inProps, ref) => { - const props = ToggleButtonBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ToggleButtonBase.getProps(inProps, context); const elementRef = React.useRef(null); const { ptm } = ToggleButtonBase.setMetaData({ diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js index 37009ea781..c5a625e494 100644 --- a/components/lib/toolbar/Toolbar.js +++ b/components/lib/toolbar/Toolbar.js @@ -1,10 +1,12 @@ import * as React from 'react'; import { classNames, ObjectUtils, mergeProps } from '../utils/Utils'; import { ToolbarBase } from './ToolbarBase'; +import { PrimeReactContext } from '../api/context'; export const Toolbar = React.memo( React.forwardRef((inProps, ref) => { - const props = ToolbarBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = ToolbarBase.getProps(inProps, context); const elementRef = React.useRef(null); diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index f94768a014..deb162b982 100644 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -4,10 +4,12 @@ import { useMountEffect, useOverlayScrollListener, useResizeListener, useUnmount import { Portal } from '../portal/Portal'; import { classNames, DomHandler, mergeProps, ObjectUtils, ZIndexUtils } from '../utils/Utils'; import { TooltipBase } from './TooltipBase'; +import { PrimeReactContext } from '../api/context'; export const Tooltip = React.memo( React.forwardRef((inProps, ref) => { - const props = TooltipBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TooltipBase.getProps(inProps, context); const [visibleState, setVisibleState] = React.useState(false); const [positionState, setPositionState] = React.useState(props.position); const [classNameState, setClassNameState] = React.useState(''); @@ -127,7 +129,7 @@ export const Tooltip = React.memo( const { pageX: x, pageY: y } = currentMouseEvent.current; if (props.autoZIndex && !ZIndexUtils.get(elementRef.current)) { - ZIndexUtils.set('tooltip', elementRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['tooltip']); + ZIndexUtils.set('tooltip', elementRef.current, context.autoZIndex, props.baseZIndex || context.zIndex['tooltip']); } elementRef.current.style.left = ''; diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js index 3bd468830e..a501e089d8 100644 --- a/components/lib/tree/Tree.js +++ b/components/lib/tree/Tree.js @@ -4,10 +4,12 @@ import { SpinnerIcon } from '../icons/spinner'; import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils'; import { TreeBase } from './TreeBase'; import { UITreeNode } from './UITreeNode'; +import { PrimeReactContext } from '../api/context'; export const Tree = React.memo( React.forwardRef((inProps, ref) => { - const props = TreeBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TreeBase.getProps(inProps, context); const [filterValueState, setFilterValueState] = React.useState(''); const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys); diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js index 45d820e127..3c959b60da 100644 --- a/components/lib/treeselect/TreeSelect.js +++ b/components/lib/treeselect/TreeSelect.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import PrimeReact, { localeOption } from '../api/Api'; +import { localeOption } from '../api/Api'; import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; import { SearchIcon } from '../icons/search'; @@ -10,10 +10,12 @@ import { Tree } from '../tree/Tree'; import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { TreeSelectBase } from './TreeSelectBase'; import { TreeSelectPanel } from './TreeSelectPanel'; +import { PrimeReactContext } from '../api/context'; export const TreeSelect = React.memo( React.forwardRef((inProps, ref) => { - const props = TreeSelectBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TreeSelectBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -197,7 +199,7 @@ export const TreeSelect = React.memo( }; const onOverlayEnter = () => { - ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']); + ZIndexUtils.set('overlay', overlayRef.current, context.autoZIndex, context.zIndex['overlay']); alignOverlay(); scrollInView(); }; @@ -227,7 +229,7 @@ export const TreeSelect = React.memo( }; const alignOverlay = () => { - DomHandler.alignOverlay(overlayRef.current, triggerRef.current.parentElement, props.appendTo || PrimeReact.appendTo); + DomHandler.alignOverlay(overlayRef.current, triggerRef.current.parentElement, props.appendTo || context.appendTo); }; const scrollInView = () => { diff --git a/components/lib/treeselect/TreeSelectPanel.js b/components/lib/treeselect/TreeSelectPanel.js index 60691f693f..917121cffe 100644 --- a/components/lib/treeselect/TreeSelectPanel.js +++ b/components/lib/treeselect/TreeSelectPanel.js @@ -1,15 +1,17 @@ import * as React from 'react'; -import PrimeReact from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { Portal } from '../portal/Portal'; import { classNames, mergeProps } from '../utils/Utils'; +import { PrimeReactContext } from '../api/context'; export const TreeSelectPanel = React.forwardRef((props, ref) => { + const { inputStyle, ripple } = React.useContext(PrimeReactContext); + const createElement = () => { const wrapperStyle = { maxHeight: props.scrollHeight || 'auto' }; const className = classNames('p-treeselect-panel p-component', props.panelClassName, { - 'p-input-filled': PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': PrimeReact.ripple === false + 'p-input-filled': inputStyle === 'filled', + 'p-ripple-disabled': ripple === false }); const panelProps = mergeProps( diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js index 0778a7dd74..e1a8cb1607 100644 --- a/components/lib/treetable/TreeTable.js +++ b/components/lib/treetable/TreeTable.js @@ -12,9 +12,11 @@ import { TreeTableScrollableView } from './TreeTableScrollableView'; import { SpinnerIcon } from '../icons/spinner'; import { ArrowDownIcon } from '../icons/arrowdown'; import { ArrowUpIcon } from '../icons/arrowup'; +import { PrimeReactContext } from '../api/context'; export const TreeTable = React.forwardRef((inProps, ref) => { - const props = TreeTableBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TreeTableBase.getProps(inProps, context); const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys); const [firstState, setFirstState] = React.useState(props.first); const [rowsState, setRowsState] = React.useState(props.rows); @@ -245,7 +247,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => { const value2 = ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field); // check if they are equal handling dates and locales - if (ObjectUtils.compare(value1, value2, PrimeReact.locale) === 0) { + if (ObjectUtils.compare(value1, value2, context.locale) === 0) { return multiSortMeta.length - 1 > index ? multisortField(node1, node2, multiSortMeta, index + 1) : 0; } @@ -253,7 +255,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => { }; const compareValuesOnSort = (value1, value2, order) => { - return ObjectUtils.sort(value1, value2, order, PrimeReact.locale, PrimeReact.nullSortOrder); + return ObjectUtils.sort(value1, value2, order, context.locale, context.nullSortOrder); }; const filter = (value, field, mode) => { diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index cfe577e9e3..24e60c5ad2 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -6,10 +6,12 @@ import { TimesIcon } from '../icons/times'; import { Tooltip } from '../tooltip/Tooltip'; import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils'; import { TriStateCheckboxBase } from './TriStateCheckboxBase'; +import { PrimeReactContext } from '../api/context'; export const TriStateCheckbox = React.memo( React.forwardRef((inProps, ref) => { - const props = TriStateCheckboxBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = TriStateCheckboxBase.getProps(inProps, context); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js index d88cc0b9e2..25f256f949 100644 --- a/components/lib/utils/ObjectUtils.js +++ b/components/lib/utils/ObjectUtils.js @@ -17,7 +17,7 @@ export default class ObjectUtils { if (arrA && arrB) { length = a.length; if (length !== b.length) return false; - for (i = length; i-- !== 0; ) if (!this.deepEquals(a[i], b[i])) return false; + for (i = length; i-- !== 0;) if (!this.deepEquals(a[i], b[i])) return false; return true; } @@ -42,9 +42,9 @@ export default class ObjectUtils { if (length !== Object.keys(b).length) return false; - for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false; + for (i = length; i-- !== 0;) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false; - for (i = length; i-- !== 0; ) { + for (i = length; i-- !== 0;) { key = keys[i]; if (!this.deepEquals(a[key], b[key])) return false; } @@ -87,6 +87,10 @@ export default class ObjectUtils { return !!(obj && obj.constructor && obj.call && obj.apply); } + static isObject(obj) { + return obj !== null && obj instanceof Object && obj.constructor === Object; + } + static isLetter(char) { return char && (char.toUpperCase() != char.toLowerCase() || char.codePointAt(0) > 127); } @@ -262,7 +266,7 @@ export default class ObjectUtils { static convertToFlatCase(str) { // convert snake, kebab, camel and pascal cases to flat case - return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str; + return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str; } static isEmpty(value) { diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js index 51d983f709..9ea8451309 100644 --- a/components/lib/virtualscroller/VirtualScroller.js +++ b/components/lib/virtualscroller/VirtualScroller.js @@ -3,10 +3,12 @@ import { useEventListener, useMountEffect, usePrevious, useResizeListener, useUp import { classNames, DomHandler, ObjectUtils, IconUtils, mergeProps } from '../utils/Utils'; import { VirtualScrollerBase } from './VirtualScrollerBase'; import { SpinnerIcon } from '../icons/spinner'; +import { PrimeReactContext } from '../api/context'; export const VirtualScroller = React.memo( React.forwardRef((inProps, ref) => { - const props = VirtualScrollerBase.getProps(inProps); + const context = React.useContext(PrimeReactContext); + const props = VirtualScrollerBase.getProps(inProps, context); const prevProps = usePrevious(inProps) || {}; const vertical = props.orientation === 'vertical'; diff --git a/pages/_app.js b/pages/_app.js index af2ce5974b..65e0629bb9 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -10,6 +10,7 @@ import '../styles/primereact.css'; import PrimeReact from '../components/lib/api/PrimeReact'; import '../styles/demo/demo.scss'; import AnnouncementData from '../data/news.json'; +import { PrimeReactProvider } from '../components/lib/api/context'; export default function MyApp({ Component }) { const [dark, setDark] = useState(false); @@ -76,12 +77,14 @@ export default function MyApp({ Component }) { }; if (Component.getLayout) { - return Component.getLayout(); + return Component.getLayout(); } else { return ( - - - + + + + + ); } -} +} \ No newline at end of file diff --git a/pages/slidemenu/index.js b/pages/slidemenu/index.js index 5dd5e319c9..f58508382a 100644 --- a/pages/slidemenu/index.js +++ b/pages/slidemenu/index.js @@ -1,9 +1,6 @@ import DocApiTable from '../../components/doc/common/docapitable'; import { PTDoc } from '../../components/doc/slidemenu/pt/ptdoc'; import { Wireframe } from '../../components/doc/slidemenu/pt/wireframe'; -import DocApiTable from '../../components/doc/common/docapitable'; -import { PTDoc } from '../../components/doc/slidemenu/pt/ptdoc'; -import { Wireframe } from '../../components/doc/slidemenu/pt/wireframe'; import { DocComponent } from '../../components/doc/common/doccomponent'; import { AccessibilityDoc } from '../../components/doc/slidemenu/accessibilitydoc'; import { BasicDoc } from '../../components/doc/slidemenu/basicdoc'; @@ -39,6 +36,7 @@ const SlideMenuDemo = () => { component: AccessibilityDoc } ]; + const ptDocs = [ { id: 'pt.wireframe', From 4c3f8fa8597947cc70cd8f3920a727d0f5c88f28 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Fri, 9 Jun 2023 09:41:15 +0000 Subject: [PATCH 19/53] Update API doc --- components/doc/common/apidoc/index.json | 568 +++++++++++++++++++++++- 1 file changed, 563 insertions(+), 5 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 0899294fa5..b7fa75888b 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -664,6 +664,12 @@ "optional": true, "readonly": false, "type": "ZIndexOptions" + }, + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "PrimeReactPTOptions" } ], "callbacks": [ @@ -695,6 +701,558 @@ } ] }, + "PrimeReactPTOptions": { + "relatedProp": "", + "props": [ + { + "name": "accordion", + "optional": true, + "readonly": false, + "type": "AccordionPassThroughOptions" + }, + { + "name": "accordiontab", + "optional": true, + "readonly": false, + "type": "AccordionTabPassThroughOptions" + }, + { + "name": "autocomplete", + "optional": true, + "readonly": false, + "type": "AutoCompletePassThroughOptions" + }, + { + "name": "avatar", + "optional": true, + "readonly": false, + "type": "AvatarPassThroughOptions" + }, + { + "name": "avatargroup", + "optional": true, + "readonly": false, + "type": "AvatarGroupPassThroughOptions" + }, + { + "name": "badge", + "optional": true, + "readonly": false, + "type": "BadgePassThroughOptions" + }, + { + "name": "blockui", + "optional": true, + "readonly": false, + "type": "BlockUIPassThroughOptions" + }, + { + "name": "breadcrumb", + "optional": true, + "readonly": false, + "type": "BreadCrumbPassThroughOptions" + }, + { + "name": "button", + "optional": true, + "readonly": false, + "type": "ButtonPassThroughOptions" + }, + { + "name": "calendar", + "optional": true, + "readonly": false, + "type": "CalendarPassThroughOptions" + }, + { + "name": "card", + "optional": true, + "readonly": false, + "type": "CardPassThroughOptions" + }, + { + "name": "carousel", + "optional": true, + "readonly": false, + "type": "CarouselPassThroughOptions" + }, + { + "name": "cascadeselect", + "optional": true, + "readonly": false, + "type": "CascadeSelectPassThroughOptions" + }, + { + "name": "chart", + "optional": true, + "readonly": false, + "type": "ChartPassThroughOptions" + }, + { + "name": "checkbox", + "optional": true, + "readonly": false, + "type": "CheckboxPassThroughOptions" + }, + { + "name": "chip", + "optional": true, + "readonly": false, + "type": "ChipPassThroughOptions" + }, + { + "name": "chips", + "optional": true, + "readonly": false, + "type": "ChipsPassThroughOptions" + }, + { + "name": "colorpicker", + "optional": true, + "readonly": false, + "type": "ColorPickerPassThroughOptions" + }, + { + "name": "column", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughOptions" + }, + { + "name": "columngroup", + "optional": true, + "readonly": false, + "type": "ColumnGroupPassThroughOptions" + }, + { + "name": "confirmdialog", + "optional": true, + "readonly": false, + "type": "ConfirmDialogPassThroughOptions" + }, + { + "name": "confirmpopup", + "optional": true, + "readonly": false, + "type": "ConfirmPopupPassThroughOptions" + }, + { + "name": "contextmenu", + "optional": true, + "readonly": false, + "type": "ContextMenuPassThroughOptions" + }, + { + "name": "datatable", + "optional": true, + "readonly": false, + "type": "DataTablePassThroughOptions" + }, + { + "name": "dataview", + "optional": true, + "readonly": false, + "type": "DataViewPassThroughOptions" + }, + { + "name": "dataviewlayoutoptions", + "optional": true, + "readonly": false, + "type": "DataViewLayoutOptionsPassThroughOptions" + }, + { + "name": "deferredcontent", + "optional": true, + "readonly": false, + "type": "DeferredContentPassThroughOptions" + }, + { + "name": "dialog", + "optional": true, + "readonly": false, + "type": "DialogPassThroughOptions" + }, + { + "name": "divider", + "optional": true, + "readonly": false, + "type": "DividerPassThroughOptions" + }, + { + "name": "dock", + "optional": true, + "readonly": false, + "type": "DockPassThroughOptions" + }, + { + "name": "dropdown", + "optional": true, + "readonly": false, + "type": "DropdownPassThroughOptions" + }, + { + "name": "editor", + "optional": true, + "readonly": false, + "type": "EditorPassThroughOptions" + }, + { + "name": "fieldset", + "optional": true, + "readonly": false, + "type": "FieldsetPassThroughOptions" + }, + { + "name": "fileupload", + "optional": true, + "readonly": false, + "type": "FileUploadPassThroughOptions" + }, + { + "name": "galleria", + "optional": true, + "readonly": false, + "type": "GalleriaPassThroughOptions" + }, + { + "name": "image", + "optional": true, + "readonly": false, + "type": "ImagePassThroughOptions" + }, + { + "name": "inplace", + "optional": true, + "readonly": false, + "type": "InplacePassThroughOptions" + }, + { + "name": "inputmask", + "optional": true, + "readonly": false, + "type": "InputTextPassThroughOptions" + }, + { + "name": "inputnumber", + "optional": true, + "readonly": false, + "type": "InputNumberPassThroughOptions" + }, + { + "name": "inputswitch", + "optional": true, + "readonly": false, + "type": "InputSwitchPassThroughOptions" + }, + { + "name": "inputtext", + "optional": true, + "readonly": false, + "type": "InputTextPassThroughOptions" + }, + { + "name": "inputtextarea", + "optional": true, + "readonly": false, + "type": "InputTextareaPassThroughOptions" + }, + { + "name": "knob", + "optional": true, + "readonly": false, + "type": "KnobPassThroughOptions" + }, + { + "name": "listbox", + "optional": true, + "readonly": false, + "type": "ListboxPassThroughOptions" + }, + { + "name": "megamenu", + "optional": true, + "readonly": false, + "type": "MegaMenuPassThroughOptions" + }, + { + "name": "mention", + "optional": true, + "readonly": false, + "type": "MentionPassThroughOptions" + }, + { + "name": "menu", + "optional": true, + "readonly": false, + "type": "MenuPassThroughOptions" + }, + { + "name": "menubar", + "optional": true, + "readonly": false, + "type": "MenubarPassThroughOptions" + }, + { + "name": "message", + "optional": true, + "readonly": false, + "type": "MessagePassThroughOptions" + }, + { + "name": "messages", + "optional": true, + "readonly": false, + "type": "MessagesPassThroughOptions" + }, + { + "name": "multiselect", + "optional": true, + "readonly": false, + "type": "MultiSelectPassThroughOptions" + }, + { + "name": "multisatecheckbox", + "optional": true, + "readonly": false, + "type": "MultiStateCheckboxPassThroughOptions" + }, + { + "name": "orderlist", + "optional": true, + "readonly": false, + "type": "OrderListPassThroughOptions" + }, + { + "name": "organizationchart", + "optional": true, + "readonly": false, + "type": "OrganizationChartPassThroughOptions" + }, + { + "name": "overlaypanel", + "optional": true, + "readonly": false, + "type": "OverlayPanelPassThroughOptions" + }, + { + "name": "paginator", + "optional": true, + "readonly": false, + "type": "PaginatorPassThroughOptions" + }, + { + "name": "panel", + "optional": true, + "readonly": false, + "type": "PanelPassThroughOptions" + }, + { + "name": "panelmenu", + "optional": true, + "readonly": false, + "type": "PanelMenuPassThroughOptions" + }, + { + "name": "password", + "optional": true, + "readonly": false, + "type": "PasswordPassThroughOptions" + }, + { + "name": "picklist", + "optional": true, + "readonly": false, + "type": "PickListPassThroughOptions" + }, + { + "name": "progressbar", + "optional": true, + "readonly": false, + "type": "ProgressBarPassThroughOptions" + }, + { + "name": "progressspinner", + "optional": true, + "readonly": false, + "type": "ProgressSpinnerPassThroughOptions" + }, + { + "name": "radiobutton", + "optional": true, + "readonly": false, + "type": "RadioButtonPassThroughOptions" + }, + { + "name": "rating", + "optional": true, + "readonly": false, + "type": "RatingPassThroughOptions" + }, + { + "name": "row", + "optional": true, + "readonly": false, + "type": "RowPassThroughOptions" + }, + { + "name": "scrollpanel", + "optional": true, + "readonly": false, + "type": "ScrollPanelPassThroughOptions" + }, + { + "name": "scrolltop", + "optional": true, + "readonly": false, + "type": "ScrollTopPassThroughOptions" + }, + { + "name": "selectbutton", + "optional": true, + "readonly": false, + "type": "SelectButtonPassThroughOptions" + }, + { + "name": "sidebar", + "optional": true, + "readonly": false, + "type": "SidebarPassThroughOptions" + }, + { + "name": "skeleton", + "optional": true, + "readonly": false, + "type": "SkeletonPassThroughOptions" + }, + { + "name": "slidemenu", + "optional": true, + "readonly": false, + "type": "SlideMenuPassThroughOptions" + }, + { + "name": "slider", + "optional": true, + "readonly": false, + "type": "SliderPassThroughOptions" + }, + { + "name": "speeddial", + "optional": true, + "readonly": false, + "type": "SpeedDialPassThroughOptions" + }, + { + "name": "splitbutton", + "optional": true, + "readonly": false, + "type": "SplitButtonPassThroughOptions" + }, + { + "name": "splitter", + "optional": true, + "readonly": false, + "type": "SplitterPassThroughOptions" + }, + { + "name": "steps", + "optional": true, + "readonly": false, + "type": "StepsPassThroughOptions" + }, + { + "name": "tabmenu", + "optional": true, + "readonly": false, + "type": "TabMenuPassThroughOptions" + }, + { + "name": "tabpanel", + "optional": true, + "readonly": false, + "type": "TabPanelPassThroughOptions" + }, + { + "name": "tabview", + "optional": true, + "readonly": false, + "type": "TabViewPassThroughOptions" + }, + { + "name": "tag", + "optional": true, + "readonly": false, + "type": "TagPassThroughOptions" + }, + { + "name": "terminal", + "optional": true, + "readonly": false, + "type": "TerminalPassThroughOptions" + }, + { + "name": "tieredmenu", + "optional": true, + "readonly": false, + "type": "TieredMenuPassThroughOptions" + }, + { + "name": "timeline", + "optional": true, + "readonly": false, + "type": "TimelinePassThroughOptions" + }, + { + "name": "toast", + "optional": true, + "readonly": false, + "type": "ToastPassThroughOptions" + }, + { + "name": "togglebutton", + "optional": true, + "readonly": false, + "type": "ToggleButtonPassThroughOptions" + }, + { + "name": "toolbar", + "optional": true, + "readonly": false, + "type": "ToolbarPassThroughOptions" + }, + { + "name": "tooltip", + "optional": true, + "readonly": false, + "type": "TooltipPassThroughOptions" + }, + { + "name": "tree", + "optional": true, + "readonly": false, + "type": "TreePassThroughOptions" + }, + { + "name": "treeselect", + "optional": true, + "readonly": false, + "type": "TreeSelectPassThroughOptions" + }, + { + "name": "treetable", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughOptions" + }, + { + "name": "virtualscroller", + "optional": true, + "readonly": false, + "type": "VirtualScrollerPassThroughOptions" + } + ], + "callbacks": [] + }, "PrimeIconsOptions": { "relatedProp": "", "props": [ @@ -3958,7 +4516,7 @@ "name": "severity", "optional": true, "readonly": false, - "type": "\"success\" | \"help\" | \"warning\" | \"info\" | \"secondary\" | \"danger\"", + "type": "\"success\" | \"help\" | \"warning\" | \"secondary\" | \"info\" | \"danger\"", "default": "", "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"help\"." }, @@ -12569,7 +13127,7 @@ }, { "name": "mode", - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"notContains\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Filter match mode" }, { @@ -14723,7 +15281,7 @@ "name": "matchMode", "optional": false, "readonly": false, - "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"notContains\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "description": "Type of filter match." } ], @@ -37174,7 +37732,7 @@ "name": "severity", "optional": true, "readonly": false, - "type": "\"success\" | \"warning\" | \"info\" | \"secondary\" | \"danger\"", + "type": "\"success\" | \"warning\" | \"secondary\" | \"info\" | \"danger\"", "default": "", "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\"." }, @@ -43883,7 +44441,7 @@ "name": "globalFilterMatchMode", "optional": true, "readonly": false, - "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notContains\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", + "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"notContains\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"", "default": "contains", "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"." }, From 3cbad60ab76e769e42f1f1b34365e3df275a0d82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Fri, 9 Jun 2023 16:20:16 +0300 Subject: [PATCH 20/53] Refactor --- components/layout/layout.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/components/layout/layout.js b/components/layout/layout.js index beee18861e..ca36d1e887 100644 --- a/components/layout/layout.js +++ b/components/layout/layout.js @@ -66,21 +66,6 @@ export default function Layout(props) { useEffect(() => { setRipple(true); setInputStyle('outlined'); - setPt({ - panel: { - header: { - className: 'bg-green-500' - }, - footer: { - className: 'bg-red-500' - } - }, - autocomplete: { - root: { - className: 'bg-red-500' - } - } - }); }, []); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { From 7c9f34cda6b872305d2b12e337c8fd7508581240 Mon Sep 17 00:00:00 2001 From: Melloware Date: Sat, 10 Jun 2023 08:20:04 -0400 Subject: [PATCH 21/53] Lint and Format and Test Fixes (#4496) --- components/doc/dock/advanceddoc.js | 4 +- components/doc/slidemenu/pt/wireframe.js | 2 - components/layout/layout.js | 1 - components/lib/accordion/Accordion.js | 2 +- components/lib/api/context.js | 7 +- .../avatar/__snapshots__/Avatar.spec.js.snap | 26 ++++ .../__snapshots__/AvatarGroup.spec.js.snap | 16 +++ .../badge/__snapshots__/Badge.spec.js.snap | 20 +++ components/lib/blockui/BlockUI.spec.js | 46 ++++--- .../__snapshots__/BlockUI.spec.js.snap | 36 ++++++ components/lib/button/Button.spec.js | 115 +++++++++++++++--- .../button/__snapshots__/Button.spec.js.snap | 40 +++++- components/lib/calendar/Calendar.js | 12 +- components/lib/card/Card.spec.js | 36 ++++-- .../lib/card/__snapshots__/Card.spec.js.snap | 30 +++++ .../lib/chip/__snapshots__/Chip.spec.js.snap | 20 +++ components/lib/colorpicker/ColorPicker.js | 4 +- components/lib/componentbase/ComponentBase.js | 14 +-- components/lib/datatable/DataTable.js | 10 +- .../__snapshots__/Divider.spec.js.snap | 27 ++++ components/lib/fieldset/Fieldset.spec.js | 32 +++-- .../__snapshots__/Fieldset.spec.js.snap | 50 ++++++++ components/lib/hooks/useLocale.js | 15 ++- .../__snapshots__/InputText.spec.js.snap | 8 ++ .../__snapshots__/InputTextarea.spec.js.snap | 10 ++ components/lib/megamenu/MegaMenu.js | 18 +-- .../__snapshots__/Message.spec.js.snap | 30 +++++ components/lib/multiselect/MultiSelect.js | 12 +- components/lib/paginator/Paginator.js | 10 +- components/lib/panel/Panel.spec.js | 40 ++++-- .../panel/__snapshots__/Panel.spec.js.snap | 60 +++++++++ .../__snapshots__/ProgressBar.spec.js.snap | 22 ++++ .../ProgressSpinner.spec.js.snap | 12 ++ components/lib/ripple/Ripple.spec.js | 16 ++- .../ripple/__snapshots__/Ripple.spec.js.snap | 14 +-- .../__snapshots__/ScrollPanel.spec.js.snap | 12 ++ .../__snapshots__/Skeleton.spec.js.snap | 18 +++ components/lib/splitter/Splitter.js | 2 +- .../__snapshots__/Splitter.spec.js.snap | 54 ++++++++ components/lib/tabview/TabView.js | 2 +- .../lib/tag/__snapshots__/Tag.spec.js.snap | 28 +++++ components/lib/tooltip/Tooltip.spec.js | 83 ++++++++++--- components/lib/utils/ObjectUtils.js | 6 +- pages/_app.js | 8 +- 44 files changed, 854 insertions(+), 176 deletions(-) diff --git a/components/doc/dock/advanceddoc.js b/components/doc/dock/advanceddoc.js index deb31ca907..1ae3899571 100644 --- a/components/doc/dock/advanceddoc.js +++ b/components/doc/dock/advanceddoc.js @@ -1,6 +1,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react'; import { NodeService } from '../../../service/NodeService'; import { PhotoService } from '../../../service/PhotoService'; +import { PrimeReactContext } from '../../lib/api/context'; import { Dialog } from '../../lib/dialog/Dialog'; import { Dock } from '../../lib/dock/Dock'; import { Galleria } from '../../lib/galleria/Galleria'; @@ -12,7 +13,6 @@ import { Tooltip } from '../../lib/tooltip/Tooltip'; import { Tree } from '../../lib/tree/Tree'; import { DocSectionCode } from '../common/docsectioncode'; import { DocSectionText } from '../common/docsectiontext'; -import { PrimeReactContext } from '../../lib/api/context'; export function AdvancedDoc(props) { const [displayTerminal, setDisplayTerminal] = useState(false); @@ -263,7 +263,7 @@ export function AdvancedDoc(props) { // reset setAppendTo(null); }; - }, []); + }, []); // eslint-disable-line react-hooks/exhaustive-deps const start = ; const end = ( diff --git a/components/doc/slidemenu/pt/wireframe.js b/components/doc/slidemenu/pt/wireframe.js index fdf23d7b4a..9bf2ca8d53 100644 --- a/components/doc/slidemenu/pt/wireframe.js +++ b/components/doc/slidemenu/pt/wireframe.js @@ -1,9 +1,7 @@ - import React from 'react'; import { DocSectionText } from '../../common/docsectiontext'; export const Wireframe = (props) => { - return ( <> diff --git a/components/layout/layout.js b/components/layout/layout.js index ca36d1e887..e6a159e98e 100644 --- a/components/layout/layout.js +++ b/components/layout/layout.js @@ -85,7 +85,6 @@ export default function Layout(props) { }; }, []); // eslint-disable-line react-hooks/exhaustive-deps - return (
    diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js index 28447592c1..66f77394cf 100644 --- a/components/lib/accordion/Accordion.js +++ b/components/lib/accordion/Accordion.js @@ -8,7 +8,7 @@ import { ChevronRightIcon } from '../icons/chevronright'; import { ChevronDownIcon } from '../icons/chevrondown'; import { PrimeReactContext } from '../api/context'; -export const AccordionTab = () => { }; +export const AccordionTab = () => {}; export const Accordion = React.forwardRef((inProps, ref) => { const context = React.useContext(PrimeReactContext); diff --git a/components/lib/api/context.js b/components/lib/api/context.js index cdf193290e..be605deccb 100644 --- a/components/lib/api/context.js +++ b/components/lib/api/context.js @@ -45,7 +45,6 @@ export const PrimeReactProvider = (props) => { linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); }; - const value = { changeTheme, ripple, @@ -74,9 +73,5 @@ export const PrimeReactProvider = (props) => { setFilterMatchModeOptions }; - return ( - - {props.children} - - ); + return {props.children}; }; diff --git a/components/lib/avatar/__snapshots__/Avatar.spec.js.snap b/components/lib/avatar/__snapshots__/Avatar.spec.js.snap index e2f3eb2b78..136011b982 100644 --- a/components/lib/avatar/__snapshots__/Avatar.spec.js.snap +++ b/components/lib/avatar/__snapshots__/Avatar.spec.js.snap @@ -4,13 +4,18 @@ exports[`Avatar badge 1`] = `
    avatar 4 @@ -22,6 +27,8 @@ exports[`Avatar default 1`] = `
    `; @@ -30,9 +37,12 @@ exports[`Avatar icon 1`] = `
    @@ -42,9 +52,12 @@ exports[`Avatar image 1`] = `
    avatar
    @@ -55,9 +68,12 @@ exports[`Avatar label 1`] = `
    P @@ -69,6 +85,8 @@ exports[`Avatar shape cirle 1`] = `
    `; @@ -77,6 +95,8 @@ exports[`Avatar shape square 1`] = `
    `; @@ -85,6 +105,8 @@ exports[`Avatar size large 1`] = `
    `; @@ -93,6 +115,8 @@ exports[`Avatar size xlarge 1`] = `
    `; @@ -101,6 +125,8 @@ exports[`Avatar templating 1`] = `
    Content
    diff --git a/components/lib/avatargroup/__snapshots__/AvatarGroup.spec.js.snap b/components/lib/avatargroup/__snapshots__/AvatarGroup.spec.js.snap index 2575c1cf30..0738fe29eb 100644 --- a/components/lib/avatargroup/__snapshots__/AvatarGroup.spec.js.snap +++ b/components/lib/avatargroup/__snapshots__/AvatarGroup.spec.js.snap @@ -4,6 +4,8 @@ exports[`AvatarGroup default 1`] = `
    `; @@ -12,36 +14,50 @@ exports[`AvatarGroup group 1`] = `
    P
    avatar
    +2 diff --git a/components/lib/badge/__snapshots__/Badge.spec.js.snap b/components/lib/badge/__snapshots__/Badge.spec.js.snap index b7be21aa04..28143fd0d4 100644 --- a/components/lib/badge/__snapshots__/Badge.spec.js.snap +++ b/components/lib/badge/__snapshots__/Badge.spec.js.snap @@ -4,6 +4,8 @@ exports[`Badge default 1`] = `
    `; @@ -12,6 +14,8 @@ exports[`Badge severity danger 1`] = `
    `; @@ -20,6 +24,8 @@ exports[`Badge severity info 1`] = `
    `; @@ -28,6 +34,8 @@ exports[`Badge severity invalid 1`] = `
    `; @@ -36,6 +44,8 @@ exports[`Badge severity success 1`] = `
    `; @@ -44,6 +54,8 @@ exports[`Badge severity warning 1`] = `
    `; @@ -52,6 +64,8 @@ exports[`Badge size invalid 1`] = `
    `; @@ -60,6 +74,8 @@ exports[`Badge size large 1`] = `
    `; @@ -68,6 +84,8 @@ exports[`Badge size xlarge 1`] = `
    `; @@ -76,6 +94,8 @@ exports[`Badge value 1`] = `
    22 diff --git a/components/lib/blockui/BlockUI.spec.js b/components/lib/blockui/BlockUI.spec.js index 3ba2ab8b9d..6b5cf9356e 100644 --- a/components/lib/blockui/BlockUI.spec.js +++ b/components/lib/blockui/BlockUI.spec.js @@ -2,30 +2,42 @@ import '@testing-library/jest-dom'; import { act, render } from '@testing-library/react'; import * as React from 'react'; import { snapshotParent } from '../../test'; +import { PrimeReactProvider } from '../api/context'; import { Panel } from '../panel/Panel'; import { BlockUI } from './BlockUI'; describe('BlockUI', () => { - snapshotParent(, 'block fullscreen'); snapshotParent( - - blocked - , + + + , + 'block fullscreen' + ); + snapshotParent( + + + blocked + + , 'block panel' ); snapshotParent( - - unblocked - , + + + unblocked + + , 'unblock panel' ); test('block and unblock panel events', async () => { // Arrange const ref = React.createRef(); const { container } = render( - - unblocked - + + + unblocked + + ); // Act @@ -48,7 +60,11 @@ describe('BlockUI', () => { test('block and unblock fullscreen events', async () => { // Arrange const ref = React.createRef(); - const { container } = render(); + const { container } = render( + + + + ); // Act act(() => { @@ -67,9 +83,11 @@ describe('BlockUI', () => { expect(container.parentElement).toMatchSnapshot('unblocked-event-fullscreen'); }); snapshotParent( - - style + class - , + + + style + class + + , 'container style and className' ); }); diff --git a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap index b91c91116a..d0629a8f26 100644 --- a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap +++ b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap @@ -7,6 +7,8 @@ exports[`BlockUI block and unblock fullscreen events: blocked-event-fullscreen 1
    unblocked
    @@ -67,20 +77,26 @@ exports[`BlockUI block and unblock panel events: unblocked-event 1`] = `
    unblocked
    @@ -101,6 +117,8 @@ exports[`BlockUI block fullscreen 1`] = `
    blocked
    @@ -152,21 +176,27 @@ exports[`BlockUI container style and className 1`] = `
    style + class
    @@ -188,20 +218,26 @@ exports[`BlockUI unblock panel 1`] = `
    unblocked
    diff --git a/components/lib/button/Button.spec.js b/components/lib/button/Button.spec.js index 40818ed17f..3b43bd9c33 100644 --- a/components/lib/button/Button.spec.js +++ b/components/lib/button/Button.spec.js @@ -2,31 +2,95 @@ import '@testing-library/jest-dom'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { snapshot } from '../../test'; -import PrimeReact from '../api/PrimeReact'; +import { PrimeReactProvider } from '../api/context'; import { Button } from './Button'; describe('Button', () => { - snapshot(
    `; @@ -24,9 +21,12 @@ exports[`Button when aria-label prop is not exist aria-label prop should be equa