Fix primefaces#2606: PickList allow source and target item templates

melloware · Apr 26, 2022 · 490ea63 · 490ea63
1 parent bb0b1c0
commit 490ea63
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/components/doc/picklist/index.js b/components/doc/picklist/index.js
@@ -439,7 +439,21 @@ const onChange = (e) => {
                                     <td>itemTemplate</td>
                                     <td>function</td>
                                     <td>null</td>
-                                    <td>Function that gets the option and returns the content for it.</td>
+                                    <td>Template that gets the options for both source and target items and returns the content for it.
+                                        Useful if you want the same template for both lists else use the custom <b>sourceItemTemplate</b> or <b>targetItemTemplate</b> properties.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>sourceItemTemplate</td>
+                                    <td>function</td>
+                                    <td>null</td>
+                                    <td>Template that gets the options for the source items and returns the content for it.</td>
+                                </tr>
+                                <tr>
+                                    <td>targetItemTemplate</td>
+                                    <td>function</td>
+                                    <td>null</td>
+                                    <td>Template that gets the options for the target items and returns the content for it.</td>
                                 </tr>
                                 <tr>
                                     <td>metaKeySelection</td>

diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+type PickListItemTemplateType = React.ReactNode | ((item: any) => React.ReactNode);
+
 interface PickListEventParams {
     originalEvent: React.SyntheticEvent;
     value: any;
@@ -28,7 +30,9 @@ export interface PickListProps {
     metaKeySelection?: boolean;
     tabIndex?: number;
     dataKey?: string;
-    itemTemplate?(item: any): React.ReactNode;
+    itemTemplate?: PickListItemTemplateType;
+    sourceItemTemplate?: PickListItemTemplateType;
+    targetItemTemplate?: PickListItemTemplateType;
     onChange?(e: PickListChangeParams): void;
     onMoveToSource?(e: PickListEventParams): void;
     onMoveAllToSource?(e: PickListEventParams): void;

diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
@@ -150,17 +150,19 @@ export const PickList = React.memo(React.forwardRef((props, ref) => {
 
     const otherProps = ObjectUtils.findDiffKeys(props, PickList.defaultProps);
     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;
 
     return (
         <div id={props.id} className={className} style={props.style} {...otherProps}>
             {props.showSourceControls && <PickListControls list={props.source} selection={sourceSelection} onReorder={onSourceReorder} className="p-picklist-source-controls" dataKey={props.dataKey} />}
 
-            <PickListSubList ref={sourceListElementRef} list={props.source} selection={sourceSelection} onSelectionChange={(e) => onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange)} itemTemplate={props.itemTemplate}
+            <PickListSubList ref={sourceListElementRef} list={props.source} selection={sourceSelection} onSelectionChange={(e) => onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange)} itemTemplate={sourceItemTemplate}
                 header={props.sourceHeader} style={props.sourceStyle} className="p-picklist-source-wrapper" listClassName="p-picklist-source" metaKeySelection={props.metaKeySelection} tabIndex={props.tabIndex} dataKey={props.dataKey} />
 
             <PickListTransferControls onTransfer={onTransfer} source={props.source} target={props.target} sourceSelection={sourceSelection} targetSelection={targetSelection} dataKey={props.dataKey} />
 
-            <PickListSubList ref={targetListElementRef} list={props.target} selection={targetSelection} onSelectionChange={(e) => onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange)} itemTemplate={props.itemTemplate}
+            <PickListSubList ref={targetListElementRef} list={props.target} selection={targetSelection} onSelectionChange={(e) => onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange)} itemTemplate={targetItemTemplate}
                 header={props.targetHeader} style={props.targetStyle} className="p-picklist-target-wrapper" listClassName="p-picklist-target" metaKeySelection={props.metaKeySelection} tabIndex={props.tabIndex} dataKey={props.dataKey} />
 
             {props.showTargetControls && <PickListControls list={props.target} selection={targetSelection} onReorder={onTargetReorder} className="p-picklist-target-controls" dataKey={props.dataKey} />}
@@ -189,6 +191,8 @@ PickList.defaultProps = {
     tabIndex: 0,
     dataKey: null,
     itemTemplate: null,
+    sourceItemTemplate: null,
+    targetItemTemplate: null,
     onChange: null,
     onMoveToSource: null,
     onMoveAllToSource: null,