funuicss 3.5.0 → 3.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ui/table/Query.d.ts +3 -2
- package/ui/table/Query.js +64 -11
- package/ui/table/Table.d.ts +3 -1
- package/ui/table/Table.js +26 -42
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.5.
|
|
2
|
+
"version": "3.5.1",
|
|
3
3
|
"name": "funuicss",
|
|
4
4
|
"description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
|
|
5
5
|
"main": "index.js",
|
package/ui/table/Query.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
interface DataConfig {
|
|
2
2
|
fields: string[];
|
|
3
|
+
priorityFields?: string[];
|
|
3
4
|
}
|
|
4
5
|
type GetNestedValueFunction = (obj: any, path: string) => any;
|
|
5
|
-
export declare const getAdvancedFilteredData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction) => T[];
|
|
6
|
-
export declare const getFilteredAndPaginatedData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction, startIndex?: number, endIndex?: number) => T[];
|
|
6
|
+
export declare const getAdvancedFilteredData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction, priorityFields?: string[]) => T[];
|
|
7
|
+
export declare const getFilteredAndPaginatedData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction, startIndex?: number, endIndex?: number, priorityFields?: string[]) => T[];
|
|
7
8
|
export {};
|
package/ui/table/Query.js
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getFilteredAndPaginatedData = exports.getAdvancedFilteredData = void 0;
|
|
4
|
+
// Helper function to check if a nested field exists
|
|
5
|
+
var fieldExists = function (obj, path, getNestedValue) {
|
|
6
|
+
try {
|
|
7
|
+
var value = getNestedValue(obj, path);
|
|
8
|
+
return value !== null && value !== undefined;
|
|
9
|
+
}
|
|
10
|
+
catch (error) {
|
|
11
|
+
return false;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
4
14
|
// Simple Levenshtein distance function for fuzzy matching
|
|
5
15
|
var levenshteinDistance = function (str1, str2) {
|
|
6
16
|
var matrix = Array(str2.length + 1).fill(null).map(function () {
|
|
@@ -92,8 +102,9 @@ var searchStrategies = [
|
|
|
92
102
|
});
|
|
93
103
|
},
|
|
94
104
|
];
|
|
95
|
-
// MAIN FUNCTION:
|
|
96
|
-
var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNestedValue
|
|
105
|
+
// MAIN FUNCTION: Enhanced with priority fields support
|
|
106
|
+
var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNestedValue, priorityFields // New optional parameter for priority fields
|
|
107
|
+
) {
|
|
97
108
|
return filteredData.filter(function (mdoc, index) {
|
|
98
109
|
if (searchQuery) {
|
|
99
110
|
// Convert search query to lowercase for case-insensitive search
|
|
@@ -102,27 +113,68 @@ var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNest
|
|
|
102
113
|
return true; // If empty query after trim, show all
|
|
103
114
|
// Split query into multiple terms for multi-term search
|
|
104
115
|
var queryTerms_1 = query_1.split(/\s+/).filter(function (term) { return term.length > 0; });
|
|
105
|
-
//
|
|
106
|
-
|
|
116
|
+
// Determine which fields to search and in what order
|
|
117
|
+
var fieldsToSearch = [];
|
|
118
|
+
if (priorityFields && priorityFields.length > 0) {
|
|
119
|
+
// First add priority fields that exist in the data config and in the object
|
|
120
|
+
var validPriorityFields = priorityFields.filter(function (field) {
|
|
121
|
+
return data.fields.includes(field) && fieldExists(mdoc, field, getNestedValue);
|
|
122
|
+
});
|
|
123
|
+
fieldsToSearch.push.apply(fieldsToSearch, validPriorityFields);
|
|
124
|
+
// Then add remaining fields from data.fields that aren't in priority and exist in the object
|
|
125
|
+
var remainingFields = data.fields.filter(function (field) {
|
|
126
|
+
return !priorityFields.includes(field) && fieldExists(mdoc, field, getNestedValue);
|
|
127
|
+
});
|
|
128
|
+
fieldsToSearch.push.apply(fieldsToSearch, remainingFields);
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
// Use data.priorityFields if available, otherwise use data.fields
|
|
132
|
+
var priorityFromConfig_1 = data.priorityFields || [];
|
|
133
|
+
if (priorityFromConfig_1.length > 0) {
|
|
134
|
+
var validPriorityFields = priorityFromConfig_1.filter(function (field) {
|
|
135
|
+
return data.fields.includes(field) && fieldExists(mdoc, field, getNestedValue);
|
|
136
|
+
});
|
|
137
|
+
fieldsToSearch.push.apply(fieldsToSearch, validPriorityFields);
|
|
138
|
+
var remainingFields = data.fields.filter(function (field) {
|
|
139
|
+
return !priorityFromConfig_1.includes(field) && fieldExists(mdoc, field, getNestedValue);
|
|
140
|
+
});
|
|
141
|
+
fieldsToSearch.push.apply(fieldsToSearch, remainingFields);
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
// Just use fields that exist in the object
|
|
145
|
+
fieldsToSearch = data.fields.filter(function (field) { return fieldExists(mdoc, field, getNestedValue); });
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
var _loop_1 = function (field) {
|
|
107
149
|
try {
|
|
108
150
|
// Get the value using the same getNestedValue function used for display
|
|
109
151
|
var value = getNestedValue(mdoc, field);
|
|
110
152
|
// Convert value to string and search
|
|
111
153
|
if (value !== null && value !== undefined) {
|
|
112
154
|
var stringValue_1 = String(value).toLowerCase();
|
|
113
|
-
// Use advanced search strategies
|
|
114
|
-
|
|
155
|
+
// Use advanced search strategies
|
|
156
|
+
var foundMatch = searchStrategies.some(function (strategy) {
|
|
115
157
|
return strategy(stringValue_1, query_1, queryTerms_1);
|
|
116
158
|
});
|
|
159
|
+
if (foundMatch) {
|
|
160
|
+
return { value: true };
|
|
161
|
+
}
|
|
117
162
|
}
|
|
118
|
-
return false;
|
|
119
163
|
}
|
|
120
164
|
catch (error) {
|
|
121
165
|
// Handle any errors in accessing nested values
|
|
122
166
|
console.warn("Error accessing field ".concat(field, ":"), error);
|
|
123
|
-
return
|
|
167
|
+
return "continue";
|
|
124
168
|
}
|
|
125
|
-
}
|
|
169
|
+
};
|
|
170
|
+
// Search through fields in priority order - return true on first match
|
|
171
|
+
for (var _i = 0, fieldsToSearch_1 = fieldsToSearch; _i < fieldsToSearch_1.length; _i++) {
|
|
172
|
+
var field = fieldsToSearch_1[_i];
|
|
173
|
+
var state_1 = _loop_1(field);
|
|
174
|
+
if (typeof state_1 === "object")
|
|
175
|
+
return state_1.value;
|
|
176
|
+
}
|
|
177
|
+
return false; // No matches found in any field
|
|
126
178
|
}
|
|
127
179
|
else {
|
|
128
180
|
return true; // If no search query, return all items
|
|
@@ -131,9 +183,10 @@ var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNest
|
|
|
131
183
|
};
|
|
132
184
|
exports.getAdvancedFilteredData = getAdvancedFilteredData;
|
|
133
185
|
// Optional: Simplified version with pagination built-in
|
|
134
|
-
var getFilteredAndPaginatedData = function (filteredData, searchQuery, data, getNestedValue, startIndex, endIndex
|
|
186
|
+
var getFilteredAndPaginatedData = function (filteredData, searchQuery, data, getNestedValue, startIndex, endIndex, priorityFields // Added priority fields parameter
|
|
187
|
+
) {
|
|
135
188
|
if (startIndex === void 0) { startIndex = 0; }
|
|
136
|
-
var filtered = (0, exports.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue);
|
|
189
|
+
var filtered = (0, exports.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, priorityFields);
|
|
137
190
|
return endIndex !== undefined ? filtered.slice(startIndex, endIndex) : filtered.slice(startIndex);
|
|
138
191
|
};
|
|
139
192
|
exports.getFilteredAndPaginatedData = getFilteredAndPaginatedData;
|
package/ui/table/Table.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ type TableProps = {
|
|
|
18
18
|
"funcss": string[];
|
|
19
19
|
};
|
|
20
20
|
filterOnchange?: (filter?: any, value?: any, totals?: number) => {};
|
|
21
|
+
clearSearch?: boolean;
|
|
21
22
|
head?: React.ReactNode;
|
|
22
23
|
right?: React.ReactNode;
|
|
23
24
|
body?: React.ReactNode;
|
|
@@ -34,8 +35,9 @@ type TableProps = {
|
|
|
34
35
|
onClick?: (data: any) => void;
|
|
35
36
|
}[];
|
|
36
37
|
filterableFields?: string[];
|
|
38
|
+
prioritizeSearchFields?: string[];
|
|
37
39
|
};
|
|
38
40
|
export default function Table({ children, funcss, bordered, noStripped, hoverable, title, showTotal, light, dark, head, body, data, isLoading, right, hideExport, height, pageSize, // Default page size,
|
|
39
41
|
customColumns, filterableFields, // New prop
|
|
40
|
-
emptyResponse, filterOnchange, ...rest }: TableProps): React.JSX.Element;
|
|
42
|
+
emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, ...rest }: TableProps): React.JSX.Element;
|
|
41
43
|
export {};
|
package/ui/table/Table.js
CHANGED
|
@@ -95,20 +95,25 @@ function Table(_a) {
|
|
|
95
95
|
var _b, _c;
|
|
96
96
|
var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, _d = _a.title, title = _d === void 0 ? "" : _d, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, right = _a.right, hideExport = _a.hideExport, height = _a.height, _f = _a.pageSize, pageSize = _f === void 0 ? data ? 10 : 0 : _f, // Default page size,
|
|
97
97
|
customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
|
|
98
|
-
emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange"]);
|
|
98
|
+
emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields"]);
|
|
99
99
|
// Check if data is null or undefined before accessing its properties
|
|
100
100
|
// Replace this in your component
|
|
101
|
-
var
|
|
102
|
-
var
|
|
101
|
+
var _h = (0, react_1.useState)(''), search = _h[0], setSearch = _h[1];
|
|
102
|
+
var _j = (0, react_1.useState)(1), currentPage = _j[0], setCurrentPage = _j[1];
|
|
103
103
|
// Determine the total number of pages based on data length and page size
|
|
104
104
|
var totalPages = data ? Math.ceil((((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.length) || 0) / pageSize) : 0;
|
|
105
105
|
// Calculate start and end indices for data pagination
|
|
106
106
|
var startIndex = data ? (currentPage - 1) * pageSize : 0;
|
|
107
107
|
var endIndex = data ? Math.min(startIndex + pageSize, ((_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.length) || 0) : 0;
|
|
108
|
-
var
|
|
109
|
-
var
|
|
110
|
-
var
|
|
111
|
-
var
|
|
108
|
+
var _k = (0, react_1.useState)(null), selectedField = _k[0], setSelectedField = _k[1];
|
|
109
|
+
var _l = (0, react_1.useState)(null), selectedValue = _l[0], setSelectedValue = _l[1];
|
|
110
|
+
var _m = (0, react_1.useState)(true), showSearch = _m[0], setshowSearch = _m[1];
|
|
111
|
+
var _o = (0, react_1.useState)(""), searchQuery = _o[0], setsearchQuery = _o[1];
|
|
112
|
+
React.useEffect(function () {
|
|
113
|
+
if (clearSearch) {
|
|
114
|
+
setsearchQuery('');
|
|
115
|
+
}
|
|
116
|
+
}, [clearSearch]);
|
|
112
117
|
// Enhanced filter logic:
|
|
113
118
|
var normalize = function (val) { return val === null || val === void 0 ? void 0 : val.toString().toLowerCase().trim(); };
|
|
114
119
|
var matchesSearch = function (item) {
|
|
@@ -269,41 +274,20 @@ function Table(_a) {
|
|
|
269
274
|
head && React.createElement(Head_1.default, null, head),
|
|
270
275
|
body && React.createElement(Body_1.default, null, body),
|
|
271
276
|
data &&
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
// }
|
|
287
|
-
// return false;
|
|
288
|
-
// } catch (error) {
|
|
289
|
-
// // Handle any errors in accessing nested values
|
|
290
|
-
// console.warn(`Error accessing field ${field}:`, error);
|
|
291
|
-
// return false;
|
|
292
|
-
// }
|
|
293
|
-
// });
|
|
294
|
-
// } else {
|
|
295
|
-
// return true; // If no search query, return all items
|
|
296
|
-
// }
|
|
297
|
-
// })
|
|
298
|
-
(0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue).slice(startIndex, endIndex).map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index },
|
|
299
|
-
data.fields.map(function (fdoc, findex) {
|
|
300
|
-
var _a;
|
|
301
|
-
return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));
|
|
302
|
-
}),
|
|
303
|
-
customColumns ?
|
|
304
|
-
customColumns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex },
|
|
305
|
-
column.render && column.render(mdoc),
|
|
306
|
-
column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title)))); }) : "")); }),
|
|
277
|
+
(function () {
|
|
278
|
+
var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
|
|
279
|
+
var shouldSlice = !searchQuery || results.length > 10;
|
|
280
|
+
return (shouldSlice ? results.slice(startIndex, endIndex) : results)
|
|
281
|
+
.map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index },
|
|
282
|
+
data.fields.map(function (fdoc, findex) {
|
|
283
|
+
var _a;
|
|
284
|
+
return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));
|
|
285
|
+
}),
|
|
286
|
+
customColumns ?
|
|
287
|
+
customColumns.map(function (column, columnIndex) { return (React.createElement("td", { key: columnIndex },
|
|
288
|
+
column.render && column.render(mdoc),
|
|
289
|
+
column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title)))); }) : "")); });
|
|
290
|
+
})(),
|
|
307
291
|
isLoading &&
|
|
308
292
|
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function () { return (React.createElement(Row_1.default, { funcss: 'skeleton' })); }),
|
|
309
293
|
children ? children : ''),
|