Fixed #1408 - Change the type of itemTemplate property on ListBox

primefaces · Jan 10, 2021 · ba7a97a · ba7a97a
1 parent cd32b78
commit ba7a97a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/src/components/listbox/ListBox.d.ts b/src/components/listbox/ListBox.d.ts
@@ -24,8 +24,8 @@ interface ListBoxProps {
     tabIndex?: number;
     tooltip?: any;
     tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string,
-    itemTemplate?(item: any): JSX.Element | undefined;
+    ariaLabelledBy?: string;
+    itemTemplate?: any;
     onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
     onFilterValueChange?(e: {originalEvent: Event, value: string}): void;
 }

diff --git a/src/components/listbox/ListBox.js b/src/components/listbox/ListBox.js
@@ -44,7 +44,7 @@ export class ListBox extends Component {
         options: PropTypes.array,
         optionLabel: PropTypes.string,
         optionValue: PropTypes.string,
-        itemTemplate: PropTypes.func,
+        itemTemplate: PropTypes.any,
         style: PropTypes.object,
         listStyle: PropTypes.object,
         listClassName: PropTypes.string,

diff --git a/src/components/listbox/ListBoxItem.d.ts b/src/components/listbox/ListBoxItem.d.ts
@@ -5,7 +5,7 @@ interface ListBoxItemProps {
     selected?: boolean;
     onClick?(e: {originalEvent: Event, option: any}): void;
     onTouchEnd?(e: {originalEvent: Event, option: any}): void;
-    template?(item: any): JSX.Element | undefined;
+    template?: any;
 }
 
-export class ListBoxItem extends React.Component<ListBoxItemProps,any> {}
+export class ListBoxItem extends React.Component<ListBoxItemProps,any> {}
diff --git a/src/components/listbox/ListBoxItem.js b/src/components/listbox/ListBoxItem.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import DomHandler from '../utils/DomHandler';
 import { Ripple } from '../ripple/Ripple';
+import ObjectUtils from '../utils/ObjectUtils';
 
 export class ListBoxItem extends Component {
 
@@ -23,11 +24,11 @@ export class ListBoxItem extends Component {
         tabIndex: PropTypes.number,
         onClick: PropTypes.func,
         onTouchEnd: PropTypes.func,
-        template: PropTypes.func
+        template: PropTypes.any
     }
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
         this.onClick = this.onClick.bind(this);
         this.onTouchEnd = this.onTouchEnd.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
@@ -110,7 +111,7 @@ export class ListBoxItem extends Component {
         let className = classNames('p-listbox-item', {
             'p-highlight': this.props.selected
         }, this.props.option.className);
-        let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
+        let content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
 
         return (
             <li className={className} onClick={this.onClick} onTouchEnd={this.onTouchEnd} onKeyDown={this.onKeyDown} tabIndex={this.props.tabIndex}