@jobber/components 2.88.0 → 2.89.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/CHANGELOG.md +19 -0
- package/dist/DataTable/DataTable.d.ts +3 -3
- package/dist/DataTable/Footer.d.ts +4 -5
- package/dist/DataTable/Header.d.ts +2 -2
- package/dist/DataTable/Pagination.d.ts +8 -0
- package/dist/DataTable/createTableSettings.d.ts +3 -3
- package/dist/DataTable/index.js +62 -34
- package/dist/DataTable/test-utilities/mocks.d.ts +8 -0
- package/dist/DataTable/types.d.ts +4 -4
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,25 @@ 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.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.0...@jobber/components@2.89.1) (2022-11-30)
|
|
12
|
+
|
|
13
|
+
**Note:** Version bump only for package @jobber/components
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
# [2.89.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.88.0...@jobber/components@2.89.0) (2022-11-25)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
* **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))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
11
30
|
# [2.88.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.87.0...@jobber/components@2.88.0) (2022-11-16)
|
|
12
31
|
|
|
13
32
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ColumnDef, Row } from "@tanstack/react-table";
|
|
2
|
-
import {
|
|
2
|
+
import { PaginationType, SortingType } from "./types";
|
|
3
3
|
export interface DataTableProps<T> {
|
|
4
4
|
/**
|
|
5
5
|
* The actual data that will be used for the table.
|
|
@@ -18,13 +18,13 @@ 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
|
|
25
25
|
*
|
|
26
26
|
*/
|
|
27
|
-
sorting?:
|
|
27
|
+
sorting?: SortingType;
|
|
28
28
|
/**
|
|
29
29
|
* This will force the table to have the specified hight
|
|
30
30
|
*
|
|
@@ -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;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Row, Table } from "@tanstack/react-table";
|
|
2
|
-
import {
|
|
2
|
+
import { SortingType } from "./types";
|
|
3
3
|
interface HeaderProps<T> {
|
|
4
4
|
table: Table<T>;
|
|
5
5
|
stickyHeader?: boolean;
|
|
6
|
-
sorting?:
|
|
6
|
+
sorting?: SortingType;
|
|
7
7
|
onRowClick?: (row: Row<T>) => void;
|
|
8
8
|
}
|
|
9
9
|
export declare function Header<T extends object>({ table, stickyHeader, sorting, onRowClick, }: HeaderProps<T>): JSX.Element;
|
|
@@ -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 {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ColumnDef } from "@tanstack/react-table";
|
|
2
|
-
import {
|
|
2
|
+
import { PaginationType, SortingType } from "./types";
|
|
3
3
|
export declare function createTableSettings<T>(data: T[], columns: ColumnDef<T>[], options?: {
|
|
4
|
-
pagination?:
|
|
5
|
-
sorting?:
|
|
4
|
+
pagination?: PaginationType;
|
|
5
|
+
sorting?: SortingType;
|
|
6
6
|
}): any;
|
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
|
-
} }, 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 },
|
|
121
|
+
}, size: "small" }, itemsPerPageOptions.map(function (numOfPages) { return (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)); })),
|
|
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,42 +128,69 @@ 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
|
-
var _b;
|
|
134
134
|
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$
|
|
135
|
+
? classnames__default["default"](styles$2.sortableColumn, (_a = {},
|
|
136
|
+
_a[styles$2.pinFirstHeaderSortable] = !!onRowClick,
|
|
137
137
|
_a))
|
|
138
138
|
: "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
|
|
139
|
-
reactTable.flexRender(header.column.columnDef.header, header.getContext()),
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
height: "var(--space-large)",
|
|
145
|
-
} }))))));
|
|
139
|
+
reactTable.flexRender(header.column.columnDef.header, header.getContext()),
|
|
140
|
+
{
|
|
141
|
+
asc: React__default["default"].createElement(Icon.Icon, { name: "longArrowUp", color: "green" }),
|
|
142
|
+
desc: React__default["default"].createElement(Icon.Icon, { name: "longArrowDown", color: "green" }),
|
|
143
|
+
}[header.column.getIsSorted()]))));
|
|
146
144
|
}))); })));
|
|
147
145
|
}
|
|
148
146
|
|
|
147
|
+
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";
|
|
148
|
+
var styles = {"mobileFooterContainer":"_39TtNRcIeia0yD1gs7L70","mobileFooterRow":"_1AkupnXfMaD9bSt37OKKpW","mobileFooterRowData":"_2tNVzbdCh57muuCvPjItW9"};
|
|
149
|
+
styleInject_es.styleInject(css);
|
|
150
|
+
|
|
151
|
+
var DesktopView = function (_a) {
|
|
152
|
+
var table = _a.table;
|
|
153
|
+
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()))); }))); })));
|
|
154
|
+
};
|
|
155
|
+
var HandheldView = function (_a) {
|
|
156
|
+
var table = _a.table;
|
|
157
|
+
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
|
|
158
|
+
.filter(function (header) { return header.column.columnDef.footer; })
|
|
159
|
+
.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 },
|
|
160
|
+
reactTable.flexRender(header.column.columnDef.header, header.getContext()),
|
|
161
|
+
React__default["default"].createElement("div", { className: styles.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))); }))); })));
|
|
162
|
+
};
|
|
163
|
+
var Footer = function (_a) {
|
|
164
|
+
var table = _a.table, _b = _a.viewType, viewType = _b === void 0 ? "handheld" : _b;
|
|
165
|
+
var hasFooter = table
|
|
166
|
+
.getAllColumns()
|
|
167
|
+
.find(function (column) { return column.columnDef.footer; });
|
|
168
|
+
if (hasFooter) {
|
|
169
|
+
return viewType === "handheld" ? (React__default["default"].createElement(HandheldView, { table: table })) : (React__default["default"].createElement(DesktopView, { table: table }));
|
|
170
|
+
}
|
|
171
|
+
return null;
|
|
172
|
+
};
|
|
173
|
+
|
|
149
174
|
function DataTable(_a) {
|
|
150
175
|
var _b;
|
|
151
176
|
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;
|
|
177
|
+
var _c = tslib_es6.__read(hooks.useResizeObserver(), 2), ref = _c[0], exactWidth = _c[1].exactWidth;
|
|
152
178
|
var tableSettings = createTableSettings(data, columns, {
|
|
153
179
|
pagination: pagination,
|
|
154
180
|
sorting: sorting,
|
|
155
181
|
});
|
|
156
|
-
var tableClasses = classnames__default["default"](styles$
|
|
157
|
-
_b[styles$
|
|
182
|
+
var tableClasses = classnames__default["default"](styles$2.table, (_b = {},
|
|
183
|
+
_b[styles$2.pinFirstColumn] = pinFirstColumn,
|
|
158
184
|
_b));
|
|
159
185
|
var table = reactTable.useReactTable(tableSettings);
|
|
160
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
161
|
-
React__default["default"].createElement("div", { className: styles$
|
|
186
|
+
return (React__default["default"].createElement("div", { className: styles$2.dataTableContainer },
|
|
187
|
+
React__default["default"].createElement("div", { className: styles$2.tableContainer, style: { height: height }, ref: ref },
|
|
162
188
|
React__default["default"].createElement("table", { className: tableClasses },
|
|
163
189
|
React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
|
|
164
|
-
React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick })
|
|
165
|
-
|
|
190
|
+
React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick }),
|
|
191
|
+
exactWidth && exactWidth > hooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
|
|
192
|
+
exactWidth && exactWidth <= hooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
|
|
193
|
+
pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
|
|
166
194
|
? pagination.totalItems
|
|
167
195
|
: table.getCoreRowModel().rows.length }))));
|
|
168
196
|
}
|
|
@@ -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.
|
|
@@ -80,4 +80,4 @@ export interface DefaultSorting {
|
|
|
80
80
|
*/
|
|
81
81
|
manualSorting: false;
|
|
82
82
|
}
|
|
83
|
-
export declare type
|
|
83
|
+
export declare type SortingType = DefaultSorting | ManualSorting;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.89.1",
|
|
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": "558080c2e04649042031a7529a45d66b3297d085"
|
|
88
88
|
}
|