Skip to content

Commit

Permalink
Revert "Fixed #311"
Browse files Browse the repository at this point in the history 
This reverts commit 8529db9.
  • Loading branch information
Çağatay Çivici authored and Çağatay Çivici committed Feb 13, 2018
1 parent 2e2745e commit de92e39
Show file tree
Hide file tree
Showing 7 changed files with 17 additions and 95 deletions.
2 changes: 1 addition & 1 deletion src/components/dropdown/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,7 @@ export class Dropdown extends Component {
this.overlayClick = false;
}

updateEditableLabel(option) {
updateEditableLabel(option): void {
if(this.editableInput) {
this.editableInput.value = (option ? this.getOptionLabel(option) : this.props.value||'');
}
Expand Down
2 changes: 0 additions & 2 deletions src/components/orderlist/OrderList.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ interface OrderListProps {
listStyle?: object;
responsive?: boolean;
dragdrop?: boolean;
filterBy?: string[];
filterPlaceholder?: string;
onChange?(e: {originalEvent: Event, value: any}): void;
itemTemplate?(item: any): void;
}
Expand Down
6 changes: 1 addition & 5 deletions src/components/orderlist/OrderList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ export class OrderList extends Component {
listStyle: null,
responsive: false,
dragdrop: false,
filterBy: null,
filterPlaceholder: null,
onChange: null,
itemTemplate: null
}
Expand All @@ -32,8 +30,6 @@ export class OrderList extends Component {
listStyle: PropTypes.object,
responsive: PropTypes.bool,
dragdrop: PropTypes.func,
filterBy: PropTypes.array,
filterPlaceholder: PropTypes.string,
onChange: PropTypes.func,
itemTemplate: PropTypes.func
}
Expand Down Expand Up @@ -126,7 +122,7 @@ export class OrderList extends Component {
<OrderListSubList ref={(el) => this.subList = el} value={this.props.value} selection={this.state.selection} onItemClick={this.onItemClick}
itemTemplate={this.props.itemTemplate} header={this.props.header} listStyle={this.props.listStyle}
dragdrop={this.props.dragdrop} onDragStart={this.onDragStart} onDragEnter={this.onDragEnter} onDragEnd={this.onDragEnd} onDragLeave={this.onDragEnter} onDrop={this.onDrop}
onChange={this.props.onChange} filterPlaceholder={this.props.filterPlaceholder} filterBy={this.props.filterBy}/>
onChange={this.props.onChange} />
</div>
);
}
Expand Down
2 changes: 0 additions & 2 deletions src/components/orderlist/OrderListSubList.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ interface OrderListSubListProps {
header?: any;
listStyle?: object;
dragdrop?: boolean;
filterBy?: string[];
filterPlaceholder?: string;
onItemClick?(e: {originalEvent: Event, value: any, index: number}): void;
itemTemplate?(item: any): void;
onChange?(e: {originalEvent: Event, value: any}): void;
Expand Down
71 changes: 9 additions & 62 deletions src/components/orderlist/OrderListSubList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ export class OrderListSubList extends Component {
listStyle: null,
itemTemplate: null,
dragdrop: false,
filterBy: null,
filterPlaceholder: null,
onItemClick: null,
onChange: null
}
Expand All @@ -26,23 +24,17 @@ export class OrderListSubList extends Component {
listStyle: PropTypes.object,
itemTemplate: PropTypes.func,
dragdrop: PropTypes.func,
filterBy: PropTypes.array,
filterPlaceholder: PropTypes.string,
onItemClick: PropTypes.func,
onChange: PropTypes.func
}

constructor(props) {
super(props);
this.state = {
filter: ''
}

this.onDragEnd = this.onDragEnd.bind(this);
this.onDragLeave = this.onDragLeave.bind(this);
this.onDrop = this.onDrop.bind(this);
this.onListMouseMove = this.onListMouseMove.bind(this);
this.onFilterInputChange = this.onFilterInputChange.bind(this);
}

isSelected(item) {
Expand Down Expand Up @@ -102,59 +94,24 @@ export class OrderListSubList extends Component {
}
}

onFilterInputChange(event) {
this.setState({
filter: event.target.value
});
}

hasFilter() {
return this.state.filter && this.state.filter.trim().length > 0;
}

renderDropPoint(item, index, key) {
return (
<li key={key} className="ui-orderlist-droppoint"
onDragOver={(e) => this.onDragOver(e, index + 1)} onDragLeave={this.onDragLeave} onDrop={this.onDrop}></li>
);
}

render() {
let header = null;
let items = null;
let listClassName = classNames('ui-widget-content ui-orderlist-list', {'ui-corner-bottom': this.props.header, 'ui-corner-all': !this.props.header});

renderFilter() {
if (this.props.filterBy) {
return (
<div className="ui-orderlist-filter-container ui-widget-content ng-star-inserted">
<input className="ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" type="text" placeholder={this.props.filterPlaceholder}
onChange={this.onFilterInputChange}></input>
<span className="fa fa-search"></span>
</div>
);
}
else {
return null;
}
}

renderHeader() {
if (this.props.header) {
return (
<div className="ui-orderlist-caption ui-widget-header ui-corner-top">{this.props.header}</div>
);
header = <div className="ui-orderlist-caption ui-widget-header ui-corner-top">{this.props.header}</div>
}
else {
return null;
}
}

renderItems() {
let items = null;
let value = this.props.value;

if (value) {
if (this.hasFilter()) {
value = ObjectUtils.filter(value, this.props.filterBy, this.state.filter);
}

items = value.map((item, i) => {

if (this.props.value) {
items = this.props.value.map((item, i) => {
let content = this.props.itemTemplate ? this.props.itemTemplate(item) : item;
let itemClassName = classNames('ui-orderlist-item', this.props.className, {'ui-state-highlight': this.isSelected(item)});
let key = JSON.stringify(item);
Expand All @@ -179,20 +136,10 @@ export class OrderListSubList extends Component {
}
});
}

return items;
}

render() {
let header = this.renderHeader();
let items = this.renderItems();
let filter = this.renderFilter();
let listClassName = classNames('ui-widget-content ui-orderlist-list', {'ui-corner-bottom': this.props.header, 'ui-corner-all': !this.props.header});

return (
<div className="ui-orderlist-list-container">
{header}
{filter}
<ul ref={(el) => this.listElement = el} className={listClassName} style={this.props.listStyle} onDragOver={this.onListMouseMove}>
{items}
</ul>
Expand Down
1 change: 0 additions & 1 deletion src/components/utils/ObjectUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export default class ObjectUtils {
return null;
}
}

static filter(value, fields, filterValue) {
var filteredItems=[];

Expand Down
28 changes: 6 additions & 22 deletions src/showcase/orderlist/OrderListDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export class OrderListDemo extends Component {

<div className="content-section implementation">
<OrderList value={this.state.cars} dragdrop={true} itemTemplate={this.carTemplate}
responsive={true} header="Responsive Cars" listStyle={{ height: '20em' }} filterBy={['brand']}
responsive={true} header="Responsive Cars" listStyle={{ height: '20em' }}
onChange={(e) => this.setState({cars: e.value})}></OrderList>
</div>

Expand Down Expand Up @@ -79,28 +79,18 @@ import {OrderList} from 'primereact/components/orderlist/OrderList';
</p>
<CodeHighlight className="html">
{`
<OrderList value={this.state.cars} itemTemplate={this.carTemplate.bind(this)} header="Cars" onChange={(e) => this.setState({cars: e.value})}></OrderList>
<OrderList value={this.state.cars} itemTemplate={this.carTemplate.bind(this)} header="Responsive Cars" onChange={(e) => this.setState({cars: e.value})}></OrderList>
`}
</CodeHighlight>

<h3>DragDrop</h3>
<p>Items can be reordered using drag and drop by enabling dragdrop property.</p>
<p>Items can be reordered using drag and drop by enabling dragdrop property along with dragdropScope to avoid conflicts with other drag drop events on view.</p>

<CodeHighlight className="html">
{`
<OrderList value={this.state.cars} itemTemplate={this.carTemplate.bind(this)} dragdrop={true} onChange={(e) => this.setState({cars: e.value})}></OrderList>
`}
</CodeHighlight>

<h3>Filtering</h3>
<p>Items can be filtered using an input field by enabling the filterBy property that specifies the fields to use in filtering.</p>
<CodeHighlight className="html">
{`
<OrderList value={this.state.cars} itemTemplate={this.carTemplate.bind(this)} header="Cars" onChange={(e) => this.setState({cars: e.value})}
filterBy={['brand', 'year']} filterPlaceholder="Filter by brand or year"></OrderList>
`}
</CodeHighlight>

Expand Down Expand Up @@ -174,16 +164,10 @@ import {OrderList} from 'primereact/components/orderlist/OrderList';
<td>Whether to enable dragdrop based reordering.</td>
</tr>
<tr>
<td>filterBy</td>
<td>array</td>
<td>null</td>
<td>When specified displays an input field to filter the items on keyup and decides which fields to search against.</td>
</tr>
<tr>
<td>filterPlaceholder</td>
<td>dragdropScope</td>
<td>string</td>
<td>null</td>
<td>Placeholder text on filter input.</td>
<td>Unique key of drag drop events to avoid conflict with other drag drop events on the page.</td>
</tr>
<tr>
<td>itemTemplate</td>
Expand Down Expand Up @@ -292,7 +276,7 @@ export class OrderListDemo extends Component {
render() {
return (
<OrderList value={this.state.cars} dragdrop={true} itemTemplate={this.carTemplate}
responsive={true} header="Responsive Cars" listStyle={{ height: '20em' }} filter={true} filterBy={['brand']}
responsive={true} header="Responsive Cars" listStyle={{ height: '20em' }}
onChange={(e) => this.setState({cars: e.value})}></OrderList>
);
}
Expand Down

0 comments on commit de92e39

Please sign in to comment.