@paroicms/react-ui 0.5.5 → 0.5.6
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/DataTable.d.ts +2 -1
- package/dist/DataTable.js +1 -1
- package/package.json +1 -1
- package/styles/Button.css +6 -1
- package/styles/DataTable.css +1 -0
- package/styles/theme/field.css +1 -0
package/dist/DataTable.d.ts
CHANGED
|
@@ -6,7 +6,8 @@ export interface DataTableColumn<T = unknown> {
|
|
|
6
6
|
body?: (rowData: T) => ReactNode;
|
|
7
7
|
style?: CSSProperties;
|
|
8
8
|
sortable?: boolean;
|
|
9
|
-
|
|
9
|
+
thClassName?: string;
|
|
10
|
+
tdClassName?: string;
|
|
10
11
|
}
|
|
11
12
|
export interface DataTableProps<T> {
|
|
12
13
|
value: T[];
|
package/dist/DataTable.js
CHANGED
|
@@ -14,5 +14,5 @@ export function DataTable({ value, dataKey, columns, size, loading, className, t
|
|
|
14
14
|
const newOrder = sortField === field && sortOrder === 1 ? -1 : 1;
|
|
15
15
|
onSort({ field, order: newOrder });
|
|
16
16
|
};
|
|
17
|
-
return (_jsxs("div", { className: clsx("PaDataTable", { loading }, className), children: [loading && (_jsx("div", { className: "PaDataTable-overlay", children: _jsx(Spinner, {}) })), _jsx("div", { className: "PaDataTable-scrollable", children: _jsxs("table", { className: clsx("PaDataTable-table", size, tableClassName), children: [_jsx("thead", { className: "PaDataTable-header", children: _jsx("tr", { children: columns.map((col, i) => (_jsx("th", { className: clsx("PaDataTable-headerCell", col.sortable && "sortable"), style: col.style, onClick: col.sortable ? () => handleSort(col.field) : undefined, tabIndex: 0, children: _jsxs("span", { className: "PaDataTable-headerContent", children: [col.header, col.sortable && (_jsx("span", { className: "PaDataTable-sortIcon", children: col.field === sortField ? (sortOrder === 1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ArrowUp, { size: 14 }))) : (_jsx(ChevronsUpDown, { size: 14 })) }))] }) }, col.field ?? i))) }) }), _jsx("tbody", { children: value.length === 0 ? (_jsx("tr", { className: "PaDataTable-emptyRow", children: _jsx("td", { colSpan: columns.length, className: "PaDataTable-emptyCell", children: emptyMessage }) })) : (value.map((row) => (_jsx("tr", { className: clsx("PaDataTable-row", onRowClick && "clickable", rowClassName?.(row)), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: columns.map((col, i) => (_jsx("td", { className: clsx("PaDataTable-cell", col.
|
|
17
|
+
return (_jsxs("div", { className: clsx("PaDataTable", { loading }, className), children: [loading && (_jsx("div", { className: "PaDataTable-overlay", children: _jsx(Spinner, {}) })), _jsx("div", { className: "PaDataTable-scrollable", children: _jsxs("table", { className: clsx("PaDataTable-table", size, tableClassName), children: [_jsx("thead", { className: "PaDataTable-header", children: _jsx("tr", { children: columns.map((col, i) => (_jsx("th", { className: clsx("PaDataTable-headerCell", col.sortable && "sortable", col.thClassName), style: col.style, onClick: col.sortable ? () => handleSort(col.field) : undefined, tabIndex: 0, children: _jsxs("span", { className: "PaDataTable-headerContent", children: [col.header, col.sortable && (_jsx("span", { className: "PaDataTable-sortIcon", children: col.field === sortField ? (sortOrder === 1 ? (_jsx(ArrowDown, { size: 14 })) : (_jsx(ArrowUp, { size: 14 }))) : (_jsx(ChevronsUpDown, { size: 14 })) }))] }) }, col.field ?? i))) }) }), _jsx("tbody", { children: value.length === 0 ? (_jsx("tr", { className: "PaDataTable-emptyRow", children: _jsx("td", { colSpan: columns.length, className: "PaDataTable-emptyCell", children: emptyMessage }) })) : (value.map((row) => (_jsx("tr", { className: clsx("PaDataTable-row", onRowClick && "clickable", rowClassName?.(row)), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: columns.map((col, i) => (_jsx("td", { className: clsx("PaDataTable-cell", col.tdClassName), style: col.style, children: col.body ? col.body(row) : col.field ? String(row[col.field] ?? "") : null }, col.field ?? i))) }, String(row[dataKey]))))) })] }) }), paginator && onPage && pageCount > 1 && (_jsxs("div", { className: "PaDataTable-footer", children: [_jsxs("span", { className: "PaDataTable-totalCount", children: [total, " ", totalLabel ?? "items"] }), _jsxs("div", { className: "PaDataTable-pagination", children: [_jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage <= 1, onClick: () => onPage({ first: first - rows, rows }), children: _jsx(ChevronLeft, { size: 16 }) }), _jsxs("span", { className: "PaDataTable-paginationText", children: ["Page ", currentPage, " of ", pageCount] }), _jsx("button", { type: "button", className: "PaDataTable-paginationBtn", disabled: currentPage >= pageCount, onClick: () => onPage({ first: first + rows, rows }), children: _jsx(ChevronRight, { size: 16 }) }), rowsPerPageOptions && rowsPerPageOptions.length > 0 && (_jsx(Select, { className: "PaDataTable-rowsPerPage", value: String(rows), options: rowsPerPageOptions.map((n) => ({ label: String(n), value: String(n) })), onChange: (val) => onPage({ first: 0, rows: Number(val) }) }))] })] }))] }));
|
|
18
18
|
}
|
package/package.json
CHANGED
package/styles/Button.css
CHANGED
|
@@ -13,12 +13,17 @@
|
|
|
13
13
|
font-weight: var(--font-medium);
|
|
14
14
|
line-height: 1;
|
|
15
15
|
white-space: nowrap;
|
|
16
|
-
text-decoration: none;
|
|
17
16
|
cursor: pointer;
|
|
18
17
|
border: none;
|
|
19
18
|
border-radius: var(--radius);
|
|
20
19
|
transition: all var(--transition);
|
|
21
20
|
|
|
21
|
+
&,
|
|
22
|
+
&:visited,
|
|
23
|
+
&:hover {
|
|
24
|
+
text-decoration: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
22
27
|
&:focus-visible {
|
|
23
28
|
outline: 2px solid var(--color-primary);
|
|
24
29
|
outline-offset: 2px;
|
package/styles/DataTable.css
CHANGED