@jobber/components 2.92.2 → 2.93.0
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/CHANGELOG.md +20 -0
- package/dist/DataTable/Body.d.ts +4 -1
- package/dist/DataTable/DataTable.d.ts +6 -1
- package/dist/DataTable/SortIcon.d.ts +10 -0
- package/dist/DataTable/index.js +106 -57
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,26 @@ menu: Changelog
|
|
|
8
8
|
All notable changes to this project will be documented in this file.
|
|
9
9
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
10
10
|
|
|
11
|
+
# [2.93.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.92.3...@jobber/components@2.93.0) (2023-01-17)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* **components:** Add empty state behavior to DataTable component in Atlantis [JOB-58935] ([#973](https://github.com/GetJobber/atlantis/issues/973)) ([5d2882e](https://github.com/GetJobber/atlantis/commit/5d2882ecdf0f66435d44ed53c9c5b70fc89ef972))
|
|
17
|
+
* **components:** Implement the new sorting behavior / alignment to DataTable component in Atlantis [JOB-58028] ([#972](https://github.com/GetJobber/atlantis/issues/972)) ([259b11a](https://github.com/GetJobber/atlantis/commit/259b11a82ef7f36c15f854a49aa52e8a9c72a295))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## [2.92.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.92.2...@jobber/components@2.92.3) (2023-01-12)
|
|
24
|
+
|
|
25
|
+
**Note:** Version bump only for package @jobber/components
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
11
31
|
## [2.92.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.92.1...@jobber/components@2.92.2) (2023-01-11)
|
|
12
32
|
|
|
13
33
|
**Note:** Version bump only for package @jobber/components
|
package/dist/DataTable/Body.d.ts
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { Row, Table } from "@tanstack/react-table";
|
|
2
|
+
import { ReactNode } from "react";
|
|
2
3
|
interface BodyProps<T> {
|
|
3
4
|
table: Table<T>;
|
|
4
5
|
onRowClick?: (row: Row<T>) => void;
|
|
6
|
+
height?: number;
|
|
7
|
+
emptyState?: ReactNode | ReactNode[];
|
|
5
8
|
}
|
|
6
|
-
export declare function Body<T extends object>({ table, onRowClick }: BodyProps<T>): JSX.Element;
|
|
9
|
+
export declare function Body<T extends object>({ table, onRowClick, emptyState, }: BodyProps<T>): JSX.Element;
|
|
7
10
|
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ColumnDef, Row } from "@tanstack/react-table";
|
|
2
|
+
import { ReactNode } from "react";
|
|
2
3
|
import { PaginationType, SortingType } from "./types";
|
|
3
4
|
export interface DataTableProps<T> {
|
|
4
5
|
/**
|
|
@@ -44,5 +45,9 @@ export interface DataTableProps<T> {
|
|
|
44
45
|
* Enables row click action. The provided callback will be executed when the row is clicked.
|
|
45
46
|
*/
|
|
46
47
|
onRowClick?: (row: Row<T>) => void;
|
|
48
|
+
/**
|
|
49
|
+
* The elements to display when the data table is empty
|
|
50
|
+
*/
|
|
51
|
+
emptyState?: ReactNode | ReactNode[];
|
|
47
52
|
}
|
|
48
|
-
export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, }: DataTableProps<T>): JSX.Element;
|
|
53
|
+
export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }: DataTableProps<T>): JSX.Element;
|
package/dist/DataTable/index.js
CHANGED
|
@@ -10,17 +10,17 @@ var jobberHooks = require('@jobber/hooks');
|
|
|
10
10
|
var styleInject_es = require('../style-inject.es-dcee06b6.js');
|
|
11
11
|
var Option = require('../Option-0b03aaa2.js');
|
|
12
12
|
var Button = require('../Button-1ce94a21.js');
|
|
13
|
-
var
|
|
13
|
+
var Text = require('../Text-545e4ca6.js');
|
|
14
14
|
require('../FormField-24637bbf.js');
|
|
15
15
|
require('uuid');
|
|
16
16
|
require('react-hook-form');
|
|
17
|
-
require('../
|
|
18
|
-
require('
|
|
17
|
+
require('../Icon-d5ad1a6d.js');
|
|
18
|
+
require('@jobber/design');
|
|
19
19
|
require('../InputValidation-525d69b1.js');
|
|
20
20
|
require('framer-motion');
|
|
21
21
|
require('../Spinner-18d3dee6.js');
|
|
22
22
|
require('react-router-dom');
|
|
23
|
-
require('
|
|
23
|
+
require('../Typography-f074f3ec.js');
|
|
24
24
|
|
|
25
25
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
26
26
|
|
|
@@ -46,20 +46,20 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
|
46
46
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
47
47
|
var jobberHooks__namespace = /*#__PURE__*/_interopNamespace(jobberHooks);
|
|
48
48
|
|
|
49
|
-
var css$
|
|
50
|
-
var styles$
|
|
51
|
-
styleInject_es.styleInject(css$
|
|
49
|
+
var css$3 = "._1gVnBnwO8rEyN5yXaSAnJz {\n position: relative;\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n}\n\n._2FsiaQmYMKjm0oAa_Dm7Jv {\n overflow: auto;\n}\n\n._2EflglZd2SRwkv61KFJrg9 {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n}\n\n._2EflglZd2SRwkv61KFJrg9 thead tr th {\n padding: var(--space-base);\n border-bottom: var(--border-base) solid var(--color-border);\n color: var(--color-heading);\n white-space: nowrap;\n}\n\n._2EflglZd2SRwkv61KFJrg9 thead tr th :first-child {\n display: -ms-flexbox;\n display: flex;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr {\n border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr:last-child {\n border-bottom: none;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr td {\n padding: var(--space-base);\n}\n\n._2EflglZd2SRwkv61KFJrg9 tfoot {\n position: sticky;\n z-index: 1;\n width: 100%;\n box-shadow: var(--shadow-base);\n border-top: var(--border-thick) solid var(--color-border);\n background-color: var(--color-surface);\n bottom: 0;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tfoot tr th {\n padding: var(--space-base);\n}\n\n.QRm47JXl1pWi9jKv7PNPG thead tr th:first-child,\n.QRm47JXl1pWi9jKv7PNPG tbody tr td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n height: calc(var(--space-largest) + var(--space-smaller));\n background-color: var(--color-surface);\n}\n\n.QRm47JXl1pWi9jKv7PNPG th:first-child::after,\n.QRm47JXl1pWi9jKv7PNPG td:first-child::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: calc(-1 * var(--space-small));\n width: var(--space-small);\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(var(--color-black--rgb), 0.1) 0%,\n rgba(var(--color-black--rgb), 0) 80%\n );\n}\n\n._3VxR0m_2LtggJeSToEDE2y {\n position: sticky;\n top: 0;\n right: 0;\n left: 0;\n z-index: 2;\n box-shadow: var(--shadow-base);\n background-color: var(--color-surface);\n}\n\n._1RROVWbMjf1ZfuVpquC4OS:first-child:hover {\n background: var(--color-surface--hover);\n cursor: pointer;\n}\n\n._2uM74VHCeNJuZjyD_SPXR3:hover {\n background: var(--color-surface--hover);\n cursor: pointer;\n}\n\n._3P5HGvBjzojCSGgtBjPjJi:hover,\n._3P5HGvBjzojCSGgtBjPjJi:hover :first-child {\n background: var(--color-surface--background);\n cursor: pointer;\n}\n\n._1n7mmwsIdhl2OvMBcfI1st {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n -ms-flex-direction: column;\n flex-direction: column;\n top: var(--space-largest);\n right: 0;\n bottom: var(--space-largest);\n left: 0;\n width: 100%;\n -ms-flex-pack: center;\n justify-content: center;\n -ms-flex-align: center;\n align-items: center;\n}\n";
|
|
50
|
+
var styles$3 = {"dataTableContainer":"_1gVnBnwO8rEyN5yXaSAnJz","tableContainer":"_2FsiaQmYMKjm0oAa_Dm7Jv","table":"_2EflglZd2SRwkv61KFJrg9","pinFirstColumn":"QRm47JXl1pWi9jKv7PNPG","stickyHeader":"_3VxR0m_2LtggJeSToEDE2y","pinFirstHeaderSortable":"_1RROVWbMjf1ZfuVpquC4OS","sortableColumn":"_2uM74VHCeNJuZjyD_SPXR3","clickableRow":"_3P5HGvBjzojCSGgtBjPjJi","emptyState":"_1n7mmwsIdhl2OvMBcfI1st"};
|
|
51
|
+
styleInject_es.styleInject(css$3);
|
|
52
52
|
|
|
53
53
|
function Body(_a) {
|
|
54
54
|
var _b;
|
|
55
|
-
var table = _a.table, onRowClick = _a.onRowClick;
|
|
56
|
-
var bodyRowClasses = classnames__default["default"]((_b = {}, _b[styles$
|
|
55
|
+
var table = _a.table, onRowClick = _a.onRowClick, emptyState = _a.emptyState;
|
|
56
|
+
var bodyRowClasses = classnames__default["default"]((_b = {}, _b[styles$3.clickableRow] = !!onRowClick, _b));
|
|
57
57
|
var handleRowClick = React.useCallback(function (row) { return function () {
|
|
58
58
|
if (onRowClick == undefined)
|
|
59
59
|
return;
|
|
60
60
|
onRowClick(row);
|
|
61
61
|
}; }, [onRowClick]);
|
|
62
|
-
return (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(function (row) {
|
|
62
|
+
return table.getRowModel().rows.length ? (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(function (row) {
|
|
63
63
|
return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(function (cell) {
|
|
64
64
|
return (React__default["default"].createElement("td", { key: cell.id, style: {
|
|
65
65
|
width: cell.column.getSize(),
|
|
@@ -67,7 +67,7 @@ function Body(_a) {
|
|
|
67
67
|
maxWidth: cell.column.columnDef.maxSize,
|
|
68
68
|
} }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
|
|
69
69
|
})));
|
|
70
|
-
})));
|
|
70
|
+
}))) : (React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState));
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
function createTableSettings(data, columns, options) {
|
|
@@ -123,9 +123,9 @@ function getSortingSettings(sorting) {
|
|
|
123
123
|
return sortingSettings;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
var css$
|
|
127
|
-
var styles$
|
|
128
|
-
styleInject_es.styleInject(css$
|
|
126
|
+
var css$2 = "._1z97TFF0phXLaqvqXHnYJf {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: justify;\n justify-content: space-between;\n min-height: calc(var(--space-smaller) + var(--space-largest));\n padding: var(--space-small) var(--space-base);\n border-top: var(--border-base) solid var(--color-border);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n grid-gap: var(--space-small);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n}\n\n._12APWOsSPQzcBXU_VtquSF {\n -ms-flex: 9999;\n flex: 9999;\n white-space: nowrap;\n}\n\n._36ZeprNonyJdE1RQA8egHT {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: justify;\n justify-content: space-between;\n grid-gap: var(--space-base);\n grid-gap: var(--space-base);\n gap: var(--space-base);\n -ms-flex: 1;\n flex: 1;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n min-width: -webkit-fit-content;\n min-width: -moz-fit-content;\n min-width: fit-content;\n}\n\n.e6F11Aovvn4caXYkkQNRo {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n grid-gap: var(--space-small);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n._3ACIaIFtTSOkMt-sRN5VOO {\n min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.JBRw_pSS6W6hGIxxLABwo {\n display: -ms-flexbox;\n display: flex;\n grid-gap: var(--space-large);\n grid-gap: var(--space-large);\n gap: var(--space-large);\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center\n}\n\n@media (max-width: 639px) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n grid-gap: var(--space-base);\n grid-gap: var(--space-base);\n gap: var(--space-base)\n}\n }\n\n@media (max-width: 639px) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n grid-gap: var(--space-base);\n grid-gap: var(--space-base);\n gap: var(--space-base)\n}\n }\n\n@media (--handhelds) {\n\n.JBRw_pSS6W6hGIxxLABwo {\n grid-gap: var(--space-base);\n grid-gap: var(--space-base);\n gap: var(--space-base)\n}\n }\n";
|
|
127
|
+
var styles$2 = {"pagination":"_1z97TFF0phXLaqvqXHnYJf","paginationInfo":"_12APWOsSPQzcBXU_VtquSF","paginationNav":"_36ZeprNonyJdE1RQA8egHT","paginationSelect":"e6F11Aovvn4caXYkkQNRo","paginationSelectLabel":"_3ACIaIFtTSOkMt-sRN5VOO","paginationButtons":"JBRw_pSS6W6hGIxxLABwo"};
|
|
128
|
+
styleInject_es.styleInject(css$2);
|
|
129
129
|
|
|
130
130
|
var defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
|
|
131
131
|
function Pagination(_a) {
|
|
@@ -135,45 +135,24 @@ function Pagination(_a) {
|
|
|
135
135
|
var firstPosition = pageIndex * pageSize + 1;
|
|
136
136
|
var secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
|
|
137
137
|
var itemsPerPageOptions = React.useMemo(function () { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(function (item) { return String(item); })) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
|
|
138
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
139
|
-
React__default["default"].createElement("div", { className: styles$
|
|
140
|
-
|
|
141
|
-
|
|
138
|
+
return secondPosition <= 0 ? (React__default["default"].createElement("div", { className: styles$2.pagination },
|
|
139
|
+
React__default["default"].createElement("div", { className: styles$2.paginationInfo },
|
|
140
|
+
React__default["default"].createElement(Text.Text, null, "No items")))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
|
|
141
|
+
React__default["default"].createElement("div", { className: styles$2.paginationInfo }, "Showing " + firstPosition + "-" + secondPosition + " of " + totalRows + " items"),
|
|
142
|
+
React__default["default"].createElement("div", { className: styles$2.paginationNav },
|
|
143
|
+
React__default["default"].createElement("div", { className: styles$2.paginationSelect },
|
|
142
144
|
React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: function (value) {
|
|
143
145
|
table.setPageSize(Number(value));
|
|
144
146
|
}, size: "small" }, itemsPerPageOptions.map(function (numOfPages) { return (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)); })),
|
|
145
|
-
React__default["default"].createElement("span", { className: styles$
|
|
146
|
-
React__default["default"].createElement("div", { className: styles$
|
|
147
|
+
React__default["default"].createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
|
|
148
|
+
React__default["default"].createElement("div", { className: styles$2.paginationButtons },
|
|
147
149
|
React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: function () { return table.previousPage(); }, disabled: !table.getCanPreviousPage() }),
|
|
148
150
|
React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: function () { return table.nextPage(); }, disabled: !table.getCanNextPage() })))));
|
|
149
151
|
}
|
|
150
152
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
var stickyClass = classnames__default["default"]((_b = {}, _b[styles$2.stickyHeader] = stickyHeader, _b));
|
|
155
|
-
return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(function (headerGroup) { return (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(function (header) {
|
|
156
|
-
var _a;
|
|
157
|
-
return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: sorting && header.column.getCanSort()
|
|
158
|
-
? classnames__default["default"](styles$2.sortableColumn, (_a = {},
|
|
159
|
-
_a[styles$2.pinFirstHeaderSortable] = !!onRowClick,
|
|
160
|
-
_a))
|
|
161
|
-
: "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
|
|
162
|
-
width: header.getSize(),
|
|
163
|
-
minWidth: header.column.columnDef.minSize,
|
|
164
|
-
maxWidth: header.column.columnDef.maxSize,
|
|
165
|
-
} }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
|
|
166
|
-
reactTable.flexRender(header.column.columnDef.header, header.getContext()),
|
|
167
|
-
{
|
|
168
|
-
asc: React__default["default"].createElement(Icon.Icon, { name: "longArrowUp", color: "green" }),
|
|
169
|
-
desc: React__default["default"].createElement(Icon.Icon, { name: "longArrowDown", color: "green" }),
|
|
170
|
-
}[header.column.getIsSorted()]))));
|
|
171
|
-
}))); })));
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
var css = "._39TtNRcIeia0yD1gs7L70 {\n padding: var(--space-base);\n border-top: var(--border-thick) solid var(--color-border);\n}\n\n._1AkupnXfMaD9bSt37OKKpW {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n font-weight: bold;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: left;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: right;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n text-align: right;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW * {\n text-align: start;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: right;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: left;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n text-align: left;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9,\n._2tNVzbdCh57muuCvPjItW9 * {\n font-weight: normal;\n text-align: end;\n}\n\n._1AkupnXfMaD9bSt37OKKpW:not(:last-child) {\n padding-bottom: var(--space-small);\n}\n";
|
|
175
|
-
var styles = {"mobileFooterContainer":"_39TtNRcIeia0yD1gs7L70","mobileFooterRow":"_1AkupnXfMaD9bSt37OKKpW","mobileFooterRowData":"_2tNVzbdCh57muuCvPjItW9"};
|
|
176
|
-
styleInject_es.styleInject(css);
|
|
153
|
+
var css$1 = "._39TtNRcIeia0yD1gs7L70 {\n padding: var(--space-base);\n border-top: var(--border-thick) solid var(--color-border);\n}\n\n._1AkupnXfMaD9bSt37OKKpW {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n font-weight: bold;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: left;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: right;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n text-align: right;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW * {\n text-align: start;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: right;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: left;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n text-align: left;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9,\n._2tNVzbdCh57muuCvPjItW9 * {\n font-weight: normal;\n text-align: end;\n}\n\n._1AkupnXfMaD9bSt37OKKpW:not(:last-child) {\n padding-bottom: var(--space-small);\n}\n";
|
|
154
|
+
var styles$1 = {"mobileFooterContainer":"_39TtNRcIeia0yD1gs7L70","mobileFooterRow":"_1AkupnXfMaD9bSt37OKKpW","mobileFooterRowData":"_2tNVzbdCh57muuCvPjItW9"};
|
|
155
|
+
styleInject_es.styleInject(css$1);
|
|
177
156
|
|
|
178
157
|
var DesktopView = function (_a) {
|
|
179
158
|
var table = _a.table;
|
|
@@ -185,11 +164,11 @@ var DesktopView = function (_a) {
|
|
|
185
164
|
};
|
|
186
165
|
var HandheldView = function (_a) {
|
|
187
166
|
var table = _a.table;
|
|
188
|
-
return (React__default["default"].createElement("div", { className: styles.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("div", { key: footerGroup.id }, footerGroup.headers
|
|
167
|
+
return (React__default["default"].createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("div", { key: footerGroup.id }, footerGroup.headers
|
|
189
168
|
.filter(function (header) { return header.column.columnDef.footer; })
|
|
190
|
-
.map(function (header, index) { return (React__default["default"].createElement(React__default["default"].Fragment, null, index === 0 ? (React__default["default"].createElement("div", { className: styles.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default["default"].createElement("div", { className: styles.mobileFooterRow, key: footerGroup.id },
|
|
169
|
+
.map(function (header, index) { return (React__default["default"].createElement(React__default["default"].Fragment, null, index === 0 ? (React__default["default"].createElement("div", { className: styles$1.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default["default"].createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
|
|
191
170
|
reactTable.flexRender(header.column.columnDef.header, header.getContext()),
|
|
192
|
-
React__default["default"].createElement("div", { className: styles.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))); }))); })));
|
|
171
|
+
React__default["default"].createElement("div", { className: styles$1.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))); }))); })));
|
|
193
172
|
};
|
|
194
173
|
var Footer = function (_a) {
|
|
195
174
|
var table = _a.table, _b = _a.viewType, viewType = _b === void 0 ? "handheld" : _b;
|
|
@@ -202,25 +181,95 @@ var Footer = function (_a) {
|
|
|
202
181
|
return null;
|
|
203
182
|
};
|
|
204
183
|
|
|
184
|
+
var css = "._1bd_Q6KrI5RAN8TRKHTRVl {\n padding-right: var(--space-small);\n}\npath {\n fill: var(--color-greyBlue);\n}\npath.D5KkCh2ebFU8GZn8_usvy {\n fill: var(--color-blue);\n}\npath._1Yv-bZHiCELA_VP7732is_ {\n fill: var(--color-greyBlue--lighter);\n}\n";
|
|
185
|
+
var styles = {"sortIcon":"_1bd_Q6KrI5RAN8TRKHTRVl","active":"D5KkCh2ebFU8GZn8_usvy","inactive":"_1Yv-bZHiCELA_VP7732is_"};
|
|
186
|
+
styleInject_es.styleInject(css);
|
|
187
|
+
|
|
188
|
+
var SortDirection;
|
|
189
|
+
(function (SortDirection) {
|
|
190
|
+
SortDirection[SortDirection["ascending"] = 0] = "ascending";
|
|
191
|
+
SortDirection[SortDirection["descending"] = 1] = "descending";
|
|
192
|
+
SortDirection[SortDirection["equilibrium"] = 2] = "equilibrium";
|
|
193
|
+
})(SortDirection || (SortDirection = {}));
|
|
194
|
+
var sortStyleIndex = [
|
|
195
|
+
{
|
|
196
|
+
option: SortDirection.equilibrium,
|
|
197
|
+
upArrowStyle: undefined,
|
|
198
|
+
downArrowStyle: undefined,
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
option: SortDirection.ascending,
|
|
202
|
+
upArrowStyle: classnames__default["default"](styles.active),
|
|
203
|
+
downArrowStyle: classnames__default["default"](styles.inactive),
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
option: SortDirection.descending,
|
|
207
|
+
upArrowStyle: classnames__default["default"](styles.inactive),
|
|
208
|
+
downArrowStyle: classnames__default["default"](styles.active),
|
|
209
|
+
},
|
|
210
|
+
];
|
|
211
|
+
function SortIcon(_a) {
|
|
212
|
+
var direction = _a.direction;
|
|
213
|
+
var foundStyle = sortStyleIndex.find(function (style) { return style.option === direction; });
|
|
214
|
+
var finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
|
|
215
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.sortIcon) },
|
|
216
|
+
React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
217
|
+
React__default["default"].createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
|
|
218
|
+
React__default["default"].createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
function Header(_a) {
|
|
222
|
+
var _b;
|
|
223
|
+
var table = _a.table, stickyHeader = _a.stickyHeader, sorting = _a.sorting, onRowClick = _a.onRowClick;
|
|
224
|
+
var stickyClass = classnames__default["default"]((_b = {}, _b[styles$3.stickyHeader] = stickyHeader, _b));
|
|
225
|
+
return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(function (headerGroup) { return (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(function (header) {
|
|
226
|
+
var _a;
|
|
227
|
+
var isSorting = sorting && header.column.getCanSort();
|
|
228
|
+
return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
|
|
229
|
+
? classnames__default["default"](styles$3.sortableColumn, (_a = {},
|
|
230
|
+
_a[styles$3.pinFirstHeaderSortable] = !!onRowClick,
|
|
231
|
+
_a))
|
|
232
|
+
: "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
|
|
233
|
+
width: header.getSize(),
|
|
234
|
+
minWidth: header.column.columnDef.minSize,
|
|
235
|
+
maxWidth: header.column.columnDef.maxSize,
|
|
236
|
+
paddingRight: isSorting ? 0 : "inherit",
|
|
237
|
+
} }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
|
|
238
|
+
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
239
|
+
reactTable.flexRender(header.column.columnDef.header, header.getContext()),
|
|
240
|
+
header.column.getCanSort() &&
|
|
241
|
+
sorting &&
|
|
242
|
+
!header.column.getIsSorted() && (React__default["default"].createElement(SortIcon, { direction: SortDirection.equilibrium }))),
|
|
243
|
+
{
|
|
244
|
+
asc: React__default["default"].createElement(SortIcon, { direction: SortDirection.ascending }),
|
|
245
|
+
desc: React__default["default"].createElement(SortIcon, { direction: SortDirection.descending }),
|
|
246
|
+
}[header.column.getIsSorted()]))));
|
|
247
|
+
}))); })));
|
|
248
|
+
}
|
|
249
|
+
|
|
205
250
|
function DataTable(_a) {
|
|
206
251
|
var _b;
|
|
207
|
-
var data = _a.data, columns = _a.columns, pagination = _a.pagination, sorting = _a.sorting, height = _a.height, stickyHeader = _a.stickyHeader, pinFirstColumn = _a.pinFirstColumn, onRowClick = _a.onRowClick;
|
|
252
|
+
var data = _a.data, columns = _a.columns, pagination = _a.pagination, sorting = _a.sorting, height = _a.height, stickyHeader = _a.stickyHeader, pinFirstColumn = _a.pinFirstColumn, onRowClick = _a.onRowClick, emptyState = _a.emptyState;
|
|
208
253
|
var _c = tslib_es6.__read(jobberHooks.useResizeObserver(), 2), ref = _c[0], exactWidth = _c[1].exactWidth;
|
|
209
254
|
var tableSettings = createTableSettings(data, columns, {
|
|
210
255
|
pagination: pagination,
|
|
211
256
|
sorting: sorting,
|
|
212
257
|
});
|
|
213
|
-
var tableClasses = classnames__default["default"](styles$
|
|
214
|
-
_b[styles$
|
|
258
|
+
var tableClasses = classnames__default["default"](styles$3.table, (_b = {},
|
|
259
|
+
_b[styles$3.pinFirstColumn] = pinFirstColumn,
|
|
215
260
|
_b));
|
|
216
261
|
var table = reactTable.useReactTable(tableSettings);
|
|
217
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
218
|
-
React__default["default"].createElement("div", { className: styles$
|
|
262
|
+
return (React__default["default"].createElement("div", { className: styles$3.dataTableContainer },
|
|
263
|
+
React__default["default"].createElement("div", { className: styles$3.tableContainer, style: { height: height }, ref: ref },
|
|
219
264
|
React__default["default"].createElement("table", { className: tableClasses },
|
|
220
265
|
React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
|
|
221
|
-
React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick }),
|
|
222
|
-
|
|
223
|
-
|
|
266
|
+
React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, height: height ? height * 0.7 : undefined, emptyState: emptyState }),
|
|
267
|
+
table.getRowModel().rows.length &&
|
|
268
|
+
exactWidth &&
|
|
269
|
+
exactWidth > jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
|
|
270
|
+
table.getRowModel().rows.length &&
|
|
271
|
+
exactWidth &&
|
|
272
|
+
exactWidth <= jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
|
|
224
273
|
pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
|
|
225
274
|
? pagination.totalItems
|
|
226
275
|
: table.getCoreRowModel().rows.length }))));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.93.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"dist/*"
|
|
19
19
|
],
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@jobber/design": "^0.27.
|
|
21
|
+
"@jobber/design": "^0.27.1",
|
|
22
22
|
"@jobber/formatters": "^0.2.0",
|
|
23
23
|
"@jobber/hooks": "^1.12.1",
|
|
24
24
|
"@popperjs/core": "^2.0.6",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"> 1%",
|
|
86
86
|
"IE 10"
|
|
87
87
|
],
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "aa479c2bbdd3ed9990d5c41d8db31ed506496ffb"
|
|
89
89
|
}
|