@jobber/components 2.88.0 → 2.89.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 +11 -0
- package/dist/DataTable/DataTable.d.ts +2 -2
- package/dist/DataTable/Footer.d.ts +4 -5
- package/dist/DataTable/Pagination.d.ts +8 -0
- package/dist/DataTable/index.js +56 -25
- package/dist/DataTable/test-utilities/mocks.d.ts +8 -0
- package/dist/DataTable/types.d.ts +3 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,17 @@ 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.89.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.88.0...@jobber/components@2.89.0) (2022-11-25)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* **components:** Add footer row to Data Table component (JOB-57643) ([#934](https://github.com/GetJobber/atlantis/issues/934)) ([452f0de](https://github.com/GetJobber/atlantis/commit/452f0de362a711b42ef72f0c2dc84a15ae6ffc54))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
11
22
|
# [2.88.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.87.0...@jobber/components@2.88.0) (2022-11-16)
|
|
12
23
|
|
|
13
24
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ColumnDef, Row } from "@tanstack/react-table";
|
|
2
|
-
import {
|
|
2
|
+
import { PaginationType, Sorting } from "./types";
|
|
3
3
|
export interface DataTableProps<T> {
|
|
4
4
|
/**
|
|
5
5
|
* The actual data that will be used for the table.
|
|
@@ -18,7 +18,7 @@ export interface DataTableProps<T> {
|
|
|
18
18
|
* https://tanstack.com/table/v8/docs/api/features/pagination
|
|
19
19
|
*
|
|
20
20
|
*/
|
|
21
|
-
pagination?:
|
|
21
|
+
pagination?: PaginationType;
|
|
22
22
|
/**
|
|
23
23
|
* Enables sorting, mostly follows:
|
|
24
24
|
* https://tanstack.com/table/v8/docs/api/features/sorting#table-options
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { Table } from "@tanstack/react-table";
|
|
2
|
-
|
|
2
|
+
export declare type ViewType = "desktop" | "handheld";
|
|
3
|
+
export interface FooterProps<T> {
|
|
3
4
|
table: Table<T>;
|
|
4
|
-
|
|
5
|
-
totalItems: number;
|
|
5
|
+
viewType?: ViewType;
|
|
6
6
|
}
|
|
7
|
-
export declare
|
|
8
|
-
export {};
|
|
7
|
+
export declare const Footer: <T extends object>({ table, viewType, }: FooterProps<T>) => JSX.Element | null;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Table } from "@tanstack/react-table";
|
|
2
|
+
interface PaginationProps<T> {
|
|
3
|
+
table: Table<T>;
|
|
4
|
+
itemsPerPage?: number[];
|
|
5
|
+
totalItems: number;
|
|
6
|
+
}
|
|
7
|
+
export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, }: PaginationProps<T>): JSX.Element;
|
|
8
|
+
export {};
|
package/dist/DataTable/index.js
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
|
|
5
6
|
var reactTable = require('@tanstack/react-table');
|
|
6
7
|
var classnames = require('classnames');
|
|
7
8
|
var React = require('react');
|
|
9
|
+
var hooks = require('@jobber/hooks');
|
|
8
10
|
var styleInject_es = require('../style-inject.es-dcee06b6.js');
|
|
9
|
-
var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
|
|
10
11
|
var Option = require('../Option-201e55a7.js');
|
|
11
12
|
var Button = require('../Button-5b2f1636.js');
|
|
12
13
|
var Icon = require('../Icon-d5ad1a6d.js');
|
|
@@ -26,14 +27,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
26
27
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
27
28
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
28
29
|
|
|
29
|
-
var css$
|
|
30
|
-
var styles$
|
|
31
|
-
styleInject_es.styleInject(css$
|
|
30
|
+
var css$2 = "._1gVnBnwO8rEyN5yXaSAnJz {\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-white);\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-white);\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";
|
|
31
|
+
var styles$2 = {"dataTableContainer":"_1gVnBnwO8rEyN5yXaSAnJz","tableContainer":"_2FsiaQmYMKjm0oAa_Dm7Jv","table":"_2EflglZd2SRwkv61KFJrg9","pinFirstColumn":"QRm47JXl1pWi9jKv7PNPG","stickyHeader":"_3VxR0m_2LtggJeSToEDE2y","pinFirstHeaderSortable":"_1RROVWbMjf1ZfuVpquC4OS","sortableColumn":"_2uM74VHCeNJuZjyD_SPXR3","clickableRow":"_3P5HGvBjzojCSGgtBjPjJi"};
|
|
32
|
+
styleInject_es.styleInject(css$2);
|
|
32
33
|
|
|
33
34
|
function Body(_a) {
|
|
34
35
|
var _b;
|
|
35
36
|
var table = _a.table, onRowClick = _a.onRowClick;
|
|
36
|
-
var bodyRowClasses = classnames__default["default"]((_b = {}, _b[styles$
|
|
37
|
+
var bodyRowClasses = classnames__default["default"]((_b = {}, _b[styles$2.clickableRow] = !!onRowClick, _b));
|
|
37
38
|
var handleRowClick = React.useCallback(function (row) { return function () {
|
|
38
39
|
if (onRowClick == undefined)
|
|
39
40
|
return;
|
|
@@ -99,27 +100,27 @@ function getSortingSettings(sorting) {
|
|
|
99
100
|
return sortingSettings;
|
|
100
101
|
}
|
|
101
102
|
|
|
102
|
-
var css = ".
|
|
103
|
-
var styles = {"pagination":"
|
|
104
|
-
styleInject_es.styleInject(css);
|
|
103
|
+
var css$1 = "._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";
|
|
104
|
+
var styles$1 = {"pagination":"_1z97TFF0phXLaqvqXHnYJf","paginationInfo":"_12APWOsSPQzcBXU_VtquSF","paginationNav":"_36ZeprNonyJdE1RQA8egHT","paginationSelect":"e6F11Aovvn4caXYkkQNRo","paginationSelectLabel":"_3ACIaIFtTSOkMt-sRN5VOO","paginationButtons":"JBRw_pSS6W6hGIxxLABwo"};
|
|
105
|
+
styleInject_es.styleInject(css$1);
|
|
105
106
|
|
|
106
|
-
|
|
107
|
+
var defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
|
|
108
|
+
function Pagination(_a) {
|
|
107
109
|
var table = _a.table, itemsPerPage = _a.itemsPerPage, totalItems = _a.totalItems;
|
|
108
110
|
var _b = table.getState().pagination, pageIndex = _b.pageIndex, pageSize = _b.pageSize;
|
|
109
111
|
var totalRows = totalItems;
|
|
110
112
|
var firstPosition = pageIndex * pageSize + 1;
|
|
111
113
|
var secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
|
|
112
|
-
var defaultItemsPerPageOptions = React.useMemo(function () { return ["10", "20", "30", "40", "50"]; }, []);
|
|
113
114
|
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]);
|
|
114
|
-
return (React__default["default"].createElement("div", { className: styles.pagination },
|
|
115
|
-
React__default["default"].createElement("div", { className: styles.paginationInfo }, "Showing " + firstPosition + "-" + secondPosition + " of " + totalRows + " items"),
|
|
116
|
-
React__default["default"].createElement("div", { className: styles.paginationNav },
|
|
117
|
-
React__default["default"].createElement("div", { className: styles.paginationSelect },
|
|
115
|
+
return (React__default["default"].createElement("div", { className: styles$1.pagination },
|
|
116
|
+
React__default["default"].createElement("div", { className: styles$1.paginationInfo }, "Showing " + firstPosition + "-" + secondPosition + " of " + totalRows + " items"),
|
|
117
|
+
React__default["default"].createElement("div", { className: styles$1.paginationNav },
|
|
118
|
+
React__default["default"].createElement("div", { className: styles$1.paginationSelect },
|
|
118
119
|
React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: function (value) {
|
|
119
120
|
table.setPageSize(Number(value));
|
|
120
121
|
} }, itemsPerPageOptions.map(function (numOfPages) { return (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)); })),
|
|
121
|
-
React__default["default"].createElement("span", { className: styles.paginationSelectLabel }, "per page")),
|
|
122
|
-
React__default["default"].createElement("div", { className: styles.paginationButtons },
|
|
122
|
+
React__default["default"].createElement("span", { className: styles$1.paginationSelectLabel }, "per page")),
|
|
123
|
+
React__default["default"].createElement("div", { className: styles$1.paginationButtons },
|
|
123
124
|
React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: function () { return table.previousPage(); }, disabled: !table.getCanPreviousPage() }),
|
|
124
125
|
React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: function () { return table.nextPage(); }, disabled: !table.getCanNextPage() })))));
|
|
125
126
|
}
|
|
@@ -127,13 +128,13 @@ function Footer(_a) {
|
|
|
127
128
|
function Header(_a) {
|
|
128
129
|
var _b;
|
|
129
130
|
var table = _a.table, stickyHeader = _a.stickyHeader, sorting = _a.sorting, onRowClick = _a.onRowClick;
|
|
130
|
-
var stickyClass = classnames__default["default"]((_b = {}, _b[styles$
|
|
131
|
+
var stickyClass = classnames__default["default"]((_b = {}, _b[styles$2.stickyHeader] = stickyHeader, _b));
|
|
131
132
|
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) {
|
|
132
133
|
var _a;
|
|
133
134
|
var _b;
|
|
134
135
|
return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: sorting && header.column.getCanSort()
|
|
135
|
-
? classnames__default["default"](styles$
|
|
136
|
-
_a[styles$
|
|
136
|
+
? classnames__default["default"](styles$2.sortableColumn, (_a = {},
|
|
137
|
+
_a[styles$2.pinFirstHeaderSortable] = !!onRowClick,
|
|
137
138
|
_a))
|
|
138
139
|
: "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
|
|
139
140
|
reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_b = {
|
|
@@ -146,23 +147,53 @@ function Header(_a) {
|
|
|
146
147
|
}))); })));
|
|
147
148
|
}
|
|
148
149
|
|
|
150
|
+
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";
|
|
151
|
+
var styles = {"mobileFooterContainer":"_39TtNRcIeia0yD1gs7L70","mobileFooterRow":"_1AkupnXfMaD9bSt37OKKpW","mobileFooterRowData":"_2tNVzbdCh57muuCvPjItW9"};
|
|
152
|
+
styleInject_es.styleInject(css);
|
|
153
|
+
|
|
154
|
+
var DesktopView = function (_a) {
|
|
155
|
+
var table = _a.table;
|
|
156
|
+
return (React__default["default"].createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(function (header) { return (React__default["default"].createElement("th", { key: header.id }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))); }))); })));
|
|
157
|
+
};
|
|
158
|
+
var HandheldView = function (_a) {
|
|
159
|
+
var table = _a.table;
|
|
160
|
+
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
|
|
161
|
+
.filter(function (header) { return header.column.columnDef.footer; })
|
|
162
|
+
.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 },
|
|
163
|
+
reactTable.flexRender(header.column.columnDef.header, header.getContext()),
|
|
164
|
+
React__default["default"].createElement("div", { className: styles.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))); }))); })));
|
|
165
|
+
};
|
|
166
|
+
var Footer = function (_a) {
|
|
167
|
+
var table = _a.table, _b = _a.viewType, viewType = _b === void 0 ? "handheld" : _b;
|
|
168
|
+
var hasFooter = table
|
|
169
|
+
.getAllColumns()
|
|
170
|
+
.find(function (column) { return column.columnDef.footer; });
|
|
171
|
+
if (hasFooter) {
|
|
172
|
+
return viewType === "handheld" ? (React__default["default"].createElement(HandheldView, { table: table })) : (React__default["default"].createElement(DesktopView, { table: table }));
|
|
173
|
+
}
|
|
174
|
+
return null;
|
|
175
|
+
};
|
|
176
|
+
|
|
149
177
|
function DataTable(_a) {
|
|
150
178
|
var _b;
|
|
151
179
|
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;
|
|
180
|
+
var _c = tslib_es6.__read(hooks.useResizeObserver(), 2), ref = _c[0], exactWidth = _c[1].exactWidth;
|
|
152
181
|
var tableSettings = createTableSettings(data, columns, {
|
|
153
182
|
pagination: pagination,
|
|
154
183
|
sorting: sorting,
|
|
155
184
|
});
|
|
156
|
-
var tableClasses = classnames__default["default"](styles$
|
|
157
|
-
_b[styles$
|
|
185
|
+
var tableClasses = classnames__default["default"](styles$2.table, (_b = {},
|
|
186
|
+
_b[styles$2.pinFirstColumn] = pinFirstColumn,
|
|
158
187
|
_b));
|
|
159
188
|
var table = reactTable.useReactTable(tableSettings);
|
|
160
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
161
|
-
React__default["default"].createElement("div", { className: styles$
|
|
189
|
+
return (React__default["default"].createElement("div", { className: styles$2.dataTableContainer },
|
|
190
|
+
React__default["default"].createElement("div", { className: styles$2.tableContainer, style: { height: height }, ref: ref },
|
|
162
191
|
React__default["default"].createElement("table", { className: tableClasses },
|
|
163
192
|
React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
|
|
164
|
-
React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick })
|
|
165
|
-
|
|
193
|
+
React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick }),
|
|
194
|
+
exactWidth && exactWidth > hooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
|
|
195
|
+
exactWidth && exactWidth <= hooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
|
|
196
|
+
pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
|
|
166
197
|
? pagination.totalItems
|
|
167
198
|
: table.getCoreRowModel().rows.length }))));
|
|
168
199
|
}
|
|
@@ -6,6 +6,14 @@ interface Data {
|
|
|
6
6
|
sigil: string;
|
|
7
7
|
isAlive: string;
|
|
8
8
|
}
|
|
9
|
+
interface RoyaltyReportData {
|
|
10
|
+
franchiseName: string;
|
|
11
|
+
payment: string;
|
|
12
|
+
royaltyRate: number;
|
|
13
|
+
royaltyAmount: string;
|
|
14
|
+
}
|
|
9
15
|
export declare const data: Data[];
|
|
10
16
|
export declare const columns: ColumnDef<Data>[];
|
|
17
|
+
export declare const royaltyReportColumns: ColumnDef<RoyaltyReportData>[];
|
|
18
|
+
export declare const royaltyReportData: RoyaltyReportData[];
|
|
11
19
|
export {};
|
|
@@ -31,7 +31,7 @@ export interface ManualPagination {
|
|
|
31
31
|
* The options to control the pagination
|
|
32
32
|
*
|
|
33
33
|
* @type {number[]}
|
|
34
|
-
* @memberof
|
|
34
|
+
* @memberof PaginationType
|
|
35
35
|
*/
|
|
36
36
|
itemsPerPage?: number[];
|
|
37
37
|
/**
|
|
@@ -39,7 +39,7 @@ export interface ManualPagination {
|
|
|
39
39
|
* records in the table should be provided.
|
|
40
40
|
*
|
|
41
41
|
* @type {number}
|
|
42
|
-
* @memberof
|
|
42
|
+
* @memberof PaginationType
|
|
43
43
|
*/
|
|
44
44
|
totalItems: number;
|
|
45
45
|
}
|
|
@@ -47,7 +47,7 @@ export interface DefaultPagination {
|
|
|
47
47
|
manualPagination: false;
|
|
48
48
|
itemsPerPage?: number[];
|
|
49
49
|
}
|
|
50
|
-
export declare type
|
|
50
|
+
export declare type PaginationType = DefaultPagination | ManualPagination;
|
|
51
51
|
export interface ManualSorting {
|
|
52
52
|
/**
|
|
53
53
|
* Represents the current sorting state of the table.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.89.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"> 1%",
|
|
85
85
|
"IE 10"
|
|
86
86
|
],
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "2ae2744cf0846f54353087b6f0ea2fd130fd1a2e"
|
|
88
88
|
}
|