Skip to content

Commit

Permalink
Fixed #1708 - Add sourceSelection and targetSelection properties to P…
Browse files Browse the repository at this point in the history 
…ickList
  • Loading branch information
@mertsincan
mertsincan committed Dec 9, 2020
1 parent 6a76deb commit 0b12d1b
Showing 1 changed file with 50 additions and 30 deletions.
80 changes: 50 additions & 30 deletions src/components/picklist/PickList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export class PickList extends Component {
className: null,
sourceStyle: null,
targetStyle: null,
sourceSelection: null,
targetSelection: null,
showSourceControls: true,
showTargetControls: true,
metaKeySelection: true,
Expand All @@ -29,8 +31,8 @@ export class PickList extends Component {
onMoveAllToSource: null,
onMoveToTarget: null,
onMoveAllToTarget: null,
onSourceSelect: null,
onTargetSelect: null
onSourceSelectionChange: null,
onTargetSelectionChange: null
}

static propTypes = {
Expand All @@ -43,6 +45,8 @@ export class PickList extends Component {
className: PropTypes.string,
sourcestyle: PropTypes.object,
targetstyle: PropTypes.object,
sourceSelection: PropTypes.any,
targetSelection: PropTypes.any,
showSourceControls: PropTypes.bool,
showTargetControls: PropTypes.bool,
metaKeySelection: PropTypes.bool,
Expand All @@ -53,22 +57,35 @@ export class PickList extends Component {
onMoveAllToSource: PropTypes.func,
onMoveToTarget: PropTypes.func,
onMoveAllToTarget: PropTypes.func,
onSourceSelect: PropTypes.func,
onTargetSelect: PropTypes.func
onSourceSelectionChange: PropTypes.func,
onTargetSelectionChange: PropTypes.func
}

constructor(props) {
super(props);
this.state = {
selectedItemsSource: [],
selectedItemsTarget: []
};
this.state = {};

if (!this.props.onSourceSelectionChange) {
this.state.sourceSelection = [];
}

if (!this.props.onTargetSelectionChange) {
this.state.targetSelection = [];
}

this.onSourceReorder = this.onSourceReorder.bind(this);
this.onTargetReorder = this.onTargetReorder.bind(this);
this.onTransfer = this.onTransfer.bind(this);
}

getSourceSelection() {
return this.props.onSourceSelectionChange ? this.props.sourceSelection : this.state.sourceSelection;
}

getTargetSelection() {
return this.props.onTargetSelectionChange ? this.props.targetSelection : this.state.targetSelection;
}

onSourceReorder(event) {
this.handleChange(event, event.value, this.props.target);
this.reorderedListElement = this.sourceListElement;
Expand Down Expand Up @@ -108,27 +125,29 @@ export class PickList extends Component {
if(this.props.onChange) {
this.props.onChange({
event: event.originalEvent,
source: source,
target: target,
source,
target,
});
}
}

onTransfer(event) {
switch(event.direction) {
const { originalEvent, source, target, direction } = event;

switch(direction) {
case 'toTarget':
if(this.props.onMoveToTarget) {
this.props.onMoveToTarget({
originalEvent: event.originalEvent,
value: this.state.selectedItemsSource
originalEvent,
value: this.getSourceSelection()
})
}
break;

case 'allToTarget':
if(this.props.onMoveAllToTarget) {
this.props.onMoveAllToTarget({
originalEvent: event.originalEvent,
originalEvent,
value: this.props.source
})
}
Expand All @@ -137,16 +156,16 @@ export class PickList extends Component {
case 'toSource':
if(this.props.onMoveToSource) {
this.props.onMoveToSource({
originalEvent: event.originalEvent,
value: this.state.selectedItemsTarget
originalEvent,
value: this.getTargetSelection()
})
}
break;

case 'allToSource':
if(this.props.onMoveAllToSource) {
this.props.onMoveAllToSource({
originalEvent: event.originalEvent,
originalEvent,
value: this.props.target
})
}
Expand All @@ -156,11 +175,9 @@ export class PickList extends Component {
break;
}

this.setState({
selectedItemsSource: [],
selectedItemsTarget: []
});
this.handleChange(event, event.source, event.target);
this.onSelectionChange({ originalEvent, value: [] }, 'sourceSelection', this.props.onSourceSelectionChange);
this.onSelectionChange({ originalEvent, value: [] }, 'targetSelection', this.props.onTargetSelectionChange);
this.handleChange(event, source, target);
}

scrollInView(listElement, direction) {
Expand All @@ -177,11 +194,12 @@ export class PickList extends Component {
}

onSelectionChange(e, stateKey, callback) {
this.setState({[stateKey]: e.value});

if (callback) {
callback(e);
}
else {
this.setState({[stateKey]: e.value});
}
}

componentDidUpdate() {
Expand All @@ -194,22 +212,24 @@ export class PickList extends Component {

render() {
let className = classNames('p-picklist p-component', this.props.className);
let sourceSelection = this.getSourceSelection();
let targetSelection = this.getTargetSelection();

return (
<div id={this.props.id} className={className} style={this.props.style}>
{this.props.showSourceControls && <PickListControls list={this.props.source} selection={this.state.selectedItemsSource}
{this.props.showSourceControls && <PickListControls list={this.props.source} selection={sourceSelection}
onReorder={this.onSourceReorder} className="p-picklist-source-controls" />}

<PickListSubList ref={(el) => this.sourceListElement = ReactDOM.findDOMNode(el)} list={this.props.source} selection={this.state.selectedItemsSource} onSelectionChange={(e) => this.onSelectionChange(e, 'selectedItemsSource', this.props.onSourceSelect)} itemTemplate={this.props.itemTemplate}
<PickListSubList ref={(el) => this.sourceListElement = ReactDOM.findDOMNode(el)} list={this.props.source} selection={sourceSelection} onSelectionChange={(e) => this.onSelectionChange(e, 'sourceSelection', this.props.onSourceSelectionChange)} itemTemplate={this.props.itemTemplate}
header={this.props.sourceHeader} style={this.props.sourceStyle} className="p-picklist-source-wrapper" listClassName="p-picklist-source" metaKeySelection={this.props.metaKeySelection} tabIndex={this.props.tabIndex}/>

<PickListTransferControls onTransfer={this.onTransfer} source={this.props.source} target={this.props.target}
sourceSelection={this.state.selectedItemsSource} targetSelection={this.state.selectedItemsTarget} />
sourceSelection={sourceSelection} targetSelection={targetSelection} />

<PickListSubList ref={(el) => this.targetListElement = ReactDOM.findDOMNode(el)} list={this.props.target} selection={this.state.selectedItemsTarget} onSelectionChange={(e) => this.onSelectionChange(e, 'selectedItemsTarget', this.props.onTargetSelect)} itemTemplate={this.props.itemTemplate}
header={this.props.targetHeader} style={this.props.targetStyle} className="p-picklist-target-wrapper" listClassName="p-picklist-targe" metaKeySelection={this.props.metaKeySelection} tabIndex={this.props.tabIndex}/>
<PickListSubList ref={(el) => this.targetListElement = ReactDOM.findDOMNode(el)} list={this.props.target} selection={targetSelection} onSelectionChange={(e) => this.onSelectionChange(e, 'targetSelection', this.props.onTargetSelectionChange)} itemTemplate={this.props.itemTemplate}
header={this.props.targetHeader} style={this.props.targetStyle} className="p-picklist-target-wrapper" listClassName="p-picklist-target" metaKeySelection={this.props.metaKeySelection} tabIndex={this.props.tabIndex}/>

{this.props.showTargetControls && <PickListControls list={this.props.target} selection={this.state.selectedItemsTarget}
{this.props.showTargetControls && <PickListControls list={this.props.target} selection={targetSelection}
onReorder={this.onTargetReorder} className="p-picklist-target-controls" />}

</div>
Expand Down

0 comments on commit 0b12d1b

Please sign in to comment.