Fixed #2368 - Improve DataTable implementation

src/components/api/Api.js

@@ -2,7 +2,10 @@ import PrimeReact from './PrimeReact';
 import { locale, addLocale, localeOption, localeOptions, updateLocaleOption, updateLocaleOptions } from './Locale';
 import { PrimeIcons } from './PrimeIcons';
 import { MessageSeverity } from './MessageSeverity';
+import { FilterMatchMode } from './FilterMatchMode';
+import { FilterOperator } from './FilterOperator';
+import { FilterService } from './FilterService'
 
 export default PrimeReact;
 
-export { locale, addLocale, localeOption, localeOptions, updateLocaleOption, updateLocaleOptions, PrimeIcons, MessageSeverity };
+export { locale, addLocale, localeOption, localeOptions, updateLocaleOption, updateLocaleOptions, PrimeIcons, MessageSeverity, FilterMatchMode, FilterOperator, FilterService };

src/components/api/FilterMatchMode.js

@@ -0,0 +1,19 @@
+export const FilterMatchMode = Object.freeze({
+    STARTS_WITH : 'startsWith',
+    CONTAINS : 'contains',
+    NOT_CONTAINS : 'notContains',
+    ENDS_WITH : 'endsWith',
+    EQUALS : 'equals',
+    NOT_EQUALS : 'notEquals',
+    IN : 'in',
+    LESS_THAN : 'lt',
+    LESS_THAN_OR_EQUAL_TO : 'lte',
+    GREATER_THAN : 'gt',
+    GREATER_THAN_OR_EQUAL_TO : 'gte',
+    BETWEEN : 'between',
+    DATE_IS : 'dateIs',
+    DATE_IS_NOT : 'dateIsNot',
+    DATE_BEFORE : 'dateBefore',
+    DATE_AFTER : 'dateAfter',
+    CUSTOM: 'custom'
+});

src/components/api/FilterOperator.js

@@ -0,0 +1,4 @@
+export const FilterOperator = Object.freeze({
+    AND: 'and',
+    OR: 'or'
+});

src/components/api/FilterService.js

@@ -0,0 +1,238 @@
+import { ObjectUtils } from '../utils/Utils';
+
+export const FilterService = {
+    filter(value, fields, filterValue, filterMatchMode, filterLocale) {
+        let filteredItems = [];
+
+        if (value) {
+            for (let item of value) {
+                for (let field of fields) {
+                    let fieldValue = ObjectUtils.resolveFieldData(item, field);
+
+                    if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
+                        filteredItems.push(item);
+                        break;
+                    }
+                }
+            }
+        }
+
+        return filteredItems;
+    },
+    filters: {
+        startsWith(value, filter, filterLocale)  {
+            if (filter === undefined || filter === null || filter.trim() === '') {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.slice(0, filterValue.length) === filterValue;
+        },
+        contains(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue) !== -1;
+        },
+        notContains(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue) === -1;
+        },
+        endsWith(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || filter.trim() === '') {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
+        },
+        equals(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() === filter.getTime();
+            else
+                return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+        },
+        notEquals(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return false;
+            }
+
+            if (value === undefined || value === null) {
+                return true;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() !== filter.getTime();
+            else
+                return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+        },
+        in(value, filter) {
+            if (filter === undefined || filter === null || filter.length === 0) {
+                return true;
+            }
+
+            for (let i = 0; i < filter.length; i++) {
+                if (ObjectUtils.equals(value, filter[i])) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
+        between(value, filter) {
+            if (filter == null || filter[0] == null || filter[1] == null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime)
+                return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
+            else
+                return filter[0] <= value && value <= filter[1];
+        },
+        lt(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() < filter.getTime();
+            else
+                return value < filter;
+        },
+        lte(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() <= filter.getTime();
+            else
+                return value <= filter;
+        },
+        gt(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() > filter.getTime();
+            else
+                return value > filter;
+        },
+        gte(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime)
+                return value.getTime() >= filter.getTime();
+            else
+                return value >= filter;
+        },
+        dateIs(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.toDateString() === filter.toDateString();
+        },
+        dateIsNot(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.toDateString() !== filter.toDateString();
+        },
+        dateBefore(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.getTime() < filter.getTime();
+        },
+        dateAfter(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.getTime() > filter.getTime();
+        }
+    },
+    register(rule, fn) {
+        this.filters[rule] = fn;
+    }
+};

src/components/api/Locale.js

@@ -2,6 +2,28 @@ import PrimeReact from './PrimeReact';
 
 let locales = {
     'en': {
+        startsWith: 'Starts with',
+        contains: 'Contains',
+        notContains: 'Not contains',
+        endsWith: 'Ends with',
+        equals: 'Equals',
+        notEquals: 'Not equals',
+        noFilter: 'No Filter',
+        lt: 'Less than',
+        lte: 'Less than or equal to',
+        gt: 'Greater than',
+        gte: 'Greater than or equal to',
+        dateIs: 'Date is',
+        dateIsNot: 'Date is not',
+        dateBefore: 'Date is before',
+        dateAfter: 'Date is after',
+        custom: 'Custom',
+        clear: 'Clear',
+        apply: 'Apply',
+        matchAll: 'Match All',
+        matchAny: 'Match Any',
+        addRule: 'Add Rule',
+        removeRule: 'Remove Rule',
         accept: 'Yes',
         reject: 'No',
         choose: 'Choose',
@@ -13,21 +35,20 @@ let locales = {
         monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'],
         monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         today: 'Today',
-        clear: 'Clear',
         weekHeader: 'Wk',
         firstDayOfWeek: 0,
         dateFormat: 'mm/dd/yy',
         weak: 'Weak',
         medium: 'Medium',
         strong: 'Strong',
-        passwordPrompt: 'Enter a password'
+        passwordPrompt: 'Enter a password',
+        emptyFilterMessage: 'No results found',
+        emptyMessage: 'No available options'
     }
 };
 
 function locale(locale) {
-    if (locale) {
-        PrimeReact.locale = locale;
-    }
+    locale && (PrimeReact.locale = locale);
 
     return {
         locale: PrimeReact.locale,
@@ -49,11 +70,13 @@ function updateLocaleOptions(options, locale) {
 }
 
 function localeOption(key, locale) {
+    const _locale = locale || PrimeReact.locale;
+
     try {
-        return localeOptions(locale)[key];
+        return localeOptions(_locale)[key];
     }
     catch(error) {
-        throw new Error(`The ${key} option is not found in the current locale('${locale || PrimeReact.locale}').`);
+        throw new Error(`The ${key} option is not found in the current locale('${_locale}').`);
     }
 }
 

src/components/api/PrimeReact.js

@@ -1,9 +1,15 @@
+import { FilterMatchMode } from './FilterMatchMode';
+
 export default class PrimeReact {
 
     static ripple = false;
 
+    static inputStyle = 'outlined';
+
     static locale = 'en';
 
+    static appendTo = null;
+
     static autoZIndex = true;
 
     static zIndex = {
@@ -14,5 +20,28 @@ export default class PrimeReact {
         toast: 1200
     }
 
-    static appendTo = null;
+    static filterMatchModeOptions = {
+        text: [
+            FilterMatchMode.STARTS_WITH,
+            FilterMatchMode.CONTAINS,
+            FilterMatchMode.NOT_CONTAINS,
+            FilterMatchMode.ENDS_WITH,
+            FilterMatchMode.EQUALS,
+            FilterMatchMode.NOT_EQUALS
+        ],
+        numeric: [
+            FilterMatchMode.EQUALS,
+            FilterMatchMode.NOT_EQUALS,
+            FilterMatchMode.LESS_THAN,
+            FilterMatchMode.LESS_THAN_OR_EQUAL_TO,
+            FilterMatchMode.GREATER_THAN,
+            FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
+        ],
+        date: [
+            FilterMatchMode.DATE_IS,
+            FilterMatchMode.DATE_IS_NOT,
+            FilterMatchMode.DATE_BEFORE,
+            FilterMatchMode.DATE_AFTER
+        ]
+    }
 }