Skip to content

Commit

Permalink
Add PickList icon templating support Related - #4226
Browse files Browse the repository at this point in the history 
Improve custom PickList icon implementation Related - #4220
  • Loading branch information
@habubey
habubey committed Apr 13, 2023
1 parent 2f1e404 commit fb25484
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 15 deletions.
34 changes: 32 additions & 2 deletions components/lib/picklist/PickList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,19 @@ export const PickList = React.memo(

return (
<div id={props.id} ref={elementRef} className={className} style={props.style} {...otherProps}>
{props.showSourceControls && <PickListControls list={props.source} selection={sourceSelection} onReorder={onSourceReorder} className="p-picklist-source-controls" dataKey={props.dataKey} />}
{props.showSourceControls && (
<PickListControls
list={props.source}
selection={sourceSelection}
onReorder={onSourceReorder}
className="p-picklist-source-controls"
dataKey={props.dataKey}
moveUpIcon={props.moveUpIcon}
moveTopIcon={props.moveTopIcon}
moveDownIcon={props.moveDownIcon}
moveBottomIcon={props.moveBottomIcon}
/>
)}

<PickListSubList
ref={sourceListElementRef}
Expand All @@ -309,6 +321,7 @@ export const PickList = React.memo(
showFilter={showSourceFilter}
placeholder={props.sourceFilterPlaceholder}
template={props.sourceFilterTemplate}
sourceFilterIcon={props.sourceFilterIcon}
/>

<PickListTransferControls
Expand All @@ -320,6 +333,10 @@ export const PickList = React.memo(
sourceSelection={sourceSelection}
targetSelection={targetSelection}
dataKey={props.dataKey}
moveToTargetIcon={props.moveToTargetIcon}
moveAllToTargetIcon={props.moveAllToTargetIcon}
moveToSourceIcon={props.moveToSourceIcon}
moveAllToSourceIcon={props.moveAllToSourceIcon}
/>

<PickListSubList
Expand All @@ -341,9 +358,22 @@ export const PickList = React.memo(
showFilter={showTargetFilter}
placeholder={props.targetFilterPlaceholder}
template={props.targetFilterTemplate}
targetFilterIcon={props.targetFilterIcon}
/>

{props.showTargetControls && <PickListControls list={props.target} selection={targetSelection} onReorder={onTargetReorder} className="p-picklist-target-controls" dataKey={props.dataKey} />}
{props.showTargetControls && (
<PickListControls
list={props.target}
selection={targetSelection}
onReorder={onTargetReorder}
className="p-picklist-target-controls"
dataKey={props.dataKey}
moveUpIcon={props.moveUpIcon}
moveTopIcon={props.moveTopIcon}
moveDownIcon={props.moveDownIcon}
moveBottomIcon={props.moveBottomIcon}
/>
)}
</div>
);
})
Expand Down
10 changes: 10 additions & 0 deletions components/lib/picklist/PickListBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,16 @@ export const PickListBase = {
filter: false,
filterBy: null,
filterMatchMode: 'contains',
targetFilterIcon: null,
sourceFilterIcon: null,
moveAllToSourceIcon: null,
moveToSourceIcon: null,
moveAllToTargetIcon: null,
moveToTargetIcon: null,
moveBottomIcon: null,
moveUpIcon: null,
moveTopIcon: null,
moveDownIcon: null,
filterLocale: undefined,
sourceFilterValue: null,
targetFilterValue: null,
Expand Down
34 changes: 29 additions & 5 deletions components/lib/picklist/PickListControls.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,32 @@
import * as React from 'react';
import { Button } from '../button/Button';
import { classNames, ObjectUtils } from '../utils/Utils';
import { classNames, ObjectUtils, IconUtils } from '../utils/Utils';
import { AngleDownIcon } from '../icon/angledown';
import { AngleDoubleUpIcon } from '../icon/angledoubleup';
import { AngleUpIcon } from '../icon/angleup';
import { AngleDoubleDownIcon } from '../icon/angledoubledown';

export const PickListControls = React.memo((props) => {
function getIconComponent(iconType) {
switch (iconType) {
case 'moveUpIcon':
return props.moveUpIcon || <AngleUpIcon />;
case 'moveTopIcon':
return props.moveTopIcon || <AngleDoubleUpIcon />;
case 'moveDownIcon':
return props.moveDownIcon || <AngleDownIcon />;
case 'moveBottomIcon':
return props.moveBottomIcon || <AngleDoubleDownIcon />;
default:
return null;
}
}

const moveUpIcon = IconUtils.getJSXIcon(getIconComponent('moveUpIcon'), undefined, { props });
const moveTopIcon = IconUtils.getJSXIcon(getIconComponent('moveTopIcon'), undefined, { props });
const moveDownIcon = IconUtils.getJSXIcon(getIconComponent('moveDownIcon'), undefined, { props });
const moveBottomIcon = IconUtils.getJSXIcon(getIconComponent('moveBottomIcon'), undefined, { props });

const moveDisabled = !props.selection || !props.selection.length;

const moveUp = (event) => {
Expand Down Expand Up @@ -129,10 +153,10 @@ export const PickListControls = React.memo((props) => {

return (
<div className={className}>
<Button disabled={moveDisabled} type="button" icon="pi pi-angle-up" onClick={moveUp}></Button>
<Button disabled={moveDisabled} type="button" icon="pi pi-angle-double-up" onClick={moveTop}></Button>
<Button disabled={moveDisabled} type="button" icon="pi pi-angle-down" onClick={moveDown}></Button>
<Button disabled={moveDisabled} type="button" icon="pi pi-angle-double-down" onClick={moveBottom}></Button>
<Button disabled={moveDisabled} type="button" icon={moveUpIcon} onClick={moveUp}></Button>
<Button disabled={moveDisabled} type="button" icon={moveTopIcon} onClick={moveTop}></Button>
<Button disabled={moveDisabled} type="button" icon={moveDownIcon} onClick={moveDown}></Button>
<Button disabled={moveDisabled} type="button" icon={moveBottomIcon} onClick={moveBottom}></Button>
</div>
);
});
Expand Down
11 changes: 8 additions & 3 deletions components/lib/picklist/PickListSubList.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
import { classNames, DomHandler, ObjectUtils, IconUtils } from '../utils/Utils';
import { PickListItem } from './PickListItem';
import { SearchIcon } from '../icon/search';

export const PickListSubList = React.memo(
React.forwardRef((props, ref) => {
Expand Down Expand Up @@ -130,11 +131,15 @@ export const PickListSubList = React.memo(
};

const createFilter = () => {
const iconClassName = 'p-picklist-filter-icon';
const icon = props.type === 'source' ? props.sourceFilterIcon || <SearchIcon className={iconClassName} /> : props.targetFilterIcon || <SearchIcon className={iconClassName} />;
const filterIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });

if (props.showFilter) {
let content = (
<div className="p-picklist-filter">
<input type="text" value={props.filterValue} onChange={onFilter} onKeyDown={onFilterInputKeyDown} placeholder={props.placeholder} className="p-picklist-filter-input p-inputtext p-component" />
<span className="p-picklist-filter-icon pi pi-search"></span>
<span> {filterIcon} </span>
</div>
);

Expand All @@ -146,7 +151,7 @@ export const PickListSubList = React.memo(
onChange: onFilter,
onKeyDown: onFilterInputKeyDown
},
iconClassName: 'p-picklist-filter-icon pi pi-search',
iconClassName,
element: content,
props
};
Expand Down
34 changes: 29 additions & 5 deletions components/lib/picklist/PickListTransferControls.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,32 @@
import * as React from 'react';
import { Button } from '../button/Button';
import { classNames, ObjectUtils } from '../utils/Utils';
import { classNames, ObjectUtils, IconUtils } from '../utils/Utils';
import { AngleLeftIcon } from '../icon/angleleft';
import { AngleDoubleLeftIcon } from '../icon/angledoubleleft';
import { AngleDoubleRightIcon } from '../icon/angledoubleright';
import { AngleRightIcon } from '../icon/angleright';

export const PickListTransferControls = React.memo((props) => {
function getIconComponent(iconType) {
switch (iconType) {
case 'moveToTargetIcon':
return props.moveToTargetIcon || <AngleRightIcon />;
case 'moveAllToTargetIcon':
return props.moveAllToTargetIcon || <AngleDoubleRightIcon />;
case 'moveToSourceIcon':
return props.moveToSourceIcon || <AngleLeftIcon />;
case 'moveAllToSourceIcon':
return props.moveAllToSourceIcon || <AngleDoubleLeftIcon />;
default:
return null;
}
}

const moveToTargetIcon = IconUtils.getJSXIcon(getIconComponent('moveToTargetIcon'), undefined, { props });
const moveAllToTargetIcon = IconUtils.getJSXIcon(getIconComponent('moveAllToTargetIcon'), undefined, { props });
const moveToSourceIcon = IconUtils.getJSXIcon(getIconComponent('moveToSourceIcon'), undefined, { props });
const moveAllToSourceIcon = IconUtils.getJSXIcon(getIconComponent('moveAllToSourceIcon'), undefined, { props });

const moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection) || ObjectUtils.isEmpty(props.visibleSourceList);
const moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection) || ObjectUtils.isEmpty(props.visibleTargetList);
const moveAllRightDisabled = ObjectUtils.isEmpty(props.visibleSourceList);
Expand Down Expand Up @@ -96,10 +120,10 @@ export const PickListTransferControls = React.memo((props) => {

return (
<div className={className}>
<Button disabled={moveRightDisabled} type="button" icon="pi pi-angle-right" onClick={moveRight}></Button>
<Button disabled={moveAllRightDisabled} type="button" icon="pi pi-angle-double-right" onClick={moveAllRight}></Button>
<Button disabled={moveLeftDisabled} type="button" icon="pi pi-angle-left" onClick={moveLeft}></Button>
<Button disabled={moveAllLeftDisabled} type="button" icon="pi pi-angle-double-left" onClick={moveAllLeft}></Button>
<Button disabled={moveRightDisabled} type="button" icon={moveToTargetIcon} onClick={moveRight}></Button>
<Button disabled={moveAllRightDisabled} type="button" icon={moveAllToTargetIcon} onClick={moveAllRight}></Button>
<Button disabled={moveLeftDisabled} type="button" icon={moveToSourceIcon} onClick={moveLeft}></Button>
<Button disabled={moveAllLeftDisabled} type="button" icon={moveAllToSourceIcon} onClick={moveAllLeft}></Button>
</div>
);
});
Expand Down
41 changes: 41 additions & 0 deletions components/lib/picklist/picklist.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*
*/
import * as React from 'react';
import { IconType } from '../utils/utils';

/**
* Custom picklist event.
Expand Down Expand Up @@ -167,6 +168,46 @@ export interface PickListProps {
* @defaultValue false
*/
filter?: boolean | undefined;
/**
* Icon of the target list filter.
*/
targetFilterIcon?: IconType<PickListProps> | undefined;
/**
* Icon of the source list filter.
*/
sourceFilterIcon?: IconType<PickListProps> | undefined;
/**
* Icon for moving all items to the source list.
*/
moveAllToSourceIcon?: IconType<PickListProps> | undefined;
/**
* Icon for moving an item to the source list.
*/
moveToSourceIcon?: IconType<PickListProps> | undefined;
/**
* Icon for moving all items to the target list.
*/
moveAllToTargetIcon?: IconType<PickListProps> | undefined;
/**
* Icon for moving an item to the target list.
*/
moveToTargetIcon?: IconType<PickListProps> | undefined;
/**
* Icon of the move up icon.
*/
moveUpIcon?: IconType<PickListProps> | undefined;
/**
* Icon of the move top icon.
*/
moveTopIcon?: IconType<PickListProps> | undefined;
/**
* Icon of the move down icon.
*/
moveDownIcon?: IconType<PickListProps> | undefined;
/**
* Icon of the move bottom icon.
*/
moveBottomIcon?: IconType<PickListProps> | undefined;
/**
* When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).
*/
Expand Down

0 comments on commit fb25484

Please sign in to comment.