studiokit-scaffolding-js 5.1.1 → 5.1.2

package/lib/components/ManageTable.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -10,6 +21,10 @@ var react_2 = __importDefault(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var react_table_1 = __importDefault(require("react-table"));
 var table_1 = require("../constants/table");
+var table_2 = require("../utils/table");
+var ManageTableNoDataComponent_1 = require("./ManageTableNoDataComponent");
+var PaginationNextButton_1 = require("./PaginationNextButton");
+var PaginationPreviousButton_1 = require("./PaginationPreviousButton");
 var RefreshIndicator_1 = require("./RefreshIndicator");
 var ManageTable = function (_a) {
     //#region Data
@@ -62,33 +77,15 @@ var ManageTable = function (_a) {
     var SearchTabs = react_1.useMemo(function () { return (react_2.default.createElement(react_bootstrap_1.Tabs, { activeKey: selectedTab, id: "search-tabs", onSelect: onTabSelect }, tabs.map(function (tab) { return (react_2.default.createElement(react_bootstrap_1.Tab, { key: tab, eventKey: tab.toString(), title: getTabName(tab) + " (" + dataLengthByTab[tab] + ")", disabled: noResultsFound })); }))); }, [dataLengthByTab, getTabName, noResultsFound, onTabSelect, selectedTab, tabs]);
     //#endregion Tabs
     //#region Table
-    var NoDataComponent = react_1.useMemo(function () {
-        return hasSearched ? (react_2.default.createElement("p", { className: "pt4 tc" },
-            "No ",
-            entityName.toLocaleLowerCase(),
-            " matched your search.",
-            canQueryAll && !queryAll && (react_2.default.createElement(react_2.default.Fragment, null,
-                " You might want to try again with \"Search All ",
-                entityName,
-                "\" checked.")))) : (react_2.default.createElement("p", { className: "pt4 tc" },
-            "No ",
-            getTabName(selectedTab).toLowerCase(),
-            " ",
-            entityName.toLocaleLowerCase(),
-            ' ',
-            isFiltered ? 'matched your search' : 'found',
-            "."));
-    }, [canQueryAll, entityName, getTabName, hasSearched, isFiltered, queryAll, selectedTab]);
+    var NoDataComponent = react_1.useMemo(function () { return (react_2.default.createElement(ManageTableNoDataComponent_1.ManageTableNoDataComponent, __assign({}, { canQueryAll: canQueryAll, entityName: entityName, getTabName: getTabName, hasSearched: hasSearched, isFiltered: isFiltered, queryAll: queryAll, selectedTab: selectedTab }))); }, [canQueryAll, entityName, getTabName, hasSearched, isFiltered, queryAll, selectedTab]);
     var NoDataComponentCallback = react_1.useCallback(function () { return NoDataComponent; }, [NoDataComponent]);
     var Table = react_1.useMemo(function () {
-        var _a;
+        // show pagination if there are more rows than the default page size
         var showPagination = !!data && data.length > table_1.TABLE_DEFAULT_PAGE_SIZE;
         // if pagination is not enabled, or page is not set, ensure page is 0, the first page
         var pageForTab = showPagination && pageByTab && selectedTab ? pageByTab[selectedTab] : 0;
-        // if there are less items to display than the page size, shrink the page size so there are not empty rows
-        var currentPageSize = Math.min((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : table_1.TABLE_DEFAULT_PAGE_SIZE, pageSize !== null && pageSize !== void 0 ? pageSize : table_1.TABLE_DEFAULT_PAGE_SIZE);
-        var pageSizeOptions = table_1.TABLE_PAGE_SIZE_OPTIONS.filter(function (s) { return !(data === null || data === void 0 ? void 0 : data.length) || s <= (data === null || data === void 0 ? void 0 : data.length); });
-        return (react_2.default.createElement(react_table_1.default, { "aria-describedby": "search-results-label", className: "manage-table -striped cb" + ((data === null || data === void 0 ? void 0 : data.length) === 1 ? ' single-row-action-button' : ''), data: data, showPagination: showPagination, showPaginationTop: true, sorted: sortingRules, pageSize: currentPageSize, page: pageForTab, pageSizeOptions: pageSizeOptions, columns: columns, onSortedChange: setSortingRules, onPageSizeChange: setPageSize, onPageChange: setPage, NoDataComponent: NoDataComponentCallback }));
+        var pageSizeOptions = table_2.getPageSizeOptions(data === null || data === void 0 ? void 0 : data.length);
+        return (react_2.default.createElement(react_table_1.default, { "aria-describedby": "search-results-label", className: "manage-table -striped cb" + ((data === null || data === void 0 ? void 0 : data.length) === 1 ? ' single-row-action-button' : ''), data: data, showPagination: showPagination, showPaginationTop: true, sorted: sortingRules, pageSize: pageSize, page: pageForTab, pageSizeOptions: pageSizeOptions, minRows: 0, columns: columns, onSortedChange: setSortingRules, onPageSizeChange: setPageSize, onPageChange: setPage, NextComponent: PaginationNextButton_1.PaginationNextButton, PreviousComponent: PaginationPreviousButton_1.PaginationPreviousButton, NoDataComponent: NoDataComponentCallback }));
     }, [
         NoDataComponentCallback,
         columns,

package/lib/components/ManageTableNoDataComponent.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+export interface ManageTableNoDataComponentProps {
+    entityName: string;
+    selectedTab?: number;
+    getTabName: (tab?: number) => string;
+    queryAll?: boolean;
+    canQueryAll?: boolean;
+    isFiltered?: boolean;
+    hasSearched?: boolean;
+}
+export declare const ManageTableNoDataComponent: FunctionComponent<ManageTableNoDataComponentProps>;

package/lib/components/ManageTableNoDataComponent.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManageTableNoDataComponent = void 0;
+var react_1 = __importDefault(require("react"));
+var ManageTableNoDataComponent = function (_a) {
+    var entityName = _a.entityName, selectedTab = _a.selectedTab, getTabName = _a.getTabName, queryAll = _a.queryAll, canQueryAll = _a.canQueryAll, isFiltered = _a.isFiltered, hasSearched = _a.hasSearched;
+    return (react_1.default.createElement("p", { className: "pt4 tc" }, hasSearched ? (react_1.default.createElement(react_1.default.Fragment, null,
+        "No ",
+        entityName.toLocaleLowerCase(),
+        " matched your search.",
+        canQueryAll && !queryAll && (react_1.default.createElement(react_1.default.Fragment, null,
+            " You might want to try again with \"Search All ",
+            entityName,
+            "\" checked.")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        "No ",
+        getTabName(selectedTab).toLowerCase(),
+        " ",
+        entityName.toLocaleLowerCase(),
+        ' ',
+        isFiltered ? 'matched your search' : 'found',
+        "."))));
+};
+exports.ManageTableNoDataComponent = ManageTableNoDataComponent;

package/lib/components/PaginationNextButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@material-ui/core';
+import { FunctionComponent } from 'react';
+export declare const PaginationNextButton: FunctionComponent<ButtonProps>;

package/lib/components/PaginationNextButton.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationNextButton = void 0;
+var core_1 = require("@material-ui/core");
+var KeyboardArrowRight_1 = __importDefault(require("@material-ui/icons/KeyboardArrowRight"));
+var react_1 = __importDefault(require("react"));
+var PaginationNextButton = function (props) { return (react_1.default.createElement(core_1.Button, __assign({ className: "btn-text color-primary w-100" }, props),
+    "Next ",
+    react_1.default.createElement(KeyboardArrowRight_1.default, null))); };
+exports.PaginationNextButton = PaginationNextButton;

package/lib/components/PaginationPreviousButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@material-ui/core';
+import { FunctionComponent } from 'react';
+export declare const PaginationPreviousButton: FunctionComponent<ButtonProps>;

package/lib/components/PaginationPreviousButton.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationPreviousButton = void 0;
+var core_1 = require("@material-ui/core");
+var KeyboardArrowLeft_1 = __importDefault(require("@material-ui/icons/KeyboardArrowLeft"));
+var react_1 = __importDefault(require("react"));
+var PaginationPreviousButton = function (props) { return (react_1.default.createElement(core_1.Button, __assign({ className: "btn-text color-primary w-100" }, props),
+    react_1.default.createElement(KeyboardArrowLeft_1.default, null),
+    " Previous")); };
+exports.PaginationPreviousButton = PaginationPreviousButton;

package/lib/components/SearchControls.js

@@ -25,7 +25,7 @@ var SearchControls = function (_a) {
             react_1.default.createElement(DateField_1.DateField, { id: "date", onChange: handleDateChange, label: "Date", "aria-label": "Active date", className: "fl-ns mw5-ns mr3-ns mb3 mb0-ns w-100-lt-xs date-align", value: dateString }))),
         react_1.default.createElement("div", { className: "fl-ns mt3-ns pt3-ns w-100-lt-xs" },
             canReadAnyGlobally && !!setQueryAll && (react_1.default.createElement(react_bootstrap_1.FormCheck, { name: "queryAll", id: "queryAll", checked: queryAll, disabled: canReadAnyGlobally && !canReadSome, onChange: setQueryAll, className: "fl-ns f6 mr2-ns mb3 mt2 w-100-lt-xs", label: react_1.default.createElement("span", { className: "b black" }, queryAllText || 'Search All') })),
-            canReadAnyGlobally && queryAll && (react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs search-button", onClick: handleSearchClick, color: "primary", disabled: !keywords || keywords.length < 3 || !!invalidKeywords },
+            canReadAnyGlobally && queryAll && (react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs search-button", onClick: handleSearchClick, color: "primary", disabled: (!keywords || keywords.length < 3 || !!invalidKeywords) && !dateString },
                 react_1.default.createElement(Search_1.default, null),
                 "Search")),
             react_1.default.createElement(Button_1.default, { className: "btn-text color-pink fr-ns mb3 w-100-lt-xs", onClick: resetSearch },

package/lib/css/components/_tables.css

@@ -62,6 +62,39 @@ th,
  * react table
  */
 
+.table-container {
+	width: 100%;
+	overflow-x: auto;
+}
+
+.table-search-container {
+	padding: 0 !important;
+	text-align: left;
+	background: white;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 3px;
+	width: 100%;
+
+	& .MuiSvgIcon-root {
+		margin-top: 0.55rem;
+	}
+
+	& .table-search-input {
+		text-align: left;
+		outline: none !important;
+		border: none !important;
+		width: 100%;
+	}
+
+	& input[type=search] {
+		-webkit-appearance: none;
+	}
+
+	& input[type=search]::-webkit-search-cancel-button {
+		-webkit-appearance: searchfield-cancel-button;
+	}
+}
+
 .ReactTable {
 	& .rt-thead .rt-tr {
 		background-color: var(--color-off-white);
@@ -88,10 +121,81 @@ th,
 		overflow: visible;
 	}
 
-	& .-pagination .-btn[disabled] {
-		opacity: 1 !important;
-		background-color: var(--color-light-grey) !important;
-		color: var(--color-dark-grey) !important;
+	& .pagination-top,
+	& .pagination-bottom {
+		background-color: var(--color-off-white);
+
+		& .-pagination {
+			padding: 0.5rem 0.6rem;
+			border-top: none;
+		}
+	}
+
+	& .pagination-top .-pagination {
+		border-bottom: 1px solid var(--color-light-grey);
+	}
+
+	& .pagination-bottom .-pagination {
+		border-top: 1px solid var(--color-light-grey);
+	}
+
+	& .-pagination .-previous,
+	& .-pagination .-next {
+		& .MuiButton-text {
+			background-color: var(--color-white);
+			border: 1px solid var(--color-light-grey);
+
+			&[disabled] {
+				background-color: var(--color-light-grey);
+			}
+
+			& .MuiButton-label .MuiSvgIcon-root {
+				margin: 0;
+			}
+		}
+	}
+
+	/* duplicate .form-control styles */
+	& .-pagination input,
+	.-pagination select {
+		display: block;
+		width: 100%;
+		height: calc(1.5em + 0.75rem + 2px);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.5;
+		color: #495057;
+		background-color: #fff;
+		background-clip: padding-box;
+		border: 1px solid #ced4da;
+		border-radius: 0.25rem;
+		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+		font-family: var(--text-font-stack);
+		padding: 0.5rem;
+		border-color: var(--color-light-grey);
+		box-shadow: none;
+
+		&:focus {
+			border-color: #80bdff;
+			outline: 0;
+			-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+			box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+		}
+
+		&::placeholder {
+			color: #6c757d;
+			opacity: 1;
+		}
+	}
+
+	& .-pagination .-pageSizeOptions.select {
+		padding: 0.375rem 0.75rem;
+	}
+
+	&.single-row-action-button {
+		& .rt-tbody {
+			padding-bottom: 108px;
+		}
 	}
 
 	& .rt-noData {
@@ -113,39 +217,6 @@ th,
 	}
 }
 
-.table-container {
-	width: 100%;
-	overflow-x: auto;
-}
-
-.table-search-container {
-	padding: 0 !important;
-	text-align: left;
-	background: white;
-	border: 1px solid rgba(0, 0, 0, 0.1);
-	border-radius: 3px;
-	width: 100%;
-
-	& .MuiSvgIcon-root {
-		margin-top: 0.55rem;
-	}
-
-	& .table-search-input {
-		text-align: left;
-		outline: none !important;
-		border: none !important;
-		width: 100%;
-	}
-
-	& input[type=search] {
-		-webkit-appearance: none;
-	}
-
-	& input[type=search]::-webkit-search-cancel-button {
-		-webkit-appearance: searchfield-cancel-button;
-	}
-}
-
 .striped-table tr:nth-child(even) {
 	background-color: var(--color-light-blue) !important;
 }

package/lib/utils/table.d.ts

@@ -0,0 +1,7 @@
+export declare const getManageTableTabName: (selectedTab?: number | undefined) => "" | "Available" | "Deleted";
+export declare const getGroupManageTableTabName: (selectedTab?: number | undefined) => "" | "Deleted" | "Current" | "Past";
+/**
+ * return page size options that are less than or equal to the total data length,
+ * and one that is greater (if it exists) to allow viewing all data on one page.
+ * */
+export declare const getPageSizeOptions: (dataLength?: number | undefined) => number[];

package/lib/utils/{manageTable.js → table.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGroupManageTableTabName = exports.getManageTableTabName = void 0;
+exports.getPageSizeOptions = exports.getGroupManageTableTabName = exports.getManageTableTabName = void 0;
 var table_1 = require("../constants/table");
 var getManageTableTabName = function (selectedTab) {
     switch (selectedTab) {
@@ -26,3 +26,17 @@ var getGroupManageTableTabName = function (selectedTab) {
     }
 };
 exports.getGroupManageTableTabName = getGroupManageTableTabName;
+/**
+ * return page size options that are less than or equal to the total data length,
+ * and one that is greater (if it exists) to allow viewing all data on one page.
+ * */
+var getPageSizeOptions = function (dataLength) {
+    return table_1.TABLE_PAGE_SIZE_OPTIONS.reduce(function (options, option, currentIndex) {
+        var prevOption = currentIndex > 0 ? options[currentIndex - 1] : undefined;
+        if (!dataLength || option < dataLength || (prevOption && prevOption < dataLength)) {
+            options.push(option);
+        }
+        return options;
+    }, []);
+};
+exports.getPageSizeOptions = getPageSizeOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "5.1.1",
+	"version": "5.1.2",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",

package/lib/utils/manageTable.d.ts

@@ -1,2 +0,0 @@
-export declare const getManageTableTabName: (selectedTab?: number | undefined) => "" | "Available" | "Deleted";
-export declare const getGroupManageTableTabName: (selectedTab?: number | undefined) => "" | "Deleted" | "Current" | "Past";