karsten-design-system 1.0.87 → 1.0.88
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/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/stories/components/customTable.js +10 -4
- package/dist/stories/components/customTable.js.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/stories/components/customTable.d.ts +15 -15
- package/dist/types/utils/sortData.d.ts +2 -2
- package/dist/utils/sortData.js +4 -9
- package/dist/utils/sortData.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -34,4 +34,5 @@ export { CalendarInput } from './stories/components/calendarInput.js';
|
|
|
34
34
|
export { Table } from './stories/components/table.js';
|
|
35
35
|
export { CustomToast } from './stories/components/customToast.js';
|
|
36
36
|
export { CustomAccordion } from './stories/components/customAccordion.js';
|
|
37
|
+
export { CustomTable } from './stories/components/customTable.js';
|
|
37
38
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from '../../_virtual/jsx-runtime.js';
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
|
-
import clsx from 'clsx';
|
|
4
3
|
import { sortData } from '../../utils/sortData.js';
|
|
5
|
-
import
|
|
4
|
+
import clsx from 'clsx';
|
|
6
5
|
import { Spinner } from './spinner.js';
|
|
6
|
+
import { Paginator } from './paginator.js';
|
|
7
7
|
|
|
8
8
|
function CustomTable({ columns, data, totalRecords, actions = [], isOrdered = true, actionsHeaderClassName = '', actionsColumnsClassName = '', rowsPerPage = 10, onPageChange, isPaginated = true, isLoading = false }) {
|
|
9
9
|
const [sortDirection, setSortDirection] = useState('ASC');
|
|
@@ -12,12 +12,18 @@ function CustomTable({ columns, data, totalRecords, actions = [], isOrdered = tr
|
|
|
12
12
|
const handleSort = (dataIndex) => {
|
|
13
13
|
const newDirection = sortDirection === 'ASC' ? 'DESC' : 'ASC';
|
|
14
14
|
setSortDirection(newDirection);
|
|
15
|
-
setSortedData(sortData(
|
|
15
|
+
setSortedData(sortData(data, dataIndex, newDirection));
|
|
16
16
|
};
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
setSortedData(data);
|
|
19
19
|
}, [data]);
|
|
20
|
-
return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("table", { className: "w-100", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "bg-gray-100", children: [columns.map((column
|
|
20
|
+
return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("table", { className: "w-100", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "bg-gray-100", children: [columns.map((column) => (jsxRuntimeExports.jsxs("th", { className: "bg-primary first:rounded-ss-lg font-bold text-background text-sm uppercase p-3 text-left", children: [column.label, isOrdered && (jsxRuntimeExports.jsx("i", { className: "pi pi-sort-alt pl-2 text-xs cursor-pointer", onClick: () => handleSort(column.dataIndex) }))] }, String(column.dataIndex)))), actions.length > 0 && (jsxRuntimeExports.jsx("th", { className: clsx('bg-primary rounded-se-lg font-bold text-background text-sm uppercase p-3 text-right pr-4', actionsHeaderClassName), children: "A\u00C7\u00D5ES" }))] }) }), jsxRuntimeExports.jsx("tbody", { children: isLoading ? (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsx("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center bg-gray-50", children: jsxRuntimeExports.jsx("div", { className: "py-2 px-4 flex justify-center items-center gap-2", children: jsxRuntimeExports.jsx(Spinner, { size: "lg" }) }) }) })) : sortedData.length > 0 ? (sortedData.map((row, index) => (jsxRuntimeExports.jsxs("tr", { className: clsx(index % 2 === 0 ? 'bg-stoneBackground' : 'bg-background', 'text-primary text-base'), children: [columns.map((column) => {
|
|
21
|
+
const value = row[column.dataIndex];
|
|
22
|
+
return (jsxRuntimeExports.jsx("td", { className: clsx('p-3 text-sm text-left', typeof column.style === 'function' ? column.style(value, row) : column.style), children: column.render ? column.render(value, row) : String(value) }, String(column.dataIndex)));
|
|
23
|
+
}), actions.length > 0 && (jsxRuntimeExports.jsx("td", { className: clsx('text-sm text-right flex flex-row justify-end p-3 gap-2', actionsColumnsClassName), children: actions.map((action, idx) => (jsxRuntimeExports.jsx("span", { className: clsx('cursor-pointer', action.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'), onClick: () => {
|
|
24
|
+
if (!action.disabled)
|
|
25
|
+
action.onClick(row);
|
|
26
|
+
}, title: action.label, children: action.icon }, idx))) }))] }, index)))) : (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsxs("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center text-primary bg-stoneBackground", children: [jsxRuntimeExports.jsx("i", { className: "pi pi-database mr-2" }), " N\u00E3o h\u00E1 dados dispon\u00EDveis."] }) })) })] }), sortedData.length > 0 && isPaginated && (jsxRuntimeExports.jsx(Paginator, { first: (currentPage - 1) * rowsPerPage, rows: rowsPerPage, totalRecords: totalRecords, onPageChange: (event) => {
|
|
21
27
|
setCurrentPage(event.page + 1);
|
|
22
28
|
onPageChange(event.page + 1);
|
|
23
29
|
} }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"customTable.js","sources":["../../../../src/stories/components/customTable.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"customTable.js","sources":["../../../../src/stories/components/customTable.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;SAoCgB,WAAW,CAAgC,EACzD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,IAAI,EAChB,sBAAsB,GAAG,EAAE,EAC3B,uBAAuB,GAAG,EAAE,EAC5B,WAAW,GAAG,EAAE,EAChB,YAAY,EACZ,WAAW,GAAG,IAAI,EAClB,SAAS,GAAG,KAAK,EACG,EAAA;IACpB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAgB,KAAK,CAAC;IACxE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAM,IAAI,CAAC;IACvD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAG,CAAC,SAAkB,KAAI;AACxC,QAAA,MAAM,YAAY,GAAG,aAAa,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK;QAC7D,gBAAgB,CAAC,YAAY,CAAC;QAC9B,aAAa,CAAC,QAAQ,CAAI,IAAI,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAC3D,KAAC;IAED,SAAS,CAAC,MAAK;QACb,aAAa,CAAC,IAAI,CAAC;AACrB,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAGV,QACEA,2CACEA,sBAAO,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,OAAO,EAAA,QAAA,EAAA,CACtBC,2CACED,sBAAI,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,aAAa,EAAA,QAAA,EAAA,CACxB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,sBAEE,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,0FAA0F,EAAA,QAAA,EAAA,CAEnG,MAAM,CAAC,KAAK,EACZ,SAAS,KACRC,qBACE,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAE,MAAM,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,EAAA,CAC3C,CACH,CATI,EAAA,EAAA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAU1B,CACN,CAAC,EACD,OAAO,CAAC,MAAM,GAAG,CAAC,KACjBA,qBAAI,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,IAAI,CAAC,0FAA0F,EAAE,sBAAsB,CAAC,EAElI,QAAA,EAAA,iBAAA,EAAA,CAAA,CACN,IACE,EACC,CAAA,EACRA,2CACG,SAAS,IACRA,wCACEA,qBAAI,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAC,4BAA4B,YAChGA,qBAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC/DA,sBAAC,OAAO,EAAA,EAAC,IAAI,EAAC,IAAI,GAAG,EACjB,CAAA,EAAA,CACH,GACF,IACH,UAAU,CAAC,MAAM,GAAG,CAAC,IACvB,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACxBD,sBAAA,CAAA,IAAA,EAAA,EAAgB,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,GAAG,oBAAoB,GAAG,eAAe,EAAE,wBAAwB,CAAC,EAAA,QAAA,EAAA,CAChH,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;oCACtB,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC;AACnC,oCAAA,QACEC,qBAAA,CAAA,IAAA,EAAA,EAAmC,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EAAA,QAAA,EACtJ,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EADnD,EAAA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAE5B;iCAER,CAAC,EACD,OAAO,CAAC,MAAM,GAAG,CAAC,KACjBA,qBAAI,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,IAAI,CAAC,wDAAwD,EAAE,uBAAuB,CAAC,EACnG,QAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,MACvBA,qBAEE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,QAAQ,IAAI,mDAAmD,CAAC,EACzG,OAAO,EAAE,MAAK;4CACZ,IAAI,CAAC,MAAM,CAAC,QAAQ;AAAE,gDAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;yCAC1C,EACD,KAAK,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EAClB,MAAM,CAAC,IAAI,EAAA,EANP,GAAG,CAOH,CACR,CAAC,EACC,CAAA,CACN,KAvBM,KAAK,CAwBT,CACN,CAAC,KAEFA,wCACED,sBAAI,CAAA,IAAA,EAAA,EAAA,OAAO,EAAE,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,EAAC,iDAAiD,EACrH,QAAA,EAAA,CAAAC,qBAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,qBAAqB,EAAK,CAAA,EAAA,2CAAA,CAAA,EAAA,CACpC,EACF,CAAA,CACN,GACK,CACF,EAAA,CAAA,EAEP,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,KACnCA,qBAAA,CAAC,SAAS,EACR,EAAA,KAAK,EAAE,CAAC,WAAW,GAAG,CAAC,IAAI,WAAW,EACtC,IAAI,EAAE,WAAW,EACjB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,CAAC,KAAK,KAAI;AACtB,oBAAA,cAAc,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;AAC9B,oBAAA,YAAY,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC;AAC9B,iBAAC,EACD,CAAA,CACH,CACG,EAAA,CAAA;AAEV;;;;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export type CustomColumn<T> = {
|
|
2
|
+
label: string;
|
|
3
|
+
dataIndex: keyof T;
|
|
4
|
+
style?: (value: T[keyof T], row: T) => string | string;
|
|
5
|
+
render?: (value: T[keyof T], row: T) => React.ReactNode;
|
|
6
|
+
};
|
|
7
|
+
export type CustomTableAction<T> = {
|
|
4
8
|
icon: React.ReactNode;
|
|
5
|
-
onClick: (item:
|
|
9
|
+
onClick: (item: T) => void;
|
|
6
10
|
label?: string;
|
|
11
|
+
disabled?: boolean;
|
|
7
12
|
};
|
|
8
|
-
export type
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
export type CustomTableProps = {
|
|
14
|
-
columns: Column[];
|
|
15
|
-
data: TableData[];
|
|
16
|
-
totalRecords: number;
|
|
17
|
-
actions?: CustomTableAction[];
|
|
13
|
+
export type CustomTableProps<T> = {
|
|
14
|
+
columns: CustomColumn<T>[];
|
|
15
|
+
data: T[];
|
|
16
|
+
totalRecords?: number;
|
|
17
|
+
actions?: CustomTableAction<T>[];
|
|
18
18
|
isOrdered?: boolean;
|
|
19
19
|
actionsHeaderClassName?: string;
|
|
20
20
|
actionsColumnsClassName?: string;
|
|
@@ -23,4 +23,4 @@ export type CustomTableProps = {
|
|
|
23
23
|
isPaginated?: boolean;
|
|
24
24
|
isLoading?: boolean;
|
|
25
25
|
};
|
|
26
|
-
export declare function CustomTable({ columns, data, totalRecords, actions, isOrdered, actionsHeaderClassName, actionsColumnsClassName, rowsPerPage, onPageChange, isPaginated, isLoading }: CustomTableProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function CustomTable<T extends Record<string, any>>({ columns, data, totalRecords, actions, isOrdered, actionsHeaderClassName, actionsColumnsClassName, rowsPerPage, onPageChange, isPaginated, isLoading }: CustomTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { SortDirection
|
|
2
|
-
export declare function sortData<T
|
|
1
|
+
import { SortDirection } from "../types";
|
|
2
|
+
export declare function sortData<T>(data: T[], column: keyof T, direction: SortDirection): T[];
|
package/dist/utils/sortData.js
CHANGED
|
@@ -1,26 +1,21 @@
|
|
|
1
|
+
// import { SortDirection, TableData } from "../types"
|
|
1
2
|
function sortData(data, column, direction) {
|
|
2
3
|
return [...data].sort((a, b) => {
|
|
3
4
|
const aValue = a[column];
|
|
4
5
|
const bValue = b[column];
|
|
5
|
-
// numbers
|
|
6
6
|
if (typeof aValue === 'number' && typeof bValue === 'number') {
|
|
7
7
|
return direction === 'ASC' ? aValue - bValue : bValue - aValue;
|
|
8
8
|
}
|
|
9
|
-
// dates
|
|
10
9
|
if (aValue instanceof Date && bValue instanceof Date) {
|
|
11
10
|
return direction === 'ASC'
|
|
12
11
|
? aValue.getTime() - bValue.getTime()
|
|
13
12
|
: bValue.getTime() - aValue.getTime();
|
|
14
13
|
}
|
|
15
|
-
// strings
|
|
16
14
|
const aString = String(aValue).toLowerCase();
|
|
17
15
|
const bString = String(bValue).toLowerCase();
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
else {
|
|
22
|
-
return bString.localeCompare(aString);
|
|
23
|
-
}
|
|
16
|
+
return direction === 'ASC'
|
|
17
|
+
? aString.localeCompare(bString)
|
|
18
|
+
: bString.localeCompare(aString);
|
|
24
19
|
});
|
|
25
20
|
}
|
|
26
21
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sortData.js","sources":["../../../src/utils/sortData.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sortData.js","sources":["../../../src/utils/sortData.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;SAiCgB,QAAQ,CAAI,IAAS,EAAE,MAAe,EAAE,SAAwB,EAAA;AAC9E,IAAA,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAC7B,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;AACxB,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;QAExB,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AAC5D,YAAA,OAAO,SAAS,KAAK,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM;;QAGhE,IAAI,MAAM,YAAY,IAAI,IAAI,MAAM,YAAY,IAAI,EAAE;YACpD,OAAO,SAAS,KAAK;kBACjB,MAAM,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO;kBACjC,MAAM,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,OAAO,EAAE;;QAGzC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE;QAC5C,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE;QAE5C,OAAO,SAAS,KAAK;AACnB,cAAE,OAAO,CAAC,aAAa,CAAC,OAAO;AAC/B,cAAE,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC;AACpC,KAAC,CAAC;AACJ;;;;"}
|