@appbuckets/react-ui
Version:
Just Another React UI Framework
163 lines (157 loc) • 4.47 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(
n,
k,
d.get
? d
: {
enumerable: true,
get: function () {
return e[k];
},
}
);
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/ _interopNamespace(React);
/* --------
* Hook Definition
* -------- */
function useDataFiltering(enabled, config) {
var columns = config.columns,
data = config.data,
filterLogic = config.filterLogic;
// ----
// Internal State
// ----
var _a = tslib.__read(
React__namespace.useState(
columns.reduce(function (acc, column) {
if (column.filter) {
acc[column.key] = column.filter.initialValue;
}
return acc;
}, {})
),
2
),
filters = _a[0],
setFilteringValues = _a[1];
// ----
// Handlers
// ----
var setFilter = React__namespace.useCallback(
function (columnKey, value) {
setFilteringValues(function (curr) {
var _a;
return tslib.__assign(
tslib.__assign({}, curr),
((_a = {}), (_a[columnKey] = value), _a)
);
});
},
[setFilteringValues]
);
// ----
// Filtering Data
// ----
var filteredData = React__namespace.useMemo(
function () {
/** If no filter, return entire data */
if (!enabled) {
return data;
}
/** Init a regexp pool to save regexp once per time */
var regExpPool = {};
/** Get only filter columns */
var filterColumns = columns.filter(function (column) {
if (!column.filter) {
return false;
}
if (column.filter.type === 'input') {
return (
typeof filters[column.key] === 'string' &&
!!filters[column.key].length
);
}
if (column.filter.type === 'regexp') {
/** Get current value */
var value = filters[column.key];
/** If is invalid, abort */
if (typeof value !== 'string' || !value.length) {
return false;
}
/** If value is valid, save the regexp into pool */
regExpPool[column.key] = new RegExp(
value.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d'),
column.filter.flags || 'i'
);
return true;
}
if (column.filter.type === 'checkbox') {
return (
typeof filters[column.key] === 'boolean' && !!filters[column.key]
);
}
if (column.filter.type === 'select') {
return (
filters[column.key] !== null && filters[column.key] !== undefined
);
}
if (column.filter.type === 'multi-select') {
return (
Array.isArray(filters[column.key]) && filters[column.key].length > 0
);
}
return false;
});
/** If no columns are able to filter data, return entire data set */
if (!filterColumns.length) {
return data;
}
/** Filter data using columns */
return data.filter(function (row, index, array) {
return filterColumns.reduce(function (show, next) {
/** Assert filter realy exists */
if (!next.filter) {
return show;
}
/** Get the filter show value */
var couldShowNext =
next.filter.type === 'regexp'
? !!regExpPool[next.key]
? next.filter.show(regExpPool[next.key], row, index, array)
: true
: next.filter.show(filters[next.key], row, index, array);
/** Concatenate result */
return filterLogic === 'and'
? show && couldShowNext
: show || couldShowNext;
}, filterLogic === 'and');
});
},
[columns, data, filterLogic, filters, enabled]
);
// ----
// Return tools
// ----
return {
filteredData: filteredData,
filters: filters,
setFilter: setFilter,
};
}
module.exports = useDataFiltering;