From 715981f090f72adf646445ca39c56e4532b57882 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Sun, 5 Feb 2023 22:50:09 +0000 Subject: [PATCH] Fixed #3786 - (2/2) Core: Deprecated defaultProps still used --- components/lib/accordion/Accordion.js | 12 +- components/lib/accordion/AccordionBase.js | 63 +++--- components/lib/autocomplete/AutoComplete.js | 6 +- .../lib/autocomplete/AutoCompleteBase.js | 135 +++++++------ components/lib/avatar/Avatar.js | 6 +- components/lib/avatar/AvatarBase.js | 33 +-- components/lib/avatargroup/AvatarGroup.js | 8 +- components/lib/avatargroup/AvatarGroupBase.js | 15 +- components/lib/badge/Badge.js | 6 +- components/lib/badge/BadgeBase.js | 21 +- components/lib/blockui/BlockUI.js | 6 +- components/lib/blockui/BlockUIBase.js | 35 ++-- components/lib/breadcrumb/BreadCrumb.js | 6 +- components/lib/breadcrumb/BreadCrumbBase.js | 21 +- components/lib/button/Button.js | 6 +- components/lib/button/ButtonBase.js | 33 +-- components/lib/calendar/Calendar.js | 6 +- components/lib/calendar/CalendarBase.js | 181 +++++++++-------- components/lib/card/Card.js | 6 +- components/lib/card/CardBase.js | 25 ++- components/lib/carousel/Carousel.js | 6 +- components/lib/carousel/CarouselBase.js | 53 ++--- components/lib/cascadeselect/CascadeSelect.js | 6 +- .../lib/cascadeselect/CascadeSelectBase.js | 65 +++--- components/lib/chart/Chart.js | 8 +- components/lib/chart/ChartBase.js | 29 ++- components/lib/checkbox/Checkbox.js | 6 +- components/lib/checkbox/CheckboxBase.js | 51 +++-- components/lib/chip/Chip.js | 6 +- components/lib/chip/ChipBase.js | 33 +-- components/lib/chips/Chips.js | 6 +- components/lib/chips/ChipsBase.js | 63 +++--- components/lib/colorpicker/ColorPicker.js | 8 +- components/lib/colorpicker/ColorPickerBase.js | 51 +++-- components/lib/column/ColumnBase.js | 164 ++++++++------- components/lib/columngroup/ColumnGroupBase.js | 11 +- components/lib/confirmdialog/ConfirmDialog.js | 6 +- .../lib/confirmdialog/ConfirmDialogBase.js | 45 +++-- components/lib/confirmpopup/ConfirmPopup.js | 6 +- .../lib/confirmpopup/ConfirmPopupBase.js | 53 ++--- components/lib/contextmenu/ContextMenu.js | 8 +- components/lib/contextmenu/ContextMenuBase.js | 33 +-- components/lib/csstransition/CSSTransition.js | 4 +- .../lib/csstransition/CSSTransitionBase.js | 11 +- components/lib/datascroller/DataScroller.js | 6 +- .../lib/datascroller/DataScrollerBase.js | 41 ++-- components/lib/datatable/BodyCell.js | 5 +- components/lib/datatable/BodyRow.js | 13 +- components/lib/datatable/ColumnFilter.js | 4 +- components/lib/datatable/DataTable.js | 186 +++-------------- components/lib/datatable/DataTableBase.js | 142 +++++++++++++ components/lib/datatable/FooterCell.js | 5 +- components/lib/datatable/HeaderCell.js | 3 +- components/lib/datatable/TableBody.js | 11 +- components/lib/datatable/TableFooter.js | 17 +- components/lib/datatable/TableHeader.js | 25 ++- components/lib/dataview/DataView.js | 10 +- components/lib/dataview/DataViewBase.js | 92 +++++---- .../lib/deferredcontent/DeferredContent.js | 7 +- .../deferredcontent/DeferredContentBase.js | 13 +- components/lib/dialog/Dialog.js | 6 +- components/lib/dialog/DialogBase.js | 101 ++++----- components/lib/divider/Divider.js | 8 +- components/lib/divider/DividerBase.js | 21 +- components/lib/dock/Dock.js | 6 +- components/lib/dock/DockBase.js | 27 ++- components/lib/dropdown/Dropdown.js | 6 +- components/lib/dropdown/DropdownBase.js | 127 ++++++------ components/lib/editor/Editor.js | 8 +- components/lib/editor/EditorBase.js | 41 ++-- components/lib/fieldset/Fieldset.js | 8 +- components/lib/fieldset/FieldsetBase.js | 33 +-- components/lib/fileupload/FileUpload.js | 8 +- components/lib/fileupload/FileUploadBase.js | 127 ++++++------ components/lib/galleria/Galleria.js | 6 +- components/lib/galleria/GalleriaBase.js | 71 ++++--- components/lib/image/Image.js | 6 +- components/lib/image/ImageBase.js | 39 ++-- components/lib/inplace/Inplace.js | 10 +- components/lib/inplace/InplaceBase.js | 47 +++-- components/lib/inputmask/InputMask.js | 6 +- components/lib/inputmask/InputMaskBase.js | 57 +++--- components/lib/inputnumber/InputNumber.js | 6 +- components/lib/inputnumber/InputNumberBase.js | 109 +++++----- components/lib/inputswitch/InputSwitch.js | 6 +- components/lib/inputswitch/InputSwitchBase.js | 43 ++-- components/lib/inputtext/InputText.js | 6 +- components/lib/inputtext/InputTextBase.js | 25 ++- components/lib/inputtextarea/InputTextarea.js | 6 +- .../lib/inputtextarea/InputTextareaBase.js | 33 +-- components/lib/knob/Knob.js | 8 +- components/lib/knob/KnobBase.js | 47 +++-- components/lib/listbox/ListBox.js | 6 +- components/lib/listbox/ListBoxBase.js | 79 ++++---- components/lib/megamenu/MegaMenu.js | 6 +- components/lib/megamenu/MegaMenuBase.js | 25 ++- components/lib/mention/Mention.js | 6 +- components/lib/mention/MentionBase.js | 65 +++--- components/lib/menu/Menu.js | 6 +- components/lib/menu/MenuBase.js | 33 +-- components/lib/menubar/Menubar.js | 6 +- components/lib/menubar/MenubarBase.js | 23 ++- components/lib/message/Message.js | 6 +- components/lib/message/MessageBase.js | 25 ++- components/lib/messages/Messages.js | 7 +- components/lib/messages/MessagesBase.js | 23 ++- components/lib/multiselect/MultiSelect.js | 6 +- components/lib/multiselect/MultiSelectBase.js | 133 ++++++------ .../multistatecheckbox/MultiStateCheckbox.js | 6 +- .../MultiStateCheckboxBase.js | 45 +++-- components/lib/orderlist/OrderList.js | 6 +- components/lib/orderlist/OrderListBase.js | 47 +++-- .../organizationchart/OrganizationChart.js | 8 +- .../OrganizationChartBase.js | 31 +-- components/lib/overlaypanel/OverlayPanel.js | 8 +- .../lib/overlaypanel/OverlayPanelBase.js | 33 +-- 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 | 6 +- components/lib/paginator/PaginatorBase.js | 191 +++++++++++------- components/lib/paginator/PrevPageLink.js | 4 +- .../lib/paginator/RowsPerPageDropdown.js | 4 +- components/lib/panel/Panel.js | 6 +- components/lib/panel/PanelBase.js | 39 ++-- components/lib/panelmenu/PanelMenu.js | 6 +- components/lib/panelmenu/PanelMenuBase.js | 23 ++- components/lib/password/Password.js | 6 +- components/lib/password/PasswordBase.js | 67 +++--- components/lib/picklist/PickList.js | 6 +- components/lib/picklist/PickListBase.js | 89 ++++---- components/lib/portal/Portal.js | 6 +- components/lib/portal/PortalBase.js | 21 +- components/lib/progressbar/ProgressBar.js | 10 +- components/lib/progressbar/ProgressBarBase.js | 29 ++- .../lib/progressspinner/ProgressSpinner.js | 8 +- .../progressspinner/ProgressSpinnerBase.js | 23 ++- components/lib/radiobutton/RadioButton.js | 6 +- components/lib/radiobutton/RadioButtonBase.js | 39 ++-- components/lib/rating/Rating.js | 6 +- components/lib/rating/RatingBase.js | 45 +++-- components/lib/ripple/RippleBase.js | 11 +- components/lib/row/Row.js | 7 +- components/lib/row/RowBase.js | 16 +- components/lib/scrollpanel/ScrollPanel.js | 8 +- components/lib/scrollpanel/ScrollPanelBase.js | 17 +- components/lib/scrolltop/ScrollTop.js | 8 +- components/lib/scrolltop/ScrollTopBase.js | 29 ++- components/lib/selectbutton/SelectButton.js | 6 +- .../lib/selectbutton/SelectButtonBase.js | 45 +++-- components/lib/sidebar/Sidebar.js | 6 +- components/lib/sidebar/SidebarBase.js | 51 +++-- components/lib/skeleton/Skeleton.js | 8 +- components/lib/skeleton/SkeletonBase.js | 27 ++- components/lib/slidemenu/SlideMenu.js | 8 +- components/lib/slidemenu/SlideMenuBase.js | 45 +++-- components/lib/slider/Slider.js | 6 +- components/lib/slider/SliderBase.js | 37 ++-- components/lib/speeddial/SpeedDial.js | 6 +- components/lib/speeddial/SpeedDialBase.js | 61 +++--- components/lib/splitbutton/SplitButton.js | 6 +- components/lib/splitbutton/SplitButtonBase.js | 61 +++--- components/lib/splitter/Splitter.js | 12 +- components/lib/splitter/SplitterBase.js | 45 +++-- components/lib/steps/Steps.js | 6 +- components/lib/steps/StepsBase.js | 25 ++- components/lib/styleclass/StyleClass.js | 4 +- components/lib/styleclass/StyleClassBase.js | 31 +-- components/lib/tabmenu/TabMenu.js | 14 +- components/lib/tabmenu/TabMenuBase.js | 23 ++- components/lib/tabview/TabView.js | 11 +- components/lib/tabview/TabViewBase.js | 69 ++++--- components/lib/tag/Tag.js | 8 +- components/lib/tag/TagBase.js | 23 ++- components/lib/terminal/Terminal.js | 8 +- components/lib/terminal/TerminalBase.js | 21 +- components/lib/tieredmenu/TieredMenu.js | 8 +- components/lib/tieredmenu/TieredMenuBase.js | 33 +-- components/lib/timeline/Timeline.js | 6 +- components/lib/timeline/TimelineBase.js | 27 ++- components/lib/toast/Toast.js | 8 +- components/lib/toast/ToastBase.js | 37 ++-- components/lib/togglebutton/ToggleButton.js | 6 +- .../lib/togglebutton/ToggleButtonBase.js | 41 ++-- components/lib/toolbar/Toolbar.js | 6 +- components/lib/toolbar/ToolbarBase.js | 27 ++- components/lib/tooltip/Tooltip.js | 6 +- components/lib/tooltip/TooltipBase.js | 65 +++--- components/lib/tree/Tree.js | 6 +- components/lib/tree/TreeBase.js | 93 +++++---- components/lib/treeselect/TreeSelect.js | 6 +- components/lib/treeselect/TreeSelectBase.js | 97 ++++----- components/lib/treetable/TreeTable.js | 113 ++--------- components/lib/treetable/TreeTableBase.js | 87 ++++++++ components/lib/treetable/TreeTableFooter.js | 23 ++- components/lib/treetable/TreeTableHeader.js | 75 +++---- components/lib/treetable/TreeTableRow.js | 17 +- .../lib/tristatecheckbox/TriStateCheckbox.js | 6 +- .../tristatecheckbox/TriStateCheckboxBase.js | 31 +-- components/lib/utils/ObjectUtils.js | 30 ++- components/lib/utils/utils.d.ts | 8 +- .../lib/virtualscroller/VirtualScroller.js | 6 +- .../virtualscroller/VirtualScrollerBase.js | 63 +++--- 206 files changed, 3405 insertions(+), 2598 deletions(-) create mode 100644 components/lib/datatable/DataTableBase.js create mode 100644 components/lib/treetable/TreeTableBase.js diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js index 3251ce195c..485dccc2cc 100644 --- a/components/lib/accordion/Accordion.js +++ b/components/lib/accordion/Accordion.js @@ -3,18 +3,20 @@ import { ariaLabel } from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { useMountEffect } from '../hooks/Hooks'; import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils'; -import { AccordionDefaultProps, AccordionTabDefaultProps, getTabProp } from './AccordionBase'; +import { AccordionBase, AccordionTabBase } from './AccordionBase'; export const AccordionTab = () => {}; export const Accordion = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, AccordionDefaultProps); + const props = AccordionBase.getProps(inProps); const [idState, setIdState] = React.useState(props.id); const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex); const elementRef = React.useRef(null); const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState; + const getTabProp = (tab, name) => AccordionTabBase.getCProp(tab, name); + const onTabHeaderClick = (event, tab, index) => { if (!getTabProp(tab, 'disabled')) { const selected = isSelected(index); @@ -78,7 +80,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { const headerId = idState + '_header_' + index; const ariaControls = idState + '_content_' + index; const tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex'); - const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), { ...AccordionTabDefaultProps, ...tab.props }) : {getTabProp(tab, 'header')}; + const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), AccordionTabBase.getCProps(tab)) : {getTabProp(tab, 'header')}; const icon = IconUtils.getJSXIcon(selected ? props.collapseIcon : props.expandIcon, { className: 'p-accordion-toggle-icon' }, { props, selected }); const label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'); @@ -112,7 +114,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { if (ObjectUtils.isValidChild(tab, 'AccordionTab')) { const key = idState + '_' + index; const selected = isSelected(index); - const otherProps = ObjectUtils.findDiffKeys(tab.props, AccordionTabDefaultProps); + const otherProps = AccordionTabBase.getCOtherProps(tab); const tabHeader = createTabHeader(tab, selected, index); const tabContent = createTabContent(tab, selected, index); const tabClassName = classNames('p-accordion-tab', { @@ -134,7 +136,7 @@ export const Accordion = React.forwardRef((inProps, ref) => { return React.Children.map(props.children, createTab); }; - const otherProps = ObjectUtils.findDiffKeys(props, AccordionDefaultProps); + const otherProps = AccordionBase.getOtherProps(props); const className = classNames('p-accordion p-component', props.className); const tabs = createTabs(); diff --git a/components/lib/accordion/AccordionBase.js b/components/lib/accordion/AccordionBase.js index 2d1f354cff..7560946b6d 100644 --- a/components/lib/accordion/AccordionBase.js +++ b/components/lib/accordion/AccordionBase.js @@ -1,32 +1,41 @@ import { ObjectUtils } from '../utils/Utils'; -export const AccordionDefaultProps = { - __TYPE: 'Accordion', - id: null, - activeIndex: null, - className: null, - style: null, - multiple: false, - expandIcon: 'pi pi-chevron-right', - collapseIcon: 'pi pi-chevron-down', - transitionOptions: null, - onTabOpen: null, - onTabClose: null, - onTabChange: null +export const AccordionBase = { + defaultProps: { + __TYPE: 'Accordion', + id: null, + activeIndex: null, + className: null, + style: null, + multiple: false, + expandIcon: 'pi pi-chevron-right', + collapseIcon: 'pi pi-chevron-down', + transitionOptions: null, + onTabOpen: null, + onTabClose: null, + onTabChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, AccordionBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, AccordionBase.defaultProps) }; -export const AccordionTabDefaultProps = { - __TYPE: 'AccordionTab', - className: null, - contentClassName: null, - contentStyle: null, - disabled: false, - header: null, - headerClassName: null, - headerStyle: null, - headerTemplate: null, - style: null, - tabIndex: 0 +export const AccordionTabBase = { + defaultProps: { + __TYPE: 'AccordionTab', + className: null, + contentClassName: null, + contentStyle: null, + disabled: false, + header: null, + headerClassName: null, + headerStyle: null, + headerTemplate: null, + style: null, + tabIndex: 0, + children: undefined + }, + getCProp: (tab, name) => ObjectUtils.getComponentProp(tab, name, AccordionTabBase.defaultProps), + getCProps: (tab) => ObjectUtils.getComponentProps(tab, AccordionTabBase.defaultProps), + getCOtherProps: (tab) => ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps) }; - -export const getTabProp = (tab, name) => ObjectUtils.getProp(tab, name, AccordionTabDefaultProps); diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index a960eb7413..9d569c871e 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -6,12 +6,12 @@ import { InputText } from '../inputtext/InputText'; import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; -import { AutoCompleteDefaultProps } from './AutoCompleteBase'; +import { AutoCompleteBase } from './AutoCompleteBase'; import { AutoCompletePanel } from './AutoCompletePanel'; export const AutoComplete = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, AutoCompleteDefaultProps); + const props = AutoCompleteBase.getProps(inProps); const [idState, setIdState] = React.useState(props.id); const [searchingState, setSearchingState] = React.useState(false); @@ -620,7 +620,7 @@ export const AutoComplete = React.memo( const listId = idState + '_list'; const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, AutoCompleteDefaultProps); + const otherProps = AutoCompleteBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-autocomplete p-component p-inputwrapper', diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index 94b5ad15f0..6f8b613644 100644 --- a/components/lib/autocomplete/AutoCompleteBase.js +++ b/components/lib/autocomplete/AutoCompleteBase.js @@ -1,65 +1,72 @@ -export const AutoCompleteDefaultProps = { - __TYPE: 'AutoComplete', - id: null, - appendTo: null, - autoFocus: false, - autoHighlight: false, - className: null, - completeMethod: null, - delay: 300, - disabled: false, - dropdown: false, - dropdownAriaLabel: null, - dropdownAutoFocus: true, - dropdownIcon: 'pi pi-chevron-down', - dropdownMode: 'blank', - emptyMessage: null, - field: null, - forceSelection: false, - inputClassName: null, - inputId: null, - inputRef: null, - inputStyle: null, - itemTemplate: null, - maxLength: null, - minLength: 1, - multiple: false, - name: null, - onBlur: null, - onChange: null, - onClear: null, - onClick: null, - onContextMenu: null, - onDblClick: null, - onDropdownClick: null, - onFocus: null, - onHide: null, - onKeyPress: null, - onKeyUp: null, - onMouseDown: null, - onSelect: null, - onShow: null, - onUnselect: null, - optionGroupChildren: null, - optionGroupLabel: null, - optionGroupTemplate: null, - panelClassName: null, - panelStyle: null, - placeholder: null, - readOnly: false, - removeIcon: 'pi pi-times-circle', - scrollHeight: '200px', - selectedItemTemplate: null, - selectionLimit: null, - showEmptyMessage: false, - size: null, - style: null, - suggestions: null, - tabIndex: null, - tooltip: null, - tooltipOptions: null, - transitionOptions: null, - type: 'text', - value: null, - virtualScrollerOptions: null +import { ObjectUtils } from '../utils/Utils'; + +export const AutoCompleteBase = { + defaultProps: { + __TYPE: 'AutoComplete', + id: null, + appendTo: null, + autoFocus: false, + autoHighlight: false, + className: null, + completeMethod: null, + delay: 300, + disabled: false, + dropdown: false, + dropdownAriaLabel: null, + dropdownAutoFocus: true, + dropdownIcon: 'pi pi-chevron-down', + dropdownMode: 'blank', + emptyMessage: null, + field: null, + forceSelection: false, + inputClassName: null, + inputId: null, + inputRef: null, + inputStyle: null, + itemTemplate: null, + maxLength: null, + minLength: 1, + multiple: false, + name: null, + onBlur: null, + onChange: null, + onClear: null, + onClick: null, + onContextMenu: null, + onDblClick: null, + onDropdownClick: null, + onFocus: null, + onHide: null, + onKeyPress: null, + onKeyUp: null, + onMouseDown: null, + onSelect: null, + onShow: null, + onUnselect: null, + optionGroupChildren: null, + optionGroupLabel: null, + optionGroupTemplate: null, + panelClassName: null, + panelStyle: null, + placeholder: null, + readOnly: false, + removeIcon: 'pi pi-times-circle', + scrollHeight: '200px', + selectedItemTemplate: null, + selectionLimit: null, + showEmptyMessage: false, + size: null, + style: null, + suggestions: null, + tabIndex: null, + tooltip: null, + tooltipOptions: null, + transitionOptions: null, + type: 'text', + value: null, + virtualScrollerOptions: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, AutoCompleteBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, AutoCompleteBase.defaultProps) }; diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js index 03a3e1de79..d07fe53989 100644 --- a/components/lib/avatar/Avatar.js +++ b/components/lib/avatar/Avatar.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { AvatarDefaultProps } from './AvatarBase'; +import { AvatarBase } from './AvatarBase'; export const Avatar = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, AvatarDefaultProps); + const props = AvatarBase.getProps(inProps); const elementRef = React.useRef(null); const [imageFailed, setImageFailed] = React.useState(false); @@ -40,7 +40,7 @@ export const Avatar = React.forwardRef((inProps, ref) => { getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, AvatarDefaultProps); + const otherProps = AvatarBase.getOtherProps(props); const containerClassName = classNames( 'p-avatar p-component', { diff --git a/components/lib/avatar/AvatarBase.js b/components/lib/avatar/AvatarBase.js index 1617fd372e..d9c620156c 100644 --- a/components/lib/avatar/AvatarBase.js +++ b/components/lib/avatar/AvatarBase.js @@ -1,14 +1,21 @@ -export const AvatarDefaultProps = { - __TYPE: 'Avatar', - className: null, - icon: null, - image: null, - imageAlt: 'avatar', - imageFallback: 'default', - label: null, - onImageError: null, - shape: 'square', - size: 'normal', - style: null, - template: null +import { ObjectUtils } from '../utils/Utils'; + +export const AvatarBase = { + defaultProps: { + __TYPE: 'Avatar', + className: null, + icon: null, + image: null, + imageAlt: 'avatar', + imageFallback: 'default', + label: null, + onImageError: null, + shape: 'square', + size: 'normal', + style: null, + template: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, AvatarBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, AvatarBase.defaultProps) }; diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js index 483f5947f7..488ec567ad 100644 --- a/components/lib/avatargroup/AvatarGroup.js +++ b/components/lib/avatargroup/AvatarGroup.js @@ -1,12 +1,12 @@ import * as React from 'react'; -import { classNames, ObjectUtils } from '../utils/Utils'; -import { AvatarGroupDefaultProps } from './AvatarGroupBase'; +import { classNames } from '../utils/Utils'; +import { AvatarGroupBase } from './AvatarGroupBase'; export const AvatarGroup = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, AvatarGroupDefaultProps); + const props = AvatarGroupBase.getProps(inProps); const elementRef = React.useRef(null); - const otherProps = ObjectUtils.findDiffKeys(props, AvatarGroupDefaultProps); + const otherProps = AvatarGroupBase.getOtherProps(props); const className = classNames('p-avatar-group p-component', props.className); React.useImperativeHandle(ref, () => ({ diff --git a/components/lib/avatargroup/AvatarGroupBase.js b/components/lib/avatargroup/AvatarGroupBase.js index b329cb3582..b949dbf34f 100644 --- a/components/lib/avatargroup/AvatarGroupBase.js +++ b/components/lib/avatargroup/AvatarGroupBase.js @@ -1,5 +1,12 @@ -export const AvatarGroupDefaultProps = { - __TYPE: 'AvatarGroup', - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const AvatarGroupBase = { + defaultProps: { + __TYPE: 'AvatarGroup', + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, AvatarGroupBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, AvatarGroupBase.defaultProps) }; diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js index 4de0003048..678928bee9 100644 --- a/components/lib/badge/Badge.js +++ b/components/lib/badge/Badge.js @@ -1,13 +1,13 @@ import * as React from 'react'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { BadgeDefaultProps } from './BadgeBase'; +import { BadgeBase } from './BadgeBase'; export const Badge = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, BadgeDefaultProps); + const props = BadgeBase.getProps(inProps); const elementRef = React.useRef(null); - const otherProps = ObjectUtils.findDiffKeys(props, BadgeDefaultProps); + const otherProps = BadgeBase.getOtherProps(props); const className = classNames( 'p-badge p-component', { diff --git a/components/lib/badge/BadgeBase.js b/components/lib/badge/BadgeBase.js index dd5514bde0..9cbbf644a8 100644 --- a/components/lib/badge/BadgeBase.js +++ b/components/lib/badge/BadgeBase.js @@ -1,8 +1,15 @@ -export const BadgeDefaultProps = { - __TYPE: 'Badge', - value: null, - severity: null, - size: null, - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const BadgeBase = { + defaultProps: { + __TYPE: 'Badge', + value: null, + severity: null, + size: null, + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, BadgeBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, BadgeBase.defaultProps) }; diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js index 1b9b4f33e1..0c745dcddf 100644 --- a/components/lib/blockui/BlockUI.js +++ b/components/lib/blockui/BlockUI.js @@ -3,10 +3,10 @@ import PrimeReact from '../api/Api'; import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { BlockUIDefaultProps } from './BlockUIBase'; +import { BlockUIBase } from './BlockUIBase'; export const BlockUI = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, BlockUIDefaultProps); + const props = BlockUIBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(props.blocked); const elementRef = React.useRef(null); @@ -96,7 +96,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => { return null; }; - const otherProps = ObjectUtils.findDiffKeys(props, BlockUIDefaultProps); + const otherProps = BlockUIBase.getOtherProps(props); const mask = createMask(); const className = classNames('p-blockui-container', props.containerClassName); diff --git a/components/lib/blockui/BlockUIBase.js b/components/lib/blockui/BlockUIBase.js index be5db5af6c..585d7bff85 100644 --- a/components/lib/blockui/BlockUIBase.js +++ b/components/lib/blockui/BlockUIBase.js @@ -1,15 +1,22 @@ -export const BlockUIDefaultProps = { - __TYPE: 'BlockUI', - autoZIndex: true, - baseZIndex: 0, - blocked: false, - className: null, - containerClassName: null, - containerStyle: null, - fullScreen: false, - id: null, - onBlocked: null, - onUnblocked: null, - style: null, - template: null +import { ObjectUtils } from '../utils/Utils'; + +export const BlockUIBase = { + defaultProps: { + __TYPE: 'BlockUI', + autoZIndex: true, + baseZIndex: 0, + blocked: false, + className: null, + containerClassName: null, + containerStyle: null, + fullScreen: false, + id: null, + onBlocked: null, + onUnblocked: null, + style: null, + template: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, BlockUIBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, BlockUIBase.defaultProps) }; diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js index 0a1cd720a3..bd3ed2958a 100644 --- a/components/lib/breadcrumb/BreadCrumb.js +++ b/components/lib/breadcrumb/BreadCrumb.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { BreadCrumbDefaultProps } from './BreadCrumbBase'; +import { BreadCrumbBase } from './BreadCrumbBase'; export const BreadCrumb = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, BreadCrumbDefaultProps); + const props = BreadCrumbBase.getProps(inProps); const elementRef = React.useRef(null); @@ -133,7 +133,7 @@ export const BreadCrumb = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, BreadCrumbDefaultProps); + const otherProps = BreadCrumbBase.getOtherProps(props); const className = classNames('p-breadcrumb p-component', props.className); const home = createHome(); const items = createMenuitems(); diff --git a/components/lib/breadcrumb/BreadCrumbBase.js b/components/lib/breadcrumb/BreadCrumbBase.js index a4a1eec888..3dd4c4126f 100644 --- a/components/lib/breadcrumb/BreadCrumbBase.js +++ b/components/lib/breadcrumb/BreadCrumbBase.js @@ -1,8 +1,15 @@ -export const BreadCrumbDefaultProps = { - __TYPE: 'BreadCrumb', - id: null, - model: null, - home: null, - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const BreadCrumbBase = { + defaultProps: { + __TYPE: 'BreadCrumb', + id: null, + model: null, + home: null, + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, BreadCrumbBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, BreadCrumbBase.defaultProps) }; diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js index 29d4a35339..cedb27e240 100644 --- a/components/lib/button/Button.js +++ b/components/lib/button/Button.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { ButtonDefaultProps } from './ButtonBase'; +import { ButtonBase } from './ButtonBase'; export const Button = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ButtonDefaultProps); + const props = ButtonBase.getProps(inProps); const elementRef = React.useRef(ref); @@ -49,7 +49,7 @@ export const Button = React.memo( const disabled = props.disabled || props.loading; const showTooltip = !disabled || (props.tooltipOptions && props.tooltipOptions.showOnDisabled); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip; - const otherProps = ObjectUtils.findDiffKeys(props, ButtonDefaultProps); + const otherProps = ButtonBase.getOtherProps(props); const className = classNames('p-button p-component', props.className, { 'p-button-icon-only': (props.icon || (props.loading && props.loadingIcon)) && !props.label && !props.children, 'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label, diff --git a/components/lib/button/ButtonBase.js b/components/lib/button/ButtonBase.js index eae8c1b606..1ac8229e87 100644 --- a/components/lib/button/ButtonBase.js +++ b/components/lib/button/ButtonBase.js @@ -1,14 +1,21 @@ -export const ButtonDefaultProps = { - __TYPE: 'Button', - label: null, - icon: null, - iconPos: 'left', - badge: null, - badgeClassName: null, - tooltip: null, - tooltipOptions: null, - disabled: false, - loading: false, - loadingIcon: 'pi pi-spinner pi-spin', - visible: true +import { ObjectUtils } from '../utils/Utils'; + +export const ButtonBase = { + defaultProps: { + __TYPE: 'Button', + label: null, + icon: null, + iconPos: 'left', + badge: null, + badgeClassName: null, + tooltip: null, + tooltipOptions: null, + disabled: false, + loading: false, + loadingIcon: 'pi pi-spinner pi-spin', + visible: true, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ButtonBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ButtonBase.defaultProps) }; diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 6814236915..bb25c531e6 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -6,12 +6,12 @@ import { InputText } from '../inputtext/InputText'; import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, mask, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; -import { CalendarDefaultProps } from './CalendarBase'; +import { CalendarBase } from './CalendarBase'; import { CalendarPanel } from './CalendarPanel'; export const Calendar = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, CalendarDefaultProps); + const props = CalendarBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -3255,7 +3255,7 @@ export const Calendar = React.memo( return null; }; - const otherProps = ObjectUtils.findDiffKeys(props, CalendarDefaultProps); + const otherProps = CalendarBase.getOtherProps(props); const className = classNames('p-calendar p-component p-inputwrapper', props.className, { [`p-calendar-w-btn p-calendar-w-btn-${props.iconPos}`]: props.showIcon, 'p-calendar-disabled': props.disabled, diff --git a/components/lib/calendar/CalendarBase.js b/components/lib/calendar/CalendarBase.js index 4fa29f57fa..4b5b232628 100644 --- a/components/lib/calendar/CalendarBase.js +++ b/components/lib/calendar/CalendarBase.js @@ -1,88 +1,95 @@ -export const CalendarDefaultProps = { - __TYPE: 'Calendar', - appendTo: null, - ariaLabelledBy: null, - autoZIndex: true, - baseZIndex: 0, - className: null, - clearButtonClassName: 'p-button-secondary', - dateFormat: null, - dateTemplate: null, - decadeTemplate: null, - disabled: false, - disabledDates: null, - disabledDays: null, - footerTemplate: null, - formatDateTime: null, - headerTemplate: null, - hideOnDateTimeSelect: false, - hourFormat: '24', - icon: 'pi pi-calendar', - iconPos: 'right', - id: null, - inline: false, - inputClassName: null, - inputId: null, - inputMode: 'none', - inputRef: null, - inputStyle: null, - keepInvalid: false, - locale: null, - mask: null, - maxDate: null, - maxDateCount: null, - minDate: null, - monthNavigator: false, - monthNavigatorTemplate: null, - name: null, - numberOfMonths: 1, - onBlur: null, - onChange: null, - onClearButtonClick: null, - onFocus: null, - onHide: null, - onInput: null, - onMonthChange: null, - onSelect: null, - onShow: null, - onTodayButtonClick: null, - onViewDateChange: null, - onVisibleChange: null, - panelClassName: null, - panelStyle: null, - parseDateTime: null, - placeholder: null, - readOnlyInput: false, - required: false, - selectOtherMonths: false, - selectionMode: 'single', - shortYearCutoff: '+10', - showButtonBar: false, - showIcon: false, - showMillisec: false, - showMinMaxRange: false, - showOnFocus: true, - showOtherMonths: true, - showSeconds: false, - showTime: false, - showWeek: false, - stepHour: 1, - stepMillisec: 1, - stepMinute: 1, - stepSecond: 1, - style: null, - tabIndex: null, - timeOnly: false, - todayButtonClassName: 'p-button-secondary', - tooltip: null, - tooltipOptions: null, - touchUI: false, - transitionOptions: null, - value: null, - view: 'date', - viewDate: null, - visible: false, - yearNavigator: false, - yearNavigatorTemplate: null, - yearRange: null +import { ObjectUtils } from '../utils/Utils'; + +export const CalendarBase = { + defaultProps: { + __TYPE: 'Calendar', + appendTo: null, + ariaLabelledBy: null, + autoZIndex: true, + baseZIndex: 0, + className: null, + clearButtonClassName: 'p-button-secondary', + dateFormat: null, + dateTemplate: null, + decadeTemplate: null, + disabled: false, + disabledDates: null, + disabledDays: null, + footerTemplate: null, + formatDateTime: null, + headerTemplate: null, + hideOnDateTimeSelect: false, + hourFormat: '24', + icon: 'pi pi-calendar', + iconPos: 'right', + id: null, + inline: false, + inputClassName: null, + inputId: null, + inputMode: 'none', + inputRef: null, + inputStyle: null, + keepInvalid: false, + locale: null, + mask: null, + maxDate: null, + maxDateCount: null, + minDate: null, + monthNavigator: false, + monthNavigatorTemplate: null, + name: null, + numberOfMonths: 1, + onBlur: null, + onChange: null, + onClearButtonClick: null, + onFocus: null, + onHide: null, + onInput: null, + onMonthChange: null, + onSelect: null, + onShow: null, + onTodayButtonClick: null, + onViewDateChange: null, + onVisibleChange: null, + panelClassName: null, + panelStyle: null, + parseDateTime: null, + placeholder: null, + readOnlyInput: false, + required: false, + selectOtherMonths: false, + selectionMode: 'single', + shortYearCutoff: '+10', + showButtonBar: false, + showIcon: false, + showMillisec: false, + showMinMaxRange: false, + showOnFocus: true, + showOtherMonths: true, + showSeconds: false, + showTime: false, + showWeek: false, + stepHour: 1, + stepMillisec: 1, + stepMinute: 1, + stepSecond: 1, + style: null, + tabIndex: null, + timeOnly: false, + todayButtonClassName: 'p-button-secondary', + tooltip: null, + tooltipOptions: null, + touchUI: false, + transitionOptions: null, + value: null, + view: 'date', + viewDate: null, + visible: false, + yearNavigator: false, + yearNavigatorTemplate: null, + yearRange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, CalendarBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, CalendarBase.defaultProps) }; diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js index 82b09e5708..79cd7b5364 100644 --- a/components/lib/card/Card.js +++ b/components/lib/card/Card.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { CardDefaultProps } from './CardBase'; +import { CardBase } from './CardBase'; export const Card = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, CardDefaultProps); + const props = CardBase.getProps(inProps); const elementRef = React.useRef(ref); @@ -35,7 +35,7 @@ export const Card = React.forwardRef((inProps, ref) => { ObjectUtils.combinedRefs(elementRef, ref); }, [elementRef, ref]); - const otherProps = ObjectUtils.findDiffKeys(props, CardDefaultProps); + const otherProps = CardBase.getOtherProps(props); const className = classNames('p-card p-component', props.className); const header = createHeader(); const body = createBody(); diff --git a/components/lib/card/CardBase.js b/components/lib/card/CardBase.js index 80969847f2..686b1f567b 100644 --- a/components/lib/card/CardBase.js +++ b/components/lib/card/CardBase.js @@ -1,10 +1,17 @@ -export const CardDefaultProps = { - __TYPE: 'Card', - id: null, - header: null, - footer: null, - title: null, - subTitle: null, - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const CardBase = { + defaultProps: { + __TYPE: 'Card', + id: null, + header: null, + footer: null, + title: null, + subTitle: null, + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, CardBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, CardBase.defaultProps) }; diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js index 98fe0e0e15..11a20ac8e2 100644 --- a/components/lib/carousel/Carousel.js +++ b/components/lib/carousel/Carousel.js @@ -3,7 +3,7 @@ import PrimeReact, { ariaLabel } from '../api/Api'; import { useMountEffect, usePrevious, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils'; -import { CarouselDefaultProps } from './CarouselBase'; +import { CarouselBase } from './CarouselBase'; const CarouselItem = React.memo((props) => { const content = props.template(props.item); @@ -18,7 +18,7 @@ const CarouselItem = React.memo((props) => { export const Carousel = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, CarouselDefaultProps); + const props = CarouselBase.getProps(inProps); const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible); const [numScrollState, setNumScrollState] = React.useState(props.numScroll); @@ -546,7 +546,7 @@ export const Carousel = React.memo( return null; }; - const otherProps = ObjectUtils.findDiffKeys(props, CarouselDefaultProps); + const otherProps = CarouselBase.getOtherProps(props); const className = classNames( 'p-carousel p-component', { diff --git a/components/lib/carousel/CarouselBase.js b/components/lib/carousel/CarouselBase.js index e66358e044..b8153b81a3 100644 --- a/components/lib/carousel/CarouselBase.js +++ b/components/lib/carousel/CarouselBase.js @@ -1,24 +1,31 @@ -export const CarouselDefaultProps = { - __TYPE: 'Carousel', - id: null, - value: null, - page: 0, - header: null, - footer: null, - style: null, - className: null, - itemTemplate: null, - circular: false, - showIndicators: true, - showNavigators: true, - autoplayInterval: 0, - numVisible: 1, - numScroll: 1, - responsiveOptions: null, - orientation: 'horizontal', - verticalViewPortHeight: '300px', - contentClassName: null, - containerClassName: null, - indicatorsContentClassName: null, - onPageChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const CarouselBase = { + defaultProps: { + __TYPE: 'Carousel', + id: null, + value: null, + page: 0, + header: null, + footer: null, + style: null, + className: null, + itemTemplate: null, + circular: false, + showIndicators: true, + showNavigators: true, + autoplayInterval: 0, + numVisible: 1, + numScroll: 1, + responsiveOptions: null, + orientation: 'horizontal', + verticalViewPortHeight: '300px', + contentClassName: null, + containerClassName: null, + indicatorsContentClassName: null, + onPageChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, CarouselBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, CarouselBase.defaultProps) }; diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js index d7e0345b18..de288e313a 100644 --- a/components/lib/cascadeselect/CascadeSelect.js +++ b/components/lib/cascadeselect/CascadeSelect.js @@ -5,12 +5,12 @@ import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/ import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { CascadeSelectDefaultProps } from './CascadeSelectBase'; +import { CascadeSelectBase } from './CascadeSelectBase'; import { CascadeSelectSub } from './CascadeSelectSub'; export const CascadeSelect = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, CascadeSelectDefaultProps); + const props = CascadeSelectBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -329,7 +329,7 @@ export const CascadeSelect = React.memo( ); }; - const otherProps = ObjectUtils.findDiffKeys(props, CascadeSelectDefaultProps); + const otherProps = CascadeSelectBase.getOtherProps(props); const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const element = createElement(); diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js index 1609fcf82a..69c415ca5c 100644 --- a/components/lib/cascadeselect/CascadeSelectBase.js +++ b/components/lib/cascadeselect/CascadeSelectBase.js @@ -1,30 +1,37 @@ -export const CascadeSelectDefaultProps = { - __TYPE: 'CascadeSelect', - id: null, - inputRef: null, - style: null, - className: null, - value: null, - name: null, - options: null, - optionLabel: null, - optionValue: null, - optionGroupLabel: null, - optionGroupChildren: null, - placeholder: null, - itemTemplate: null, - disabled: false, - dataKey: null, - inputId: null, - tabIndex: null, - ariaLabelledBy: null, - appendTo: null, - transitionOptions: null, - dropdownIcon: 'pi pi-chevron-down', - onChange: null, - onGroupChange: null, - onBeforeShow: null, - onBeforeHide: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const CascadeSelectBase = { + defaultProps: { + __TYPE: 'CascadeSelect', + id: null, + inputRef: null, + style: null, + className: null, + value: null, + name: null, + options: null, + optionLabel: null, + optionValue: null, + optionGroupLabel: null, + optionGroupChildren: null, + placeholder: null, + itemTemplate: null, + disabled: false, + dataKey: null, + inputId: null, + tabIndex: null, + ariaLabelledBy: null, + appendTo: null, + transitionOptions: null, + dropdownIcon: 'pi pi-chevron-down', + onChange: null, + onGroupChange: null, + onBeforeShow: null, + onBeforeHide: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, CascadeSelectBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, CascadeSelectBase.defaultProps) }; diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js index 678e9f73f9..8505d4ef5a 100644 --- a/components/lib/chart/Chart.js +++ b/components/lib/chart/Chart.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { useUnmountEffect } from '../hooks/Hooks'; -import { classNames, ObjectUtils } from '../utils/Utils'; -import { ChartDefaultProps } from './ChartBase'; +import { classNames } from '../utils/Utils'; +import { ChartBase } from './ChartBase'; // GitHub #3059 wrapper if loaded by script tag const ChartJS = (function () { @@ -14,7 +14,7 @@ const ChartJS = (function () { const PrimeReactChart = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ChartDefaultProps); + const props = ChartBase.getProps(inProps); const elementRef = React.useRef(null); const chartRef = React.useRef(null); @@ -81,7 +81,7 @@ const PrimeReactChart = React.memo( destroyChart(); }); - const otherProps = ObjectUtils.findDiffKeys(props, ChartDefaultProps); + const otherProps = ChartBase.getOtherProps(props); const className = classNames('p-chart', props.className); const style = Object.assign({ width: props.width, height: props.height }, props.style); diff --git a/components/lib/chart/ChartBase.js b/components/lib/chart/ChartBase.js index b02036ef25..e0704261fc 100644 --- a/components/lib/chart/ChartBase.js +++ b/components/lib/chart/ChartBase.js @@ -1,12 +1,19 @@ -export const ChartDefaultProps = { - __TYPE: 'Chart', - id: null, - type: null, - data: null, - options: null, - plugins: null, - width: null, - height: null, - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const ChartBase = { + defaultProps: { + __TYPE: 'Chart', + id: null, + type: null, + data: null, + options: null, + plugins: null, + width: null, + height: null, + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ChartBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ChartBase.defaultProps) }; diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js index 6051201463..b01ff246f0 100644 --- a/components/lib/checkbox/Checkbox.js +++ b/components/lib/checkbox/Checkbox.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { useUpdateEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; -import { CheckboxDefaultProps } from './CheckboxBase'; +import { CheckboxBase } from './CheckboxBase'; export const Checkbox = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, CheckboxDefaultProps); + const props = CheckboxBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); @@ -79,7 +79,7 @@ export const Checkbox = React.memo( const checked = isChecked(); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, CheckboxDefaultProps); + const otherProps = CheckboxBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-checkbox p-component', diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js index e27d4d1cab..213da16d0b 100644 --- a/components/lib/checkbox/CheckboxBase.js +++ b/components/lib/checkbox/CheckboxBase.js @@ -1,23 +1,30 @@ -export const CheckboxDefaultProps = { - __TYPE: 'Checkbox', - id: null, - inputRef: null, - inputId: null, - value: null, - name: null, - checked: false, - trueValue: true, - falseValue: false, - style: null, - className: null, - disabled: false, - required: false, - readOnly: false, - tabIndex: null, - icon: 'pi pi-check', - tooltip: null, - tooltipOptions: null, - onChange: null, - onMouseDown: null, - onContextMenu: null +import { ObjectUtils } from '../utils/Utils'; + +export const CheckboxBase = { + defaultProps: { + __TYPE: 'Checkbox', + id: null, + inputRef: null, + inputId: null, + value: null, + name: null, + checked: false, + trueValue: true, + falseValue: false, + style: null, + className: null, + disabled: false, + required: false, + readOnly: false, + tabIndex: null, + icon: 'pi pi-check', + tooltip: null, + tooltipOptions: null, + onChange: null, + onMouseDown: null, + onContextMenu: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, CheckboxBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, CheckboxBase.defaultProps) }; diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js index 8f651c8337..18be8a8c45 100644 --- a/components/lib/chip/Chip.js +++ b/components/lib/chip/Chip.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { ChipDefaultProps } from './ChipBase'; +import { ChipBase } from './ChipBase'; export const Chip = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ChipDefaultProps); + const props = ChipBase.getProps(inProps); const elementRef = React.useRef(null); const [visibleState, setVisibleState] = React.useState(true); @@ -49,7 +49,7 @@ export const Chip = React.memo( }; const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, ChipDefaultProps); + const otherProps = ChipBase.getOtherProps(props); const className = classNames( 'p-chip p-component', { diff --git a/components/lib/chip/ChipBase.js b/components/lib/chip/ChipBase.js index a0371aa223..e005c27d32 100644 --- a/components/lib/chip/ChipBase.js +++ b/components/lib/chip/ChipBase.js @@ -1,14 +1,21 @@ -export const ChipDefaultProps = { - __TYPE: 'Chip', - label: null, - icon: null, - image: null, - removable: false, - removeIcon: 'pi pi-times-circle', - className: null, - style: null, - template: null, - imageAlt: 'chip', - onImageError: null, - onRemove: null +import { ObjectUtils } from '../utils/Utils'; + +export const ChipBase = { + defaultProps: { + __TYPE: 'Chip', + label: null, + icon: null, + image: null, + removable: false, + removeIcon: 'pi pi-times-circle', + className: null, + style: null, + template: null, + imageAlt: 'chip', + onImageError: null, + onRemove: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ChipBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ChipBase.defaultProps) }; diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js index 523007422d..d9bf5e31c5 100644 --- a/components/lib/chips/Chips.js +++ b/components/lib/chips/Chips.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { ChipsDefaultProps } from './ChipsBase'; +import { ChipsBase } from './ChipsBase'; export const Chips = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ChipsDefaultProps); + const props = ChipsBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); @@ -261,7 +261,7 @@ export const Chips = React.memo( }; const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, ChipsDefaultProps); + const otherProps = ChipsBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-chips p-component p-inputwrapper', diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js index e1d757e0ae..6c2567c3dc 100644 --- a/components/lib/chips/ChipsBase.js +++ b/components/lib/chips/ChipsBase.js @@ -1,29 +1,36 @@ -export const ChipsDefaultProps = { - __TYPE: 'Chips', - id: null, - inputRef: null, - inputId: null, - name: null, - placeholder: null, - value: null, - max: null, - disabled: null, - readOnly: false, - removable: true, - style: null, - className: null, - tooltip: null, - tooltipOptions: null, - ariaLabelledBy: null, - separator: null, - allowDuplicate: true, - itemTemplate: null, - keyfilter: null, - addOnBlur: null, - onAdd: null, - onRemove: null, - onChange: null, - onFocus: null, - onBlur: null, - onKeyDown: null +import { ObjectUtils } from '../utils/Utils'; + +export const ChipsBase = { + defaultProps: { + __TYPE: 'Chips', + id: null, + inputRef: null, + inputId: null, + name: null, + placeholder: null, + value: null, + max: null, + disabled: null, + readOnly: false, + removable: true, + style: null, + className: null, + tooltip: null, + tooltipOptions: null, + ariaLabelledBy: null, + separator: null, + allowDuplicate: true, + itemTemplate: null, + keyfilter: null, + addOnBlur: null, + onAdd: null, + onRemove: null, + onChange: null, + onFocus: null, + onBlur: null, + onKeyDown: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ChipsBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ChipsBase.defaultProps) }; diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js index 5c33b90039..a071ca244c 100644 --- a/components/lib/colorpicker/ColorPicker.js +++ b/components/lib/colorpicker/ColorPicker.js @@ -4,12 +4,12 @@ import { useEventListener, useMountEffect, useOverlayListener, useUnmountEffect, import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { ColorPickerDefaultProps } from './ColorPickerBase'; +import { ColorPickerBase } from './ColorPickerBase'; import { ColorPickerPanel } from './ColorPickerPanel'; export const ColorPicker = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ColorPickerDefaultProps); + const props = ColorPickerBase.getProps(inProps); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const elementRef = React.useRef(null); @@ -550,7 +550,7 @@ export const ColorPicker = React.memo( 'p-disabled': props.disabled }); - const inputProps = ObjectUtils.findDiffKeys(props, ColorPickerDefaultProps); + const inputProps = ColorPickerBase.getOtherProps(props); return ; } @@ -559,7 +559,7 @@ export const ColorPicker = React.memo( }; const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, ColorPickerDefaultProps); + const otherProps = ColorPickerBase.getOtherProps(props); const className = classNames( 'p-colorpicker p-component', { diff --git a/components/lib/colorpicker/ColorPickerBase.js b/components/lib/colorpicker/ColorPickerBase.js index 667ea96458..75eb4fdf89 100644 --- a/components/lib/colorpicker/ColorPickerBase.js +++ b/components/lib/colorpicker/ColorPickerBase.js @@ -1,23 +1,30 @@ -export const ColorPickerDefaultProps = { - __TYPE: 'ColorPicker', - appendTo: null, - className: null, - defaultColor: 'ff0000', - disabled: false, - format: 'hex', - id: null, - inline: false, - inputId: null, - inputRef: null, - onChange: null, - onHide: null, - onShow: null, - panelClassName: null, - panelStyle: null, - style: null, - tabIndex: null, - tooltip: null, - tooltipOptions: null, - transitionOptions: null, - value: null +import { ObjectUtils } from '../utils/Utils'; + +export const ColorPickerBase = { + defaultProps: { + __TYPE: 'ColorPicker', + appendTo: null, + className: null, + defaultColor: 'ff0000', + disabled: false, + format: 'hex', + id: null, + inline: false, + inputId: null, + inputRef: null, + onChange: null, + onHide: null, + onShow: null, + panelClassName: null, + panelStyle: null, + style: null, + tabIndex: null, + tooltip: null, + tooltipOptions: null, + transitionOptions: null, + value: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ColorPickerBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ColorPickerBase.defaultProps) }; diff --git a/components/lib/column/ColumnBase.js b/components/lib/column/ColumnBase.js index 9a919c7fd3..8cbfe3f4f8 100644 --- a/components/lib/column/ColumnBase.js +++ b/components/lib/column/ColumnBase.js @@ -1,79 +1,87 @@ -export const ColumnDefaultProps = { - __TYPE: 'Column', - align: null, - alignFrozen: 'left', - alignHeader: null, - body: null, - bodyClassName: null, - bodyStyle: null, - cellEditValidator: null, - cellEditValidatorEvent: 'click', - className: null, - colSpan: null, - columnKey: null, - dataType: 'text', - editor: null, - excludeGlobalFilter: false, - expander: false, - exportField: null, - exportable: true, - field: null, - filter: false, - filterApply: null, - filterClear: null, - filterElement: null, - filterField: null, - filterFooter: null, - filterFunction: null, - filterHeader: null, - filterHeaderClassName: null, - filterHeaderStyle: null, - filterMatchMode: null, - filterMatchModeOptions: null, - filterMaxLength: null, - filterMenuClassName: null, - filterMenuStyle: null, - filterPlaceholder: null, - filterType: 'text', - footer: null, - footerClassName: null, - footerStyle: null, - frozen: false, - header: null, - headerClassName: null, - headerStyle: null, - headerTooltip: null, - headerTooltipOptions: null, - hidden: false, - maxConstraints: 2, - onBeforeCellEditHide: null, - onBeforeCellEditShow: null, - onCellEditCancel: null, - onCellEditComplete: null, - onCellEditInit: null, - onFilterApplyClick: null, - onFilterClear: null, - onFilterConstraintAdd: null, - onFilterConstraintRemove: null, - onFilterMatchModeChange: null, - onFilterOperatorChange: null, - reorderable: true, - resizeable: true, - rowEditor: false, - rowReorder: false, - rowReorderIcon: 'pi pi-bars', - rowSpan: null, - selectionMode: null, - showAddButton: true, - showApplyButton: true, - showClearButton: true, - showFilterMatchModes: true, - showFilterMenu: true, - showFilterMenuOptions: true, - showFilterOperator: true, - sortField: null, - sortFunction: null, - sortable: false, - sortableDisabled: false, - style: null +import { ObjectUtils } from '../utils/Utils'; + +export const ColumnBase = { + defaultProps: { + __TYPE: 'Column', + align: null, + alignFrozen: 'left', + alignHeader: null, + body: null, + bodyClassName: null, + bodyStyle: null, + cellEditValidator: null, + cellEditValidatorEvent: 'click', + className: null, + colSpan: null, + columnKey: null, + dataType: 'text', + editor: null, + excludeGlobalFilter: false, + expander: false, + exportField: null, + exportable: true, + field: null, + filter: false, + filterApply: null, + filterClear: null, + filterElement: null, + filterField: null, + filterFooter: null, + filterFunction: null, + filterHeader: null, + filterHeaderClassName: null, + filterHeaderStyle: null, + filterMatchMode: null, + filterMatchModeOptions: null, + filterMaxLength: null, + filterMenuClassName: null, + filterMenuStyle: null, + filterPlaceholder: null, + filterType: 'text', + footer: null, + footerClassName: null, + footerStyle: null, + frozen: false, + header: null, + headerClassName: null, + headerStyle: null, + headerTooltip: null, + headerTooltipOptions: null, + hidden: false, + maxConstraints: 2, + onBeforeCellEditHide: null, + onBeforeCellEditShow: null, + onCellEditCancel: null, + onCellEditComplete: null, + onCellEditInit: null, + onFilterApplyClick: null, + onFilterClear: null, + onFilterConstraintAdd: null, + onFilterConstraintRemove: null, + onFilterMatchModeChange: null, + onFilterOperatorChange: null, + reorderable: true, + resizeable: true, + rowEditor: false, + rowReorder: false, + rowReorderIcon: 'pi pi-bars', + rowSpan: null, + selectionMode: null, + showAddButton: true, + showApplyButton: true, + showClearButton: true, + showFilterMatchModes: true, + showFilterMenu: true, + showFilterMenuOptions: true, + showFilterOperator: true, + sortField: null, + sortFunction: null, + sortable: false, + sortableDisabled: false, + style: null, + children: undefined + }, + getCProp: (column, name) => ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps), + getCProps: (column) => ObjectUtils.getComponentProps(column, ColumnBase.defaultProps), + getCOtherProps: (column) => ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps) }; diff --git a/components/lib/columngroup/ColumnGroupBase.js b/components/lib/columngroup/ColumnGroupBase.js index e0fd9be6fd..54cc9787c8 100644 --- a/components/lib/columngroup/ColumnGroupBase.js +++ b/components/lib/columngroup/ColumnGroupBase.js @@ -1,3 +1,10 @@ -export const ColumnGroupDefaultProps = { - __TYPE: 'ColumnGroup' +import { ObjectUtils } from '../utils/Utils'; + +export const ColumnGroupBase = { + defaultProps: { + __TYPE: 'ColumnGroup', + children: undefined + }, + getCProp: (group, name) => ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps), + getCProps: (group) => ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps) }; diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js index b4065c73d9..3e177f021b 100644 --- a/components/lib/confirmdialog/ConfirmDialog.js +++ b/components/lib/confirmdialog/ConfirmDialog.js @@ -6,7 +6,7 @@ import { useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { ConfirmDialogDefaultProps } from './ConfirmDialogBase'; +import { ConfirmDialogBase } from './ConfirmDialogBase'; export const confirmDialog = (props = {}) => { props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } }; @@ -25,7 +25,7 @@ export const confirmDialog = (props = {}) => { export const ConfirmDialog = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ConfirmDialogDefaultProps); + const props = ConfirmDialogBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(props.visible); const [reshowState, setReshowState] = React.useState(false); @@ -138,7 +138,7 @@ export const ConfirmDialog = React.memo( const createElement = () => { const currentProps = getCurrentProps(); const className = classNames('p-confirm-dialog', getPropValue('className')); - const otherProps = ObjectUtils.findDiffKeys(currentProps, ConfirmDialogDefaultProps); + const otherProps = ConfirmDialogBase.getOtherProps(currentProps); const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps); const icon = IconUtils.getJSXIcon(getPropValue('icon'), { className: 'p-confirm-dialog-icon' }, { props: currentProps }); const footer = createFooter(); diff --git a/components/lib/confirmdialog/ConfirmDialogBase.js b/components/lib/confirmdialog/ConfirmDialogBase.js index 1023443954..ac059f5558 100644 --- a/components/lib/confirmdialog/ConfirmDialogBase.js +++ b/components/lib/confirmdialog/ConfirmDialogBase.js @@ -1,20 +1,27 @@ -export const ConfirmDialogDefaultProps = { - __TYPE: 'ConfirmDialog', - tagKey: undefined, - visible: undefined, - message: null, - rejectLabel: null, - acceptLabel: null, - icon: null, - rejectIcon: null, - acceptIcon: null, - rejectClassName: null, - acceptClassName: null, - className: null, - appendTo: null, - footer: null, - breakpoints: null, - onHide: null, - accept: null, - reject: null +import { ObjectUtils } from '../utils/Utils'; + +export const ConfirmDialogBase = { + defaultProps: { + __TYPE: 'ConfirmDialog', + tagKey: undefined, + visible: undefined, + message: null, + rejectLabel: null, + acceptLabel: null, + icon: null, + rejectIcon: null, + acceptIcon: null, + rejectClassName: null, + acceptClassName: null, + className: null, + appendTo: null, + footer: null, + breakpoints: null, + onHide: null, + accept: null, + reject: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ConfirmDialogBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ConfirmDialogBase.defaultProps) }; diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js index e17ff0f345..ea113aff5b 100644 --- a/components/lib/confirmpopup/ConfirmPopup.js +++ b/components/lib/confirmpopup/ConfirmPopup.js @@ -6,7 +6,7 @@ import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/ import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { ConfirmPopupDefaultProps } from './ConfirmPopupBase'; +import { ConfirmPopupBase } from './ConfirmPopupBase'; export const confirmPopup = (props = {}) => { props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } }; @@ -25,7 +25,7 @@ export const confirmPopup = (props = {}) => { export const ConfirmPopup = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ConfirmPopupDefaultProps); + const props = ConfirmPopupBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(props.visible); const [reshowState, setReshowState] = React.useState(false); @@ -243,7 +243,7 @@ export const ConfirmPopup = React.memo( }; const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, ConfirmPopupDefaultProps); + const otherProps = ConfirmPopupBase.getOtherProps(props); const className = classNames('p-confirm-popup p-component', getPropValue('className'), { 'p-input-filled': PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': PrimeReact.ripple === false diff --git a/components/lib/confirmpopup/ConfirmPopupBase.js b/components/lib/confirmpopup/ConfirmPopupBase.js index 514bede3d2..f115212ca4 100644 --- a/components/lib/confirmpopup/ConfirmPopupBase.js +++ b/components/lib/confirmpopup/ConfirmPopupBase.js @@ -1,24 +1,31 @@ -export const ConfirmPopupDefaultProps = { - __TYPE: 'ConfirmPopup', - tagKey: undefined, - target: null, - visible: false, - message: null, - rejectLabel: null, - acceptLabel: null, - icon: null, - rejectIcon: null, - acceptIcon: null, - rejectClassName: null, - acceptClassName: null, - className: null, - style: null, - appendTo: null, - dismissable: true, - footer: null, - onShow: null, - onHide: null, - accept: null, - reject: null, - transitionOptions: null +import { ObjectUtils } from '../utils/Utils'; + +export const ConfirmPopupBase = { + defaultProps: { + __TYPE: 'ConfirmPopup', + tagKey: undefined, + target: null, + visible: false, + message: null, + rejectLabel: null, + acceptLabel: null, + icon: null, + rejectIcon: null, + acceptIcon: null, + rejectClassName: null, + acceptClassName: null, + className: null, + style: null, + appendTo: null, + dismissable: true, + footer: null, + onShow: null, + onHide: null, + accept: null, + reject: null, + transitionOptions: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ConfirmPopupBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ConfirmPopupBase.defaultProps) }; diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js index 823e2063ff..2c946086dc 100644 --- a/components/lib/contextmenu/ContextMenu.js +++ b/components/lib/contextmenu/ContextMenu.js @@ -3,13 +3,13 @@ import PrimeReact from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { useEventListener, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { ContextMenuDefaultProps } from './ContextMenuBase'; +import { classNames, DomHandler, ZIndexUtils } from '../utils/Utils'; +import { ContextMenuBase } from './ContextMenuBase'; import { ContextMenuSub } from './ContextMenuSub'; export const ContextMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ContextMenuDefaultProps); + const props = ContextMenuBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(false); const [reshowState, setReshowState] = React.useState(false); @@ -175,7 +175,7 @@ export const ContextMenu = React.memo( })); const createContextMenu = () => { - const otherProps = ObjectUtils.findDiffKeys(props, ContextMenuDefaultProps); + const otherProps = ContextMenuBase.getOtherProps(props); const className = classNames('p-contextmenu p-component', props.className, { 'p-input-filled': PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': PrimeReact.ripple === false diff --git a/components/lib/contextmenu/ContextMenuBase.js b/components/lib/contextmenu/ContextMenuBase.js index 8cd4e6277f..0d6cbf9e8e 100644 --- a/components/lib/contextmenu/ContextMenuBase.js +++ b/components/lib/contextmenu/ContextMenuBase.js @@ -1,14 +1,21 @@ -export const ContextMenuDefaultProps = { - __TYPE: 'ContextMenu', - id: null, - model: null, - style: null, - className: null, - global: false, - autoZIndex: true, - baseZIndex: 0, - appendTo: null, - transitionOptions: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const ContextMenuBase = { + defaultProps: { + __TYPE: 'ContextMenu', + id: null, + model: null, + style: null, + className: null, + global: false, + autoZIndex: true, + baseZIndex: 0, + appendTo: null, + transitionOptions: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ContextMenuBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ContextMenuBase.defaultProps) }; diff --git a/components/lib/csstransition/CSSTransition.js b/components/lib/csstransition/CSSTransition.js index b20d1422d5..a06364d2f2 100644 --- a/components/lib/csstransition/CSSTransition.js +++ b/components/lib/csstransition/CSSTransition.js @@ -3,10 +3,10 @@ import { CSSTransition as ReactCSSTransition } from 'react-transition-group'; import PrimeReact from '../api/Api'; import { useUpdateEffect } from '../hooks/Hooks'; import { ObjectUtils } from '../utils/Utils'; -import { CSSTransitionDefaultProps } from './CSSTransitionBase'; +import { CSSTransitionBase } from './CSSTransitionBase'; export const CSSTransition = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, CSSTransitionDefaultProps); + const props = CSSTransitionBase.getProps(inProps); const disabled = props.disabled || (props.options && props.options.disabled) || !PrimeReact.cssTransition; diff --git a/components/lib/csstransition/CSSTransitionBase.js b/components/lib/csstransition/CSSTransitionBase.js index fa5cc0258b..223601ce39 100644 --- a/components/lib/csstransition/CSSTransitionBase.js +++ b/components/lib/csstransition/CSSTransitionBase.js @@ -1,3 +1,10 @@ -export const CSSTransitionDefaultProps = { - __TYPE: 'CSSTransition' +import { ObjectUtils } from '../utils/Utils'; + +export const CSSTransitionBase = { + defaultProps: { + __TYPE: 'CSSTransition', + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, CSSTransitionBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, CSSTransitionBase.defaultProps) }; diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js index f243af208d..deb838eb63 100644 --- a/components/lib/datascroller/DataScroller.js +++ b/components/lib/datascroller/DataScroller.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { DataScrollerDefaultProps } from './DataScrollerBase'; +import { DataScrollerBase } from './DataScrollerBase'; export const DataScroller = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, DataScrollerDefaultProps); + const props = DataScrollerBase.getProps(inProps); const [dataToRenderState, setDataToRenderState] = React.useState([]); const elementRef = React.useRef(null); @@ -190,7 +190,7 @@ export const DataScroller = React.memo( ); }; - const otherProps = ObjectUtils.findDiffKeys(props, DataScrollerDefaultProps); + const otherProps = DataScrollerBase.getOtherProps(props); const className = classNames('p-datascroller p-component', props.className, { 'p-datascroller-inline': props.inline }); diff --git a/components/lib/datascroller/DataScrollerBase.js b/components/lib/datascroller/DataScrollerBase.js index 7c434e9e53..b560464cd8 100644 --- a/components/lib/datascroller/DataScrollerBase.js +++ b/components/lib/datascroller/DataScrollerBase.js @@ -1,18 +1,25 @@ -export const DataScrollerDefaultProps = { - __TYPE: 'DataScroller', - id: null, - value: null, - rows: 0, - inline: false, - scrollHeight: null, - loader: false, - buffer: 0.9, - style: null, - className: null, - onLazyLoad: null, - emptyMessage: null, - itemTemplate: null, - header: null, - footer: null, - lazy: false +import { ObjectUtils } from '../utils/Utils'; + +export const DataScrollerBase = { + defaultProps: { + __TYPE: 'DataScroller', + id: null, + value: null, + rows: 0, + inline: false, + scrollHeight: null, + loader: false, + buffer: 0.9, + style: null, + className: null, + onLazyLoad: null, + emptyMessage: null, + itemTemplate: null, + header: null, + footer: null, + lazy: false, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DataScrollerBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DataScrollerBase.defaultProps) }; diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js index 8c0ce2d08d..3c694e8244 100644 --- a/components/lib/datatable/BodyCell.js +++ b/components/lib/datatable/BodyCell.js @@ -1,9 +1,10 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; +import { ColumnBase } from '../column/ColumnBase'; import { useEventListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; -import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; +import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; import { RowCheckbox } from './RowCheckbox'; import { RowRadioButton } from './RowRadioButton'; @@ -18,7 +19,7 @@ export const BodyCell = React.memo((props) => { const tabindexTimeout = React.useRef(null); const initFocusTimeout = React.useRef(null); - const getColumnProp = (prop) => (props.column ? props.column.props[prop] : null); + const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); const field = getColumnProp('field') || `field_${props.index}`; const editingKey = props.dataKey ? (props.rowData && props.rowData[props.dataKey]) || props.rowIndex : props.rowIndex; diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js index 926d1f6f57..c0cf72e22c 100644 --- a/components/lib/datatable/BodyRow.js +++ b/components/lib/datatable/BodyRow.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import { ColumnBase } from '../column/ColumnBase'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; import { BodyCell } from './BodyCell'; @@ -6,13 +7,17 @@ export const BodyRow = React.memo((props) => { const [editingState, setEditingState] = React.useState(false); const editing = props.onRowEditChange ? props.editing : editingState; + const getColumnProp = (column, name) => ColumnBase.getCProp(column, name); + const isFocusable = () => { return props.selectionMode && props.selectionModeInColumn !== 'single' && props.selectionModeInColumn !== 'multiple'; }; const isGrouped = (column) => { - if (props.groupRowsBy && getColumnProp(column, 'field')) { - return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(column.props.field) > -1 : props.groupRowsBy === column.props.field; + const columnField = getColumnProp(column, 'field'); + + if (props.groupRowsBy && columnField) { + return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(columnField) > -1 : props.groupRowsBy === columnField; } return false; @@ -22,10 +27,6 @@ export const BodyRow = React.memo((props) => { return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey); }; - const getColumnProp = (col, prop) => { - return col ? col.props[prop] : null; - }; - const getTabIndex = () => { return isFocusable() && !props.allowCellSelection ? (props.index === 0 ? props.tabIndex : -1) : null; }; diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js index 22f336df67..b4d42931c4 100644 --- a/components/lib/datatable/ColumnFilter.js +++ b/components/lib/datatable/ColumnFilter.js @@ -1,6 +1,7 @@ import * as React from 'react'; import PrimeReact, { FilterMatchMode, FilterOperator, localeOption } from '../api/Api'; import { Button } from '../button/Button'; +import { ColumnBase } from '../column/ColumnBase'; import { CSSTransition } from '../csstransition/CSSTransition'; import { Dropdown } from '../dropdown/Dropdown'; import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; @@ -17,7 +18,8 @@ export const ColumnFilter = React.memo((props) => { const selfClick = React.useRef(false); const overlayEventListener = React.useRef(null); - const getColumnProp = (prop) => props.column.props[prop]; + const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); + const field = getColumnProp('filterField') || getColumnProp('field'); const filterModel = props.filters[field]; const filterStoreModel = props.filtersStore && props.filtersStore[field]; diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index 636a784848..f46d854cdf 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -1,14 +1,18 @@ import * as React from 'react'; import PrimeReact, { FilterMatchMode, FilterOperator, FilterService } from '../api/Api'; +import { ColumnBase } from '../column/ColumnBase'; import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Paginator } from '../paginator/Paginator'; -import { DomHandler, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils'; +import { classNames, DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; +import { DataTableBase } from './DataTableBase'; import { TableBody } from './TableBody'; import { TableFooter } from './TableFooter'; import { TableHeader } from './TableHeader'; -export const DataTable = React.forwardRef((props, ref) => { +export const DataTable = React.forwardRef((inProps, ref) => { + const props = DataTableBase.getProps(inProps); + const [firstState, setFirstState] = React.useState(props.first); const [rowsState, setRowsState] = React.useState(props.rows); const [sortFieldState, setSortFieldState] = React.useState(props.sortField); @@ -116,8 +120,8 @@ export const DataTable = React.forwardRef((props, ref) => { return props.onFilter ? props.filters : filtersState; }; - const getColumnProp = (col, prop) => { - return col.props[prop]; + const getColumnProp = (column, name) => { + return ColumnBase.getCProp(column, name); }; const getColumns = (ignoreReorderable) => { @@ -431,16 +435,16 @@ export const DataTable = React.forwardRef((props, ref) => { const getSelectionModeInColumn = (columns) => { if (columns) { - const col = columns.find((c) => !!c.props.selectionMode); + const col = columns.find((c) => !!getColumnProp(c, 'selectionMode')); - return col ? col.props.selectionMode : null; + return col ? getColumnProp(col, 'selectionMode') : null; } return null; }; const findColumnByKey = (columns, key) => { - return ObjectUtils.isNotEmpty(columns) ? columns.find((col) => col.props.columnKey === key || col.props.field === key) : null; + return ObjectUtils.isNotEmpty(columns) ? columns.find((col) => getColumnProp(col, 'columnKey') === key || getColumnProp(col, 'field') === key) : null; }; const getTotalRecords = (data) => { @@ -702,7 +706,7 @@ export const DataTable = React.forwardRef((props, ref) => { if (allowDrop) { let columns = getColumns(); - let isSameColumn = (col1, col2) => (col1.props.columnKey || col2.props.columnKey ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field')); + let isSameColumn = (col1, col2) => (getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field')); let dragColIndex = columns.findIndex((child) => isSameColumn(child, draggedColumn.current)); let dropColIndex = columns.findIndex((child) => isSameColumn(child, column)); @@ -717,7 +721,7 @@ export const DataTable = React.forwardRef((props, ref) => { ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex); const columnOrder = columns.reduce((orders, col) => { - orders.push(col.props.columnKey || col.props.field); + orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field')); return orders; }, []); @@ -812,13 +816,13 @@ export const DataTable = React.forwardRef((props, ref) => { clearEditingMetaData(); const { originalEvent: event, column, sortableDisabledFields } = e; - let sortField = column.props.sortField || column.props.field; + let sortField = getColumnProp(column, 'sortField') || getColumnProp(column, 'field'); let sortOrder = props.defaultSortOrder; let multiSortMeta; let eventMeta; - columnSortable.current = column.props.sortable; - columnSortFunction.current = column.props.sortFunction; + columnSortable.current = getColumnProp(column, 'sortable'); + columnSortFunction.current = getColumnProp(column, 'sortFunction'); columnField.current = sortField; if (props.sortMode === 'multiple') { @@ -1006,7 +1010,7 @@ export const DataTable = React.forwardRef((props, ref) => { let globalFilterFieldsArray; if (isGlobalFilter) { - globalFilterFieldsArray = props.globalFilterFields || columns.filter((col) => !col.props.excludeGlobalFilter).map((col) => col.props.filterField || col.props.field); + globalFilterFieldsArray = props.globalFilterFields || columns.filter((col) => !getColumnProp(col, 'excludeGlobalFilter')).map((col) => getColumnProp(col, 'filterField') || getColumnProp(col, 'field')); } for (let i = 0; i < data.length; i++) { @@ -1106,10 +1110,10 @@ export const DataTable = React.forwardRef((props, ref) => { const columns = getColumns(); cloned = columns.reduce((filters, col) => { - const field = col.props.filterField || col.props.field; - const filterFunction = col.props.filterFunction; - const dataType = col.props.dataType; - const matchMode = col.props.filterMatchMode || (PrimeReact.filterMatchModeOptions[dataType] ? PrimeReact.filterMatchModeOptions[dataType][0] : FilterMatchMode.STARTS_WITH); + 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); let constraint = { value: null, matchMode }; if (filterFunction) { @@ -1175,7 +1179,7 @@ export const DataTable = React.forwardRef((props, ref) => { if (columns) { columnOrder = columns.reduce((orders, col) => { - orders.push(col.props.columnKey || col.props.field); + orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field')); return orders; }, []); @@ -1197,7 +1201,7 @@ export const DataTable = React.forwardRef((props, ref) => { //headers columns.forEach((column, i) => { - const { field, header, exportable } = column.props; + const [field, header, exportable] = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportable')]; if (exportable && field) { const columnHeader = String(header || field) @@ -1216,7 +1220,7 @@ export const DataTable = React.forwardRef((props, ref) => { data.forEach((record) => { csv += '\n'; columns.forEach((column, i) => { - const { field: colField, exportField, exportable } = column.props; + const [colField, exportField, exportable] = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField'), getColumnProp(column, 'exportable')]; const field = exportField || colField; if (exportable && field) { @@ -1270,11 +1274,11 @@ export const DataTable = React.forwardRef((props, ref) => { const sortOrder = (localState && localState.sortOrder) || getSortOrder(); const multiSortMeta = (localState && localState.multiSortMeta) || getMultiSortMeta(); const columns = getColumns(); - const sortColumn = columns.find((col) => col.props.field === sortField); + const sortColumn = columns.find((col) => getColumnProp(col, 'field') === sortField); if (sortColumn) { - columnSortable.current = sortColumn.props.sortable; - columnSortFunction.current = sortColumn.props.sortFunction; + columnSortable.current = getColumnProp(sortColumn, 'sortable'); + columnSortFunction.current = getColumnProp(sortColumn, 'sortFunction'); } if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) { @@ -1739,7 +1743,7 @@ export const DataTable = React.forwardRef((props, ref) => { const empty = ObjectUtils.isEmpty(data); const selectionModeInColumn = getSelectionModeInColumn(columns); const selectable = props.selectionMode || selectionModeInColumn; - const otherProps = ObjectUtils.findDiffKeys(props, DataTable.defaultProps); + const otherProps = DataTableBase.getOtherProps(props); const className = classNames( 'p-datatable p-component', { @@ -1790,137 +1794,3 @@ export const DataTable = React.forwardRef((props, ref) => { }); DataTable.displayName = 'DataTable'; -DataTable.defaultProps = { - __TYPE: 'DataTable', - alwaysShowPaginator: true, - autoLayout: false, - breakpoint: '960px', - cellClassName: null, - cellSelection: false, - className: null, - collapsedRowIcon: 'pi pi-chevron-right', - columnResizeMode: 'fit', - compareSelectionBy: 'deepEquals', - contextMenuSelection: null, - csvSeparator: ',', - currentPageReportTemplate: '({currentPage} of {totalPages})', - customRestoreState: null, - customSaveState: null, - dataKey: null, - defaultSortOrder: 1, - dragSelection: false, - editMode: 'cell', - editingRows: null, - emptyMessage: null, - expandableRowGroups: false, - expandedRowIcon: 'pi pi-chevron-down', - expandedRows: null, - exportFilename: 'download', - exportFunction: null, - filterDelay: 300, - filterDisplay: 'menu', - filterLocale: undefined, - filters: null, - first: 0, - footer: null, - footerColumnGroup: null, - frozenValue: null, - frozenWidth: null, - globalFilter: null, - globalFilterFields: null, - globalFilterMatchMode: FilterMatchMode.CONTAINS, - groupRowsBy: null, - header: null, - headerColumnGroup: null, - id: null, - isDataSelectable: null, - lazy: false, - loading: false, - loadingIcon: 'pi pi-spinner', - metaKeySelection: true, - multiSortMeta: null, - onAllRowsSelect: null, - onAllRowsUnselect: null, - onCellClick: null, - onCellSelect: null, - onCellUnselect: null, - onColReorder: null, - onColumnResizeEnd: null, - onColumnResizerClick: null, - onColumnResizerDoubleClick: null, - onContextMenu: null, - onContextMenuSelectionChange: null, - onFilter: null, - onPage: null, - onRowClick: null, - onRowMouseEnter: null, - onRowMouseLeave: null, - onRowCollapse: null, - onRowDoubleClick: null, - onRowEditCancel: null, - onRowEditChange: null, - onRowEditComplete: null, - onRowEditInit: null, - onRowEditSave: null, - onRowExpand: null, - onRowReorder: null, - onRowSelect: null, - onRowToggle: null, - onRowUnselect: null, - onSelectAllChange: null, - onSelectionChange: null, - onSort: null, - onStateRestore: null, - onStateSave: null, - onValueChange: null, - pageLinkSize: 5, - paginator: false, - paginatorClassName: null, - paginatorDropdownAppendTo: null, - paginatorLeft: null, - paginatorPosition: 'bottom', - paginatorRight: null, - paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', - removableSort: false, - reorderableColumns: false, - reorderableRows: false, - resizableColumns: false, - responsiveLayout: 'stack', - rowClassName: null, - rowEditValidator: null, - rowExpansionTemplate: null, - rowGroupFooterTemplate: null, - rowGroupHeaderTemplate: null, - rowGroupMode: null, - rowHover: false, - rows: null, - rowsPerPageOptions: null, - scrollDirection: 'vertical', - scrollHeight: null, - scrollable: false, - selectAll: false, - selectOnEdit: true, - selection: null, - selectionAriaLabel: null, - selectionAutoFocus: true, - selectionMode: null, - selectionPageOnly: false, - showGridlines: false, - showRowReorderElement: null, - showSelectAll: true, - showSelectionElement: null, - size: 'normal', - sortField: null, - sortMode: 'single', - sortOrder: null, - stateKey: null, - stateStorage: 'session', - stripedRows: false, - style: null, - tabIndex: 0, - tableClassName: null, - tableStyle: null, - totalRecords: null, - value: null, - virtualScrollerOptions: null -}; diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js new file mode 100644 index 0000000000..6a43e35081 --- /dev/null +++ b/components/lib/datatable/DataTableBase.js @@ -0,0 +1,142 @@ +import { FilterMatchMode } from '../api/Api'; +import { ObjectUtils } from '../utils/Utils'; + +export const DataTableBase = { + defaultProps: { + __TYPE: 'DataTable', + alwaysShowPaginator: true, + autoLayout: false, + breakpoint: '960px', + cellClassName: null, + cellSelection: false, + className: null, + collapsedRowIcon: 'pi pi-chevron-right', + columnResizeMode: 'fit', + compareSelectionBy: 'deepEquals', + contextMenuSelection: null, + csvSeparator: ',', + currentPageReportTemplate: '({currentPage} of {totalPages})', + customRestoreState: null, + customSaveState: null, + dataKey: null, + defaultSortOrder: 1, + dragSelection: false, + editMode: 'cell', + editingRows: null, + emptyMessage: null, + expandableRowGroups: false, + expandedRowIcon: 'pi pi-chevron-down', + expandedRows: null, + exportFilename: 'download', + exportFunction: null, + filterDelay: 300, + filterDisplay: 'menu', + filterLocale: undefined, + filters: null, + first: 0, + footer: null, + footerColumnGroup: null, + frozenValue: null, + frozenWidth: null, + globalFilter: null, + globalFilterFields: null, + globalFilterMatchMode: FilterMatchMode.CONTAINS, + groupRowsBy: null, + header: null, + headerColumnGroup: null, + id: null, + isDataSelectable: null, + lazy: false, + loading: false, + loadingIcon: 'pi pi-spinner', + metaKeySelection: true, + multiSortMeta: null, + onAllRowsSelect: null, + onAllRowsUnselect: null, + onCellClick: null, + onCellSelect: null, + onCellUnselect: null, + onColReorder: null, + onColumnResizeEnd: null, + onColumnResizerClick: null, + onColumnResizerDoubleClick: null, + onContextMenu: null, + onContextMenuSelectionChange: null, + onFilter: null, + onPage: null, + onRowClick: null, + onRowMouseEnter: null, + onRowMouseLeave: null, + onRowCollapse: null, + onRowDoubleClick: null, + onRowEditCancel: null, + onRowEditChange: null, + onRowEditComplete: null, + onRowEditInit: null, + onRowEditSave: null, + onRowExpand: null, + onRowReorder: null, + onRowSelect: null, + onRowToggle: null, + onRowUnselect: null, + onSelectAllChange: null, + onSelectionChange: null, + onSort: null, + onStateRestore: null, + onStateSave: null, + onValueChange: null, + pageLinkSize: 5, + paginator: false, + paginatorClassName: null, + paginatorDropdownAppendTo: null, + paginatorLeft: null, + paginatorPosition: 'bottom', + paginatorRight: null, + paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', + removableSort: false, + reorderableColumns: false, + reorderableRows: false, + resizableColumns: false, + responsiveLayout: 'stack', + rowClassName: null, + rowEditValidator: null, + rowExpansionTemplate: null, + rowGroupFooterTemplate: null, + rowGroupHeaderTemplate: null, + rowGroupMode: null, + rowHover: false, + rows: null, + rowsPerPageOptions: null, + scrollDirection: 'vertical', + scrollHeight: null, + scrollable: false, + selectAll: false, + selectOnEdit: true, + selection: null, + selectionAriaLabel: null, + selectionAutoFocus: true, + selectionMode: null, + selectionPageOnly: false, + showGridlines: false, + showRowReorderElement: null, + showSelectAll: true, + showSelectionElement: null, + size: 'normal', + sortField: null, + sortMode: 'single', + sortOrder: null, + stateKey: null, + stateStorage: 'session', + stripedRows: false, + style: null, + tabIndex: 0, + tableClassName: null, + tableStyle: null, + totalRecords: null, + value: null, + virtualScrollerOptions: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DataTableBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DataTableBase.defaultProps) +}; diff --git a/components/lib/datatable/FooterCell.js b/components/lib/datatable/FooterCell.js index 2400ef8b00..1ec89b0f1e 100644 --- a/components/lib/datatable/FooterCell.js +++ b/components/lib/datatable/FooterCell.js @@ -1,13 +1,12 @@ import * as React from 'react'; +import { ColumnBase } from '../column/ColumnBase'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; export const FooterCell = React.memo((props) => { const [styleObjectState, setStyleObjectState] = React.useState({}); const elementRef = React.useRef(null); - const getColumnProp = (prop) => { - return props.column.props[prop]; - }; + const getColumnProp = (name) => ColumnBase.getCProp(props.column, name); const getStyle = () => { const footerStyle = getColumnProp('footerStyle'); diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index 669912e4f9..7d906ad675 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/components/lib/datatable/HeaderCell.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import { ColumnBase } from '../column/ColumnBase'; import { usePrevious } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; @@ -19,7 +20,7 @@ export const HeaderCell = React.memo((props) => { }; const getColumnProp = (...args) => { - return props.column ? (typeof args[0] === 'string' ? props.column.props[args[0]] : (args[0] || props.column).props[args[1]]) : null; + return props.column ? (typeof args[0] === 'string' ? ColumnBase.getCProp(props.column, args[0]) : ColumnBase.getCProp(args[0] || props.column, args[1])) : null; }; const getStyle = () => { diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 6d984ba7fa..fb391460e6 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -1,7 +1,8 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; +import { ColumnBase } from '../column/ColumnBase'; import { useMountEffect, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; +import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; import { BodyRow } from './BodyRow'; import { RowTogglerButton } from './RowTogglerButton'; @@ -39,7 +40,7 @@ export const TableBody = React.memo( }; const isSelectionEnabled = () => { - return props.selectionMode || props.selectionModeInColumn !== null || (props.columns && props.columns.some((col) => col && !!col.props.selectionMode)); + return props.selectionMode || props.selectionModeInColumn !== null || (props.columns && props.columns.some((col) => col && !!getColumnProp(col, 'selectionMode'))); }; const isSingleSelection = () => { @@ -141,6 +142,10 @@ export const TableBody = React.memo( return props.columns ? props.columns.length : 0; }; + const getColumnProp = (column, name) => { + return ColumnBase.getCProp(column, name); + }; + const getVirtualScrollerOption = (option, options) => { options = options || props.virtualScrollerOptions; @@ -359,7 +364,7 @@ export const TableBody = React.memo( let rowIndex = props.paginator ? i + props.first : i; for (let j = cellRangeStart; j <= cellRangeEnd; j++) { - let field = columns[j].props.field; + let field = getColumnProp(columns[j], 'field'); let value = ObjectUtils.resolveFieldData(rowData, field); let rangeRowData = { value, diff --git a/components/lib/datatable/TableFooter.js b/components/lib/datatable/TableFooter.js index 872f3f5445..6a7c96b570 100644 --- a/components/lib/datatable/TableFooter.js +++ b/components/lib/datatable/TableFooter.js @@ -1,21 +1,28 @@ import * as React from 'react'; +import { ColumnBase } from '../column/ColumnBase'; +import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; +import { RowBase } from '../row/RowBase'; import { FooterCell } from './FooterCell'; export const TableFooter = React.memo((props) => { const hasFooter = () => { - return props.footerColumnGroup ? true : props.columns ? props.columns.some((col) => col && col.props.footer) : false; + return props.footerColumnGroup ? true : props.columns ? props.columns.some((col) => col && getColumnProp(col, 'footer')) : false; + }; + + const getColumnProp = (column, name) => { + return ColumnBase.getCProp(column, name); }; const createGroupFooterCells = (row) => { - const columns = React.Children.toArray(row.props.children); + const columns = React.Children.toArray(RowBase.getCProp(row, 'children')); return createFooterCells(columns); }; const createFooterCells = (columns) => { return React.Children.map(columns, (col, i) => { - const isVisible = col ? !col.props.hidden : true; - const key = col ? col.props.columnKey || col.props.field || i : i; + const isVisible = col ? !getColumnProp(col, 'hidden') : true; + const key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i; return isVisible && ; }); @@ -23,7 +30,7 @@ export const TableFooter = React.memo((props) => { const createContent = () => { if (props.footerColumnGroup) { - const rows = React.Children.toArray(props.footerColumnGroup.props.children); + const rows = React.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children')); return rows.map((row, i) => ( diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index 3358ba7ed7..1ef92756cc 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -1,5 +1,8 @@ import * as React from 'react'; +import { ColumnBase } from '../column/ColumnBase'; +import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { useMountEffect } from '../hooks/Hooks'; +import { RowBase } from '../row/RowBase'; import { classNames } from '../utils/Utils'; import { ColumnFilter } from './ColumnFilter'; import { HeaderCell } from './HeaderCell'; @@ -12,8 +15,12 @@ export const TableHeader = React.memo((props) => { const isMultipleSort = props.sortMode === 'multiple'; const isAllSortableDisabled = isSingleSort && allSortableDisabledState; + const getColumnProp = (column, name) => { + return ColumnBase.getCProp(column, name); + }; + const isColumnSorted = (column) => { - return props.sortField !== null ? column.props.field === props.sortField || column.props.sortField === props.sortField : false; + return props.sortField !== null ? getColumnProp(column, 'field') === props.sortField || getColumnProp(column, 'sortField') === props.sortField : false; }; const updateSortableDisabled = () => { @@ -22,8 +29,8 @@ export const TableHeader = React.memo((props) => { let allSortableDisabled = false; props.columns.forEach((column) => { - if (column.props.sortableDisabled) { - sortableDisabledFields.push(column.props.sortField || column.props.field); + if (getColumnProp(column, 'sortableDisabled')) { + sortableDisabledFields.push(getColumnProp(column, 'sortField') || getColumnProp(column, 'field')); if (!allSortableDisabled && isColumnSorted(column)) { allSortableDisabled = true; @@ -49,15 +56,15 @@ export const TableHeader = React.memo((props) => { }); const createGroupHeaderCells = (row) => { - const columns = React.Children.toArray(row.props.children); + const columns = React.Children.toArray(RowBase.getCProp(row, 'children')); return createHeaderCells(columns); }; const createHeaderCells = (columns) => { return React.Children.map(columns, (col, i) => { - const isVisible = col ? !col.props.hidden : true; - const key = col ? col.props.columnKey || col.props.field || i : i; + const isVisible = col ? !getColumnProp(col, 'hidden') : true; + const key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i; return ( isVisible && ( @@ -122,10 +129,10 @@ export const TableHeader = React.memo((props) => { const createFilterCells = () => { return React.Children.map(props.columns, (col, i) => { - const isVisible = !col.props.hidden; + const isVisible = !getColumnProp(col, 'hidden'); if (isVisible) { - const { filterHeaderStyle, style, filterHeaderClassName, className, frozen, columnKey, field, selectionMode, filter } = col.props; + const { filterHeaderStyle, style, filterHeaderClassName, className, frozen, columnKey, field, selectionMode, filter } = ColumnBase.getCProps(col); const colStyle = { ...(filterHeaderStyle || {}), ...(style || {}) }; const colClassName = classNames('p-filter-column', filterHeaderClassName, className, { 'p-frozen-column': frozen }); const colKey = columnKey || field || i; @@ -146,7 +153,7 @@ export const TableHeader = React.memo((props) => { const createContent = () => { if (props.headerColumnGroup) { - const rows = React.Children.toArray(props.headerColumnGroup.props.children); + const rows = React.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children')); return rows.map((row, i) => ( diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js index bca1276bd3..20055d10aa 100644 --- a/components/lib/dataview/DataView.js +++ b/components/lib/dataview/DataView.js @@ -3,10 +3,10 @@ import PrimeReact, { localeOption } from '../api/Api'; import { Paginator } from '../paginator/Paginator'; import { Ripple } from '../ripple/Ripple'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { DataViewDefaultProps, DataViewLayoutOptionsDefaultProps } from './DataViewBase'; +import { DataViewBase, DataViewLayoutOptionsBase } from './DataViewBase'; export const DataViewLayoutOptions = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, DataViewLayoutOptionsDefaultProps); + const props = DataViewLayoutOptionsBase.getProps(inProps); const changeLayout = (event, layoutMode) => { props.onChange({ @@ -16,7 +16,7 @@ export const DataViewLayoutOptions = React.memo((inProps) => { event.preventDefault(); }; - const otherProps = ObjectUtils.findDiffKeys(props, DataViewLayoutOptionsDefaultProps); + const otherProps = DataViewLayoutOptionsBase.getOtherProps(props); const className = classNames('p-dataview-layout-options p-selectbutton p-buttonset', props.className); const buttonListClass = classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'list' }); const buttonGridClass = classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'grid' }); @@ -41,7 +41,7 @@ export const DataViewItem = React.memo((props) => { export const DataView = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, DataViewDefaultProps); + const props = DataViewBase.getProps(inProps); const [firstState, setFirstState] = React.useState(props.first); const [rowsState, setRowsState] = React.useState(props.rows); @@ -217,7 +217,7 @@ export const DataView = React.memo( const data = processData(); - const otherProps = ObjectUtils.findDiffKeys(props, DataViewDefaultProps); + const otherProps = DataViewBase.getOtherProps(props); const className = classNames( 'p-dataview p-component', { diff --git a/components/lib/dataview/DataViewBase.js b/components/lib/dataview/DataViewBase.js index be32e81de8..baa48a1319 100644 --- a/components/lib/dataview/DataViewBase.js +++ b/components/lib/dataview/DataViewBase.js @@ -1,43 +1,55 @@ -export const DataViewDefaultProps = { - __TYPE: 'DataView', - id: null, - header: null, - footer: null, - value: null, - layout: 'list', - dataKey: null, - rows: null, - first: 0, - totalRecords: null, - paginator: false, - paginatorPosition: 'bottom', - alwaysShowPaginator: true, - paginatorClassName: null, - paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', - paginatorLeft: null, - paginatorRight: null, - paginatorDropdownAppendTo: null, - pageLinkSize: 5, - rowsPerPageOptions: null, - currentPageReportTemplate: '({currentPage} of {totalPages})', - emptyMessage: null, - sortField: null, - sortOrder: null, - style: null, - className: null, - lazy: false, - loading: false, - loadingIcon: 'pi pi-spinner', - gutter: false, - itemTemplate: null, - onPage: null +import { ObjectUtils } from '../utils/Utils'; + +export const DataViewBase = { + defaultProps: { + __TYPE: 'DataView', + id: null, + header: null, + footer: null, + value: null, + layout: 'list', + dataKey: null, + rows: null, + first: 0, + totalRecords: null, + paginator: false, + paginatorPosition: 'bottom', + alwaysShowPaginator: true, + paginatorClassName: null, + paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', + paginatorLeft: null, + paginatorRight: null, + paginatorDropdownAppendTo: null, + pageLinkSize: 5, + rowsPerPageOptions: null, + currentPageReportTemplate: '({currentPage} of {totalPages})', + emptyMessage: null, + sortField: null, + sortOrder: null, + style: null, + className: null, + lazy: false, + loading: false, + loadingIcon: 'pi pi-spinner', + gutter: false, + itemTemplate: null, + onPage: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DataViewBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DataViewBase.defaultProps) }; -export const DataViewLayoutOptionsDefaultProps = { - __TYPE: 'DataViewLayoutOptions', - id: null, - style: null, - className: null, - layout: null, - onChange: null +export const DataViewLayoutOptionsBase = { + defaultProps: { + __TYPE: 'DataViewLayoutOptions', + id: null, + style: null, + className: null, + layout: null, + onChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DataViewLayoutOptionsBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DataViewLayoutOptionsBase.defaultProps) }; diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js index 061146430e..0d48ae95b3 100644 --- a/components/lib/deferredcontent/DeferredContent.js +++ b/components/lib/deferredcontent/DeferredContent.js @@ -1,10 +1,9 @@ import * as React from 'react'; import { useEventListener, useMountEffect } from '../hooks/Hooks'; -import { ObjectUtils } from '../utils/Utils'; -import { DeferredContentDefaultProps } from './DeferredContentBase'; +import { DeferredContentBase } from './DeferredContentBase'; export const DeferredContent = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, DeferredContentDefaultProps); + const props = DeferredContentBase.getProps(inProps); const [loadedState, setLoadedState] = React.useState(false); const elementRef = React.useRef(null); @@ -47,7 +46,7 @@ export const DeferredContent = React.forwardRef((inProps, ref) => { } }); - const otherProps = ObjectUtils.findDiffKeys(props, DeferredContentDefaultProps); + const otherProps = DeferredContentBase.getOtherProps(props); return (
diff --git a/components/lib/deferredcontent/DeferredContentBase.js b/components/lib/deferredcontent/DeferredContentBase.js index fc49502f4f..bec512fec3 100644 --- a/components/lib/deferredcontent/DeferredContentBase.js +++ b/components/lib/deferredcontent/DeferredContentBase.js @@ -1,4 +1,11 @@ -export const DeferredContentDefaultProps = { - __TYPE: 'DeferredContent', - onload: null +import { ObjectUtils } from '../utils/Utils'; + +export const DeferredContentBase = { + defaultProps: { + __TYPE: 'DeferredContent', + onload: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DeferredContentBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DeferredContentBase.defaultProps) }; diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index a3ff966667..ce6c95b2ba 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -5,10 +5,10 @@ import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } f import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; -import { DialogDefaultProps } from './DialogBase'; +import { DialogBase } from './DialogBase'; export const Dialog = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, DialogDefaultProps); + const props = DialogBase.getProps(inProps); const uniqueId = props.id ? props.id : UniqueComponentId(); const [idState, setIdState] = React.useState(uniqueId); @@ -500,7 +500,7 @@ export const Dialog = React.forwardRef((inProps, ref) => { }; const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, DialogDefaultProps); + const otherProps = DialogBase.getOtherProps(props); const className = classNames('p-dialog p-component', props.className, { 'p-dialog-rtl': props.rtl, 'p-dialog-maximized': maximized, diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js index 0925a70bbc..3801abeec5 100644 --- a/components/lib/dialog/DialogBase.js +++ b/components/lib/dialog/DialogBase.js @@ -1,48 +1,55 @@ -export const DialogDefaultProps = { - __TYPE: 'Dialog', - appendTo: null, - ariaCloseIconLabel: null, - baseZIndex: 0, - blockScroll: false, - breakpoints: null, - className: null, - closable: true, - closeOnEscape: true, - contentClassName: null, - contentStyle: null, - dismissableMask: false, - draggable: true, - focusOnShow: true, - footer: null, - header: null, - headerClassName: null, - headerStyle: null, - icons: null, - id: null, - keepInViewport: true, - maskClassName: null, - maskStyle: null, - maximizable: false, - maximized: false, - minX: 0, - minY: 0, - modal: true, - onClick: null, - onDrag: null, - onDragEnd: null, - onDragStart: null, - onHide: null, - onMaskClick: null, - onMaximize: null, - onResize: null, - onResizeEnd: null, - onResizeStart: null, - onShow: null, - position: 'center', - resizable: true, - rtl: false, - showHeader: true, - style: null, - transitionOptions: null, - visible: false +import { ObjectUtils } from '../utils/Utils'; + +export const DialogBase = { + defaultProps: { + __TYPE: 'Dialog', + appendTo: null, + ariaCloseIconLabel: null, + baseZIndex: 0, + blockScroll: false, + breakpoints: null, + className: null, + closable: true, + closeOnEscape: true, + contentClassName: null, + contentStyle: null, + dismissableMask: false, + draggable: true, + focusOnShow: true, + footer: null, + header: null, + headerClassName: null, + headerStyle: null, + icons: null, + id: null, + keepInViewport: true, + maskClassName: null, + maskStyle: null, + maximizable: false, + maximized: false, + minX: 0, + minY: 0, + modal: true, + onClick: null, + onDrag: null, + onDragEnd: null, + onDragStart: null, + onHide: null, + onMaskClick: null, + onMaximize: null, + onResize: null, + onResizeEnd: null, + onResizeStart: null, + onShow: null, + position: 'center', + resizable: true, + rtl: false, + showHeader: true, + style: null, + transitionOptions: null, + visible: false, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DialogBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DialogBase.defaultProps) }; diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js index 05ba95ea35..0a122988eb 100644 --- a/components/lib/divider/Divider.js +++ b/components/lib/divider/Divider.js @@ -1,14 +1,14 @@ import * as React from 'react'; -import { classNames, ObjectUtils } from '../utils/Utils'; -import { DividerDefaultProps } from './DividerBase'; +import { classNames } from '../utils/Utils'; +import { DividerBase } from './DividerBase'; export const Divider = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, DividerDefaultProps); + const props = DividerBase.getProps(inProps); const elementRef = React.useRef(null); const horizontal = props.layout === 'horizontal'; const vertical = props.layout === 'vertical'; - const otherProps = ObjectUtils.findDiffKeys(props, DividerDefaultProps); + const otherProps = DividerBase.getOtherProps(props); const className = classNames( `p-divider p-component p-divider-${props.layout} p-divider-${props.type}`, { diff --git a/components/lib/divider/DividerBase.js b/components/lib/divider/DividerBase.js index b7d73cd5f8..514fd79c8a 100644 --- a/components/lib/divider/DividerBase.js +++ b/components/lib/divider/DividerBase.js @@ -1,8 +1,15 @@ -export const DividerDefaultProps = { - __TYPE: 'Divider', - align: null, - layout: 'horizontal', - type: 'solid', - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const DividerBase = { + defaultProps: { + __TYPE: 'Divider', + align: null, + layout: 'horizontal', + type: 'solid', + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DividerBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DividerBase.defaultProps) }; diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js index e1881b7eb7..b37b942fd0 100644 --- a/components/lib/dock/Dock.js +++ b/components/lib/dock/Dock.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { DockDefaultProps } from './DockBase'; +import { DockBase } from './DockBase'; export const Dock = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, DockDefaultProps); + const props = DockBase.getProps(inProps); const [currentIndexState, setCurrentIndexState] = React.useState(-3); const elementRef = React.useRef(null); @@ -109,7 +109,7 @@ export const Dock = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, DockDefaultProps); + const otherProps = DockBase.getOtherProps(props); const className = classNames( `p-dock p-component p-dock-${props.position}`, { diff --git a/components/lib/dock/DockBase.js b/components/lib/dock/DockBase.js index d85a299c0c..d7912bec3b 100644 --- a/components/lib/dock/DockBase.js +++ b/components/lib/dock/DockBase.js @@ -1,11 +1,18 @@ -export const DockDefaultProps = { - __TYPE: 'Dock', - id: null, - style: null, - className: null, - model: null, - position: 'bottom', - magnification: true, - header: null, - footer: null +import { ObjectUtils } from '../utils/Utils'; + +export const DockBase = { + defaultProps: { + __TYPE: 'Dock', + id: null, + style: null, + className: null, + model: null, + position: 'bottom', + magnification: true, + header: null, + footer: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DockBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DockBase.defaultProps) }; diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index ac86a2bcf4..b9ed468001 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -4,12 +4,12 @@ import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { DropdownDefaultProps } from './DropdownBase'; +import { DropdownBase } from './DropdownBase'; import { DropdownPanel } from './DropdownPanel'; export const Dropdown = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, DropdownDefaultProps); + const props = DropdownBase.getProps(inProps); const [filterState, setFilterState] = React.useState(''); const [focusedState, setFocusedState] = React.useState(false); @@ -744,7 +744,7 @@ export const Dropdown = React.memo( const selectedOption = getSelectedOption(); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, DropdownDefaultProps); + const otherProps = DropdownBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-dropdown p-component p-inputwrapper', diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index 679f9b17e3..a22b476cd4 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -1,61 +1,68 @@ -export const DropdownDefaultProps = { - __TYPE: 'Dropdown', - appendTo: null, - ariaLabel: null, - ariaLabelledBy: null, - autoFocus: false, - className: null, - clearIcon: 'pi pi-times', - dataKey: null, - disabled: false, - dropdownIcon: 'pi pi-chevron-down', - editable: false, - emptyFilterMessage: null, - emptyMessage: null, - filter: false, - filterBy: null, - filterInputAutoFocus: true, - filterLocale: undefined, - filterMatchMode: 'contains', - filterPlaceholder: null, - filterTemplate: null, - focusInputRef: null, - id: null, - inputId: null, - inputRef: null, - itemTemplate: null, - maxLength: null, - name: null, - onBlur: null, - onChange: null, - onContextMenu: null, - onFilter: null, - onFocus: null, - onHide: null, - onMouseDown: null, - onShow: null, - optionDisabled: null, - optionGroupChildren: null, - optionGroupLabel: null, - optionGroupTemplate: null, - optionLabel: null, - optionValue: null, - options: null, - panelClassName: null, - panelStyle: null, - placeholder: null, - required: false, - resetFilterOnHide: false, - scrollHeight: '200px', - showClear: false, - showFilterClear: false, - showOnFocus: false, - style: null, - tabIndex: null, - tooltip: null, - tooltipOptions: null, - transitionOptions: null, - value: null, - valueTemplate: null, - virtualScrollerOptions: null +import { ObjectUtils } from '../utils/Utils'; + +export const DropdownBase = { + defaultProps: { + __TYPE: 'Dropdown', + appendTo: null, + ariaLabel: null, + ariaLabelledBy: null, + autoFocus: false, + className: null, + clearIcon: 'pi pi-times', + dataKey: null, + disabled: false, + dropdownIcon: 'pi pi-chevron-down', + editable: false, + emptyFilterMessage: null, + emptyMessage: null, + filter: false, + filterBy: null, + filterInputAutoFocus: true, + filterLocale: undefined, + filterMatchMode: 'contains', + filterPlaceholder: null, + filterTemplate: null, + focusInputRef: null, + id: null, + inputId: null, + inputRef: null, + itemTemplate: null, + maxLength: null, + name: null, + onBlur: null, + onChange: null, + onContextMenu: null, + onFilter: null, + onFocus: null, + onHide: null, + onMouseDown: null, + onShow: null, + optionDisabled: null, + optionGroupChildren: null, + optionGroupLabel: null, + optionGroupTemplate: null, + optionLabel: null, + optionValue: null, + options: null, + panelClassName: null, + panelStyle: null, + placeholder: null, + required: false, + resetFilterOnHide: false, + scrollHeight: '200px', + showClear: false, + showFilterClear: false, + showOnFocus: false, + style: null, + tabIndex: null, + tooltip: null, + tooltipOptions: null, + transitionOptions: null, + value: null, + valueTemplate: null, + virtualScrollerOptions: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, DropdownBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, DropdownBase.defaultProps) }; diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js index e30f21d466..1eb5465540 100644 --- a/components/lib/editor/Editor.js +++ b/components/lib/editor/Editor.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { EditorDefaultProps } from './EditorBase'; +import { classNames, DomHandler } from '../utils/Utils'; +import { EditorBase } from './EditorBase'; const QuillJS = (function () { try { @@ -13,7 +13,7 @@ const QuillJS = (function () { export const Editor = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, EditorDefaultProps); + const props = EditorBase.getProps(inProps); const elementRef = React.useRef(null); const contentRef = React.useRef(null); @@ -194,7 +194,7 @@ export const Editor = React.memo( } }; - const otherProps = ObjectUtils.findDiffKeys(props, EditorDefaultProps); + const otherProps = EditorBase.getOtherProps(props); const className = classNames('p-component p-editor-container', props.className); const header = createToolbarHeader(); const content =
; diff --git a/components/lib/editor/EditorBase.js b/components/lib/editor/EditorBase.js index 45f966f753..09611994d8 100644 --- a/components/lib/editor/EditorBase.js +++ b/components/lib/editor/EditorBase.js @@ -1,18 +1,25 @@ -export const EditorDefaultProps = { - __TYPE: 'Editor', - id: null, - value: null, - style: null, - className: null, - placeholder: null, - readOnly: false, - modules: null, - formats: null, - theme: 'snow', - showHeader: true, - headerTemplate: null, - onTextChange: null, - onSelectionChange: null, - onLoad: null, - maxLength: null +import { ObjectUtils } from '../utils/Utils'; + +export const EditorBase = { + defaultProps: { + __TYPE: 'Editor', + id: null, + value: null, + style: null, + className: null, + placeholder: null, + readOnly: false, + modules: null, + formats: null, + theme: 'snow', + showHeader: true, + headerTemplate: null, + onTextChange: null, + onSelectionChange: null, + onLoad: null, + maxLength: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, EditorBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, EditorBase.defaultProps) }; diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js index 2b6cbbe43e..5a407d1347 100644 --- a/components/lib/fieldset/Fieldset.js +++ b/components/lib/fieldset/Fieldset.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { CSSTransition } from '../csstransition/CSSTransition'; import { useMountEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { classNames, ObjectUtils, UniqueComponentId } from '../utils/Utils'; -import { FieldsetDefaultProps } from './FieldsetBase'; +import { classNames, UniqueComponentId } from '../utils/Utils'; +import { FieldsetBase } from './FieldsetBase'; export const Fieldset = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, FieldsetDefaultProps); + const props = FieldsetBase.getProps(inProps); const [idState, setIdState] = React.useState(props.id); const [collapsedState, setCollapsedState] = React.useState(props.collapsed); @@ -114,7 +114,7 @@ export const Fieldset = React.forwardRef((inProps, ref) => { getContent: () => contentRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, FieldsetDefaultProps); + const otherProps = FieldsetBase.getOtherProps(props); const className = classNames( 'p-fieldset p-component', { diff --git a/components/lib/fieldset/FieldsetBase.js b/components/lib/fieldset/FieldsetBase.js index b82b051b6a..b6c51fae23 100644 --- a/components/lib/fieldset/FieldsetBase.js +++ b/components/lib/fieldset/FieldsetBase.js @@ -1,14 +1,21 @@ -export const FieldsetDefaultProps = { - __TYPE: 'Fieldset', - id: null, - legend: null, - className: null, - style: null, - toggleable: null, - collapsed: null, - transitionOptions: null, - onExpand: null, - onCollapse: null, - onToggle: null, - onClick: null +import { ObjectUtils } from '../utils/Utils'; + +export const FieldsetBase = { + defaultProps: { + __TYPE: 'Fieldset', + id: null, + legend: null, + className: null, + style: null, + toggleable: null, + collapsed: null, + transitionOptions: null, + onExpand: null, + onCollapse: null, + onToggle: null, + onClick: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, FieldsetBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, FieldsetBase.defaultProps) }; diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js index 82559f26ee..0f9feafeba 100644 --- a/components/lib/fileupload/FileUpload.js +++ b/components/lib/fileupload/FileUpload.js @@ -5,11 +5,11 @@ import { Messages } from '../messages/Messages'; import { ProgressBar } from '../progressbar/ProgressBar'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; -import { FileUploadDefaultProps } from './FileUploadBase'; +import { FileUploadBase } from './FileUploadBase'; export const FileUpload = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, FileUploadDefaultProps); + const props = FileUploadBase.getProps(inProps); const [filesState, setFilesState] = React.useState([]); const [progressState, setProgressState] = React.useState(0); @@ -429,7 +429,7 @@ export const FileUpload = React.memo( }; const createAdvanced = () => { - const otherProps = ObjectUtils.findDiffKeys(props, FileUploadDefaultProps); + const otherProps = FileUploadBase.getOtherProps(props); const className = classNames('p-fileupload p-fileupload-advanced p-component', props.className); const headerClassName = classNames('p-fileupload-buttonbar', props.headerClassName); const contentClassName = classNames('p-fileupload-content', props.contentClassName); @@ -488,7 +488,7 @@ export const FileUpload = React.memo( const createBasic = () => { const chooseOptions = props.chooseOptions; - const otherProps = ObjectUtils.findDiffKeys(props, FileUploadDefaultProps); + const otherProps = FileUploadBase.getOtherProps(props); const className = classNames('p-fileupload p-fileupload-basic p-component', props.className); const buttonClassName = classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': hasFiles, 'p-disabled': disabled, 'p-focus': focusedState }, chooseOptions.className); const chooseIcon = chooseOptions.icon || classNames({ 'pi pi-plus': !chooseOptions.icon && (!hasFiles || props.auto), 'pi pi-upload': !chooseOptions.icon && hasFiles && !props.auto }); diff --git a/components/lib/fileupload/FileUploadBase.js b/components/lib/fileupload/FileUploadBase.js index 1244447458..c960f8cab3 100644 --- a/components/lib/fileupload/FileUploadBase.js +++ b/components/lib/fileupload/FileUploadBase.js @@ -1,63 +1,70 @@ -export const FileUploadDefaultProps = { - __TYPE: 'FileUpload', - id: null, - name: null, - url: null, - mode: 'advanced', - multiple: false, - accept: null, - disabled: false, - auto: false, - maxFileSize: null, - invalidFileSizeMessageSummary: '{0}: Invalid file size, ', - invalidFileSizeMessageDetail: 'maximum upload size is {0}.', - style: null, - className: null, - widthCredentials: false, - previewWidth: 50, - chooseLabel: null, - uploadLabel: null, - cancelLabel: null, - chooseOptions: { - label: null, - icon: null, - iconOnly: false, +import { ObjectUtils } from '../utils/Utils'; + +export const FileUploadBase = { + defaultProps: { + __TYPE: 'FileUpload', + id: null, + name: null, + url: null, + mode: 'advanced', + multiple: false, + accept: null, + disabled: false, + auto: false, + maxFileSize: null, + invalidFileSizeMessageSummary: '{0}: Invalid file size, ', + invalidFileSizeMessageDetail: 'maximum upload size is {0}.', + style: null, className: null, - style: null + widthCredentials: false, + previewWidth: 50, + chooseLabel: null, + uploadLabel: null, + cancelLabel: null, + chooseOptions: { + label: null, + icon: null, + iconOnly: false, + className: null, + style: null + }, + uploadOptions: { + label: null, + icon: null, + iconOnly: false, + className: null, + style: null + }, + cancelOptions: { + label: null, + icon: null, + iconOnly: false, + className: null, + style: null + }, + customUpload: false, + headerClassName: null, + headerStyle: null, + contentClassName: null, + contentStyle: null, + headerTemplate: null, + itemTemplate: null, + emptyTemplate: null, + progressBarTemplate: null, + onBeforeUpload: null, + onBeforeSend: null, + onBeforeDrop: null, + onBeforeSelect: null, + onUpload: null, + onError: null, + onClear: null, + onSelect: null, + onProgress: null, + onValidationFail: null, + uploadHandler: null, + onRemove: null, + children: undefined }, - uploadOptions: { - label: null, - icon: null, - iconOnly: false, - className: null, - style: null - }, - cancelOptions: { - label: null, - icon: null, - iconOnly: false, - className: null, - style: null - }, - customUpload: false, - headerClassName: null, - headerStyle: null, - contentClassName: null, - contentStyle: null, - headerTemplate: null, - itemTemplate: null, - emptyTemplate: null, - progressBarTemplate: null, - onBeforeUpload: null, - onBeforeSend: null, - onBeforeDrop: null, - onBeforeSelect: null, - onUpload: null, - onError: null, - onClear: null, - onSelect: null, - onProgress: null, - onValidationFail: null, - uploadHandler: null, - onRemove: null + getProps: (props) => ObjectUtils.getMergedProps(props, FileUploadBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, FileUploadBase.defaultProps) }; diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js index 4f30f96c53..67173f1fc0 100644 --- a/components/lib/galleria/Galleria.js +++ b/components/lib/galleria/Galleria.js @@ -5,13 +5,13 @@ import { useInterval, useUnmountEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { GalleriaDefaultProps } from './GalleriaBase'; +import { GalleriaBase } from './GalleriaBase'; import { GalleriaItem } from './GalleriaItem'; import { GalleriaThumbnails } from './GalleriaThumbnails'; export const Galleria = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, GalleriaDefaultProps); + const props = GalleriaBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(false); const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible); @@ -136,7 +136,7 @@ export const Galleria = React.memo( }; const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, GalleriaDefaultProps); + const otherProps = GalleriaBase.getOtherProps(props); const thumbnailsPosClassName = props.showThumbnails && getPositionClassName('p-galleria-thumbnails', props.thumbnailsPosition); const indicatorPosClassName = props.showIndicators && getPositionClassName('p-galleria-indicators', props.indicatorsPosition); const galleriaClassName = classNames( diff --git a/components/lib/galleria/GalleriaBase.js b/components/lib/galleria/GalleriaBase.js index 3654f824ad..a46b40c183 100644 --- a/components/lib/galleria/GalleriaBase.js +++ b/components/lib/galleria/GalleriaBase.js @@ -1,33 +1,40 @@ -export const GalleriaDefaultProps = { - __TYPE: 'Galleria', - id: null, - value: null, - activeIndex: 0, - fullScreen: false, - item: null, - thumbnail: null, - indicator: null, - caption: null, - className: null, - style: null, - header: null, - footer: null, - numVisible: 3, - responsiveOptions: null, - showItemNavigators: false, - showThumbnailNavigators: true, - showItemNavigatorsOnHover: false, - changeItemOnIndicatorHover: false, - circular: false, - autoPlay: false, - transitionInterval: 4000, - showThumbnails: true, - thumbnailsPosition: 'bottom', - verticalThumbnailViewPortHeight: '300px', - showIndicators: false, - showIndicatorsOnItem: false, - indicatorsPosition: 'bottom', - baseZIndex: 0, - transitionOptions: null, - onItemChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const GalleriaBase = { + defaultProps: { + __TYPE: 'Galleria', + id: null, + value: null, + activeIndex: 0, + fullScreen: false, + item: null, + thumbnail: null, + indicator: null, + caption: null, + className: null, + style: null, + header: null, + footer: null, + numVisible: 3, + responsiveOptions: null, + showItemNavigators: false, + showThumbnailNavigators: true, + showItemNavigatorsOnHover: false, + changeItemOnIndicatorHover: false, + circular: false, + autoPlay: false, + transitionInterval: 4000, + showThumbnails: true, + thumbnailsPosition: 'bottom', + verticalThumbnailViewPortHeight: '300px', + showIndicators: false, + showIndicatorsOnItem: false, + indicatorsPosition: 'bottom', + baseZIndex: 0, + transitionOptions: null, + onItemChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, GalleriaBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, GalleriaBase.defaultProps) }; diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js index 8703dffb67..8bdf4210f3 100644 --- a/components/lib/image/Image.js +++ b/components/lib/image/Image.js @@ -4,11 +4,11 @@ import { CSSTransition } from '../csstransition/CSSTransition'; import { useUnmountEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { ImageDefaultProps } from './ImageBase'; +import { ImageBase } from './ImageBase'; export const Image = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ImageDefaultProps); + const props = ImageBase.getProps(inProps); const [maskVisibleState, setMaskVisibleState] = React.useState(false); const [previewVisibleState, setPreviewVisibleState] = React.useState(false); @@ -167,7 +167,7 @@ export const Image = React.memo( })); const { src, alt, width, height } = props; - const otherProps = ObjectUtils.findDiffKeys(props, ImageDefaultProps); + const otherProps = ImageBase.getOtherProps(props); const containerClassName = classNames('p-image p-component', props.className, { 'p-image-preview-container': props.preview }); diff --git a/components/lib/image/ImageBase.js b/components/lib/image/ImageBase.js index b407281828..82508e2a3e 100644 --- a/components/lib/image/ImageBase.js +++ b/components/lib/image/ImageBase.js @@ -1,17 +1,24 @@ -export const ImageDefaultProps = { - __TYPE: 'Image', - alt: null, - className: null, - downloadable: false, - height: null, - imageClassName: null, - imageStyle: null, - onError: null, - onHide: null, - onShow: null, - preview: false, - src: null, - template: null, - width: null, - zoomSrc: null +import { ObjectUtils } from '../utils/Utils'; + +export const ImageBase = { + defaultProps: { + __TYPE: 'Image', + alt: null, + className: null, + downloadable: false, + height: null, + imageClassName: null, + imageStyle: null, + onError: null, + onHide: null, + onShow: null, + preview: false, + src: null, + template: null, + width: null, + zoomSrc: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ImageBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ImageBase.defaultProps) }; diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js index 301ba80eac..194c82b393 100644 --- a/components/lib/inplace/Inplace.js +++ b/components/lib/inplace/Inplace.js @@ -2,13 +2,13 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; import { Button } from '../button/Button'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { InplaceContentDefaultProps, InplaceDefaultProps, InplaceDisplayDefaultProps } from './InplaceBase'; +import { InplaceBase, InplaceContentBase, InplaceDisplayBase } from './InplaceBase'; export const InplaceDisplay = (props) => props.children; export const InplaceContent = (props) => props.children; export const Inplace = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, InplaceDefaultProps); + const props = InplaceBase.getProps(inProps); const [activeState, setActiveState] = React.useState(props.active); const elementRef = React.useRef(null); @@ -52,7 +52,7 @@ export const Inplace = React.forwardRef((inProps, ref) => { }; const createDisplay = (content) => { - const otherProps = ObjectUtils.findDiffKeys(content.props, InplaceDisplayDefaultProps); + const otherProps = InplaceDisplayBase.getOtherProps(content); const className = classNames('p-inplace-display', { 'p-disabled': props.disabled }); @@ -73,7 +73,7 @@ export const Inplace = React.forwardRef((inProps, ref) => { }; const createContent = (content) => { - const otherProps = ObjectUtils.findDiffKeys(content.props, InplaceContentDefaultProps); + const otherProps = InplaceContentBase.getOtherProps(content); const closeButton = createCloseButton(); return ( @@ -101,7 +101,7 @@ export const Inplace = React.forwardRef((inProps, ref) => { getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, InplaceDefaultProps); + const otherProps = InplaceBase.getOtherProps(props); const children = createChildren(); const className = classNames( 'p-inplace p-component', diff --git a/components/lib/inplace/InplaceBase.js b/components/lib/inplace/InplaceBase.js index cdc63dce87..d3cc0da81c 100644 --- a/components/lib/inplace/InplaceBase.js +++ b/components/lib/inplace/InplaceBase.js @@ -1,21 +1,36 @@ -export const InplaceDisplayDefaultProps = { - __TYPE: 'InplaceDisplay' +import { ObjectUtils } from '../utils/Utils'; + +export const InplaceDisplayBase = { + defaultProps: { + __TYPE: 'InplaceDisplay', + children: undefined + }, + getOtherProps: (display) => ObjectUtils.getComponentDiffProps(display, InplaceDisplayBase.defaultProps) }; -export const InplaceContentDefaultProps = { - __TYPE: 'InplaceContent' +export const InplaceContentBase = { + defaultProps: { + __TYPE: 'InplaceContent', + children: undefined + }, + getOtherProps: (content) => ObjectUtils.getComponentDiffProps(content, InplaceContentBase.defaultProps) }; -export const InplaceDefaultProps = { - __TYPE: 'Inplace', - style: null, - className: null, - active: false, - closable: false, - disabled: false, - tabIndex: 0, - ariaLabel: null, - onOpen: null, - onClose: null, - onToggle: null +export const InplaceBase = { + defaultProps: { + __TYPE: 'Inplace', + style: null, + className: null, + active: false, + closable: false, + disabled: false, + tabIndex: 0, + ariaLabel: null, + onOpen: null, + onClose: null, + onToggle: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, InplaceBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, InplaceBase.defaultProps) }; diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js index d7de571386..dbb3751bfa 100644 --- a/components/lib/inputmask/InputMask.js +++ b/components/lib/inputmask/InputMask.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { InputText } from '../inputtext/InputText'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { InputMaskDefaultProps } from './InputMaskBase'; +import { InputMaskBase } from './InputMaskBase'; export const InputMask = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, InputMaskDefaultProps); + const props = InputMaskBase.getProps(inProps); const elementRef = React.useRef(ref); const firstNonMaskPos = React.useRef(null); @@ -566,7 +566,7 @@ export const InputMask = React.memo( } }, [isValueUpdated]); - const otherProps = ObjectUtils.findDiffKeys(props, InputMaskDefaultProps); + const otherProps = InputMaskBase.getOtherProps(props); const className = classNames('p-inputmask', props.className); return ( diff --git a/components/lib/inputmask/InputMaskBase.js b/components/lib/inputmask/InputMaskBase.js index c331779f04..b166e911b7 100644 --- a/components/lib/inputmask/InputMaskBase.js +++ b/components/lib/inputmask/InputMaskBase.js @@ -1,26 +1,33 @@ -export const InputMaskDefaultProps = { - __TYPE: 'InputMask', - id: null, - value: null, - type: 'text', - mask: null, - slotChar: '_', - autoClear: true, - unmask: false, - style: null, - className: null, - placeholder: null, - size: null, - maxLength: null, - tabIndex: null, - disabled: false, - readOnly: false, - name: null, - required: false, - tooltip: null, - tooltipOptions: null, - onComplete: null, - onChange: null, - onFocus: null, - onBlur: null +import { ObjectUtils } from '../utils/Utils'; + +export const InputMaskBase = { + defaultProps: { + __TYPE: 'InputMask', + id: null, + value: null, + type: 'text', + mask: null, + slotChar: '_', + autoClear: true, + unmask: false, + style: null, + className: null, + placeholder: null, + size: null, + maxLength: null, + tabIndex: null, + disabled: false, + readOnly: false, + name: null, + required: false, + tooltip: null, + tooltipOptions: null, + onComplete: null, + onChange: null, + onFocus: null, + onBlur: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, InputMaskBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, InputMaskBase.defaultProps) }; diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index eec2326579..bf5d6a9778 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -4,11 +4,11 @@ import { InputText } from '../inputtext/InputText'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { InputNumberDefaultProps } from './InputNumberBase'; +import { InputNumberBase } from './InputNumberBase'; export const InputNumber = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, InputNumberDefaultProps); + const props = InputNumberBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); @@ -1102,7 +1102,7 @@ export const InputNumber = React.memo( }; const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, InputNumberDefaultProps); + const otherProps = InputNumberBase.getOtherProps(props); const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js index 2c64dd58b9..d50f807380 100644 --- a/components/lib/inputnumber/InputNumberBase.js +++ b/components/lib/inputnumber/InputNumberBase.js @@ -1,52 +1,59 @@ -export const InputNumberDefaultProps = { - __TYPE: 'InputNumber', - allowEmpty: true, - ariaLabelledBy: null, - autoFocus: false, - buttonLayout: 'stacked', - className: null, - currency: undefined, - currencyDisplay: undefined, - decrementButtonClassName: null, - decrementButtonIcon: 'pi pi-angle-down', - disabled: false, - format: true, - id: null, - incrementButtonClassName: null, - incrementButtonIcon: 'pi pi-angle-up', - inputClassName: null, - inputId: null, - inputMode: null, - inputRef: null, - inputStyle: null, - locale: undefined, - localeMatcher: undefined, - max: null, - maxFractionDigits: undefined, - maxLength: null, - min: null, - minFractionDigits: undefined, - mode: 'decimal', - name: null, - onBlur: null, - onChange: null, - onFocus: null, - onKeyDown: null, - onValueChange: null, - pattern: null, - placeholder: null, - prefix: null, - readOnly: false, - required: false, - showButtons: false, - size: null, - step: 1, - style: null, - suffix: null, - tabIndex: null, - tooltip: null, - tooltipOptions: null, - type: 'text', - useGrouping: true, - value: null +import { ObjectUtils } from '../utils/Utils'; + +export const InputNumberBase = { + defaultProps: { + __TYPE: 'InputNumber', + allowEmpty: true, + ariaLabelledBy: null, + autoFocus: false, + buttonLayout: 'stacked', + className: null, + currency: undefined, + currencyDisplay: undefined, + decrementButtonClassName: null, + decrementButtonIcon: 'pi pi-angle-down', + disabled: false, + format: true, + id: null, + incrementButtonClassName: null, + incrementButtonIcon: 'pi pi-angle-up', + inputClassName: null, + inputId: null, + inputMode: null, + inputRef: null, + inputStyle: null, + locale: undefined, + localeMatcher: undefined, + max: null, + maxFractionDigits: undefined, + maxLength: null, + min: null, + minFractionDigits: undefined, + mode: 'decimal', + name: null, + onBlur: null, + onChange: null, + onFocus: null, + onKeyDown: null, + onValueChange: null, + pattern: null, + placeholder: null, + prefix: null, + readOnly: false, + required: false, + showButtons: false, + size: null, + step: 1, + style: null, + suffix: null, + tabIndex: null, + tooltip: null, + tooltipOptions: null, + type: 'text', + useGrouping: true, + value: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, InputNumberBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, InputNumberBase.defaultProps) }; diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js index 5b9f2e934d..0e389cc6c0 100644 --- a/components/lib/inputswitch/InputSwitch.js +++ b/components/lib/inputswitch/InputSwitch.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { InputSwitchDefaultProps } from './InputSwitchBase'; +import { InputSwitchBase } from './InputSwitchBase'; export const InputSwitch = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, InputSwitchDefaultProps); + const props = InputSwitchBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); @@ -63,7 +63,7 @@ export const InputSwitch = React.memo( }, [inputRef, props.inputRef]); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, InputSwitchDefaultProps); + const otherProps = InputSwitchBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-inputswitch p-component', diff --git a/components/lib/inputswitch/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js index ba38a31a24..8e6ce1c6c5 100644 --- a/components/lib/inputswitch/InputSwitchBase.js +++ b/components/lib/inputswitch/InputSwitchBase.js @@ -1,19 +1,26 @@ -export const InputSwitchDefaultProps = { - __TYPE: 'InputSwitch', - checked: false, - className: null, - disabled: false, - falseValue: false, - id: null, - inputId: null, - inputRef: null, - name: null, - onBlur: null, - onChange: null, - onFocus: null, - style: null, - tabIndex: null, - tooltip: null, - tooltipOptions: null, - trueValue: true +import { ObjectUtils } from '../utils/Utils'; + +export const InputSwitchBase = { + defaultProps: { + __TYPE: 'InputSwitch', + checked: false, + className: null, + disabled: false, + falseValue: false, + id: null, + inputId: null, + inputRef: null, + name: null, + onBlur: null, + onChange: null, + onFocus: null, + style: null, + tabIndex: null, + tooltip: null, + tooltipOptions: null, + trueValue: true, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, InputSwitchBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, InputSwitchBase.defaultProps) }; diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js index 847e2a926e..00eef39b57 100644 --- a/components/lib/inputtext/InputText.js +++ b/components/lib/inputtext/InputText.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { InputTextDefaultProps } from './InputTextBase'; +import { InputTextBase } from './InputTextBase'; export const InputText = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, InputTextDefaultProps); + const props = InputTextBase.getProps(inProps); const elementRef = React.useRef(ref); @@ -50,7 +50,7 @@ export const InputText = React.memo( }, [elementRef, ref]); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, InputTextDefaultProps); + const otherProps = InputTextBase.getOtherProps(props); const className = classNames( 'p-inputtext p-component', { diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js index 39b9fe5796..274cee2c92 100644 --- a/components/lib/inputtext/InputTextBase.js +++ b/components/lib/inputtext/InputTextBase.js @@ -1,10 +1,17 @@ -export const InputTextDefaultProps = { - __TYPE: 'InputText', - keyfilter: null, - validateOnly: false, - tooltip: null, - tooltipOptions: null, - onInput: null, - onKeyDown: null, - onPaste: null +import { ObjectUtils } from '../utils/Utils'; + +export const InputTextBase = { + defaultProps: { + __TYPE: 'InputText', + keyfilter: null, + validateOnly: false, + tooltip: null, + tooltipOptions: null, + onInput: null, + onKeyDown: null, + onPaste: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, InputTextBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, InputTextBase.defaultProps) }; diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js index 21ac8d11b5..a34eedd71f 100644 --- a/components/lib/inputtextarea/InputTextarea.js +++ b/components/lib/inputtextarea/InputTextarea.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { KeyFilter } from '../keyfilter/KeyFilter'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { InputTextareaDefaultProps } from './InputTextareaBase'; +import { InputTextareaBase } from './InputTextareaBase'; export const InputTextarea = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, InputTextareaDefaultProps); + const props = InputTextareaBase.getProps(inProps); const elementRef = React.useRef(ref); const cachedScrollHeight = React.useRef(0); @@ -102,7 +102,7 @@ export const InputTextarea = React.memo( }, [props.autoResize]); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, InputTextareaDefaultProps); + const otherProps = InputTextareaBase.getOtherProps(props); const className = classNames( 'p-inputtextarea p-inputtext p-component', { diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js index d5ea211cc6..b78716ec4d 100644 --- a/components/lib/inputtextarea/InputTextareaBase.js +++ b/components/lib/inputtextarea/InputTextareaBase.js @@ -1,14 +1,21 @@ -export const InputTextareaDefaultProps = { - __TYPE: 'InputTextarea', - autoResize: false, - keyfilter: null, - onBlur: null, - onFocus: null, - onInput: null, - onKeyDown: null, - onKeyUp: null, - onPaste: null, - tooltip: null, - tooltipOptions: null, - validateOnly: false +import { ObjectUtils } from '../utils/Utils'; + +export const InputTextareaBase = { + defaultProps: { + __TYPE: 'InputTextarea', + autoResize: false, + keyfilter: null, + onBlur: null, + onFocus: null, + onInput: null, + onKeyDown: null, + onKeyUp: null, + onPaste: null, + tooltip: null, + tooltipOptions: null, + validateOnly: false, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, InputTextareaBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, InputTextareaBase.defaultProps) }; diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js index 7b7c73f4bb..37f955877e 100644 --- a/components/lib/knob/Knob.js +++ b/components/lib/knob/Knob.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { useEventListener } from '../hooks/Hooks'; -import { classNames, ObjectUtils } from '../utils/Utils'; -import { KnobDefaultProps } from './KnobBase'; +import { classNames } from '../utils/Utils'; +import { KnobBase } from './KnobBase'; const radius = 40; const midX = 50; @@ -11,7 +11,7 @@ const maxRadians = -Math.PI / 3; export const Knob = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, KnobDefaultProps); + const props = KnobBase.getProps(inProps); const elementRef = React.useRef(null); const enabled = !props.disabled && !props.readOnly; @@ -151,7 +151,7 @@ export const Knob = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, KnobDefaultProps); + const otherProps = KnobBase.getOtherProps(props); const className = classNames( 'p-knob p-component', { diff --git a/components/lib/knob/KnobBase.js b/components/lib/knob/KnobBase.js index 847403446c..cee6c30dd2 100644 --- a/components/lib/knob/KnobBase.js +++ b/components/lib/knob/KnobBase.js @@ -1,21 +1,28 @@ -export const KnobDefaultProps = { - __TYPE: 'Knob', - id: null, - style: null, - className: null, - value: null, - size: 100, - disabled: false, - readOnly: false, - showValue: true, - step: 1, - min: 0, - max: 100, - strokeWidth: 14, - name: null, - valueColor: 'var(--primary-color, Black)', - rangeColor: 'var(--surface-border, LightGray)', - textColor: 'var(--text-color-secondary, Black)', - valueTemplate: '{value}', - onChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const KnobBase = { + defaultProps: { + __TYPE: 'Knob', + id: null, + style: null, + className: null, + value: null, + size: 100, + disabled: false, + readOnly: false, + showValue: true, + step: 1, + min: 0, + max: 100, + strokeWidth: 14, + name: null, + valueColor: 'var(--primary-color, Black)', + rangeColor: 'var(--surface-border, LightGray)', + textColor: 'var(--text-color-secondary, Black)', + valueTemplate: '{value}', + onChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, KnobBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, KnobBase.defaultProps) }; diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index df8163fccd..6c1ada923a 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -4,13 +4,13 @@ import { useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; import { VirtualScroller } from '../virtualscroller/VirtualScroller'; -import { ListBoxDefaultProps } from './ListBoxBase'; +import { ListBoxBase } from './ListBoxBase'; import { ListBoxHeader } from './ListBoxHeader'; import { ListBoxItem } from './ListBoxItem'; export const ListBox = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ListBoxDefaultProps); + const props = ListBoxBase.getProps(inProps); const [filterValueState, setFilterValueState] = React.useState(''); const elementRef = React.useRef(null); @@ -397,7 +397,7 @@ export const ListBox = React.memo( const visibleOptions = getVisibleOptions(); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, ListBoxDefaultProps); + const otherProps = ListBoxBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-listbox p-component', diff --git a/components/lib/listbox/ListBoxBase.js b/components/lib/listbox/ListBoxBase.js index c02ca347b8..455bca3b07 100644 --- a/components/lib/listbox/ListBoxBase.js +++ b/components/lib/listbox/ListBoxBase.js @@ -1,37 +1,44 @@ -export const ListBoxDefaultProps = { - __TYPE: 'ListBox', - className: null, - dataKey: null, - disabled: null, - emptyFilterMessage: null, - emptyMessage: null, - filter: false, - filterBy: null, - filterInputProps: null, - filterLocale: undefined, - filterMatchMode: 'contains', - filterPlaceholder: null, - filterTemplate: null, - filterValue: null, - id: null, - itemTemplate: null, - listClassName: null, - listStyle: null, - metaKeySelection: false, - multiple: false, - onChange: null, - onFilterValueChange: null, - optionDisabled: null, - optionGroupChildren: null, - optionGroupLabel: null, - optionGroupTemplate: null, - optionLabel: null, - optionValue: null, - options: null, - style: null, - tabIndex: 0, - tooltip: null, - tooltipOptions: null, - value: null, - virtualScrollerOptions: null +import { ObjectUtils } from '../utils/Utils'; + +export const ListBoxBase = { + defaultProps: { + __TYPE: 'ListBox', + className: null, + dataKey: null, + disabled: null, + emptyFilterMessage: null, + emptyMessage: null, + filter: false, + filterBy: null, + filterInputProps: null, + filterLocale: undefined, + filterMatchMode: 'contains', + filterPlaceholder: null, + filterTemplate: null, + filterValue: null, + id: null, + itemTemplate: null, + listClassName: null, + listStyle: null, + metaKeySelection: false, + multiple: false, + onChange: null, + onFilterValueChange: null, + optionDisabled: null, + optionGroupChildren: null, + optionGroupLabel: null, + optionGroupTemplate: null, + optionLabel: null, + optionValue: null, + options: null, + style: null, + tabIndex: 0, + tooltip: null, + tooltipOptions: null, + value: null, + virtualScrollerOptions: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ListBoxBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ListBoxBase.defaultProps) }; diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js index 22bcffd476..018c22d1c0 100644 --- a/components/lib/megamenu/MegaMenu.js +++ b/components/lib/megamenu/MegaMenu.js @@ -3,11 +3,11 @@ import PrimeReact from '../api/Api'; import { useEventListener, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { MegaMenuDefaultProps } from './MegaMenuBase'; +import { MegaMenuBase } from './MegaMenuBase'; export const MegaMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, MegaMenuDefaultProps); + const props = MegaMenuBase.getProps(inProps); const [activeItemState, setActiveItemState] = React.useState(null); const elementRef = React.useRef(null); @@ -390,7 +390,7 @@ export const MegaMenu = React.memo( return null; }; - const otherProps = ObjectUtils.findDiffKeys(props, MegaMenuDefaultProps); + const otherProps = MegaMenuBase.getOtherProps(props); const className = classNames( 'p-megamenu p-component', { diff --git a/components/lib/megamenu/MegaMenuBase.js b/components/lib/megamenu/MegaMenuBase.js index cca47b8413..720668ba81 100644 --- a/components/lib/megamenu/MegaMenuBase.js +++ b/components/lib/megamenu/MegaMenuBase.js @@ -1,10 +1,17 @@ -export const MegaMenuDefaultProps = { - __TYPE: 'MegaMenu', - id: null, - model: null, - style: null, - className: null, - orientation: 'horizontal', - start: null, - end: null +import { ObjectUtils } from '../utils/Utils'; + +export const MegaMenuBase = { + defaultProps: { + __TYPE: 'MegaMenu', + id: null, + model: null, + style: null, + className: null, + orientation: 'horizontal', + start: null, + end: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, MegaMenuBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, MegaMenuBase.defaultProps) }; diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js index e87923b3fa..82f2a29333 100644 --- a/components/lib/mention/Mention.js +++ b/components/lib/mention/Mention.js @@ -7,11 +7,11 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { MentionDefaultProps } from './MentionBase'; +import { MentionBase } from './MentionBase'; export const Mention = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, MentionDefaultProps); + const props = MentionBase.getProps(inProps); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); const [focusedState, setFocusedState] = React.useState(false); @@ -423,7 +423,7 @@ export const Mention = React.memo( props.className ); const inputClassName = classNames('p-mention-input', props.inputClassName); - const inputProps = ObjectUtils.findDiffKeys(props, MentionDefaultProps); + const inputProps = MentionBase.getOtherProps(props); const panel = createPanel(); return ( diff --git a/components/lib/mention/MentionBase.js b/components/lib/mention/MentionBase.js index 0648c24da0..6c17f8ba57 100644 --- a/components/lib/mention/MentionBase.js +++ b/components/lib/mention/MentionBase.js @@ -1,30 +1,37 @@ -export const MentionDefaultProps = { - __TYPE: 'Mention', - autoHighlight: true, - className: null, - delay: 0, - field: null, - footerTemplate: null, - headerTemplate: null, - id: null, - inputClassName: null, - inputId: null, - inputRef: null, - inputStyle: null, - itemTemplate: null, - panelClassName: null, - panelStyle: null, - scrollHeight: '200px', - style: null, - suggestions: null, - transitionOptions: null, - trigger: '@', - onBlur: null, - onChange: null, - onFocus: null, - onHide: null, - onInput: null, - onSearch: null, - onSelect: null, - onShow: null +import { ObjectUtils } from '../utils/Utils'; + +export const MentionBase = { + defaultProps: { + __TYPE: 'Mention', + autoHighlight: true, + className: null, + delay: 0, + field: null, + footerTemplate: null, + headerTemplate: null, + id: null, + inputClassName: null, + inputId: null, + inputRef: null, + inputStyle: null, + itemTemplate: null, + panelClassName: null, + panelStyle: null, + scrollHeight: '200px', + style: null, + suggestions: null, + transitionOptions: null, + trigger: '@', + onBlur: null, + onChange: null, + onFocus: null, + onHide: null, + onInput: null, + onSearch: null, + onSelect: null, + onShow: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, MentionBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, MentionBase.defaultProps) }; diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index afbbe85da3..d0e9302655 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -5,11 +5,11 @@ import { useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { MenuDefaultProps } from './MenuBase'; +import { MenuBase } from './MenuBase'; export const Menu = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, MenuDefaultProps); + const props = MenuBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(!props.popup); const menuRef = React.useRef(null); @@ -229,7 +229,7 @@ export const Menu = React.memo( const createElement = () => { if (props.model) { - const otherProps = ObjectUtils.findDiffKeys(props, MenuDefaultProps); + const otherProps = MenuBase.getOtherProps(props); const className = classNames( 'p-menu p-component', { diff --git a/components/lib/menu/MenuBase.js b/components/lib/menu/MenuBase.js index c777cc9280..22fc30ead0 100644 --- a/components/lib/menu/MenuBase.js +++ b/components/lib/menu/MenuBase.js @@ -1,14 +1,21 @@ -export const MenuDefaultProps = { - __TYPE: 'Menu', - id: null, - model: null, - popup: false, - style: null, - className: null, - autoZIndex: true, - baseZIndex: 0, - appendTo: null, - transitionOptions: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const MenuBase = { + defaultProps: { + __TYPE: 'Menu', + id: null, + model: null, + popup: false, + style: null, + className: null, + autoZIndex: true, + baseZIndex: 0, + appendTo: null, + transitionOptions: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, MenuBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, MenuBase.defaultProps) }; diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js index 3b65098f63..19b421e490 100644 --- a/components/lib/menubar/Menubar.js +++ b/components/lib/menubar/Menubar.js @@ -2,12 +2,12 @@ import * as React from 'react'; import PrimeReact from '../api/Api'; import { useEventListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { classNames, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { MenubarDefaultProps } from './MenubarBase'; +import { MenubarBase } from './MenubarBase'; import { MenubarSub } from './MenubarSub'; export const Menubar = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, MenubarDefaultProps); + const props = MenubarBase.getProps(inProps); const [mobileActiveState, setMobileActiveState] = React.useState(false); const elementRef = React.useRef(null); @@ -95,7 +95,7 @@ export const Menubar = React.memo( return button; }; - const otherProps = ObjectUtils.findDiffKeys(props, MenubarDefaultProps); + const otherProps = MenubarBase.getOtherProps(props); const className = classNames( 'p-menubar p-component', { diff --git a/components/lib/menubar/MenubarBase.js b/components/lib/menubar/MenubarBase.js index dccf91740f..4518babbbd 100644 --- a/components/lib/menubar/MenubarBase.js +++ b/components/lib/menubar/MenubarBase.js @@ -1,9 +1,16 @@ -export const MenubarDefaultProps = { - __TYPE: 'Menubar', - id: null, - model: null, - style: null, - className: null, - start: null, - end: null +import { ObjectUtils } from '../utils/Utils'; + +export const MenubarBase = { + defaultProps: { + __TYPE: 'Menubar', + id: null, + model: null, + style: null, + className: null, + start: null, + end: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, MenubarBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, MenubarBase.defaultProps) }; diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js index baa97fc142..464528d7ea 100644 --- a/components/lib/message/Message.js +++ b/components/lib/message/Message.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { MessageDefaultProps } from './MessageBase'; +import { MessageBase } from './MessageBase'; export const Message = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, MessageDefaultProps); + const props = MessageBase.getProps(inProps); const elementRef = React.useRef(null); @@ -40,7 +40,7 @@ export const Message = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, MessageDefaultProps); + const otherProps = MessageBase.getOtherProps(props); const className = classNames( 'p-inline-message p-component', { diff --git a/components/lib/message/MessageBase.js b/components/lib/message/MessageBase.js index e06af8bbe1..2608ef938b 100644 --- a/components/lib/message/MessageBase.js +++ b/components/lib/message/MessageBase.js @@ -1,10 +1,17 @@ -export const MessageDefaultProps = { - __TYPE: 'Message', - id: null, - className: null, - style: null, - text: null, - icon: null, - severity: 'info', - content: null +import { ObjectUtils } from '../utils/Utils'; + +export const MessageBase = { + defaultProps: { + __TYPE: 'Message', + id: null, + className: null, + style: null, + text: null, + icon: null, + severity: 'info', + content: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, MessageBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, MessageBase.defaultProps) }; diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js index 80ab7c1ca7..bdaf9b7e99 100644 --- a/components/lib/messages/Messages.js +++ b/components/lib/messages/Messages.js @@ -1,15 +1,14 @@ import * as React from 'react'; import { TransitionGroup } from 'react-transition-group'; import { CSSTransition } from '../csstransition/CSSTransition'; -import { ObjectUtils } from '../utils/Utils'; -import { MessagesDefaultProps } from './MessagesBase'; +import { MessagesBase } from './MessagesBase'; import { UIMessage } from './UIMessage'; let messageIdx = 0; export const Messages = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, MessagesDefaultProps); + const props = MessagesBase.getProps(inProps); const [messagesState, setMessagesState] = React.useState([]); const elementRef = React.useRef(null); @@ -81,7 +80,7 @@ export const Messages = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, MessagesDefaultProps); + const otherProps = MessagesBase.getOtherProps(props); return (
diff --git a/components/lib/messages/MessagesBase.js b/components/lib/messages/MessagesBase.js index f150a47e95..ef3c9fa54f 100644 --- a/components/lib/messages/MessagesBase.js +++ b/components/lib/messages/MessagesBase.js @@ -1,9 +1,16 @@ -export const MessagesDefaultProps = { - __TYPE: 'Messages', - id: null, - className: null, - style: null, - transitionOptions: null, - onRemove: null, - onClick: null +import { ObjectUtils } from '../utils/Utils'; + +export const MessagesBase = { + defaultProps: { + __TYPE: 'Messages', + id: null, + className: null, + style: null, + transitionOptions: null, + onRemove: null, + onClick: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, MessagesBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, MessagesBase.defaultProps) }; diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index fd3bb1e898..d2ffb3bec5 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -4,12 +4,12 @@ import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/ import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { MultiSelectDefaultProps } from './MultiSelectBase'; +import { MultiSelectBase } from './MultiSelectBase'; import { MultiSelectPanel } from './MultiSelectPanel'; export const MultiSelect = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, MultiSelectDefaultProps); + const props = MultiSelectBase.getProps(inProps); const [filterState, setFilterState] = React.useState(''); const [focusedState, setFocusedState] = React.useState(false); @@ -585,7 +585,7 @@ export const MultiSelect = React.memo( const visibleOptions = getVisibleOptions(); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, MultiSelectDefaultProps); + const otherProps = MultiSelectBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-multiselect p-component p-inputwrapper', diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js index 9f865bf3b7..e9b1804b85 100644 --- a/components/lib/multiselect/MultiSelectBase.js +++ b/components/lib/multiselect/MultiSelectBase.js @@ -1,64 +1,71 @@ -export const MultiSelectDefaultProps = { - __TYPE: 'MultiSelect', - appendTo: null, - ariaLabelledBy: null, - className: null, - dataKey: null, - disabled: false, - display: 'comma', - dropdownIcon: 'pi pi-chevron-down', - emptyFilterMessage: null, - filter: false, - filterBy: null, - filterLocale: undefined, - filterMatchMode: 'contains', - filterPlaceholder: null, - filterTemplate: null, - fixedPlaceholder: false, - flex: false, - id: null, - inline: false, - inputId: null, - inputRef: null, - itemClassName: null, - itemTemplate: null, - maxSelectedLabels: null, - name: null, - onBlur: null, - onChange: null, - onFilter: null, - onFocus: null, - onHide: null, - onSelectAll: null, - onShow: null, - optionDisabled: null, - optionGroupChildren: null, - optionGroupLabel: null, - optionGroupTemplate: null, - optionLabel: null, - optionValue: null, - options: null, - overlayVisible: false, - panelClassName: null, - panelFooterTemplate: null, - panelHeaderTemplate: null, - panelStyle: null, - placeholder: null, - removeIcon: 'pi pi-times-circle', - resetFilterOnHide: false, - scrollHeight: '200px', - selectAll: false, - selectedItemTemplate: null, - selectedItemsLabel: '{0} items selected', - selectionLimit: null, - showClear: false, - showSelectAll: true, - style: null, - tabIndex: 0, - tooltip: null, - tooltipOptions: null, - transitionOptions: null, - useOptionAsValue: false, - value: null, - virtualScrollerOptions: null +import { ObjectUtils } from '../utils/Utils'; + +export const MultiSelectBase = { + defaultProps: { + __TYPE: 'MultiSelect', + appendTo: null, + ariaLabelledBy: null, + className: null, + dataKey: null, + disabled: false, + display: 'comma', + dropdownIcon: 'pi pi-chevron-down', + emptyFilterMessage: null, + filter: false, + filterBy: null, + filterLocale: undefined, + filterMatchMode: 'contains', + filterPlaceholder: null, + filterTemplate: null, + fixedPlaceholder: false, + flex: false, + id: null, + inline: false, + inputId: null, + inputRef: null, + itemClassName: null, + itemTemplate: null, + maxSelectedLabels: null, + name: null, + onBlur: null, + onChange: null, + onFilter: null, + onFocus: null, + onHide: null, + onSelectAll: null, + onShow: null, + optionDisabled: null, + optionGroupChildren: null, + optionGroupLabel: null, + optionGroupTemplate: null, + optionLabel: null, + optionValue: null, + options: null, + overlayVisible: false, + panelClassName: null, + panelFooterTemplate: null, + panelHeaderTemplate: null, + panelStyle: null, + placeholder: null, + removeIcon: 'pi pi-times-circle', + resetFilterOnHide: false, + scrollHeight: '200px', + selectAll: false, + selectedItemTemplate: null, + selectedItemsLabel: '{0} items selected', + selectionLimit: null, + showClear: false, + showSelectAll: true, + style: null, + tabIndex: 0, + tooltip: null, + tooltipOptions: null, + transitionOptions: null, + useOptionAsValue: false, + value: null, + virtualScrollerOptions: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, MultiSelectBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, MultiSelectBase.defaultProps) }; diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js index b83d528776..8c91ef73e4 100644 --- a/components/lib/multistatecheckbox/MultiStateCheckbox.js +++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js @@ -3,11 +3,11 @@ import { ariaLabel } from '../api/Api'; import { useMountEffect } from '../hooks/Hooks'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { MultiStateCheckboxDefaultProps } from './MultiStateCheckboxBase'; +import { MultiStateCheckboxBase } from './MultiStateCheckboxBase'; export const MultiStateCheckbox = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, MultiStateCheckboxDefaultProps); + const props = MultiStateCheckboxBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); @@ -121,7 +121,7 @@ export const MultiStateCheckbox = React.memo( const { option: selectedOption, index: selectedOptionIndex } = getSelectedOptionMap(); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, MultiStateCheckboxDefaultProps); + const otherProps = MultiStateCheckboxBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames('p-multistatecheckbox p-checkbox p-component', props.className, { 'p-checkbox-disabled': props.disabled }); const boxClassName = classNames( diff --git a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js index ced95c25ab..c4ca5a8e42 100644 --- a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js +++ b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js @@ -1,20 +1,27 @@ -export const MultiStateCheckboxDefaultProps = { - __TYPE: 'MultiStateCheckbox', - id: null, - value: null, - options: null, - optionValue: null, - optionLabel: null, - optionIcon: null, - iconTemplate: null, - dataKey: null, - style: null, - className: null, - disabled: false, - readOnly: false, - empty: true, - tabIndex: '0', - tooltip: null, - tooltipOptions: null, - onChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const MultiStateCheckboxBase = { + defaultProps: { + __TYPE: 'MultiStateCheckbox', + id: null, + value: null, + options: null, + optionValue: null, + optionLabel: null, + optionIcon: null, + iconTemplate: null, + dataKey: null, + style: null, + className: null, + disabled: false, + readOnly: false, + empty: true, + tabIndex: '0', + tooltip: null, + tooltipOptions: null, + onChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, MultiStateCheckboxBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, MultiStateCheckboxBase.defaultProps) }; diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js index 63fd506652..f8dcc600d1 100644 --- a/components/lib/orderlist/OrderList.js +++ b/components/lib/orderlist/OrderList.js @@ -2,13 +2,13 @@ import * as React from 'react'; import { FilterService } from '../api/Api'; import { useUpdateEffect } from '../hooks/Hooks'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { OrderListDefaultProps } from './OrderListBase'; +import { OrderListBase } from './OrderListBase'; import { OrderListControls } from './OrderListControls'; import { OrderListSubList } from './OrderListSubList'; export const OrderList = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, OrderListDefaultProps); + const props = OrderListBase.getProps(inProps); const [selectionState, setSelectionState] = React.useState([]); const [filterValueState, setFilterValueState] = React.useState(''); @@ -166,7 +166,7 @@ export const OrderList = React.memo( } }); - const otherProps = ObjectUtils.findDiffKeys(props, OrderListDefaultProps); + const otherProps = OrderListBase.getOtherProps(props); const className = classNames('p-orderlist p-component', props.className); const visibleList = getVisibleList(); diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js index 06fb756569..799f4be233 100644 --- a/components/lib/orderlist/OrderListBase.js +++ b/components/lib/orderlist/OrderListBase.js @@ -1,21 +1,28 @@ -export const OrderListDefaultProps = { - __TYPE: 'OrderList', - id: null, - value: null, - header: null, - style: null, - className: null, - listStyle: null, - dragdrop: false, - tabIndex: 0, - dataKey: null, - onChange: null, - itemTemplate: null, - filter: false, - filterBy: null, - filterMatchMode: 'contains', - filterLocale: undefined, - filterPlaceholder: null, - filterTemplate: null, - onFilter: null +import { ObjectUtils } from '../utils/Utils'; + +export const OrderListBase = { + defaultProps: { + __TYPE: 'OrderList', + id: null, + value: null, + header: null, + style: null, + className: null, + listStyle: null, + dragdrop: false, + tabIndex: 0, + dataKey: null, + onChange: null, + itemTemplate: null, + filter: false, + filterBy: null, + filterMatchMode: 'contains', + filterLocale: undefined, + filterPlaceholder: null, + filterTemplate: null, + onFilter: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, OrderListBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, OrderListBase.defaultProps) }; diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js index aa49291219..11e08e991a 100644 --- a/components/lib/organizationchart/OrganizationChart.js +++ b/components/lib/organizationchart/OrganizationChart.js @@ -1,11 +1,11 @@ import * as React from 'react'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { OrganizationChartDefaultProps } from './OrganizationChartBase'; +import { classNames, DomHandler } from '../utils/Utils'; +import { OrganizationChartBase } from './OrganizationChartBase'; import { OrganizationChartNode } from './OrganizationChartNode'; export const OrganizationChart = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, OrganizationChartDefaultProps); + const props = OrganizationChartBase.getProps(inProps); const elementRef = React.useRef(null); const root = props.value && props.value.length ? props.value[0] : null; @@ -67,7 +67,7 @@ export const OrganizationChart = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, OrganizationChartDefaultProps); + const otherProps = OrganizationChartBase.getOtherProps(props); const className = classNames('p-organizationchart p-component', props.className); return ( diff --git a/components/lib/organizationchart/OrganizationChartBase.js b/components/lib/organizationchart/OrganizationChartBase.js index c540b77bc9..901ad0be61 100644 --- a/components/lib/organizationchart/OrganizationChartBase.js +++ b/components/lib/organizationchart/OrganizationChartBase.js @@ -1,13 +1,20 @@ -export const OrganizationChartDefaultProps = { - __TYPE: 'OrganizationChart', - id: null, - value: null, - style: null, - className: null, - selectionMode: null, - selection: null, - nodeTemplate: null, - onSelectionChange: null, - onNodeSelect: null, - onNodeUnselect: null +import { ObjectUtils } from '../utils/Utils'; + +export const OrganizationChartBase = { + defaultProps: { + __TYPE: 'OrganizationChart', + id: null, + value: null, + style: null, + className: null, + selectionMode: null, + selection: null, + nodeTemplate: null, + onSelectionChange: null, + onNodeSelect: null, + onNodeUnselect: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, OrganizationChartBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, OrganizationChartBase.defaultProps) }; diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js index 8725b690eb..ec300f31e3 100644 --- a/components/lib/overlaypanel/OverlayPanel.js +++ b/components/lib/overlaypanel/OverlayPanel.js @@ -5,11 +5,11 @@ import { useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/H import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; -import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; -import { OverlayPanelDefaultProps } from './OverlayPanelBase'; +import { classNames, DomHandler, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; +import { OverlayPanelBase } from './OverlayPanelBase'; export const OverlayPanel = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, OverlayPanelDefaultProps); + const props = OverlayPanelBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(false); const attributeSelector = React.useRef(''); @@ -203,7 +203,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => { }; const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, OverlayPanelDefaultProps); + const otherProps = OverlayPanelBase.getOtherProps(props); const className = classNames('p-overlaypanel p-component', props.className, { 'p-input-filled': PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': PrimeReact.ripple === false diff --git a/components/lib/overlaypanel/OverlayPanelBase.js b/components/lib/overlaypanel/OverlayPanelBase.js index ae43d09793..fa6c2ba03c 100644 --- a/components/lib/overlaypanel/OverlayPanelBase.js +++ b/components/lib/overlaypanel/OverlayPanelBase.js @@ -1,14 +1,21 @@ -export const OverlayPanelDefaultProps = { - __TYPE: 'OverlayPanel', - id: null, - dismissable: true, - showCloseIcon: false, - style: null, - className: null, - appendTo: null, - breakpoints: null, - ariaCloseLabel: null, - transitionOptions: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const OverlayPanelBase = { + defaultProps: { + __TYPE: 'OverlayPanel', + id: null, + dismissable: true, + showCloseIcon: false, + style: null, + className: null, + appendTo: null, + breakpoints: null, + ariaCloseLabel: null, + transitionOptions: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, OverlayPanelBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, OverlayPanelBase.defaultProps) }; diff --git a/components/lib/paginator/CurrentPageReport.js b/components/lib/paginator/CurrentPageReport.js index 7b98940594..e4f1add2e6 100644 --- a/components/lib/paginator/CurrentPageReport.js +++ b/components/lib/paginator/CurrentPageReport.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { ObjectUtils } from '../utils/Utils'; -import { CurrentPageReportDefaultProps } from './PaginatorBase'; +import { CurrentPageReportBase } from './PaginatorBase'; export const CurrentPageReport = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, CurrentPageReportDefaultProps); + const props = CurrentPageReportBase.getProps(inProps); const report = { currentPage: props.page + 1, diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js index a4997b5cdc..5000b21524 100644 --- a/components/lib/paginator/FirstPageLink.js +++ b/components/lib/paginator/FirstPageLink.js @@ -2,10 +2,10 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Ripple } from '../ripple/Ripple'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { FirstPageLinkDefaultProps } from './PaginatorBase'; +import { FirstPageLinkBase } from './PaginatorBase'; export const FirstPageLink = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, FirstPageLinkDefaultProps); + const props = FirstPageLinkBase.getProps(inProps); const className = classNames('p-paginator-first p-paginator-element p-link', { 'p-disabled': props.disabled }); const iconClassName = 'p-paginator-icon pi pi-angle-double-left'; diff --git a/components/lib/paginator/JumpToPageInput.js b/components/lib/paginator/JumpToPageInput.js index 729b858cf4..bc493d09bb 100644 --- a/components/lib/paginator/JumpToPageInput.js +++ b/components/lib/paginator/JumpToPageInput.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { InputNumber } from '../inputnumber/InputNumber'; import { ObjectUtils } from '../utils/Utils'; -import { JumpToPageInputDefaultProps } from './PaginatorBase'; +import { JumpToPageInputBase } from './PaginatorBase'; export const JumpToPageInput = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, JumpToPageInputDefaultProps); + const props = JumpToPageInputBase.getProps(inProps); const onChange = (event) => { if (props.onChange) { diff --git a/components/lib/paginator/LastPageLink.js b/components/lib/paginator/LastPageLink.js index e19fec8501..90e510f1e9 100644 --- a/components/lib/paginator/LastPageLink.js +++ b/components/lib/paginator/LastPageLink.js @@ -2,10 +2,10 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Ripple } from '../ripple/Ripple'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { LastPageLinkDefaultProps } from './PaginatorBase'; +import { LastPageLinkBase } from './PaginatorBase'; export const LastPageLink = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, LastPageLinkDefaultProps); + const props = LastPageLinkBase.getProps(inProps); const className = classNames('p-paginator-last p-paginator-element p-link', { 'p-disabled': props.disabled }); const iconClassName = 'p-paginator-icon pi pi-angle-double-right'; diff --git a/components/lib/paginator/NextPageLink.js b/components/lib/paginator/NextPageLink.js index 4c3eddbeb4..b84e2735bd 100644 --- a/components/lib/paginator/NextPageLink.js +++ b/components/lib/paginator/NextPageLink.js @@ -2,10 +2,10 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Ripple } from '../ripple/Ripple'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { NextPageLinkDefaultProps } from './PaginatorBase'; +import { NextPageLinkBase } from './PaginatorBase'; export const NextPageLink = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, NextPageLinkDefaultProps); + const props = NextPageLinkBase.getProps(inProps); const className = classNames('p-paginator-next p-paginator-element p-link', { 'p-disabled': props.disabled }); const iconClassName = 'p-paginator-icon pi pi-angle-right'; diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js index eaf206459b..ce91ee0ec1 100644 --- a/components/lib/paginator/PageLinks.js +++ b/components/lib/paginator/PageLinks.js @@ -2,10 +2,10 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Ripple } from '../ripple/Ripple'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { PageLinksDefaultProps } from './PaginatorBase'; +import { PageLinksBase } from './PaginatorBase'; export const PageLinks = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, PageLinksDefaultProps); + const props = PageLinksBase.getProps(inProps); const onPageLinkClick = (event, pageLink) => { if (props.onClick) { diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js index d7ac3d678c..1a4d3f8def 100644 --- a/components/lib/paginator/Paginator.js +++ b/components/lib/paginator/Paginator.js @@ -7,13 +7,13 @@ import { JumpToPageInput } from './JumpToPageInput'; import { LastPageLink } from './LastPageLink'; import { NextPageLink } from './NextPageLink'; import { PageLinks } from './PageLinks'; -import { PaginatorDefaultProps } from './PaginatorBase'; +import { PaginatorBase } from './PaginatorBase'; import { PrevPageLink } from './PrevPageLink'; import { RowsPerPageDropdown } from './RowsPerPageDropdown'; export const Paginator = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, PaginatorDefaultProps); + const props = PaginatorBase.getProps(inProps); const elementRef = React.useRef(null); const rppChanged = React.useRef(false); @@ -204,7 +204,7 @@ export const Paginator = React.memo( if (!props.alwaysShow && pageCount === 1) { return null; } else { - const otherProps = ObjectUtils.findDiffKeys(props, PaginatorDefaultProps); + const otherProps = PaginatorBase.getOtherProps(props); const className = classNames('p-paginator p-component', props.className); const leftContent = ObjectUtils.getJSXElement(props.leftContent, props); const rightContent = ObjectUtils.getJSXElement(props.rightContent, props); diff --git a/components/lib/paginator/PaginatorBase.js b/components/lib/paginator/PaginatorBase.js index 05bde12bc6..396c86794b 100644 --- a/components/lib/paginator/PaginatorBase.js +++ b/components/lib/paginator/PaginatorBase.js @@ -1,89 +1,136 @@ -export const PaginatorDefaultProps = { - __TYPE: 'Paginator', - totalRecords: 0, - rows: 0, - first: 0, - pageLinkSize: 5, - rowsPerPageOptions: null, - alwaysShow: true, - style: null, - className: null, - template: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', - onPageChange: null, - leftContent: null, - rightContent: null, - dropdownAppendTo: null, - currentPageReportTemplate: '({currentPage} of {totalPages})' +import { ObjectUtils } from '../utils/Utils'; + +export const PaginatorBase = { + defaultProps: { + __TYPE: 'Paginator', + totalRecords: 0, + rows: 0, + first: 0, + pageLinkSize: 5, + rowsPerPageOptions: null, + alwaysShow: true, + style: null, + className: null, + template: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', + onPageChange: null, + leftContent: null, + rightContent: null, + dropdownAppendTo: null, + currentPageReportTemplate: '({currentPage} of {totalPages})', + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, PaginatorBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, PaginatorBase.defaultProps) }; -export const CurrentPageReportDefaultProps = { - __TYPE: 'CurrentPageReport', - pageCount: null, - page: null, - first: null, - rows: null, - totalRecords: null, - reportTemplate: '({currentPage} of {totalPages})', - template: null +export const CurrentPageReportBase = { + defaultProps: { + __TYPE: 'CurrentPageReport', + pageCount: null, + page: null, + first: null, + rows: null, + totalRecords: null, + reportTemplate: '({currentPage} of {totalPages})', + template: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, CurrentPageReportBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, CurrentPageReportBase.defaultProps) }; -export const FirstPageLinkDefaultProps = { - __TYPE: 'FirstPageLink', - disabled: false, - onClick: null, - template: null +export const FirstPageLinkBase = { + defaultProps: { + __TYPE: 'FirstPageLink', + disabled: false, + onClick: null, + template: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, FirstPageLinkBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, FirstPageLinkBase.defaultProps) }; -export const JumpToPageInputDefaultProps = { - __TYPE: 'JumbToPageInput', - page: null, - rows: null, - pageCount: null, - disabled: false, - template: null, - onChange: null +export const JumpToPageInputBase = { + defaultProps: { + __TYPE: 'JumbToPageInput', + page: null, + rows: null, + pageCount: null, + disabled: false, + template: null, + onChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, JumpToPageInputBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, JumpToPageInputBase.defaultProps) }; -export const LastPageLinkDefaultProps = { - __TYPE: 'LastPageLink', - disabled: false, - onClick: null, - template: null +export const LastPageLinkBase = { + defaultProps: { + __TYPE: 'LastPageLink', + disabled: false, + onClick: null, + template: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, LastPageLinkBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, LastPageLinkBase.defaultProps) }; -export const NextPageLinkDefaultProps = { - __TYPE: 'NextPageLink', - disabled: false, - onClick: null, - template: null +export const NextPageLinkBase = { + defaultProps: { + __TYPE: 'NextPageLink', + disabled: false, + onClick: null, + template: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, NextPageLinkBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, NextPageLinkBase.defaultProps) }; -export const PageLinksDefaultProps = { - __TYPE: 'PageLinks', - value: null, - page: null, - rows: null, - pageCount: null, - links: null, - template: null +export const PageLinksBase = { + defaultProps: { + __TYPE: 'PageLinks', + value: null, + page: null, + rows: null, + pageCount: null, + links: null, + template: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, PageLinksBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, PageLinksBase.defaultProps) }; -export const PrevPageLinkDefaultProps = { - __TYPE: 'PrevPageLink', - disabled: false, - onClick: null, - template: null +export const PrevPageLinkBase = { + defaultProps: { + __TYPE: 'PrevPageLink', + disabled: false, + onClick: null, + template: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, PrevPageLinkBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, PrevPageLinkBase.defaultProps) }; -export const RowsPerPageDropdownDefaultProps = { - __TYPE: 'RowsPerPageDropdown', - options: null, - value: null, - page: null, - pageCount: null, - totalRecords: 0, - appendTo: null, - onChange: null, - template: null, - disabled: false +export const RowsPerPageDropdownBase = { + defaultProps: { + __TYPE: 'RowsPerPageDropdown', + options: null, + value: null, + page: null, + pageCount: null, + totalRecords: 0, + appendTo: null, + onChange: null, + template: null, + disabled: false, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, RowsPerPageDropdownBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, RowsPerPageDropdownBase.defaultProps) }; diff --git a/components/lib/paginator/PrevPageLink.js b/components/lib/paginator/PrevPageLink.js index 8dbbd036f8..4918ad6f05 100644 --- a/components/lib/paginator/PrevPageLink.js +++ b/components/lib/paginator/PrevPageLink.js @@ -2,10 +2,10 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Ripple } from '../ripple/Ripple'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { PrevPageLinkDefaultProps } from './PaginatorBase'; +import { PrevPageLinkBase } from './PaginatorBase'; export const PrevPageLink = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, PrevPageLinkDefaultProps); + const props = PrevPageLinkBase.getProps(inProps); const className = classNames('p-paginator-prev p-paginator-element p-link', { 'p-disabled': props.disabled }); const iconClassName = 'p-paginator-icon pi pi-angle-left'; diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js index 0dc4ee0fdf..6c6c4ddd5d 100644 --- a/components/lib/paginator/RowsPerPageDropdown.js +++ b/components/lib/paginator/RowsPerPageDropdown.js @@ -2,10 +2,10 @@ import * as React from 'react'; import { localeOption } from '../api/Api'; import { Dropdown } from '../dropdown/Dropdown'; import { ObjectUtils } from '../utils/Utils'; -import { RowsPerPageDropdownDefaultProps } from './PaginatorBase'; +import { RowsPerPageDropdownBase } from './PaginatorBase'; export const RowsPerPageDropdown = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, RowsPerPageDropdownDefaultProps); + const props = RowsPerPageDropdownBase.getProps(inProps); 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 b5903fa00a..005bbdd17e 100644 --- a/components/lib/panel/Panel.js +++ b/components/lib/panel/Panel.js @@ -3,10 +3,10 @@ import { CSSTransition } from '../csstransition/CSSTransition'; import { useMountEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils'; -import { PanelDefaultProps } from './PanelBase'; +import { PanelBase } from './PanelBase'; export const Panel = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, PanelDefaultProps); + const props = PanelBase.getProps(inProps); const [idState, setIdState] = React.useState(props.id); const [collapsedState, setCollapsedState] = React.useState(props.collapsed); @@ -135,7 +135,7 @@ export const Panel = React.forwardRef((inProps, ref) => { ); }; - const otherProps = ObjectUtils.findDiffKeys(props, PanelDefaultProps); + const otherProps = PanelBase.getOtherProps(props); const className = classNames( 'p-panel p-component', { diff --git a/components/lib/panel/PanelBase.js b/components/lib/panel/PanelBase.js index eb0155cb88..ca08fe9a57 100644 --- a/components/lib/panel/PanelBase.js +++ b/components/lib/panel/PanelBase.js @@ -1,17 +1,24 @@ -export const PanelDefaultProps = { - __TYPE: 'Panel', - id: null, - header: null, - headerTemplate: null, - toggleable: null, - style: null, - className: null, - collapsed: null, - expandIcon: 'pi pi-plus', - collapseIcon: 'pi pi-minus', - icons: null, - transitionOptions: null, - onExpand: null, - onCollapse: null, - onToggle: null +import { ObjectUtils } from '../utils/Utils'; + +export const PanelBase = { + defaultProps: { + __TYPE: 'Panel', + id: null, + header: null, + headerTemplate: null, + toggleable: null, + style: null, + className: null, + collapsed: null, + expandIcon: 'pi pi-plus', + collapseIcon: 'pi pi-minus', + icons: null, + transitionOptions: null, + onExpand: null, + onCollapse: null, + onToggle: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, PanelBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, PanelBase.defaultProps) }; diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index 1369f5a7a0..228aea426a 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -2,12 +2,12 @@ import * as React from 'react'; import { CSSTransition } from '../csstransition/CSSTransition'; import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils'; -import { PanelMenuDefaultProps } from './PanelMenuBase'; +import { PanelMenuBase } from './PanelMenuBase'; import { PanelMenuSub } from './PanelMenuSub'; export const PanelMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, PanelMenuDefaultProps); + const props = PanelMenuBase.getProps(inProps); const [idState, setIdState] = React.useState(props.id); const [activeItemState, setActiveItemState] = React.useState(null); @@ -157,7 +157,7 @@ export const PanelMenu = React.memo( return props.model ? props.model.map(createPanel) : null; }; - const otherProps = ObjectUtils.findDiffKeys(props, PanelMenuDefaultProps); + const otherProps = PanelMenuBase.getOtherProps(props); const className = classNames('p-panelmenu p-component', props.className); const panels = createPanels(); diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js index 4408f6a01e..4dd243b313 100644 --- a/components/lib/panelmenu/PanelMenuBase.js +++ b/components/lib/panelmenu/PanelMenuBase.js @@ -1,9 +1,16 @@ -export const PanelMenuDefaultProps = { - __TYPE: 'Panel', - id: null, - model: null, - style: null, - className: null, - multiple: false, - transitionOptions: null +import { ObjectUtils } from '../utils/Utils'; + +export const PanelMenuBase = { + defaultProps: { + __TYPE: 'Panel', + id: null, + model: null, + style: null, + className: null, + multiple: false, + transitionOptions: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, PanelMenuBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, PanelMenuBase.defaultProps) }; diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js index d3530b5ab9..63eaeb6ef3 100644 --- a/components/lib/password/Password.js +++ b/components/lib/password/Password.js @@ -6,11 +6,11 @@ import { InputText } from '../inputtext/InputText'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { PasswordDefaultProps } from './PasswordBase'; +import { PasswordBase } from './PasswordBase'; export const Password = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, PasswordDefaultProps); + const props = PasswordBase.getProps(inProps); const promptLabel = props.promptLabel || localeOption('passwordPrompt'); const weakLabel = props.weakLabel || localeOption('weak'); @@ -314,7 +314,7 @@ export const Password = React.memo( props.className ); const inputClassName = classNames('p-password-input', props.inputClassName); - const inputProps = ObjectUtils.findDiffKeys(props, PasswordDefaultProps); + const inputProps = PasswordBase.getOtherProps(props); const icon = createIcon(); const panel = createPanel(); diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js index e751e79d8c..4dd3cbfbfa 100644 --- a/components/lib/password/PasswordBase.js +++ b/components/lib/password/PasswordBase.js @@ -1,31 +1,38 @@ -export const PasswordDefaultProps = { - __TYPE: 'Password', - id: null, - inputId: null, - inputRef: null, - promptLabel: null, - weakLabel: null, - mediumLabel: null, - strongLabel: null, - mediumRegex: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})', - strongRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})', - feedback: true, - toggleMask: false, - appendTo: null, - header: null, - content: null, - footer: null, - icon: null, - tooltip: null, - tooltipOptions: null, - style: null, - className: null, - inputStyle: null, - inputClassName: null, - panelStyle: null, - panelClassName: null, - transitionOptions: null, - onInput: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const PasswordBase = { + defaultProps: { + __TYPE: 'Password', + id: null, + inputId: null, + inputRef: null, + promptLabel: null, + weakLabel: null, + mediumLabel: null, + strongLabel: null, + mediumRegex: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})', + strongRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})', + feedback: true, + toggleMask: false, + appendTo: null, + header: null, + content: null, + footer: null, + icon: null, + tooltip: null, + tooltipOptions: null, + style: null, + className: null, + inputStyle: null, + inputClassName: null, + panelStyle: null, + panelClassName: null, + transitionOptions: null, + onInput: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, PasswordBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, PasswordBase.defaultProps) }; diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js index 46b8243e60..a454920a23 100644 --- a/components/lib/picklist/PickList.js +++ b/components/lib/picklist/PickList.js @@ -2,14 +2,14 @@ import * as React from 'react'; import { FilterService } from '../api/Api'; import { useUpdateEffect } from '../hooks/Hooks'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { PickListDefaultProps } from './PickListBase'; +import { PickListBase } from './PickListBase'; import { PickListControls } from './PickListControls'; import { PickListSubList } from './PickListSubList'; import { PickListTransferControls } from './PickListTransferControls'; export const PickList = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, PickListDefaultProps); + const props = PickListBase.getProps(inProps); const [sourceSelectionState, setSourceSelectionState] = React.useState([]); const [targetSelectionState, setTargetSelectionState] = React.useState([]); @@ -212,7 +212,7 @@ export const PickList = React.memo( } }); - const otherProps = ObjectUtils.findDiffKeys(props, PickListDefaultProps); + const otherProps = PickListBase.getOtherProps(props); const className = classNames('p-picklist p-component', props.className); const sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate; const targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate; diff --git a/components/lib/picklist/PickListBase.js b/components/lib/picklist/PickListBase.js index bc78e1817a..c62389cfab 100644 --- a/components/lib/picklist/PickListBase.js +++ b/components/lib/picklist/PickListBase.js @@ -1,42 +1,49 @@ -export const PickListDefaultProps = { - __TYPE: 'PickList', - id: null, - source: null, - target: null, - sourceHeader: null, - targetHeader: null, - style: null, - className: null, - sourceStyle: null, - targetStyle: null, - sourceSelection: null, - targetSelection: null, - showSourceControls: true, - showTargetControls: true, - metaKeySelection: true, - filterBy: null, - filterMatchMode: 'contains', - filterLocale: undefined, - sourceFilterValue: null, - targetFilterValue: null, - showSourceFilter: true, - showTargetFilter: true, - sourceFilterPlaceholder: null, - targetFilterPlaceholder: null, - sourceFilterTemplate: null, - targetFilterTemplate: null, - tabIndex: 0, - dataKey: null, - itemTemplate: null, - sourceItemTemplate: null, - targetItemTemplate: null, - onChange: null, - onMoveToSource: null, - onMoveAllToSource: null, - onMoveToTarget: null, - onMoveAllToTarget: null, - onSourceSelectionChange: null, - onTargetSelectionChange: null, - onSourceFilterChange: null, - onTargetFilterChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const PickListBase = { + defaultProps: { + __TYPE: 'PickList', + id: null, + source: null, + target: null, + sourceHeader: null, + targetHeader: null, + style: null, + className: null, + sourceStyle: null, + targetStyle: null, + sourceSelection: null, + targetSelection: null, + showSourceControls: true, + showTargetControls: true, + metaKeySelection: true, + filterBy: null, + filterMatchMode: 'contains', + filterLocale: undefined, + sourceFilterValue: null, + targetFilterValue: null, + showSourceFilter: true, + showTargetFilter: true, + sourceFilterPlaceholder: null, + targetFilterPlaceholder: null, + sourceFilterTemplate: null, + targetFilterTemplate: null, + tabIndex: 0, + dataKey: null, + itemTemplate: null, + sourceItemTemplate: null, + targetItemTemplate: null, + onChange: null, + onMoveToSource: null, + onMoveAllToSource: null, + onMoveToTarget: null, + onMoveAllToTarget: null, + onSourceSelectionChange: null, + onTargetSelectionChange: null, + onSourceFilterChange: null, + onTargetFilterChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, PickListBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, PickListBase.defaultProps) }; diff --git a/components/lib/portal/Portal.js b/components/lib/portal/Portal.js index edda42b5ca..1d9912e1d9 100644 --- a/components/lib/portal/Portal.js +++ b/components/lib/portal/Portal.js @@ -2,11 +2,11 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; import PrimeReact from '../api/Api'; import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { DomHandler, ObjectUtils } from '../utils/Utils'; -import { PortalDefaultProps } from './PortalBase'; +import { DomHandler } from '../utils/Utils'; +import { PortalBase } from './PortalBase'; export const Portal = React.memo((inProps) => { - const props = ObjectUtils.getProps(inProps, PortalDefaultProps); + const props = PortalBase.getProps(inProps); const [mountedState, setMountedState] = React.useState(props.visible && DomHandler.hasDOM()); diff --git a/components/lib/portal/PortalBase.js b/components/lib/portal/PortalBase.js index add23a9d5e..340a4fd10c 100644 --- a/components/lib/portal/PortalBase.js +++ b/components/lib/portal/PortalBase.js @@ -1,8 +1,15 @@ -export const PortalDefaultProps = { - __TYPE: 'Portal', - element: null, - appendTo: null, - visible: false, - onMounted: null, - onUnmounted: null +import { ObjectUtils } from '../utils/Utils'; + +export const PortalBase = { + defaultProps: { + __TYPE: 'Portal', + element: null, + appendTo: null, + visible: false, + onMounted: null, + onUnmounted: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, PortalBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, PortalBase.defaultProps) }; diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js index 936b739a76..9054a9a61b 100644 --- a/components/lib/progressbar/ProgressBar.js +++ b/components/lib/progressbar/ProgressBar.js @@ -1,10 +1,10 @@ import * as React from 'react'; -import { classNames, ObjectUtils } from '../utils/Utils'; -import { ProgressBarDefaultProps } from './ProgressBarBase'; +import { classNames } from '../utils/Utils'; +import { ProgressBarBase } from './ProgressBarBase'; export const ProgressBar = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ProgressBarDefaultProps); + const props = ProgressBarBase.getProps(inProps); const elementRef = React.useRef(null); @@ -19,7 +19,7 @@ export const ProgressBar = React.memo( }; const createDeterminate = () => { - const otherProps = ObjectUtils.findDiffKeys(props, ProgressBarDefaultProps); + const otherProps = ProgressBarBase.getOtherProps(props); const className = classNames('p-progressbar p-component p-progressbar-determinate', props.className); const label = createLabel(); @@ -33,7 +33,7 @@ export const ProgressBar = React.memo( }; const createIndeterminate = () => { - const otherProps = ObjectUtils.findDiffKeys(props, ProgressBarDefaultProps); + const otherProps = ProgressBarBase.getOtherProps(props); const className = classNames('p-progressbar p-component p-progressbar-indeterminate', props.className); return ( diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js index 5590d33c68..fcdb655c9f 100644 --- a/components/lib/progressbar/ProgressBarBase.js +++ b/components/lib/progressbar/ProgressBarBase.js @@ -1,12 +1,19 @@ -export const ProgressBarDefaultProps = { - __TYPE: 'ProgressBar', - id: null, - value: null, - showValue: true, - unit: '%', - style: null, - className: null, - mode: 'determinate', - displayValueTemplate: null, - color: null +import { ObjectUtils } from '../utils/Utils'; + +export const ProgressBarBase = { + defaultProps: { + __TYPE: 'ProgressBar', + id: null, + value: null, + showValue: true, + unit: '%', + style: null, + className: null, + mode: 'determinate', + displayValueTemplate: null, + color: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ProgressBarBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ProgressBarBase.defaultProps) }; diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js index 7948566e91..bb55259d9b 100644 --- a/components/lib/progressspinner/ProgressSpinner.js +++ b/components/lib/progressspinner/ProgressSpinner.js @@ -1,13 +1,13 @@ import * as React from 'react'; -import { classNames, ObjectUtils } from '../utils/Utils'; -import { ProgressSpinnerDefaultProps } from './ProgressSpinnerBase'; +import { classNames } from '../utils/Utils'; +import { ProgressSpinnerBase } from './ProgressSpinnerBase'; export const ProgressSpinner = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ProgressSpinnerDefaultProps); + const props = ProgressSpinnerBase.getProps(inProps); const elementRef = React.useRef(null); - const otherProps = ObjectUtils.findDiffKeys(props, ProgressSpinnerDefaultProps); + const otherProps = ProgressSpinnerBase.getOtherProps(props); const className = classNames('p-progress-spinner', props.className); React.useImperativeHandle(ref, () => ({ diff --git a/components/lib/progressspinner/ProgressSpinnerBase.js b/components/lib/progressspinner/ProgressSpinnerBase.js index 6fa92aa800..386ec92630 100644 --- a/components/lib/progressspinner/ProgressSpinnerBase.js +++ b/components/lib/progressspinner/ProgressSpinnerBase.js @@ -1,9 +1,16 @@ -export const ProgressSpinnerDefaultProps = { - __TYPE: 'ProgressSpinner', - id: null, - style: null, - className: null, - strokeWidth: '2', - fill: 'none', - animationDuration: '2s' +import { ObjectUtils } from '../utils/Utils'; + +export const ProgressSpinnerBase = { + defaultProps: { + __TYPE: 'ProgressSpinner', + id: null, + style: null, + className: null, + strokeWidth: '2', + fill: 'none', + animationDuration: '2s', + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ProgressSpinnerBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ProgressSpinnerBase.defaultProps) }; diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js index 31ee4a466e..80318c3f32 100644 --- a/components/lib/radiobutton/RadioButton.js +++ b/components/lib/radiobutton/RadioButton.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { RadioButtonDefaultProps } from './RadioButtonBase'; +import { RadioButtonBase } from './RadioButtonBase'; export const RadioButton = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, RadioButtonDefaultProps); + const props = RadioButtonBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); @@ -85,7 +85,7 @@ export const RadioButton = React.memo( })); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, RadioButtonDefaultProps); + const otherProps = RadioButtonBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-radiobutton p-component', diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js index 67c3c2e6a7..1cf575eb73 100644 --- a/components/lib/radiobutton/RadioButtonBase.js +++ b/components/lib/radiobutton/RadioButtonBase.js @@ -1,17 +1,24 @@ -export const RadioButtonDefaultProps = { - __TYPE: 'RadioButton', - id: null, - inputRef: null, - inputId: null, - name: null, - value: null, - checked: false, - style: null, - className: null, - disabled: false, - required: false, - tabIndex: null, - tooltip: null, - tooltipOptions: null, - onChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const RadioButtonBase = { + defaultProps: { + __TYPE: 'RadioButton', + id: null, + inputRef: null, + inputId: null, + name: null, + value: null, + checked: false, + style: null, + className: null, + disabled: false, + required: false, + tabIndex: null, + tooltip: null, + tooltipOptions: null, + onChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, RadioButtonBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, RadioButtonBase.defaultProps) }; diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js index 8ee990e7bf..369df71404 100644 --- a/components/lib/rating/Rating.js +++ b/components/lib/rating/Rating.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { RatingDefaultProps } from './RatingBase'; +import { RatingBase } from './RatingBase'; export const Rating = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, RatingDefaultProps); + const props = RatingBase.getProps(inProps); const elementRef = React.useRef(null); const enabled = !props.disabled && !props.readOnly; @@ -94,7 +94,7 @@ export const Rating = React.memo( })); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, RatingDefaultProps); + const otherProps = RatingBase.getOtherProps(props); const className = classNames( 'p-rating', { diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js index 2bb06476e6..77caad4bce 100644 --- a/components/lib/rating/RatingBase.js +++ b/components/lib/rating/RatingBase.js @@ -1,20 +1,27 @@ -export const RatingDefaultProps = { - __TYPE: 'Rating', - id: null, - value: null, - disabled: false, - readOnly: false, - stars: 5, - cancel: true, - style: null, - className: null, - tooltip: null, - tooltipOptions: null, - onChange: null, - onIcon: 'pi pi-star-fill', - offIcon: 'pi pi-star', - cancelIcon: 'pi pi-ban', - cancelIconProps: null, - onIconProps: null, - offIconProps: null +import { ObjectUtils } from '../utils/Utils'; + +export const RatingBase = { + defaultProps: { + __TYPE: 'Rating', + id: null, + value: null, + disabled: false, + readOnly: false, + stars: 5, + cancel: true, + style: null, + className: null, + tooltip: null, + tooltipOptions: null, + onChange: null, + onIcon: 'pi pi-star-fill', + offIcon: 'pi pi-star', + cancelIcon: 'pi pi-ban', + cancelIconProps: null, + onIconProps: null, + offIconProps: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, RatingBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, RatingBase.defaultProps) }; diff --git a/components/lib/ripple/RippleBase.js b/components/lib/ripple/RippleBase.js index 490f17c30d..ff08d76cf2 100644 --- a/components/lib/ripple/RippleBase.js +++ b/components/lib/ripple/RippleBase.js @@ -1,3 +1,10 @@ -export const RippleDefaultProps = { - __TYPE: 'Ripple' +import { ObjectUtils } from '../utils/Utils'; + +export const RippleBase = { + defaultProps: { + __TYPE: 'Ripple', + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, RippleBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, RippleBase.defaultProps) }; diff --git a/components/lib/row/Row.js b/components/lib/row/Row.js index e0475ec1d2..dc8e6f523a 100644 --- a/components/lib/row/Row.js +++ b/components/lib/row/Row.js @@ -1,10 +1,9 @@ import * as React from 'react'; -import { ObjectUtils } from '../utils/Utils'; -import { RowDefaultProps } from './RowBase'; +import { RowBase } from './RowBase'; export const Row = (inProps) => { - const props = ObjectUtils.getProps(inProps, RowDefaultProps); - const otherProps = ObjectUtils.findDiffKeys(props, RowDefaultProps); + const props = RowBase.getProps(inProps); + const otherProps = RowBase.getOtherProps(props); return ( diff --git a/components/lib/row/RowBase.js b/components/lib/row/RowBase.js index c04096e502..210657d2e2 100644 --- a/components/lib/row/RowBase.js +++ b/components/lib/row/RowBase.js @@ -1,5 +1,13 @@ -export const RowDefaultProps = { - __TYPE: 'Row', - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const RowBase = { + defaultProps: { + __TYPE: 'Row', + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, RowBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, RowBase.defaultProps), + getCProp: (row, name) => ObjectUtils.getComponentProp(row, name, RowBase.defaultProps) }; diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js index a4d89909fe..72cba7f273 100644 --- a/components/lib/scrollpanel/ScrollPanel.js +++ b/components/lib/scrollpanel/ScrollPanel.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { useMountEffect, useUnmountEffect } from '../hooks/Hooks'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { ScrollPanelDefaultProps } from './ScrollPanelBase'; +import { classNames, DomHandler } from '../utils/Utils'; +import { ScrollPanelBase } from './ScrollPanelBase'; export const ScrollPanel = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ScrollPanelDefaultProps); + const props = ScrollPanelBase.getProps(inProps); const containerRef = React.useRef(null); const contentRef = React.useRef(null); @@ -160,7 +160,7 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => { getYBar: () => yBarRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, ScrollPanelDefaultProps); + const otherProps = ScrollPanelBase.getOtherProps(props); const className = classNames('p-scrollpanel p-component', props.className); return ( diff --git a/components/lib/scrollpanel/ScrollPanelBase.js b/components/lib/scrollpanel/ScrollPanelBase.js index c9e10d6bbf..f287bece68 100644 --- a/components/lib/scrollpanel/ScrollPanelBase.js +++ b/components/lib/scrollpanel/ScrollPanelBase.js @@ -1,6 +1,13 @@ -export const ScrollPanelDefaultProps = { - __TYPE: 'ScrollPanel', - id: null, - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const ScrollPanelBase = { + defaultProps: { + __TYPE: 'ScrollPanel', + id: null, + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ScrollPanelBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ScrollPanelBase.defaultProps) }; diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js index 2ecb8e7e3f..3ab2ab7ade 100644 --- a/components/lib/scrolltop/ScrollTop.js +++ b/components/lib/scrolltop/ScrollTop.js @@ -3,12 +3,12 @@ import PrimeReact from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { useEventListener, useMountEffect, useUnmountEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; -import { classNames, DomHandler, IconUtils, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { ScrollTopDefaultProps } from './ScrollTopBase'; +import { classNames, DomHandler, IconUtils, ZIndexUtils } from '../utils/Utils'; +import { ScrollTopBase } from './ScrollTopBase'; export const ScrollTop = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ScrollTopDefaultProps); + const props = ScrollTopBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(false); const scrollElementRef = React.useRef(null); @@ -72,7 +72,7 @@ export const ScrollTop = React.memo( ZIndexUtils.clear(scrollElementRef.current); }); - const otherProps = ObjectUtils.findDiffKeys(props, ScrollTopDefaultProps); + const otherProps = ScrollTopBase.getOtherProps(props); const className = classNames( 'p-scrolltop p-link p-component', { diff --git a/components/lib/scrolltop/ScrollTopBase.js b/components/lib/scrolltop/ScrollTopBase.js index 56ccd6cf32..f38b5123eb 100644 --- a/components/lib/scrolltop/ScrollTopBase.js +++ b/components/lib/scrolltop/ScrollTopBase.js @@ -1,12 +1,19 @@ -export const ScrollTopDefaultProps = { - __TYPE: 'ScrollTop', - target: 'window', - threshold: 400, - icon: 'pi pi-chevron-up', - behavior: 'smooth', - className: null, - style: null, - transitionOptions: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const ScrollTopBase = { + defaultProps: { + __TYPE: 'ScrollTop', + target: 'window', + threshold: 400, + icon: 'pi pi-chevron-up', + behavior: 'smooth', + className: null, + style: null, + transitionOptions: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ScrollTopBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ScrollTopBase.defaultProps) }; diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js index 2877065f66..98751c50be 100644 --- a/components/lib/selectbutton/SelectButton.js +++ b/components/lib/selectbutton/SelectButton.js @@ -1,12 +1,12 @@ import * as React from 'react'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { SelectButtonDefaultProps } from './SelectButtonBase'; +import { SelectButtonBase } from './SelectButtonBase'; import { SelectButtonItem } from './SelectButtonItem'; export const SelectButton = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, SelectButtonDefaultProps); + const props = SelectButtonBase.getProps(inProps); const elementRef = React.useRef(null); @@ -100,7 +100,7 @@ export const SelectButton = React.memo( })); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, SelectButtonDefaultProps); + const otherProps = SelectButtonBase.getOtherProps(props); const className = classNames('p-selectbutton p-buttonset p-component', props.className); const items = createItems(); diff --git a/components/lib/selectbutton/SelectButtonBase.js b/components/lib/selectbutton/SelectButtonBase.js index 0bef482cfe..9cab454454 100644 --- a/components/lib/selectbutton/SelectButtonBase.js +++ b/components/lib/selectbutton/SelectButtonBase.js @@ -1,20 +1,27 @@ -export const SelectButtonDefaultProps = { - __TYPE: 'SelectButton', - id: null, - value: null, - options: null, - optionLabel: null, - optionValue: null, - optionDisabled: null, - tabIndex: null, - multiple: false, - unselectable: true, - disabled: false, - style: null, - className: null, - dataKey: null, - tooltip: null, - tooltipOptions: null, - itemTemplate: null, - onChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const SelectButtonBase = { + defaultProps: { + __TYPE: 'SelectButton', + id: null, + value: null, + options: null, + optionLabel: null, + optionValue: null, + optionDisabled: null, + tabIndex: null, + multiple: false, + unselectable: true, + disabled: false, + style: null, + className: null, + dataKey: null, + tooltip: null, + tooltipOptions: null, + itemTemplate: null, + onChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, SelectButtonBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, SelectButtonBase.defaultProps) }; diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js index 8d104d8b8f..3bfc060aa6 100644 --- a/components/lib/sidebar/Sidebar.js +++ b/components/lib/sidebar/Sidebar.js @@ -5,10 +5,10 @@ import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } f import { Portal } from '../portal/Portal'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { SidebarDefaultProps } from './SidebarBase'; +import { SidebarBase } from './SidebarBase'; export const Sidebar = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, SidebarDefaultProps); + const props = SidebarBase.getProps(inProps); const [maskVisibleState, setMaskVisibleState] = React.useState(false); const [visibleState, setVisibleState] = React.useState(false); @@ -179,7 +179,7 @@ export const Sidebar = React.forwardRef((inProps, ref) => { }; const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, SidebarDefaultProps); + const otherProps = SidebarBase.getOtherProps(props); const className = classNames('p-sidebar p-component', props.className, { 'p-input-filled': PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': PrimeReact.ripple === false diff --git a/components/lib/sidebar/SidebarBase.js b/components/lib/sidebar/SidebarBase.js index 2d67988cb4..0f9936e04e 100644 --- a/components/lib/sidebar/SidebarBase.js +++ b/components/lib/sidebar/SidebarBase.js @@ -1,23 +1,30 @@ -export const SidebarDefaultProps = { - __TYPE: 'Sidebar', - id: null, - style: null, - className: null, - maskStyle: null, - maskClassName: null, - visible: false, - position: 'left', - fullScreen: false, - blockScroll: false, - baseZIndex: 0, - dismissable: true, - showCloseIcon: true, - ariaCloseLabel: null, - closeOnEscape: true, - icons: null, - modal: true, - appendTo: null, - transitionOptions: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const SidebarBase = { + defaultProps: { + __TYPE: 'Sidebar', + id: null, + style: null, + className: null, + maskStyle: null, + maskClassName: null, + visible: false, + position: 'left', + fullScreen: false, + blockScroll: false, + baseZIndex: 0, + dismissable: true, + showCloseIcon: true, + ariaCloseLabel: null, + closeOnEscape: true, + icons: null, + modal: true, + appendTo: null, + transitionOptions: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, SidebarBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, SidebarBase.defaultProps) }; diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js index fd1600a114..698973b5ca 100644 --- a/components/lib/skeleton/Skeleton.js +++ b/components/lib/skeleton/Skeleton.js @@ -1,13 +1,13 @@ import * as React from 'react'; -import { classNames, ObjectUtils } from '../utils/Utils'; -import { SkeletonDefaultProps } from './SkeletonBase'; +import { classNames } from '../utils/Utils'; +import { SkeletonBase } from './SkeletonBase'; export const Skeleton = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, SkeletonDefaultProps); + const props = SkeletonBase.getProps(inProps); const elementRef = React.useRef(null); - const otherProps = ObjectUtils.findDiffKeys(props, SkeletonDefaultProps); + const otherProps = SkeletonBase.getOtherProps(props); const style = props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius }; const className = classNames( 'p-skeleton p-component', diff --git a/components/lib/skeleton/SkeletonBase.js b/components/lib/skeleton/SkeletonBase.js index 5c092934e5..90c2116963 100644 --- a/components/lib/skeleton/SkeletonBase.js +++ b/components/lib/skeleton/SkeletonBase.js @@ -1,11 +1,18 @@ -export const SkeletonDefaultProps = { - __TYPE: 'Skeleton', - shape: 'rectangle', - size: null, - width: '100%', - height: '1rem', - borderRadius: null, - animation: 'wave', - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const SkeletonBase = { + defaultProps: { + __TYPE: 'Skeleton', + shape: 'rectangle', + size: null, + width: '100%', + height: '1rem', + borderRadius: null, + animation: 'wave', + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, SkeletonBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, SkeletonBase.defaultProps) }; diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js index 5ac3d9a07e..3f092f7ca6 100644 --- a/components/lib/slidemenu/SlideMenu.js +++ b/components/lib/slidemenu/SlideMenu.js @@ -4,13 +4,13 @@ import { CSSTransition } from '../csstransition/CSSTransition'; import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { SlideMenuDefaultProps } from './SlideMenuBase'; +import { classNames, DomHandler, ZIndexUtils } from '../utils/Utils'; +import { SlideMenuBase } from './SlideMenuBase'; import { SlideMenuSub } from './SlideMenuSub'; export const SlideMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, SlideMenuDefaultProps); + const props = SlideMenuBase.getProps(inProps); const [levelState, setLevelState] = React.useState(0); const [visibleState, setVisibleState] = React.useState(false); @@ -122,7 +122,7 @@ export const SlideMenu = React.memo( }; const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, SlideMenuDefaultProps); + const otherProps = SlideMenuBase.getOtherProps(props); const className = classNames( 'p-slidemenu p-component', { diff --git a/components/lib/slidemenu/SlideMenuBase.js b/components/lib/slidemenu/SlideMenuBase.js index 34c28a6dbf..312d8ef893 100644 --- a/components/lib/slidemenu/SlideMenuBase.js +++ b/components/lib/slidemenu/SlideMenuBase.js @@ -1,20 +1,27 @@ -export const SlideMenuDefaultProps = { - __TYPE: 'SlideMenu', - appendTo: null, - autoZIndex: true, - backLabel: 'Back', - baseZIndex: 0, - className: null, - easing: 'ease-out', - effectDuration: 250, - id: null, - menuWidth: 190, - model: null, - onHide: null, - onShow: null, - onNavigate: null, - popup: false, - style: null, - transitionOptions: null, - viewportHeight: 175 +import { ObjectUtils } from '../utils/Utils'; + +export const SlideMenuBase = { + defaultProps: { + __TYPE: 'SlideMenu', + appendTo: null, + autoZIndex: true, + backLabel: 'Back', + baseZIndex: 0, + className: null, + easing: 'ease-out', + effectDuration: 250, + id: null, + menuWidth: 190, + model: null, + onHide: null, + onShow: null, + onNavigate: null, + popup: false, + style: null, + transitionOptions: null, + viewportHeight: 175, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, SlideMenuBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, SlideMenuBase.defaultProps) }; diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js index 9a354f9ba0..5c15a1a07d 100644 --- a/components/lib/slider/Slider.js +++ b/components/lib/slider/Slider.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { useEventListener } from '../hooks/Hooks'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { SliderDefaultProps } from './SliderBase'; +import { SliderBase } from './SliderBase'; export const Slider = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, SliderDefaultProps); + const props = SliderBase.getProps(inProps); const elementRef = React.useRef(null); const handleIndex = React.useRef(0); @@ -247,7 +247,7 @@ export const Slider = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, SliderDefaultProps); + const otherProps = SliderBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames('p-slider p-component', props.className, { 'p-disabled': props.disabled, diff --git a/components/lib/slider/SliderBase.js b/components/lib/slider/SliderBase.js index 51dde3a93c..69a5b198c7 100644 --- a/components/lib/slider/SliderBase.js +++ b/components/lib/slider/SliderBase.js @@ -1,16 +1,23 @@ -export const SliderDefaultProps = { - __TYPE: 'Slider', - id: null, - value: null, - min: 0, - max: 100, - orientation: 'horizontal', - step: null, - range: false, - style: null, - className: null, - disabled: false, - tabIndex: 0, - onChange: null, - onSlideEnd: null +import { ObjectUtils } from '../utils/Utils'; + +export const SliderBase = { + defaultProps: { + __TYPE: 'Slider', + id: null, + value: null, + min: 0, + max: 100, + orientation: 'horizontal', + step: null, + range: false, + style: null, + className: null, + disabled: false, + tabIndex: 0, + onChange: null, + onSlideEnd: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, SliderBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, SliderBase.defaultProps) }; diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js index bce2549751..712d81bb36 100644 --- a/components/lib/speeddial/SpeedDial.js +++ b/components/lib/speeddial/SpeedDial.js @@ -3,11 +3,11 @@ import { Button } from '../button/Button'; import { useEventListener, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; -import { SpeedDialDefaultProps } from './SpeedDialBase'; +import { SpeedDialBase } from './SpeedDialBase'; export const SpeedDial = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, SpeedDialDefaultProps); + const props = SpeedDialBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(false); const isItemClicked = React.useRef(false); @@ -254,7 +254,7 @@ export const SpeedDial = React.memo( return null; }; - const otherProps = ObjectUtils.findDiffKeys(props, SpeedDialDefaultProps); + const otherProps = SpeedDialBase.getOtherProps(props); const className = classNames( `p-speeddial p-component p-speeddial-${props.type}`, { diff --git a/components/lib/speeddial/SpeedDialBase.js b/components/lib/speeddial/SpeedDialBase.js index 8027a4267a..e11f325b12 100644 --- a/components/lib/speeddial/SpeedDialBase.js +++ b/components/lib/speeddial/SpeedDialBase.js @@ -1,28 +1,35 @@ -export const SpeedDialDefaultProps = { - __TYPE: 'SpeedDial', - id: null, - model: null, - visible: false, - style: null, - className: null, - direction: 'up', - transitionDelay: 30, - type: 'linear', - radius: 0, - mask: false, - disabled: false, - hideOnClickOutside: true, - buttonStyle: null, - buttonClassName: null, - buttonTemplate: null, - 'aria-label': null, - maskStyle: null, - maskClassName: null, - showIcon: 'pi pi-plus', - hideIcon: null, - rotateAnimation: true, - onVisibleChange: null, - onClick: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const SpeedDialBase = { + defaultProps: { + __TYPE: 'SpeedDial', + id: null, + model: null, + visible: false, + style: null, + className: null, + direction: 'up', + transitionDelay: 30, + type: 'linear', + radius: 0, + mask: false, + disabled: false, + hideOnClickOutside: true, + buttonStyle: null, + buttonClassName: null, + buttonTemplate: null, + 'aria-label': null, + maskStyle: null, + maskClassName: null, + showIcon: 'pi pi-plus', + hideIcon: null, + rotateAnimation: true, + onVisibleChange: null, + onClick: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, SpeedDialBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, SpeedDialBase.defaultProps) }; diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js index 5115a5bdae..953c266308 100644 --- a/components/lib/splitbutton/SplitButton.js +++ b/components/lib/splitbutton/SplitButton.js @@ -5,13 +5,13 @@ import { useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/H import { OverlayService } from '../overlayservice/OverlayService'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils'; -import { SplitButtonDefaultProps } from './SplitButtonBase'; +import { SplitButtonBase } from './SplitButtonBase'; import { SplitButtonItem } from './SplitButtonItem'; import { SplitButtonPanel } from './SplitButtonPanel'; export const SplitButton = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, SplitButtonDefaultProps); + const props = SplitButtonBase.getProps(inProps); const [idState, setIdState] = React.useState(props.id); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -108,7 +108,7 @@ export const SplitButton = React.memo( } const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, SplitButtonDefaultProps); + const otherProps = SplitButtonBase.getOtherProps(props); const className = classNames('p-splitbutton p-component', props.className, { 'p-disabled': props.disabled }); const buttonClassName = classNames('p-splitbutton-defaultbutton', props.buttonClassName); const menuButtonClassName = classNames('p-splitbutton-menubutton', props.menuButtonClassName); diff --git a/components/lib/splitbutton/SplitButtonBase.js b/components/lib/splitbutton/SplitButtonBase.js index 375d411a27..c2b1a2bd21 100644 --- a/components/lib/splitbutton/SplitButtonBase.js +++ b/components/lib/splitbutton/SplitButtonBase.js @@ -1,28 +1,35 @@ -export const SplitButtonDefaultProps = { - __TYPE: 'SplitButton', - id: null, - label: null, - icon: null, - loading: false, - loadingIcon: 'pi pi-spinner pi-spin', - model: null, - disabled: null, - style: null, - className: null, - buttonClassName: null, - menuStyle: null, - menuClassName: null, - menuButtonClassName: null, - buttonProps: null, - menuButtonProps: null, - tabIndex: null, - appendTo: null, - tooltip: null, - tooltipOptions: null, - buttonTemplate: null, - transitionOptions: null, - dropdownIcon: 'pi pi-chevron-down', - onClick: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const SplitButtonBase = { + defaultProps: { + __TYPE: 'SplitButton', + id: null, + label: null, + icon: null, + loading: false, + loadingIcon: 'pi pi-spinner pi-spin', + model: null, + disabled: null, + style: null, + className: null, + buttonClassName: null, + menuStyle: null, + menuClassName: null, + menuButtonClassName: null, + buttonProps: null, + menuButtonProps: null, + tabIndex: null, + appendTo: null, + tooltip: null, + tooltipOptions: null, + buttonTemplate: null, + transitionOptions: null, + dropdownIcon: 'pi pi-chevron-down', + onClick: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, SplitButtonBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, SplitButtonBase.defaultProps) }; diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js index cbd86b9b39..6253adb4ae 100644 --- a/components/lib/splitter/Splitter.js +++ b/components/lib/splitter/Splitter.js @@ -1,13 +1,13 @@ import * as React from 'react'; import { useEventListener } from '../hooks/Hooks'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { getPanelProp, SplitterDefaultProps, SplitterPanelDefaultProps } from './SplitterBase'; +import { SplitterBase, SplitterPanelBase } from './SplitterBase'; export const SplitterPanel = () => {}; export const Splitter = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, SplitterDefaultProps); + const props = SplitterBase.getProps(inProps); const elementRef = React.useRef(null); const gutterRef = React.useRef(); @@ -46,6 +46,10 @@ export const Splitter = React.memo( unbindDocumentMouseUpListener(); }; + const getPanelProp = (panel, name) => { + return SplitterPanelBase.getCProp(panel, name); + }; + const validateResize = (newPrevPanelSize, newNextPanelSize) => { if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false; if (newNextPanelSize > 100 || newNextPanelSize < 0) return false; @@ -202,7 +206,7 @@ export const Splitter = React.memo( }, [restoreState, isStateful]); const createPanel = (panel, index) => { - const otherProps = ObjectUtils.findDiffKeys(panel.props, SplitterPanelDefaultProps); + const otherProps = SplitterPanelBase.getCOtherProps(panel); const panelClassName = classNames('p-splitter-panel', getPanelProp(panel, 'className')); const gutterStyle = props.layout === 'horizontal' ? { width: props.gutterSize + 'px' } : { height: props.gutterSize + 'px' }; const gutter = index !== props.children.length - 1 && ( @@ -235,7 +239,7 @@ export const Splitter = React.memo( return React.Children.map(props.children, createPanel); }; - const otherProps = ObjectUtils.findDiffKeys(props, SplitterDefaultProps); + const otherProps = SplitterBase.getOtherProps(props); const className = classNames(`p-splitter p-component p-splitter-${props.layout}`, props.className); const panels = createPanels(); diff --git a/components/lib/splitter/SplitterBase.js b/components/lib/splitter/SplitterBase.js index 63006dbe8b..300f1a5160 100644 --- a/components/lib/splitter/SplitterBase.js +++ b/components/lib/splitter/SplitterBase.js @@ -1,23 +1,32 @@ import { ObjectUtils } from '../utils/Utils'; -export const SplitterDefaultProps = { - __TYPE: 'Splitter', - className: null, - gutterSize: 4, - id: null, - layout: 'horizontal', - onResizeEnd: null, - stateKey: null, - stateStorage: 'session', - style: null +export const SplitterBase = { + defaultProps: { + __TYPE: 'Splitter', + className: null, + gutterSize: 4, + id: null, + layout: 'horizontal', + onResizeEnd: null, + stateKey: null, + stateStorage: 'session', + style: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, SplitterBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, SplitterBase.defaultProps) }; -export const SplitterPanelDefaultProps = { - __TYPE: 'SplitterPanel', - className: null, - minSize: null, - size: null, - style: null +export const SplitterPanelBase = { + defaultProps: { + __TYPE: 'SplitterPanel', + className: null, + minSize: null, + size: null, + style: null, + children: undefined + }, + getCProps: (panel) => ObjectUtils.getComponentProps(panel, SplitterPanelBase.defaultProps), + getCOtherProps: (panel) => ObjectUtils.getComponentDiffProps(panel, SplitterPanelBase.defaultProps), + getCProp: (panel, name) => ObjectUtils.getComponentProp(panel, name, SplitterPanelBase.defaultProps) }; - -export const getPanelProp = (panel, name) => ObjectUtils.getProp(panel, name, SplitterPanelDefaultProps); diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js index 4019a9abdd..00e42f5ac1 100644 --- a/components/lib/steps/Steps.js +++ b/components/lib/steps/Steps.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { StepsDefaultProps } from './StepsBase'; +import { StepsBase } from './StepsBase'; export const Steps = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, StepsDefaultProps); + const props = StepsBase.getProps(inProps); const elementRef = React.useRef(null); @@ -99,7 +99,7 @@ export const Steps = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, StepsDefaultProps); + const otherProps = StepsBase.getOtherProps(props); const className = classNames( 'p-steps p-component', { diff --git a/components/lib/steps/StepsBase.js b/components/lib/steps/StepsBase.js index e0317ce72a..1f1473f755 100644 --- a/components/lib/steps/StepsBase.js +++ b/components/lib/steps/StepsBase.js @@ -1,10 +1,17 @@ -export const StepsDefaultProps = { - __TYPE: 'Steps', - id: null, - model: null, - activeIndex: 0, - readOnly: true, - style: null, - className: null, - onSelect: null +import { ObjectUtils } from '../utils/Utils'; + +export const StepsBase = { + defaultProps: { + __TYPE: 'Steps', + id: null, + model: null, + activeIndex: 0, + readOnly: true, + style: null, + className: null, + onSelect: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, StepsBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, StepsBase.defaultProps) }; diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js index 17a9eb9489..45b4f7206d 100644 --- a/components/lib/styleclass/StyleClass.js +++ b/components/lib/styleclass/StyleClass.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { DomHandler, ObjectUtils } from '../utils/Utils'; -import { StyleClassDefaultProps } from './StyleClassBase'; +import { StyleClassBase } from './StyleClassBase'; export const StyleClass = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, StyleClassDefaultProps); + const props = StyleClassBase.getProps(inProps); const targetRef = React.useRef(null); const animating = React.useRef(false); diff --git a/components/lib/styleclass/StyleClassBase.js b/components/lib/styleclass/StyleClassBase.js index f94c34fd95..c7ae3bba54 100644 --- a/components/lib/styleclass/StyleClassBase.js +++ b/components/lib/styleclass/StyleClassBase.js @@ -1,13 +1,20 @@ -export const StyleClassDefaultProps = { - __TYPE: 'StyleClass', - nodeRef: null, - selector: null, - enterClassName: null, - enterActiveClassName: null, - enterToClassName: null, - leaveClassName: null, - leaveActiveClassName: null, - leaveToClassName: null, - hideOnOutsideClick: false, - toggleClassName: null +import { ObjectUtils } from '../utils/Utils'; + +export const StyleClassBase = { + defaultProps: { + __TYPE: 'StyleClass', + nodeRef: null, + selector: null, + enterClassName: null, + enterActiveClassName: null, + enterToClassName: null, + leaveClassName: null, + leaveActiveClassName: null, + leaveToClassName: null, + hideOnOutsideClick: false, + toggleClassName: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, StyleClassBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, StyleClassBase.defaultProps) }; diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js index 2b848835c0..888b3033da 100644 --- a/components/lib/tabmenu/TabMenu.js +++ b/components/lib/tabmenu/TabMenu.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; -import { TabMenuDefaultProps } from './TabMenuBase'; +import { TabMenuBase } from './TabMenuBase'; export const TabMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TabMenuDefaultProps); + const props = TabMenuBase.getProps(inProps); const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex); const elementRef = React.useRef(null); @@ -48,10 +48,12 @@ export const TabMenu = React.memo( }; const updateInkBar = () => { - const tabHeader = tabsRef.current[`tab_${activeIndex}`]; + if (props.model) { + const tabHeader = tabsRef.current[`tab_${activeIndex}`]; - inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px'; - inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px'; + inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px'; + inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px'; + } }; React.useImperativeHandle(ref, () => ({ @@ -118,7 +120,7 @@ export const TabMenu = React.memo( }; if (props.model) { - const otherProps = ObjectUtils.findDiffKeys(props, TabMenuDefaultProps); + const otherProps = TabMenuBase.getOtherProps(props); const className = classNames('p-tabmenu p-component', props.className); const items = createItems(); diff --git a/components/lib/tabmenu/TabMenuBase.js b/components/lib/tabmenu/TabMenuBase.js index 6fea20dc13..2dfc5adf2d 100644 --- a/components/lib/tabmenu/TabMenuBase.js +++ b/components/lib/tabmenu/TabMenuBase.js @@ -1,9 +1,16 @@ -export const TabMenuDefaultProps = { - __TYPE: 'TabMenu', - id: null, - model: null, - activeIndex: 0, - style: null, - className: null, - onTabChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const TabMenuBase = { + defaultProps: { + __TYPE: 'TabMenu', + id: null, + model: null, + activeIndex: 0, + style: null, + className: null, + onTabChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TabMenuBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TabMenuBase.defaultProps) }; diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js index ef5be0b86b..e7a83196d6 100644 --- a/components/lib/tabview/TabView.js +++ b/components/lib/tabview/TabView.js @@ -3,12 +3,12 @@ import { ariaLabel } from '../api/Api'; import { useMountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils'; -import { getTabProp, TabPanelDefaultProps, TabViewDefaultProps } from './TabViewBase'; +import { TabPanelBase, TabViewBase } from './TabViewBase'; export const TabPanel = () => {}; export const TabView = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TabViewDefaultProps); + const props = TabViewBase.getProps(inProps); const [idState, setIdState] = React.useState(props.id); const [backwardIsDisabledState, setBackwardIsDisabledState] = React.useState(true); @@ -25,6 +25,7 @@ export const TabView = React.forwardRef((inProps, ref) => { const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState; const isSelected = (index) => index === activeIndex; + const getTabProp = (tab, name) => TabPanelBase.getCProp(tab, name); const shouldUseTab = (tab, index) => { return ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every((_i) => _i !== index); @@ -165,7 +166,7 @@ export const TabView = React.forwardRef((inProps, ref) => { const createTabHeader = (tab, index) => { const selected = isSelected(index); - const { headerStyle, headerClassName, style: _style, className: _className, disabled, leftIcon, rightIcon, header, headerTemplate, closable } = ObjectUtils.getProps(tab.props, TabPanelDefaultProps); + const { headerStyle, headerClassName, style: _style, className: _className, disabled, leftIcon, rightIcon, header, headerTemplate, closable } = TabPanelBase.getCProps(tab); const style = { ...(headerStyle || {}), ...(_style || {}) }; const className = classNames('p-unselectable-text', { 'p-tabview-selected p-highlight': selected, 'p-disabled': disabled }, headerClassName, _className); const headerId = idState + '_header_' + index; @@ -244,7 +245,7 @@ export const TabView = React.forwardRef((inProps, ref) => { const className = classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), 'p-tabview-panel', { 'p-hidden': !selected }); const contentId = idState + '_content_' + index; const ariaLabelledBy = idState + '_header_' + index; - const otherProps = ObjectUtils.findDiffKeys(tab.props, TabPanelDefaultProps); + const otherProps = TabPanelBase.getCOtherProps(tab); return (
@@ -285,7 +286,7 @@ export const TabView = React.forwardRef((inProps, ref) => { } }; - const otherProps = ObjectUtils.findDiffKeys(props, TabViewDefaultProps); + const otherProps = TabViewBase.getOtherProps(props); const className = classNames( 'p-tabview p-component', { diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js index c77d0a8332..c79e9f9c52 100644 --- a/components/lib/tabview/TabViewBase.js +++ b/components/lib/tabview/TabViewBase.js @@ -1,35 +1,44 @@ import { ObjectUtils } from '../utils/Utils'; -export const TabViewDefaultProps = { - __TYPE: 'TabView', - id: null, - activeIndex: 0, - className: null, - onBeforeTabChange: null, - onBeforeTabClose: null, - onTabChange: null, - onTabClose: null, - panelContainerClassName: null, - panelContainerStyle: null, - renderActiveOnly: true, - scrollable: false, - style: null +export const TabViewBase = { + defaultProps: { + __TYPE: 'TabView', + id: null, + activeIndex: 0, + className: null, + onBeforeTabChange: null, + onBeforeTabClose: null, + onTabChange: null, + onTabClose: null, + panelContainerClassName: null, + panelContainerStyle: null, + renderActiveOnly: true, + scrollable: false, + style: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TabViewBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TabViewBase.defaultProps) }; -export const TabPanelDefaultProps = { - __TYPE: 'TabPanel', - className: null, - closable: false, - contentClassName: null, - contentStyle: null, - disabled: false, - header: null, - headerClassName: null, - headerStyle: null, - headerTemplate: null, - leftIcon: null, - rightIcon: null, - style: null +export const TabPanelBase = { + defaultProps: { + __TYPE: 'TabPanel', + className: null, + closable: false, + contentClassName: null, + contentStyle: null, + disabled: false, + header: null, + headerClassName: null, + headerStyle: null, + headerTemplate: null, + leftIcon: null, + rightIcon: null, + style: null, + children: undefined + }, + getCProp: (tab, name) => ObjectUtils.getComponentProp(tab, name, TabPanelBase.defaultProps), + getCProps: (tab) => ObjectUtils.getComponentProps(tab, TabPanelBase.defaultProps), + getCOtherProps: (tab) => ObjectUtils.getComponentDiffProps(tab, TabPanelBase.defaultProps) }; - -export const getTabProp = (tab, name) => ObjectUtils.getProp(tab, name, TabPanelDefaultProps); diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js index 0ab906628f..706349cea7 100644 --- a/components/lib/tag/Tag.js +++ b/components/lib/tag/Tag.js @@ -1,12 +1,12 @@ import * as React from 'react'; -import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; -import { TagDefaultProps } from './TagBase'; +import { classNames, IconUtils } from '../utils/Utils'; +import { TagBase } from './TagBase'; export const Tag = React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TagDefaultProps); + const props = TagBase.getProps(inProps); const elementRef = React.useRef(null); - const otherProps = ObjectUtils.findDiffKeys(props, TagDefaultProps); + const otherProps = TagBase.getOtherProps(props); const className = classNames( 'p-tag p-component', { diff --git a/components/lib/tag/TagBase.js b/components/lib/tag/TagBase.js index b6e7159506..81485119f0 100644 --- a/components/lib/tag/TagBase.js +++ b/components/lib/tag/TagBase.js @@ -1,9 +1,16 @@ -export const TagDefaultProps = { - __TYPE: 'Tag', - value: null, - severity: null, - rounded: false, - icon: null, - style: null, - className: null +import { ObjectUtils } from '../utils/Utils'; + +export const TagBase = { + defaultProps: { + __TYPE: 'Tag', + value: null, + severity: null, + rounded: false, + icon: null, + style: null, + className: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TagBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TagBase.defaultProps) }; diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js index f4e6315800..499c344b5d 100644 --- a/components/lib/terminal/Terminal.js +++ b/components/lib/terminal/Terminal.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { TerminalService } from '../terminalservice/TerminalService'; -import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { TerminalDefaultProps } from './TerminalBase'; +import { classNames, DomHandler } from '../utils/Utils'; +import { TerminalBase } from './TerminalBase'; export const Terminal = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TerminalDefaultProps); + const props = TerminalBase.getProps(inProps); const [commandTextState, setCommandTextState] = React.useState(''); const [commandsState, setCommandsState] = React.useState([]); @@ -136,7 +136,7 @@ export const Terminal = React.memo( ); }; - const otherProps = ObjectUtils.findDiffKeys(props, TerminalDefaultProps); + const otherProps = TerminalBase.getOtherProps(props); const className = classNames('p-terminal p-component', props.className); const welcomeMessage = createWelcomeMessage(); const content = createContent(); diff --git a/components/lib/terminal/TerminalBase.js b/components/lib/terminal/TerminalBase.js index e537e8bfd9..fe483fbefa 100644 --- a/components/lib/terminal/TerminalBase.js +++ b/components/lib/terminal/TerminalBase.js @@ -1,8 +1,15 @@ -export const TerminalDefaultProps = { - __TYPE: 'Terminal', - id: null, - style: null, - className: null, - welcomeMessage: null, - prompt: null +import { ObjectUtils } from '../utils/Utils'; + +export const TerminalBase = { + defaultProps: { + __TYPE: 'Terminal', + id: null, + style: null, + className: null, + welcomeMessage: null, + prompt: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TerminalBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TerminalBase.defaultProps) }; diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js index 26aaa8300d..521a66aa6a 100644 --- a/components/lib/tieredmenu/TieredMenu.js +++ b/components/lib/tieredmenu/TieredMenu.js @@ -4,13 +4,13 @@ import { CSSTransition } from '../csstransition/CSSTransition'; import { useOverlayListener, useUnmountEffect } from '../hooks/Hooks'; import { OverlayService } from '../overlayservice/OverlayService'; import { Portal } from '../portal/Portal'; -import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { TieredMenuDefaultProps } from './TieredMenuBase'; +import { classNames, DomHandler, ZIndexUtils } from '../utils/Utils'; +import { TieredMenuBase } from './TieredMenuBase'; import { TieredMenuSub } from './TieredMenuSub'; export const TieredMenu = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TieredMenuDefaultProps); + const props = TieredMenuBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(!props.popup); const menuRef = React.useRef(null); @@ -88,7 +88,7 @@ export const TieredMenu = React.memo( })); const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, TieredMenuDefaultProps); + const otherProps = TieredMenuBase.getOtherProps(props); const className = classNames( 'p-tieredmenu p-component', { diff --git a/components/lib/tieredmenu/TieredMenuBase.js b/components/lib/tieredmenu/TieredMenuBase.js index 10ace09479..490ffc2184 100644 --- a/components/lib/tieredmenu/TieredMenuBase.js +++ b/components/lib/tieredmenu/TieredMenuBase.js @@ -1,14 +1,21 @@ -export const TieredMenuDefaultProps = { - __TYPE: 'TieredMenu', - id: null, - model: null, - popup: false, - style: null, - className: null, - autoZIndex: true, - baseZIndex: 0, - appendTo: null, - transitionOptions: null, - onShow: null, - onHide: null +import { ObjectUtils } from '../utils/Utils'; + +export const TieredMenuBase = { + defaultProps: { + __TYPE: 'TieredMenu', + id: null, + model: null, + popup: false, + style: null, + className: null, + autoZIndex: true, + baseZIndex: 0, + appendTo: null, + transitionOptions: null, + onShow: null, + onHide: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TieredMenuBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TieredMenuBase.defaultProps) }; diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js index 519c0b47e4..3bcf8abf8b 100644 --- a/components/lib/timeline/Timeline.js +++ b/components/lib/timeline/Timeline.js @@ -1,10 +1,10 @@ import * as React from 'react'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { TimelineDefaultProps } from './TimelineBase'; +import { TimelineBase } from './TimelineBase'; export const Timeline = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TimelineDefaultProps); + const props = TimelineBase.getProps(inProps); const elementRef = React.useRef(null); @@ -40,7 +40,7 @@ export const Timeline = React.memo( getElement: () => elementRef.current })); - const otherProps = ObjectUtils.findDiffKeys(props, TimelineDefaultProps); + const otherProps = TimelineBase.getOtherProps(props); const className = classNames( 'p-timeline p-component', { diff --git a/components/lib/timeline/TimelineBase.js b/components/lib/timeline/TimelineBase.js index a6aa384e3b..3d36e16e0f 100644 --- a/components/lib/timeline/TimelineBase.js +++ b/components/lib/timeline/TimelineBase.js @@ -1,11 +1,18 @@ -export const TimelineDefaultProps = { - __TYPE: 'Timeline', - align: 'left', - className: null, - content: null, - dataKey: null, - layout: 'vertical', - marker: null, - opposite: null, - value: null +import { ObjectUtils } from '../utils/Utils'; + +export const TimelineBase = { + defaultProps: { + __TYPE: 'Timeline', + align: 'left', + className: null, + content: null, + dataKey: null, + layout: 'vertical', + marker: null, + opposite: null, + value: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TimelineBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TimelineBase.defaultProps) }; diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js index 220da99a50..377b92d152 100644 --- a/components/lib/toast/Toast.js +++ b/components/lib/toast/Toast.js @@ -4,15 +4,15 @@ import PrimeReact from '../api/Api'; import { CSSTransition } from '../csstransition/CSSTransition'; import { useUnmountEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; -import { classNames, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { ToastDefaultProps } from './ToastBase'; +import { classNames, ZIndexUtils } from '../utils/Utils'; +import { ToastBase } from './ToastBase'; import { ToastMessage } from './ToastMessage'; let messageIdx = 0; export const Toast = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ToastDefaultProps); + const props = ToastBase.getProps(inProps); const [messagesState, setMessagesState] = React.useState([]); const containerRef = React.useRef(null); @@ -101,7 +101,7 @@ export const Toast = React.memo( })); const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, ToastDefaultProps); + const otherProps = ToastBase.getOtherProps(props); 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 diff --git a/components/lib/toast/ToastBase.js b/components/lib/toast/ToastBase.js index 74620205bf..5b95126b7d 100644 --- a/components/lib/toast/ToastBase.js +++ b/components/lib/toast/ToastBase.js @@ -1,16 +1,23 @@ -export const ToastDefaultProps = { - __TYPE: 'Toast', - id: null, - className: null, - style: null, - baseZIndex: 0, - position: 'top-right', - transitionOptions: null, - appendTo: 'self', - onClick: null, - onRemove: null, - onShow: null, - onHide: null, - onMouseEnter: null, - onMouseLeave: null +import { ObjectUtils } from '../utils/Utils'; + +export const ToastBase = { + defaultProps: { + __TYPE: 'Toast', + id: null, + className: null, + style: null, + baseZIndex: 0, + position: 'top-right', + transitionOptions: null, + appendTo: 'self', + onClick: null, + onRemove: null, + onShow: null, + onHide: null, + onMouseEnter: null, + onMouseLeave: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ToastBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ToastBase.defaultProps) }; diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js index 573f2b8b69..a1ec9232cb 100644 --- a/components/lib/togglebutton/ToggleButton.js +++ b/components/lib/togglebutton/ToggleButton.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { Ripple } from '../ripple/Ripple'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; -import { ToggleButtonDefaultProps } from './ToggleButtonBase'; +import { ToggleButtonBase } from './ToggleButtonBase'; export const ToggleButton = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ToggleButtonDefaultProps); + const props = ToggleButtonBase.getProps(inProps); const elementRef = React.useRef(null); const hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0; @@ -58,7 +58,7 @@ export const ToggleButton = React.memo( const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); const tabIndex = props.disabled ? -1 : props.tabIndex; - const otherProps = ObjectUtils.findDiffKeys(props, ToggleButtonDefaultProps); + const otherProps = ToggleButtonBase.getOtherProps(props); const className = classNames( 'p-button p-togglebutton p-component', { diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js index 5e3ec5cfd9..5fe668b87d 100644 --- a/components/lib/togglebutton/ToggleButtonBase.js +++ b/components/lib/togglebutton/ToggleButtonBase.js @@ -1,18 +1,25 @@ -export const ToggleButtonDefaultProps = { - __TYPE: 'ToggleButton', - id: null, - onIcon: null, - offIcon: null, - onLabel: 'Yes', - offLabel: 'No', - iconPos: 'left', - style: null, - className: null, - checked: false, - tabIndex: 0, - tooltip: null, - tooltipOptions: null, - onChange: null, - onFocus: null, - onBlur: null +import { ObjectUtils } from '../utils/Utils'; + +export const ToggleButtonBase = { + defaultProps: { + __TYPE: 'ToggleButton', + id: null, + onIcon: null, + offIcon: null, + onLabel: 'Yes', + offLabel: 'No', + iconPos: 'left', + style: null, + className: null, + checked: false, + tabIndex: 0, + tooltip: null, + tooltipOptions: null, + onChange: null, + onFocus: null, + onBlur: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ToggleButtonBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ToggleButtonBase.defaultProps) }; diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js index 7aeb0ae068..fb6418b6d9 100644 --- a/components/lib/toolbar/Toolbar.js +++ b/components/lib/toolbar/Toolbar.js @@ -1,13 +1,13 @@ import * as React from 'react'; import { classNames, ObjectUtils } from '../utils/Utils'; -import { ToolbarDefaultProps } from './ToolbarBase'; +import { ToolbarBase } from './ToolbarBase'; export const Toolbar = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, ToolbarDefaultProps); + const props = ToolbarBase.getProps(inProps); const elementRef = React.useRef(null); - const otherProps = ObjectUtils.findDiffKeys(props, ToolbarDefaultProps); + const otherProps = ToolbarBase.getOtherProps(props); const toolbarClass = classNames('p-toolbar p-component', props.className); const start = ObjectUtils.getJSXElement(props.left || props.start, props); const center = ObjectUtils.getJSXElement(props.center, props); diff --git a/components/lib/toolbar/ToolbarBase.js b/components/lib/toolbar/ToolbarBase.js index 4a1ea31cc3..cfb9b2ffe2 100644 --- a/components/lib/toolbar/ToolbarBase.js +++ b/components/lib/toolbar/ToolbarBase.js @@ -1,11 +1,18 @@ -export const ToolbarDefaultProps = { - __TYPE: 'Toolbar', - id: null, - style: null, - className: null, - left: null, - right: null, - start: null, - center: null, - end: null +import { ObjectUtils } from '../utils/Utils'; + +export const ToolbarBase = { + defaultProps: { + __TYPE: 'Toolbar', + id: null, + style: null, + className: null, + left: null, + right: null, + start: null, + center: null, + end: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, ToolbarBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, ToolbarBase.defaultProps) }; diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 94975ecac3..5b3a211979 100644 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -3,11 +3,11 @@ import PrimeReact from '../api/Api'; import { useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { Portal } from '../portal/Portal'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { TooltipDefaultProps } from './TooltipBase'; +import { TooltipBase } from './TooltipBase'; export const Tooltip = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TooltipDefaultProps); + const props = TooltipBase.getProps(inProps); const [visibleState, setVisibleState] = React.useState(false); const [positionState, setPositionState] = React.useState(props.position); @@ -461,7 +461,7 @@ export const Tooltip = React.memo( })); const createElement = () => { - const otherProps = ObjectUtils.findDiffKeys(props, TooltipDefaultProps); + const otherProps = TooltipBase.getOtherProps(props); const tooltipClassName = classNames( 'p-tooltip p-component', { diff --git a/components/lib/tooltip/TooltipBase.js b/components/lib/tooltip/TooltipBase.js index 3b35434804..9ec77b3c76 100644 --- a/components/lib/tooltip/TooltipBase.js +++ b/components/lib/tooltip/TooltipBase.js @@ -1,30 +1,37 @@ -export const TooltipDefaultProps = { - __TYPE: 'Tooltip', - appendTo: null, - at: null, - autoHide: true, - autoZIndex: true, - baseZIndex: 0, - className: null, - content: null, - disabled: false, - event: null, - hideDelay: 0, - hideEvent: 'mouseleave', - id: null, - mouseTrack: false, - mouseTrackLeft: 5, - mouseTrackTop: 5, - my: null, - onBeforeHide: null, - onBeforeShow: null, - onHide: null, - onShow: null, - position: 'right', - showDelay: 0, - showEvent: 'mouseenter', - showOnDisabled: false, - style: null, - target: null, - updateDelay: 0 +import { ObjectUtils } from '../utils/Utils'; + +export const TooltipBase = { + defaultProps: { + __TYPE: 'Tooltip', + appendTo: null, + at: null, + autoHide: true, + autoZIndex: true, + baseZIndex: 0, + className: null, + content: null, + disabled: false, + event: null, + hideDelay: 0, + hideEvent: 'mouseleave', + id: null, + mouseTrack: false, + mouseTrackLeft: 5, + mouseTrackTop: 5, + my: null, + onBeforeHide: null, + onBeforeShow: null, + onHide: null, + onShow: null, + position: 'right', + showDelay: 0, + showEvent: 'mouseenter', + showOnDisabled: false, + style: null, + target: null, + updateDelay: 0, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TooltipBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TooltipBase.defaultProps) }; diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js index 3d7229efc3..1020dbc917 100644 --- a/components/lib/tree/Tree.js +++ b/components/lib/tree/Tree.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { TreeDefaultProps } from './TreeBase'; +import { TreeBase } from './TreeBase'; import { UITreeNode } from './UITreeNode'; export const Tree = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TreeDefaultProps); + const props = TreeBase.getProps(inProps); const [filterValueState, setFilterValueState] = React.useState(''); const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys); @@ -448,7 +448,7 @@ export const Tree = React.memo( return
{content}
; }; - const otherProps = ObjectUtils.findDiffKeys(props, TreeDefaultProps); + const otherProps = TreeBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames('p-tree p-component', props.className, { 'p-tree-selectable': props.selectionMode, diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js index 13a007934c..f47341997f 100644 --- a/components/lib/tree/TreeBase.js +++ b/components/lib/tree/TreeBase.js @@ -1,44 +1,51 @@ -export const TreeDefaultProps = { - __TYPE: 'Tree', - id: null, - value: null, - disabled: false, - selectionMode: null, - selectionKeys: null, - onSelectionChange: null, - contextMenuSelectionKey: null, - onContextMenuSelectionChange: null, - expandedKeys: null, - style: null, - className: null, - contentStyle: null, - contentClassName: null, - metaKeySelection: true, - propagateSelectionUp: true, - propagateSelectionDown: true, - loading: false, - loadingIcon: 'pi pi-spinner', - dragdropScope: null, - header: null, - footer: null, - showHeader: true, - filter: false, - filterValue: null, - filterBy: 'label', - filterMode: 'lenient', - filterPlaceholder: null, - filterLocale: undefined, - filterTemplate: null, - nodeTemplate: null, - togglerTemplate: null, - onSelect: null, - onUnselect: null, - onExpand: null, - onCollapse: null, - onToggle: null, - onDragDrop: null, - onContextMenu: null, - onFilterValueChange: null, - onNodeClick: null, - onNodeDoubleClick: null +import { ObjectUtils } from '../utils/Utils'; + +export const TreeBase = { + defaultProps: { + __TYPE: 'Tree', + id: null, + value: null, + disabled: false, + selectionMode: null, + selectionKeys: null, + onSelectionChange: null, + contextMenuSelectionKey: null, + onContextMenuSelectionChange: null, + expandedKeys: null, + style: null, + className: null, + contentStyle: null, + contentClassName: null, + metaKeySelection: true, + propagateSelectionUp: true, + propagateSelectionDown: true, + loading: false, + loadingIcon: 'pi pi-spinner', + dragdropScope: null, + header: null, + footer: null, + showHeader: true, + filter: false, + filterValue: null, + filterBy: 'label', + filterMode: 'lenient', + filterPlaceholder: null, + filterLocale: undefined, + filterTemplate: null, + nodeTemplate: null, + togglerTemplate: null, + onSelect: null, + onUnselect: null, + onExpand: null, + onCollapse: null, + onToggle: null, + onDragDrop: null, + onContextMenu: null, + onFilterValueChange: null, + onNodeClick: null, + onNodeDoubleClick: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TreeBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TreeBase.defaultProps) }; diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js index d6b3b5b260..5610ae5570 100644 --- a/components/lib/treeselect/TreeSelect.js +++ b/components/lib/treeselect/TreeSelect.js @@ -5,12 +5,12 @@ import { OverlayService } from '../overlayservice/OverlayService'; import { Ripple } from '../ripple/Ripple'; import { Tree } from '../tree/Tree'; import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils'; -import { TreeSelectDefaultProps } from './TreeSelectBase'; +import { TreeSelectBase } from './TreeSelectBase'; import { TreeSelectPanel } from './TreeSelectPanel'; export const TreeSelect = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TreeSelectDefaultProps); + const props = TreeSelectBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const [overlayVisibleState, setOverlayVisibleState] = React.useState(false); @@ -518,7 +518,7 @@ export const TreeSelect = React.memo( const selectedNodes = getSelectedNodes(); - const otherProps = ObjectUtils.findDiffKeys(props, TreeSelectDefaultProps); + const otherProps = TreeSelectBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames( 'p-treeselect p-component p-inputwrapper', diff --git a/components/lib/treeselect/TreeSelectBase.js b/components/lib/treeselect/TreeSelectBase.js index d97cc1b668..b74588f046 100644 --- a/components/lib/treeselect/TreeSelectBase.js +++ b/components/lib/treeselect/TreeSelectBase.js @@ -1,46 +1,53 @@ -export const TreeSelectDefaultProps = { - __TYPE: 'TreeSelect', - appendTo: null, - ariaLabel: null, - ariaLabelledBy: null, - className: null, - disabled: false, - display: 'comma', - dropdownIcon: 'pi pi-chevron-down', - emptyMessage: null, - expandedKeys: null, - filter: false, - filterBy: 'label', - filterInputAutoFocus: true, - filterLocale: undefined, - filterMode: 'lenient', - filterPlaceholder: null, - filterTemplate: null, - filterValue: null, - inputId: null, - inputRef: null, - metaKeySelection: true, - name: null, - onChange: null, - onFilterValueChange: null, - onHide: null, - onNodeCollapse: null, - onNodeExpand: null, - onNodeSelect: null, - onNodeUnselect: null, - onShow: null, - options: null, - panelClassName: null, - panelFooterTemplate: null, - panelHeaderTemplate: null, - panelStyle: null, - placeholder: null, - resetFilterOnHide: false, - scrollHeight: '400px', - selectionMode: 'single', - style: null, - tabIndex: null, - transitionOptions: null, - value: null, - valueTemplate: null +import { ObjectUtils } from '../utils/Utils'; + +export const TreeSelectBase = { + defaultProps: { + __TYPE: 'TreeSelect', + appendTo: null, + ariaLabel: null, + ariaLabelledBy: null, + className: null, + disabled: false, + display: 'comma', + dropdownIcon: 'pi pi-chevron-down', + emptyMessage: null, + expandedKeys: null, + filter: false, + filterBy: 'label', + filterInputAutoFocus: true, + filterLocale: undefined, + filterMode: 'lenient', + filterPlaceholder: null, + filterTemplate: null, + filterValue: null, + inputId: null, + inputRef: null, + metaKeySelection: true, + name: null, + onChange: null, + onFilterValueChange: null, + onHide: null, + onNodeCollapse: null, + onNodeExpand: null, + onNodeSelect: null, + onNodeUnselect: null, + onShow: null, + options: null, + panelClassName: null, + panelFooterTemplate: null, + panelHeaderTemplate: null, + panelStyle: null, + placeholder: null, + resetFilterOnHide: false, + scrollHeight: '400px', + selectionMode: 'single', + style: null, + tabIndex: null, + transitionOptions: null, + value: null, + valueTemplate: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TreeSelectBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TreeSelectBase.defaultProps) }; diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js index 77f40f179f..c3a0833704 100644 --- a/components/lib/treetable/TreeTable.js +++ b/components/lib/treetable/TreeTable.js @@ -1,14 +1,18 @@ import * as React from 'react'; -import PrimeReact, { FilterMatchMode, FilterService } from '../api/Api'; +import PrimeReact, { FilterService } from '../api/Api'; +import { ColumnBase } from '../column/ColumnBase'; import { useEventListener } from '../hooks/Hooks'; import { Paginator } from '../paginator/Paginator'; -import { DomHandler, ObjectUtils, classNames } from '../utils/Utils'; +import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; +import { TreeTableBase } from './TreeTableBase'; import { TreeTableBody } from './TreeTableBody'; import { TreeTableFooter } from './TreeTableFooter'; import { TreeTableHeader } from './TreeTableHeader'; import { TreeTableScrollableView } from './TreeTableScrollableView'; -export const TreeTable = React.forwardRef((props, ref) => { +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); @@ -487,7 +491,7 @@ export const TreeTable = React.forwardRef((props, ref) => { if (allowDrop) { let columns = columnOrderState ? getColumns() : React.Children.toArray(props.children); - let isSameColumn = (col1, col2) => (col1.props.columnKey || col2.props.columnKey ? ObjectUtils.equals(col1, col2, 'props.columnKey') : ObjectUtils.equals(col1, col2, 'props.field')); + let isSameColumn = (col1, col2) => (getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1, col2, 'props.columnKey') : ObjectUtils.equals(col1, col2, 'props.field')); let dragColIndex = columns.findIndex((child) => isSameColumn(child, draggedColumn.current)); let dropColIndex = columns.findIndex((child) => isSameColumn(child, column)); @@ -504,7 +508,7 @@ export const TreeTable = React.forwardRef((props, ref) => { let columnOrder = []; for (let column of columns) { - columnOrder.push(column.props.columnKey || column.props.field); + columnOrder.push(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field')); } setColumnOrderState(columnOrder); @@ -541,6 +545,10 @@ export const TreeTable = React.forwardRef((props, ref) => { } }; + const getColumnProp = (column, name) => { + return ColumnBase.getCProp(column, name); + }; + const getExpandedKeys = () => { return props.onToggle ? props.expandedKeys : expandedKeysState; }; @@ -574,7 +582,7 @@ export const TreeTable = React.forwardRef((props, ref) => { for (let i = 0; i < columns.length; i++) { let child = columns[i]; - if (child.props.columnKey === key || child.props.field === key) { + if (getColumnProp(child, 'columnKey') === key || getColumnProp(child, 'field') === key) { return child; } } @@ -632,7 +640,7 @@ export const TreeTable = React.forwardRef((props, ref) => { let frozenColumns = null; for (let col of columns) { - if (col.props.frozen) { + if (getColumnProp(col, 'frozen')) { frozenColumns = frozenColumns || []; frozenColumns.push(col); } @@ -645,7 +653,7 @@ export const TreeTable = React.forwardRef((props, ref) => { let scrollableColumns = null; for (let col of columns) { - if (!col.props.frozen) { + if (!getColumnProp(col, 'frozen')) { scrollableColumns = scrollableColumns || []; scrollableColumns.push(col); } @@ -667,16 +675,16 @@ export const TreeTable = React.forwardRef((props, ref) => { for (let j = 0; j < columns.length; j++) { let col = columns[j]; - let filterMeta = filters ? filters[col.props.field] : null; - let filterField = col.props.field; + let filterMeta = filters ? filters[getColumnProp(col, 'field')] : null; + let filterField = getColumnProp(col, 'field'); let filterValue, filterConstraint, paramsWithoutNode, options; //local if (filterMeta) { - let filterMatchMode = filterMeta.matchMode || col.props.filterMatchMode || 'startsWith'; + let filterMatchMode = filterMeta.matchMode || getColumnProp(col, 'filterMatchMode') || 'startsWith'; filterValue = filterMeta.value; - filterConstraint = filterMatchMode === 'custom' ? col.props.filterFunction : FilterService.filters[filterMatchMode]; + filterConstraint = filterMatchMode === 'custom' ? getColumnProp(col, 'filterFunction') : FilterService.filters[filterMatchMode]; options = { rowData: node, filters, @@ -684,7 +692,7 @@ export const TreeTable = React.forwardRef((props, ref) => { column: { filterMeta, filterField, - props: col.props + props: ColumnBase.getCProps(col) } }; @@ -1003,82 +1011,3 @@ export const TreeTable = React.forwardRef((props, ref) => { }); TreeTable.displayName = 'TreeTable'; -TreeTable.defaultProps = { - __TYPE: 'TreeTable', - alwaysShowPaginator: true, - autoLayout: false, - className: null, - columnResizeMode: 'fit', - contextMenuSelectionKey: null, - currentPageReportTemplate: '({currentPage} of {totalPages})', - defaultSortOrder: 1, - emptyMessage: null, - expandedKeys: null, - filterDelay: 300, - filterLocale: undefined, - filterMode: 'lenient', - filters: null, - first: null, - footer: null, - footerColumnGroup: null, - frozenFooterColumnGroup: null, - frozenHeaderColumnGroup: null, - frozenWidth: null, - globalFilter: null, - globalFilterMatchMode: FilterMatchMode.CONTAINS, - header: null, - headerColumnGroup: null, - id: null, - lazy: false, - loading: false, - loadingIcon: 'pi pi-spinner', - metaKeySelection: true, - multiSortMeta: null, - onColReorder: null, - onCollapse: null, - onColumnResizeEnd: null, - onContextMenu: null, - onContextMenuSelectionChange: null, - onExpand: null, - onFilter: null, - onPage: null, - onRowClick: null, - onSelect: null, - onSelectionChange: null, - onSort: null, - onToggle: null, - onUnselect: null, - pageLinkSize: 5, - paginator: false, - paginatorClassName: null, - paginatorDropdownAppendTo: null, - paginatorLeft: null, - paginatorPosition: 'bottom', - paginatorRight: null, - paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', - propagateSelectionDown: true, - propagateSelectionUp: true, - removableSort: false, - reorderableColumns: false, - resizableColumns: false, - rowClassName: null, - rowHover: false, - rows: null, - rowsPerPageOptions: null, - scrollHeight: null, - scrollable: false, - selectOnEdit: true, - selectionKeys: null, - selectionMode: null, - showGridlines: false, - sortField: null, - sortMode: 'single', - sortOrder: null, - stripedRows: false, - style: null, - tabIndex: 0, - tableClassName: null, - tableStyle: null, - totalRecords: null, - value: null -}; diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js new file mode 100644 index 0000000000..a0e92ed3fa --- /dev/null +++ b/components/lib/treetable/TreeTableBase.js @@ -0,0 +1,87 @@ +import { FilterMatchMode } from '../api/Api'; +import { ObjectUtils } from '../utils/Utils'; + +export const TreeTableBase = { + defaultProps: { + __TYPE: 'TreeTable', + alwaysShowPaginator: true, + autoLayout: false, + className: null, + columnResizeMode: 'fit', + contextMenuSelectionKey: null, + currentPageReportTemplate: '({currentPage} of {totalPages})', + defaultSortOrder: 1, + emptyMessage: null, + expandedKeys: null, + filterDelay: 300, + filterLocale: undefined, + filterMode: 'lenient', + filters: null, + first: null, + footer: null, + footerColumnGroup: null, + frozenFooterColumnGroup: null, + frozenHeaderColumnGroup: null, + frozenWidth: null, + globalFilter: null, + globalFilterMatchMode: FilterMatchMode.CONTAINS, + header: null, + headerColumnGroup: null, + id: null, + lazy: false, + loading: false, + loadingIcon: 'pi pi-spinner', + metaKeySelection: true, + multiSortMeta: null, + onColReorder: null, + onCollapse: null, + onColumnResizeEnd: null, + onContextMenu: null, + onContextMenuSelectionChange: null, + onExpand: null, + onFilter: null, + onPage: null, + onRowClick: null, + onSelect: null, + onSelectionChange: null, + onSort: null, + onToggle: null, + onUnselect: null, + pageLinkSize: 5, + paginator: false, + paginatorClassName: null, + paginatorDropdownAppendTo: null, + paginatorLeft: null, + paginatorPosition: 'bottom', + paginatorRight: null, + paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', + propagateSelectionDown: true, + propagateSelectionUp: true, + removableSort: false, + reorderableColumns: false, + resizableColumns: false, + rowClassName: null, + rowHover: false, + rows: null, + rowsPerPageOptions: null, + scrollHeight: null, + scrollable: false, + selectOnEdit: true, + selectionKeys: null, + selectionMode: null, + showGridlines: false, + sortField: null, + sortMode: 'single', + sortOrder: null, + stripedRows: false, + style: null, + tabIndex: 0, + tableClassName: null, + tableStyle: null, + totalRecords: null, + value: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TreeTableBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TreeTableBase.defaultProps) +}; diff --git a/components/lib/treetable/TreeTableFooter.js b/components/lib/treetable/TreeTableFooter.js index 3fd9d3f803..d7f4166b57 100644 --- a/components/lib/treetable/TreeTableFooter.js +++ b/components/lib/treetable/TreeTableFooter.js @@ -1,23 +1,36 @@ import * as React from 'react'; +import { ColumnBase } from '../column/ColumnBase'; +import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; +import { RowBase } from '../row/RowBase'; export const TreeTableFooter = React.memo((props) => { + const getColumnProp = (column, name) => { + return ColumnBase.getCProp(column, name); + }; + const createFooterCell = (column, index) => { return ( - - {column.props.footer} + + {getColumnProp(column, 'footer')} ); }; const createFooterRow = (row, index) => { - const rowColumns = React.Children.toArray(row.props.children); + const rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children')); const rowFooterCells = rowColumns.map(createFooterCell); return {rowFooterCells}; }; const createColumnGroup = () => { - let rows = React.Children.toArray(props.columnGroup.props.children); + let rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children')); return rows.map(createFooterRow); }; @@ -37,7 +50,7 @@ export const TreeTableFooter = React.memo((props) => { return true; } else { for (let i = 0; i < props.columns.length; i++) { - if (props.columns[i].props.footer) { + if (getColumnProp(props.columns[i], 'footer')) { return true; } } diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js index 19b7cd873b..530be509d5 100644 --- a/components/lib/treetable/TreeTableHeader.js +++ b/components/lib/treetable/TreeTableHeader.js @@ -1,5 +1,8 @@ import * as React from 'react'; +import { ColumnBase } from '../column/ColumnBase'; +import { ColumnGroupBase } from '../columngroup/ColumnGroupBase'; import { InputText } from '../inputtext/InputText'; +import { RowBase } from '../row/RowBase'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; @@ -7,7 +10,7 @@ export const TreeTableHeader = React.memo((props) => { const filterTimeout = React.useRef(null); const onHeaderClick = (event, column) => { - if (column.props.sortable) { + if (getColumnProp(column, 'sortable')) { const targetNode = event.target; if ( @@ -18,9 +21,9 @@ export const TreeTableHeader = React.memo((props) => { ) { props.onSort({ originalEvent: event, - sortField: column.props.sortField || column.props.field, - sortFunction: column.props.sortFunction, - sortable: column.props.sortable + sortField: getColumnProp(column, 'sortField') || getColumnProp(column, 'field'), + sortFunction: getColumnProp(column, 'sortFunction'), + sortable: getColumnProp(column, 'sortable') }); DomHandler.clearSelection(); @@ -29,7 +32,7 @@ export const TreeTableHeader = React.memo((props) => { }; const onHeaderMouseDown = (event, column) => { - if (props.reorderableColumns && column.props.reorderable) { + if (props.reorderableColumns && getColumnProp(column, 'reorderable')) { if (event.target.nodeName !== 'INPUT') event.currentTarget.draggable = true; else if (event.target.nodeName === 'INPUT') event.currentTarget.draggable = false; } @@ -45,7 +48,7 @@ export const TreeTableHeader = React.memo((props) => { const getMultiSortMetaDataIndex = (column) => { if (props.multiSortMeta) { for (let i = 0; i < props.multiSortMeta.length; i++) { - if (props.multiSortMeta[i].field === column.props.field) { + if (props.multiSortMeta[i].field === getColumnProp(column, 'field')) { return i; } } @@ -101,7 +104,7 @@ export const TreeTableHeader = React.memo((props) => { }; const onFilterInput = (e, column) => { - if (column.props.filter && props.onFilter) { + if (getColumnProp(column, 'filter') && props.onFilter) { if (filterTimeout.current) { clearTimeout(filterTimeout.current); } @@ -111,8 +114,8 @@ export const TreeTableHeader = React.memo((props) => { filterTimeout.current = setTimeout(() => { props.onFilter({ value: filterValue, - field: column.props.field, - matchMode: column.props.filterMatchMode || 'startsWith' + field: getColumnProp(column, 'field'), + matchMode: getColumnProp(column, 'filterMatchMode') || 'startsWith' }); filterTimeout.current = null; }, props.filterDelay); @@ -122,7 +125,7 @@ export const TreeTableHeader = React.memo((props) => { const hasColumnFilter = (columns) => { if (columns) { for (let col of columns) { - if (col.props.filter) { + if (getColumnProp(col, 'filter')) { return true; } } @@ -132,7 +135,7 @@ export const TreeTableHeader = React.memo((props) => { }; const getAriaSort = (column, sorted, sortOrder) => { - if (column.props.sortable) { + if (getColumnProp(column, 'sortable')) { let sortIcon = sorted ? (sortOrder < 0 ? 'pi-sort-down' : 'pi-sort-up') : 'pi-sort'; if (sortIcon === 'pi-sort-down') return 'descending'; @@ -144,11 +147,11 @@ export const TreeTableHeader = React.memo((props) => { }; const getColumnProp = (column, ...args) => { - return column ? (typeof args[0] === 'string' ? column.props[args[0]] : (args[0] || column).props[args[1]]) : null; + return column ? (typeof args[0] === 'string' ? ColumnBase.getCProp(column, args[0]) : ColumnBase.getCProp(args[0] || column, args[1])) : null; }; const createSortIcon = (column, sorted, sortOrder) => { - if (column.props.sortable) { + if (getColumnProp(column, 'sortable')) { const sortIcon = sorted ? (sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt') : 'pi-sort-alt'; const sortIconClassName = classNames('p-sortable-column-icon', 'pi pi-fw', sortIcon); @@ -177,15 +180,15 @@ export const TreeTableHeader = React.memo((props) => { const createHeaderCell = (column, options) => { let filterElement; - if (column.props.filter && options.renderFilter) { - filterElement = column.props.filterElement || ( + if (getColumnProp(column, 'filter') && options.renderFilter) { + filterElement = getColumnProp(column, 'filterElement') || ( onFilterInput(e, column)} type={props.filterType} - defaultValue={props.filters && props.filters[column.props.field] ? props.filters[column.props.field].value : null} + defaultValue={props.filters && props.filters[getColumnProp(column, 'field')] ? props.filters[getColumnProp(column, 'field')].value : null} className="p-column-filter" - placeholder={column.props.filterPlaceholder} - maxLength={column.props.filterMaxLength} + placeholder={getColumnProp(column, 'filterPlaceholder')} + maxLength={getColumnProp(column, 'filterMaxLength')} /> ); } @@ -193,11 +196,11 @@ export const TreeTableHeader = React.memo((props) => { if (options.filterOnly) { return ( {filterElement} @@ -206,9 +209,9 @@ export const TreeTableHeader = React.memo((props) => { const headerCellRef = React.createRef(null); const sortMetaDataIndex = getMultiSortMetaDataIndex(column); const multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null; - const singleSorted = column.props.field === props.sortField; + const singleSorted = getColumnProp(column, 'field') === props.sortField; const multipleSorted = multiSortMetaData !== null; - const sorted = column.props.sortable && (singleSorted || multipleSorted); + const sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted); let sortOrder = 0; if (singleSorted) sortOrder = props.sortOrder; @@ -218,13 +221,13 @@ export const TreeTableHeader = React.memo((props) => { const ariaSortData = getAriaSort(column, sorted, sortOrder); const sortBadge = createSortBadge(sortMetaDataIndex); - const className = classNames(column.props.headerClassName || column.props.className, { - 'p-sortable-column': column.props.sortable, + const className = classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), { + 'p-sortable-column': getColumnProp(column, 'sortable'), 'p-highlight': sorted, 'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable') }); - const headerTooltip = column.props.headerTooltip; + const headerTooltip = getColumnProp(column, 'headerTooltip'); const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip); const resizer = createResizer(column); @@ -234,13 +237,13 @@ export const TreeTableHeader = React.memo((props) => { onHeaderClick(e, column)} onMouseDown={(e) => onHeaderMouseDown(e, column)} onKeyDown={(e) => onHeaderKeyDown(e, column)} - rowSpan={column.props.rowSpan} - colSpan={column.props.colSpan} + rowSpan={getColumnProp(column, 'rowSpan')} + colSpan={getColumnProp(column, 'colSpan')} aria-sort={ariaSortData} onDragStart={(e) => onDragStart(e, column)} onDragOver={(e) => onDragOver(e, column)} @@ -248,26 +251,26 @@ export const TreeTableHeader = React.memo((props) => { onDrop={(e) => onDrop(e, column)} > {resizer} - {column.props.header} + {getColumnProp(column, 'header')} {sortIconElement} {sortBadge} {filterElement} - {hasTooltip && } + {hasTooltip && } ); } }; const createHeaderRow = (row, index) => { - const rowColumns = React.Children.toArray(row.props.children); + const rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children')); const rowHeaderCells = rowColumns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: true })); return {rowHeaderCells}; }; const createColumnGroup = () => { - const rows = React.Children.toArray(props.columnGroup.props.children); + const rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children')); return rows.map(createHeaderRow); }; diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js index d41e5facb7..bb0db00006 100644 --- a/components/lib/treetable/TreeTableRow.js +++ b/components/lib/treetable/TreeTableRow.js @@ -1,5 +1,6 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; +import { ColumnBase } from '../column/ColumnBase'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler } from '../utils/Utils'; import { TreeTableBodyCell } from './TreeTableBodyCell'; @@ -15,6 +16,10 @@ export const TreeTableRow = React.memo((props) => { return props.node.leaf === false ? false : !(props.node.children && props.node.children.length); }; + const getColumnProp = (column, name) => { + return ColumnBase.getCProp(column, name); + }; + const onTogglerClick = (event) => { expanded ? collapse(event) : expand(event); @@ -305,13 +310,21 @@ export const TreeTableRow = React.memo((props) => { const createCell = (column) => { let toggler, checkbox; - if (column.props.expander) { + if (getColumnProp(column, 'expander')) { toggler = createToggler(); checkbox = createCheckbox(); } return ( - + {toggler} {checkbox} diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js index 9af806435f..c328d3ce4d 100644 --- a/components/lib/tristatecheckbox/TriStateCheckbox.js +++ b/components/lib/tristatecheckbox/TriStateCheckbox.js @@ -2,11 +2,11 @@ import * as React from 'react'; import { ariaLabel } from '../api/Api'; import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { TriStateCheckboxDefaultProps } from './TriStateCheckboxBase'; +import { TriStateCheckboxBase } from './TriStateCheckboxBase'; export const TriStateCheckbox = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, TriStateCheckboxDefaultProps); + const props = TriStateCheckboxBase.getProps(inProps); const [focusedState, setFocusedState] = React.useState(false); const elementRef = React.useRef(null); @@ -61,7 +61,7 @@ export const TriStateCheckbox = React.memo( })); const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip); - const otherProps = ObjectUtils.findDiffKeys(props, TriStateCheckboxDefaultProps); + const otherProps = TriStateCheckboxBase.getOtherProps(props); const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS); const className = classNames('p-tristatecheckbox p-checkbox p-component', props.className, { 'p-checkbox-disabled': props.disabled }); const boxClassName = classNames('p-checkbox-box', { diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js index 13a29ce17e..5d3c5cda40 100644 --- a/components/lib/tristatecheckbox/TriStateCheckboxBase.js +++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js @@ -1,13 +1,20 @@ -export const TriStateCheckboxDefaultProps = { - __TYPE: 'TriStateCheckbox', - id: null, - value: null, - style: null, - className: null, - disabled: false, - readOnly: false, - tabIndex: '0', - tooltip: null, - tooltipOptions: null, - onChange: null +import { ObjectUtils } from '../utils/Utils'; + +export const TriStateCheckboxBase = { + defaultProps: { + __TYPE: 'TriStateCheckbox', + id: null, + value: null, + style: null, + className: null, + disabled: false, + readOnly: false, + tabIndex: '0', + tooltip: null, + tooltipOptions: null, + onChange: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, TriStateCheckboxBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, TriStateCheckboxBase.defaultProps) }; diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js index 3f7a9ed9fd..b5156eaa8b 100644 --- a/components/lib/utils/ObjectUtils.js +++ b/components/lib/utils/ObjectUtils.js @@ -152,18 +152,18 @@ export default class ObjectUtils { return this.isFunction(obj) ? obj(...params) : obj; } - static getProps(inProps, defaultProps) { - return Object.assign({}, defaultProps, inProps); - } + static getProp(props, prop = '', defaultProps = {}) { + const value = props ? props[prop] : undefined; - static getProp(component, propertyName = '', defaultProperties = {}) { - if (this.isNotEmpty(component)) { - const value = component.props ? component.props[propertyName] : undefined; + return value === undefined ? defaultProps[prop] : value; + } - return value === undefined ? defaultProperties[propertyName] : value; - } + static getMergedProps(props, defaultProps) { + return Object.assign({}, defaultProps, props); + } - return undefined; + static getDiffProps(props, defaultProps) { + return this.findDiffKeys(props, defaultProps); } static getPropValue(obj, ...params) { @@ -176,6 +176,18 @@ export default class ObjectUtils { return this.isFunction(obj) ? obj(...methodParams) : obj; } + static getComponentProp(component, prop = '', defaultProps = {}) { + return this.isNotEmpty(component) ? this.getProp(component.props, prop, defaultProps) : undefined; + } + + static getComponentProps(component, defaultProps) { + return this.isNotEmpty(component) ? this.getMergedProps(component.props, defaultProps) : undefined; + } + + static getComponentDiffProps(component, defaultProps) { + return this.isNotEmpty(component) ? this.getDiffProps(component.props, defaultProps) : undefined; + } + static isValidChild(child, type, validTypes) { /* eslint-disable */ try { diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts index 619464f74d..5710deddcf 100644 --- a/components/lib/utils/utils.d.ts +++ b/components/lib/utils/utils.d.ts @@ -111,10 +111,14 @@ export declare class ObjectUtils { static reorderArray(value: any, from: number, to: number): void; static findIndexInList(value: any, list: any[], dataKey?: string): number; static getJSXElement(obj: any, ...params: any[]): any; - static getProps(inProps: object, defaultProps: object): object; - static getProp(component: any, propertyName: string, defaultProperties?: object): any; + static getProp(props: object, prop: string, defaultProps?: object): any; + static getMergedProps(props: object, defaultProps: object): object; + static getDiffProps(props: object, defaultProps: object): object; static getPropValue(obj: any, ...params: any[]): any; static isValidChild(child: any, type: string): boolean; + static getComponentProp(component: any, prop: string, defaultProps?: object): any; + static getComponentProps(component: any, defaultProps?: object): object | undefined; + static getComponentDiffProps(component: any, defaultProps?: object): object | undefined; static getRefElement(ref: any): any; static combinedRefs(innerRef: any, forwardRef: any): void; static removeAccents(str: any): string; diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js index 7188063cfa..e80082f7d5 100644 --- a/components/lib/virtualscroller/VirtualScroller.js +++ b/components/lib/virtualscroller/VirtualScroller.js @@ -1,11 +1,11 @@ import * as React from 'react'; import { useEventListener, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; -import { VirtualScrollerDefaultProps } from './VirtualScrollerBase'; +import { VirtualScrollerBase } from './VirtualScrollerBase'; export const VirtualScroller = React.memo( React.forwardRef((inProps, ref) => { - const props = ObjectUtils.getProps(inProps, VirtualScrollerDefaultProps); + const props = VirtualScrollerBase.getProps(inProps); const vertical = props.orientation === 'vertical'; const horizontal = props.orientation === 'horizontal'; @@ -613,7 +613,7 @@ export const VirtualScroller = React.memo( ); } else { - const otherProps = ObjectUtils.findDiffKeys(props, VirtualScrollerDefaultProps); + const otherProps = VirtualScrollerBase.getOtherProps(props); const className = classNames( 'p-virtualscroller', { diff --git a/components/lib/virtualscroller/VirtualScrollerBase.js b/components/lib/virtualscroller/VirtualScrollerBase.js index 74a38ab6f1..493a58dc1a 100644 --- a/components/lib/virtualscroller/VirtualScrollerBase.js +++ b/components/lib/virtualscroller/VirtualScrollerBase.js @@ -1,29 +1,36 @@ -export const VirtualScrollerDefaultProps = { - __TYPE: 'VirtualScroller', - id: null, - style: null, - className: null, - items: null, - itemSize: 0, - scrollHeight: null, - scrollWidth: null, - orientation: 'vertical', - numToleratedItems: null, - delay: 0, - resizeDelay: 10, - lazy: false, - disabled: false, - loaderDisabled: false, - columns: null, - loading: undefined, - autoSize: false, - showSpacer: true, - showLoader: false, - loadingTemplate: null, - loaderIconTemplate: null, - itemTemplate: null, - contentTemplate: null, - onScroll: null, - onScrollIndexChange: null, - onLazyLoad: null +import { ObjectUtils } from '../utils/Utils'; + +export const VirtualScrollerBase = { + defaultProps: { + __TYPE: 'VirtualScroller', + id: null, + style: null, + className: null, + items: null, + itemSize: 0, + scrollHeight: null, + scrollWidth: null, + orientation: 'vertical', + numToleratedItems: null, + delay: 0, + resizeDelay: 10, + lazy: false, + disabled: false, + loaderDisabled: false, + columns: null, + loading: undefined, + autoSize: false, + showSpacer: true, + showLoader: false, + loadingTemplate: null, + loaderIconTemplate: null, + itemTemplate: null, + contentTemplate: null, + onScroll: null, + onScrollIndexChange: null, + onLazyLoad: null, + children: undefined + }, + getProps: (props) => ObjectUtils.getMergedProps(props, VirtualScrollerBase.defaultProps), + getOtherProps: (props) => ObjectUtils.getDiffProps(props, VirtualScrollerBase.defaultProps) };