Skip to content

Commit

Permalink
Fixed #1337 - Add filterLocale property to TreeTable
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Apr 17, 2020
1 parent f4ac55e commit 0cab565
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 41 deletions.
1 change: 1 addition & 0 deletions src/components/treetable/TreeTable.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ interface TreeTableProps {
filters?: object;
globalFilter?: any;
filterMode?: string;
filterLocale?: string;
onFilter?(filters: any[]): void;
onExpand?(e: {originalEvent: Event, node: TreeNode}): void;
onCollapse?(e: {originalEvent: Event, node: TreeNode}): void;
Expand Down
84 changes: 43 additions & 41 deletions src/components/treetable/TreeTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import ObjectUtils from '../utils/ObjectUtils';
import FilterUtils from '../utils/FilterUtils';
import DomHandler from '../utils/DomHandler';
import { Paginator } from '../paginator/Paginator';
import { TreeTableHeader } from './TreeTableHeader';
import { TreeTableBody } from './TreeTableBody';
import { TreeTableFooter } from './TreeTableFooter';
import { TreeTableScrollableView} from './TreeTableScrollableView';
import { TreeTableHeader } from './TreeTableHeader';
import { TreeTableBody } from './TreeTableBody';
import { TreeTableFooter } from './TreeTableFooter';
import { TreeTableScrollableView} from './TreeTableScrollableView';

export class TreeTable extends Component {

static defaultProps = {
id: null,
value: null,
Expand Down Expand Up @@ -65,6 +65,7 @@ export class TreeTable extends Component {
filters: null,
globalFilter: null,
filterMode: 'lenient',
filterLocale: undefined,
onFilter: null,
onExpand: null,
onCollapse: null,
Expand Down Expand Up @@ -134,6 +135,7 @@ export class TreeTable extends Component {
filters: PropTypes.object,
globalFilter: PropTypes.any,
filterMode: PropTypes.string,
filterLocale: PropTypes.string,
onFilter: PropTypes.func,
onExpand: PropTypes.func,
onCollapse: PropTypes.func,
Expand Down Expand Up @@ -225,7 +227,7 @@ export class TreeTable extends Component {

multiSortMeta = this.addSortMeta({field: sortField, order: sortOrder}, multiSortMeta);
}

if (this.props.onSort) {
this.props.onSort({
sortField: sortField,
Expand Down Expand Up @@ -349,7 +351,7 @@ export class TreeTable extends Component {
return (multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
else
result = (value1 < value2) ? -1 : 1;
}
}
}

return (multiSortMeta[index].order * result);
Expand All @@ -366,7 +368,7 @@ export class TreeTable extends Component {
onFilter(event) {
let currentFilters = this.getFilters();
let newFilters = currentFilters ? {...currentFilters} : {};

if(!this.isFilterBlank(event.value))
newFilters[event.field] = {value: event.value, matchMode: event.matchMode};
else if(newFilters[event.field])
Expand Down Expand Up @@ -397,7 +399,7 @@ export class TreeTable extends Component {
return true;
else
return false;
}
}
return true;
}

Expand All @@ -417,7 +419,7 @@ export class TreeTable extends Component {
this.resizerHelper.style.height = this.container.offsetHeight + 'px';
this.resizerHelper.style.top = 0 + 'px';
this.resizerHelper.style.left = (event.pageX - containerLeft + this.container.scrollLeft) + 'px';

this.resizerHelper.style.display = 'block';
}

Expand All @@ -431,7 +433,7 @@ export class TreeTable extends Component {
if(this.props.columnResizeMode === 'fit') {
let nextColumn = this.resizeColumn.nextElementSibling;
let nextColumnWidth = nextColumn.offsetWidth - delta;

if(newColumnWidth > 15 && nextColumnWidth > 15) {
if(this.props.scrollable) {
let scrollableView = this.findParentScrollableView(this.resizeColumn);
Expand Down Expand Up @@ -473,8 +475,8 @@ export class TreeTable extends Component {
this.table.style.width = this.table.offsetWidth + delta + 'px';
this.resizeColumn.style.width = newColumnWidth + 'px';
}
}
}

if(this.props.onColumnResizeEnd) {
this.props.onColumnResizeEnd({
element: this.resizeColumn,
Expand All @@ -483,7 +485,7 @@ export class TreeTable extends Component {
});
}
}

this.resizerHelper.style.display = 'none';
this.resizeColumn = null;
this.resizeColumnProps = null;
Expand Down Expand Up @@ -514,7 +516,7 @@ export class TreeTable extends Component {
let col = colGroup.children[resizeColumnIndex];
let nextCol = col.nextElementSibling;
col.style.width = newColumnWidth + 'px';

if (nextCol && nextColumnWidth) {
nextCol.style.width = nextColumnWidth + 'px';
}
Expand All @@ -531,7 +533,7 @@ export class TreeTable extends Component {
this.onColumnResize(event);
}
});

this.documentColumnResizeEndListener = document.addEventListener('mouseup', (event) => {
if(this.columnResizing) {
this.columnResizing = false;
Expand All @@ -550,26 +552,26 @@ export class TreeTable extends Component {
event.preventDefault();
return;
}

this.iconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
this.iconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);

this.draggedColumn = this.findParentHeader(event.target);
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
}

onColumnDragOver(event) {
let dropHeader = this.findParentHeader(event.target);
if(this.props.reorderableColumns && this.draggedColumn && dropHeader) {
event.preventDefault();
let containerOffset = DomHandler.getOffset(this.container);
let dropHeaderOffset = DomHandler.getOffset(dropHeader);

if(this.draggedColumn !== dropHeader) {
let targetLeft = dropHeaderOffset.left - containerOffset.left;
//let targetTop = containerOffset.top - dropHeaderOffset.top;
let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;

this.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.iconHeight - 1) + 'px';
this.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';

Expand All @@ -583,21 +585,21 @@ export class TreeTable extends Component {
this.reorderIndicatorDown.style.left = (targetLeft - Math.ceil(this.iconWidth / 2))+ 'px';
this.dropPosition = -1;
}

this.reorderIndicatorUp.style.display = 'block';
this.reorderIndicatorDown.style.display = 'block';
}
}
}

onColumnDragLeave(event) {
if(this.props.reorderableColumns && this.draggedColumn) {
event.preventDefault();
this.reorderIndicatorUp.style.display = 'none';
this.reorderIndicatorDown.style.display = 'none';
}
}

onColumnDrop(event) {
event.preventDefault();
if(this.draggedColumn) {
Expand All @@ -607,19 +609,19 @@ export class TreeTable extends Component {
if(allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dragIndex - dropIndex === 1 && this.dropPosition === 1))) {
allowDrop = false;
}

if(allowDrop) {
let columns = this.state.columnOrder ? this.getColumns() : React.Children.toArray(this.props.children);
ObjectUtils.reorderArray(columns, dragIndex, dropIndex);
let columnOrder = [];
for(let column of columns) {
columnOrder.push(column.props.columnKey||column.props.field);
}

this.setState({
columnOrder: columnOrder
});

if (this.props.onColReorder) {
this.props.onColReorder({
dragIndex: dragIndex,
Expand All @@ -628,7 +630,7 @@ export class TreeTable extends Component {
});
}
}

this.reorderIndicatorUp.style.display = 'none';
this.reorderIndicatorDown.style.display = 'none';
this.draggedColumn.draggable = false;
Expand Down Expand Up @@ -688,13 +690,13 @@ export class TreeTable extends Component {
}
}
}

return null;
}

getColumns() {
let columns = React.Children.toArray(this.props.children);

if(this.props.reorderableColumns && this.state.columnOrder) {
let orderedColumns = [];
for(let i = 0; i < this.state.columnOrder.length; i++) {
Expand Down Expand Up @@ -767,7 +769,7 @@ export class TreeTable extends Component {
let filterMeta = filters ? filters[col.props.field] : null;
let filterField = col.props.field;
let filterValue, filterConstraint, paramsWithoutNode;

//local
if (filterMeta) {
let filterMatchMode = filterMeta.matchMode || col.props.filterMatchMode;
Expand Down Expand Up @@ -827,7 +829,7 @@ export class TreeTable extends Component {
}
}
}

if (matched) {
return true;
}
Expand All @@ -837,7 +839,7 @@ export class TreeTable extends Component {
isFilterMatched(node, {filterField, filterValue, filterConstraint, isStrictMode}) {
let matched = false;
let dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
if (filterConstraint(dataFieldValue, filterValue)) {
if (filterConstraint(dataFieldValue, filterValue, this.props.filterLocale)) {
matched = true;
}

Expand Down Expand Up @@ -878,10 +880,10 @@ export class TreeTable extends Component {
return (
<TreeTableHeader columns={columns} columnGroup={columnGroup} tabIndex={this.props.tabIndex}
onSort={this.onSort} sortField={this.getSortField()} sortOrder={this.getSortOrder()} multiSortMeta={this.getMultiSortMeta()}
resizableColumns={this.props.resizableColumns} onResizeStart={this.onColumnResizeStart}
reorderableColumns={this.props.reorderableColumns} onDragStart={this.onColumnDragStart}
resizableColumns={this.props.resizableColumns} onResizeStart={this.onColumnResizeStart}
reorderableColumns={this.props.reorderableColumns} onDragStart={this.onColumnDragStart}
onDragOver={this.onColumnDragOver} onDragLeave={this.onColumnDragLeave} onDrop={this.onColumnDrop}
onFilter={this.onFilter} filters={this.getFilters()}/>
onFilter={this.onFilter} filters={this.getFilters()}/>
);
}

Expand All @@ -893,9 +895,9 @@ export class TreeTable extends Component {

createTableBody(value, columns) {
return (
<TreeTableBody value={value} columns={columns} expandedKeys={this.getExpandedKeys()}
<TreeTableBody value={value} columns={columns} expandedKeys={this.getExpandedKeys()}
onToggle={this.onToggle} onExpand={this.props.onExpand} onCollapse={this.props.onCollapse}
paginator={this.props.paginator} first={this.getFirst()} rows={this.getRows()}
paginator={this.props.paginator} first={this.getFirst()} rows={this.getRows()}
selectionMode={this.props.selectionMode} selectionKeys={this.props.selectionKeys} onSelectionChange={this.props.onSelectionChange}
metaKeySelection={this.props.metaKeySelection} onRowClick={this.props.onRowClick} onSelect={this.props.onSelect} onUnselect={this.props.onUnselect}
propagateSelectionUp={this.props.propagateSelectionUp} propagateSelectionDown={this.props.propagateSelectionDown}
Expand All @@ -908,7 +910,7 @@ export class TreeTable extends Component {
const className = 'p-paginator-' + position;

return (
<Paginator first={this.getFirst()} rows={this.getRows()} pageLinkSize={this.props.pageLinkSize} className={className}
<Paginator first={this.getFirst()} rows={this.getRows()} pageLinkSize={this.props.pageLinkSize} className={className}
onPageChange={this.onPageChange} template={this.props.paginatorTemplate}
totalRecords={totalRecords} rowsPerPageOptions={this.props.rowsPerPageOptions} currentPageReportTemplate={this.props.currentPageReportTemplate}
leftContent={this.props.paginatorLeft} rightContent={this.props.paginatorRight} alwaysShow={this.props.alwaysShowPaginator} />
Expand Down Expand Up @@ -936,7 +938,7 @@ export class TreeTable extends Component {
}

scrollableView = this.createScrollableView(value, scrollableColumns, false, this.props.headerColumnGroup, this.props.footerColumnGroup);

return (
<div className="p-treetable-scrollable-wrapper">
{frozenView}
Expand Down Expand Up @@ -972,7 +974,7 @@ export class TreeTable extends Component {
renderLoader() {
if (this.props.loading) {
const iconClassName = classNames('p-treetable-loading-icon pi-spin', this.props.loadingIcon);

return (
<div className="p-treetable-loading">
<div className="p-treetable-loading-overlay p-component-overlay"></div>
Expand Down Expand Up @@ -1020,4 +1022,4 @@ export class TreeTable extends Component {
</div>
);
}
}
}

0 comments on commit 0cab565

Please sign in to comment.