@jobber/components 4.27.0 → 4.28.0

package/dist/DataTable/Body.d.ts

@@ -3,8 +3,8 @@ import { ReactNode } from "react";
 interface BodyProps<T> {
     table: Table<T>;
     onRowClick?: (row: Row<T>) => void;
-    height?: number;
     emptyState?: ReactNode | ReactNode[];
+    loading: boolean;
 }
-export declare function Body<T extends object>({ table, onRowClick, emptyState, }: BodyProps<T>): JSX.Element;
+export declare function Body<T extends object>({ table, onRowClick, emptyState, loading, }: BodyProps<T>): JSX.Element;
 export {};

package/dist/DataTable/BodyLoading.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+interface BodyLoadingProps<T> {
+    table: Table<T>;
+}
+export declare function BodyLoading<T extends object>({ table }: BodyLoadingProps<T>): JSX.Element;
+export {};

package/dist/DataTable/DataTable.d.ts

@@ -49,5 +49,9 @@ export interface DataTableProps<T> {
      * The elements to display when the data table is empty
      */
     emptyState?: ReactNode | ReactNode[];
+    /**
+     * When true, shows the loading state of the DataTable
+     */
+    loading?: boolean;
 }
-export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }: DataTableProps<T>): JSX.Element;
+export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading, }: DataTableProps<T>): JSX.Element;

package/dist/DataTable/Pagination.d.ts

@@ -4,6 +4,7 @@ interface PaginationProps<T> {
     table: Table<T>;
     itemsPerPage?: number[];
     totalItems: number;
+    loading: boolean;
 }
-export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, }: PaginationProps<T>): JSX.Element;
+export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, loading, }: PaginationProps<T>): JSX.Element;
 export {};

package/dist/DataTable/index.js

@@ -7,10 +7,12 @@ var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Glimmer = require('../Glimmer-cfa92a88.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var Option = require('../Option-63267b27.js');
 var Button = require('../Button-7698424c.js');
 var Text = require('../Text-e7ed0974.js');
+require('../Content-2ca1ffe1.js');
 require('../FormField-0f880b07.js');
 require('uuid');
 require('react-hook-form');
@@ -50,22 +52,37 @@ var css_248z$3 = ".m5A5oeRFaMs- {\n  position: relative;\n  border: calc(16px /
 var styles$3 = {"dataTableContainer":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
 styleInject_es.styleInject(css_248z$3);
 
-function Body({ table, onRowClick, emptyState, }) {
+function BodyLoading({ table }) {
+    const loaderRows = table.getState().pagination.pageSize;
+    const loaderColumns = table.getAllColumns().length;
+    return (React__default["default"].createElement("tbody", null, Array.from(Array(loaderRows).keys()).map(row => (React__default["default"].createElement("tr", { key: row }, Array.from(Array(loaderColumns).keys()).map(arr => (React__default["default"].createElement("td", { key: arr },
+        React__default["default"].createElement(Glimmer.Glimmer, null)))))))));
+}
+
+function Body({ table, onRowClick, emptyState, loading, }) {
     const bodyRowClasses = classnames__default["default"]({ [styles$3.clickableRow]: !!onRowClick });
     const handleRowClick = React.useCallback((row) => () => {
         if (onRowClick == undefined)
             return;
         onRowClick(row);
     }, [onRowClick]);
-    return table.getRowModel().rows.length ? (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(row => {
-        return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(cell => {
-            return (React__default["default"].createElement("td", { key: cell.id, style: {
-                    width: cell.column.getSize(),
-                    minWidth: cell.column.columnDef.minSize,
-                    maxWidth: cell.column.columnDef.maxSize,
-                } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
-        })));
-    }))) : (React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState));
+    if (loading) {
+        return React__default["default"].createElement(BodyLoading, { table: table });
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        "table.getRowModel().rows.length ? (",
+        React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(row => {
+            return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(cell => {
+                return (React__default["default"].createElement("td", { key: cell.id, style: {
+                        width: cell.column.getSize(),
+                        minWidth: cell.column.columnDef.minSize,
+                        maxWidth: cell.column.columnDef.maxSize,
+                    } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
+            })));
+        })),
+        ") : (",
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState),
+        ")"));
 }
 
 function createTableSettings(data, columns, options) {
@@ -126,15 +143,14 @@ var styles$2 = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","pa
 styleInject_es.styleInject(css_248z$2);
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
-function Pagination({ table, itemsPerPage, totalItems, }) {
+function Pagination({ table, itemsPerPage, totalItems, loading, }) {
     const { pageIndex, pageSize } = table.getState().pagination;
     const totalRows = totalItems;
     const firstPosition = pageIndex * pageSize + 1;
     const secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
     const itemsPerPageOptions = React.useMemo(() => { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(item => String(item))) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
     return secondPosition <= 0 ? (React__default["default"].createElement("div", { className: styles$2.pagination },
-        React__default["default"].createElement("div", { className: styles$2.paginationInfo },
-            React__default["default"].createElement(Text.Text, null, "No items")))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
+        React__default["default"].createElement("div", { className: styles$2.paginationInfo }, !loading ? React__default["default"].createElement(Text.Text, null, "No items") : React__default["default"].createElement(Glimmer.Glimmer, { width: 200 })))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
         React__default["default"].createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
         React__default["default"].createElement("div", { className: styles$2.paginationNav },
             React__default["default"].createElement("div", { className: styles$2.paginationSelect },
@@ -233,7 +249,7 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
     }))))));
 }
 
-function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }) {
+function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading = false, }) {
     const [ref, { exactWidth }] = jobberHooks.useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
@@ -247,7 +263,7 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
         React__default["default"].createElement("div", { className: styles$3.tableContainer, style: { height }, ref: ref },
             React__default["default"].createElement("table", { className: tableClasses },
                 React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
-                React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, height: height ? height * 0.7 : undefined, emptyState: emptyState }),
+                React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
                     exactWidth > jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
@@ -256,7 +272,7 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
             exactWidth <= jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
         pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
-                : table.getCoreRowModel().rows.length }))));
+                : table.getCoreRowModel().rows.length, loading: loading }))));
 }
 
 const mockContainerWidth = (exactWidth) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.27.0",
+  "version": "4.28.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "8ae1169e35b132825ecad1640d58a511375d481c"
+  "gitHead": "d1f65a97649c0cebfb21f03d195d7f94d0afe46f"
 }