@rh-support/components 2.0.7 → 2.0.9

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.
Files changed (65) hide show
  1. package/lib/cjs/AlertMessage/AlertMessage.js +4 -4
  2. package/lib/cjs/ConfirmationModal/ConfirmationContext.js +13 -41
  3. package/lib/cjs/ConfirmationModal/ConfirmationDialog.js +5 -5
  4. package/lib/cjs/CoverSpinner/CoverSpinner.js +1 -1
  5. package/lib/cjs/CustomContentLoader/CustomContentLoader.js +4 -4
  6. package/lib/cjs/CustomTextInput/CustomTextInput.js +8 -19
  7. package/lib/cjs/DropDownList/AsyncDropDownList.js +5 -5
  8. package/lib/cjs/DropDownList/DropDownList.js +45 -75
  9. package/lib/cjs/DropDownList/DropdownWrapper.js +7 -18
  10. package/lib/cjs/DropDownList/MultiSelectDropdownList.js +3 -3
  11. package/lib/cjs/DropDownList/SearchableList.js +41 -55
  12. package/lib/cjs/DropDownList/SelectList.js +15 -26
  13. package/lib/cjs/DropDownList/async.js +28 -38
  14. package/lib/cjs/DropDownList/dropdownUtils.js +9 -20
  15. package/lib/cjs/DropDownList/withMulti.js +15 -26
  16. package/lib/cjs/ErrorBoundary/ErrorBoundary.js +18 -47
  17. package/lib/cjs/ErrorBoundary/ErrorBoundaryFallbackComponent.js +10 -10
  18. package/lib/cjs/ErrorPages/Generic403.js +2 -2
  19. package/lib/cjs/FeedbackForm/FeedbackForm.js +24 -52
  20. package/lib/cjs/Functional/CaseContactsSelectorExternal.js +81 -154
  21. package/lib/cjs/InlineEdit/InlineEdit.js +56 -142
  22. package/lib/cjs/InlineEdit/NewInlineEdit.js +60 -145
  23. package/lib/cjs/LanguageSelector/LanguageSelector.js +10 -26
  24. package/lib/cjs/LoadingDots/LoadingDots.js +3 -3
  25. package/lib/cjs/LoadingIndicator/LoadingIndicator.js +3 -3
  26. package/lib/cjs/LoginModal/LoginModal.js +3 -3
  27. package/lib/cjs/MarkdownEditor/MarkdownEditor.js +113 -165
  28. package/lib/cjs/MoreOrLess/MoreOrLess.js +20 -40
  29. package/lib/cjs/PaginatedList/PaginatedList.js +15 -31
  30. package/lib/cjs/PaginationCompact/PaginationCompact.js +14 -31
  31. package/lib/cjs/ProgressBar/CircularProgressBar/CircularProgressBar.js +14 -14
  32. package/lib/cjs/ProgressBar/CircularProgressBar/Path.js +20 -18
  33. package/lib/cjs/ProgressBar/ProgressBar.js +8 -19
  34. package/lib/cjs/PromisifyModal/PromisifyModal.js +19 -36
  35. package/lib/cjs/SubscriptionAbuse/SubscriptionAbuseModal.js +5 -5
  36. package/lib/cjs/SubscriptionAbuse/const.js +3 -3
  37. package/lib/cjs/SupportFeedbackForm/SupportFeedbackForm.js +8 -24
  38. package/lib/cjs/SupportFeedbackForm/SupportFeedbackModal.js +50 -120
  39. package/lib/cjs/Table/PFTable.js +52 -89
  40. package/lib/cjs/Table/Table.js +12 -29
  41. package/lib/cjs/Table/TableColumnSelector.js +14 -15
  42. package/lib/cjs/Table/TablePagination.js +8 -8
  43. package/lib/cjs/Table/TableProvider.js +6 -6
  44. package/lib/cjs/TermsAndConditions/AcceptTermsModal.js +46 -100
  45. package/lib/cjs/TextAreaAutosize/TextAreaAutosize.js +35 -62
  46. package/lib/cjs/TextAreaResizable/TextAreaResizable.js +9 -25
  47. package/lib/cjs/ToastNotification/ToastNotification.js +35 -70
  48. package/lib/cjs/TopContentSearch/TopContentSearch.js +48 -113
  49. package/lib/cjs/ValueChangedIcon/ValueChangedIcon.js +13 -29
  50. package/lib/cjs/helperFunctions/errorMessage.js +13 -13
  51. package/lib/cjs/hooks/useBreakpoint.js +26 -43
  52. package/lib/cjs/hooks/useCopyToClipboard.js +8 -24
  53. package/lib/cjs/hooks/useDebounce.js +13 -38
  54. package/lib/cjs/hooks/useFetch.js +47 -123
  55. package/lib/cjs/hooks/useForceUpdate.js +2 -18
  56. package/lib/cjs/hooks/useForkRef.js +3 -3
  57. package/lib/cjs/hooks/useIsMounted.js +4 -4
  58. package/lib/cjs/hooks/useLRUCache.js +11 -11
  59. package/lib/cjs/hooks/useLocalStorage.js +7 -23
  60. package/lib/cjs/hooks/useOnScreen.js +5 -24
  61. package/lib/cjs/hooks/usePolling.js +8 -30
  62. package/lib/cjs/hooks/usePrevious.js +3 -3
  63. package/lib/cjs/hooks/useTitle.js +4 -4
  64. package/lib/cjs/hooks/useUndo.js +49 -72
  65. package/package.json +6 -7
@@ -1,15 +1,4 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
3
  if (k2 === undefined) k2 = k;
15
4
  Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -38,92 +27,48 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
38
27
  step((generator = generator.apply(thisArg, _arguments || [])).next());
39
28
  });
40
29
  };
41
- var __generator = (this && this.__generator) || function (thisArg, body) {
42
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
43
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
44
- function verb(n) { return function (v) { return step([n, v]); }; }
45
- function step(op) {
46
- if (f) throw new TypeError("Generator is already executing.");
47
- while (_) try {
48
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
49
- if (y = 0, t) op = [op[0] & 2, t.value];
50
- switch (op[0]) {
51
- case 0: case 1: t = op; break;
52
- case 4: _.label++; return { value: op[1], done: false };
53
- case 5: _.label++; y = op[1]; op = [0]; continue;
54
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
55
- default:
56
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
57
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
58
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
59
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
60
- if (t[2]) _.ops.pop();
61
- _.trys.pop(); continue;
62
- }
63
- op = body.call(thisArg, _);
64
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
65
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
66
- }
67
- };
68
- var __read = (this && this.__read) || function (o, n) {
69
- var m = typeof Symbol === "function" && o[Symbol.iterator];
70
- if (!m) return o;
71
- var i = m.call(o), r, ar = [], e;
72
- try {
73
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
74
- }
75
- catch (error) { e = { error: error }; }
76
- finally {
77
- try {
78
- if (r && !r.done && (m = i["return"])) m.call(i);
79
- }
80
- finally { if (e) throw e.error; }
81
- }
82
- return ar;
83
- };
84
30
  var __importDefault = (this && this.__importDefault) || function (mod) {
85
31
  return (mod && mod.__esModule) ? mod : { "default": mod };
86
32
  };
87
33
  Object.defineProperty(exports, "__esModule", { value: true });
88
34
  exports.SupportFeedbackModal = void 0;
89
- var hydrajs_1 = require("@cee-eng/hydrajs");
90
- var react_core_1 = require("@patternfly/react-core");
91
- var outlined_frown_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-frown-icon"));
92
- var outlined_frown_open_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-frown-open-icon"));
93
- var outlined_grin_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-grin-icon"));
94
- var outlined_meh_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-meh-icon"));
95
- var outlined_smile_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-smile-icon"));
96
- var utils_1 = require("@rh-support/utils");
97
- var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
98
- var react_1 = __importStar(require("react"));
99
- var react_i18next_1 = require("react-i18next");
100
- var react_router_dom_1 = require("react-router-dom");
101
- var useFetch_1 = require("../hooks/useFetch");
102
- var TextAreaAutosize_1 = require("../TextAreaAutosize");
103
- var ToastNotification_1 = require("../ToastNotification");
104
- var required = {
35
+ const hydrajs_1 = require("@cee-eng/hydrajs");
36
+ const react_core_1 = require("@patternfly/react-core");
37
+ const outlined_frown_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-frown-icon"));
38
+ const outlined_frown_open_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-frown-open-icon"));
39
+ const outlined_grin_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-grin-icon"));
40
+ const outlined_meh_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-meh-icon"));
41
+ const outlined_smile_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/outlined-smile-icon"));
42
+ const utils_1 = require("@rh-support/utils");
43
+ const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
44
+ const react_1 = __importStar(require("react"));
45
+ const react_i18next_1 = require("react-i18next");
46
+ const react_router_dom_1 = require("react-router-dom");
47
+ const useFetch_1 = require("../hooks/useFetch");
48
+ const TextAreaAutosize_1 = require("../TextAreaAutosize");
49
+ const ToastNotification_1 = require("../ToastNotification");
50
+ const required = {
105
51
  levelOfSatisfied: true,
106
52
  moreInfo: false,
107
53
  };
108
- var defaultProps = {
54
+ const defaultProps = {
109
55
  isModalOpen: false,
110
56
  };
111
57
  function SupportFeedbackModal(props) {
112
- var _this = this;
113
58
  var _a, _b;
114
- var t = react_i18next_1.useTranslation().t;
115
- var seSessionId = (_b = (_a = utils_1.getUrlParsedParams(react_router_dom_1.useLocation().search)) === null || _a === void 0 ? void 0 : _a.seSessionId) !== null && _b !== void 0 ? _b : '';
116
- var formInitState = {
59
+ const { t } = react_i18next_1.useTranslation();
60
+ const seSessionId = (_b = (_a = utils_1.getUrlParsedParams(react_router_dom_1.useLocation().search)) === null || _a === void 0 ? void 0 : _a.seSessionId) !== null && _b !== void 0 ? _b : '';
61
+ const formInitState = {
117
62
  levelOfSatisfied: null,
118
63
  moreInfo: '',
119
64
  };
120
- var _c = __read(react_1.useState(formInitState), 2), values = _c[0], setValues = _c[1];
121
- var _d = useFetch_1.useFetch(hydrajs_1.pcm.sendFeedbackForm, { propgateErrors: true }), request = _d.request, isFetching = _d.isFetching;
122
- var _e = __read(react_1.useState(false), 2), isSubmitDisabled = _e[0], setIsSubmitDisabled = _e[1];
123
- var _f = __read(react_1.useState(true), 2), isSubmitButtonValid = _f[0], setSubmitButtonValid = _f[1];
124
- react_1.useEffect(function () {
125
- var valid = true;
126
- Object.keys(values).forEach(function (key) {
65
+ const [values, setValues] = react_1.useState(formInitState);
66
+ const { request, isFetching } = useFetch_1.useFetch(hydrajs_1.pcm.sendFeedbackForm, { propgateErrors: true });
67
+ const [isSubmitDisabled, setIsSubmitDisabled] = react_1.useState(false);
68
+ const [isSubmitButtonValid, setSubmitButtonValid] = react_1.useState(true);
69
+ react_1.useEffect(() => {
70
+ let valid = true;
71
+ Object.keys(values).forEach((key) => {
127
72
  if (required[key]) {
128
73
  valid = valid && !isEmpty_1.default(values[key]);
129
74
  }
@@ -131,47 +76,32 @@ function SupportFeedbackModal(props) {
131
76
  setSubmitButtonValid(!valid);
132
77
  }, [values]);
133
78
  // To Handle the Feedback Satisfaction values
134
- var handleSentimentChange = function (event) {
135
- var _a;
79
+ const handleSentimentChange = (event) => {
136
80
  setIsSubmitDisabled(false);
137
- setValues(__assign(__assign({}, values), (_a = {}, _a[event.target.name] = event.target.value, _a)));
81
+ setValues(Object.assign(Object.assign({}, values), { [event.target.name]: event.target.value }));
138
82
  };
139
83
  // To Handle the Text Area Input (Feedback Description)
140
- var handleFeedbackTextChange = function (event) {
141
- var _a;
142
- setValues(__assign(__assign({}, values), (_a = {}, _a[event.target.name] = event.target.value, _a)));
84
+ const handleFeedbackTextChange = (event) => {
85
+ setValues(Object.assign(Object.assign({}, values), { [event.target.name]: event.target.value }));
143
86
  };
144
- var handleSubmit = function (event) { return __awaiter(_this, void 0, void 0, function () {
145
- var error_1;
146
- return __generator(this, function (_a) {
147
- switch (_a.label) {
148
- case 0:
149
- event.preventDefault();
150
- if (!!isSubmitButtonValid) return [3 /*break*/, 5];
151
- _a.label = 1;
152
- case 1:
153
- _a.trys.push([1, 3, , 4]);
154
- return [4 /*yield*/, request(values, window.sessionjs, window.location.href, seSessionId)];
155
- case 2:
156
- _a.sent();
157
- setValues(formInitState);
158
- ToastNotification_1.ToastNotification.addSuccessMessage(t("Thank you. We've received your feedback."), t('Have a great day!'));
159
- handleModalToggle();
160
- return [3 /*break*/, 4];
161
- case 3:
162
- error_1 = _a.sent();
163
- ToastNotification_1.ToastNotification.addDangerMessage(t('Failed to submit feedback.'));
164
- return [3 /*break*/, 4];
165
- case 4: return [3 /*break*/, 6];
166
- case 5:
167
- setIsSubmitDisabled(true);
168
- _a.label = 6;
169
- case 6: return [2 /*return*/];
87
+ const handleSubmit = (event) => __awaiter(this, void 0, void 0, function* () {
88
+ event.preventDefault();
89
+ if (!isSubmitButtonValid) {
90
+ try {
91
+ yield request(values, window.sessionjs, window.location.href, seSessionId);
92
+ setValues(formInitState);
93
+ ToastNotification_1.ToastNotification.addSuccessMessage(t(`Thank you. We've received your feedback.`), t('Have a great day!'));
94
+ handleModalToggle();
170
95
  }
171
- });
172
- }); };
96
+ catch (error) {
97
+ ToastNotification_1.ToastNotification.addDangerMessage(t('Failed to submit feedback.'));
98
+ }
99
+ }
100
+ else
101
+ setIsSubmitDisabled(true);
102
+ });
173
103
  // Function for Toggling the Modal when Provide feedback button is clicked
174
- var handleModalToggle = function () {
104
+ const handleModalToggle = () => {
175
105
  if (isFetching)
176
106
  return;
177
107
  props.onClose();
@@ -179,7 +109,7 @@ function SupportFeedbackModal(props) {
179
109
  setValues({ levelOfSatisfied: null, moreInfo: '' });
180
110
  };
181
111
  // Feedback Satisfaction Values
182
- var sentiments = [
112
+ const sentiments = [
183
113
  {
184
114
  id: 'very_unsatisfied',
185
115
  icon: react_1.default.createElement(outlined_frown_open_icon_1.default, { size: "lg" }),
@@ -214,8 +144,8 @@ function SupportFeedbackModal(props) {
214
144
  react_1.default.createElement(react_i18next_1.Trans, null, "How satisfied are you with customer support\u2019s web experience?"),
215
145
  react_1.default.createElement("span", { className: "form-required", "aria-hidden": "true" }, "*"),
216
146
  ' '),
217
- react_1.default.createElement("div", { className: "satisfaction-values-wrapper" }, sentiments.map(function (sentiment) {
218
- return (react_1.default.createElement("label", { className: sentiment.id + " sentiment-label pf-u-ml-md pf-u-mr-md " + (values.levelOfSatisfied === sentiment.label ? 'sentiment-selected' : ''), htmlFor: sentiment.id, key: sentiment.id },
147
+ react_1.default.createElement("div", { className: "satisfaction-values-wrapper" }, sentiments.map((sentiment) => {
148
+ return (react_1.default.createElement("label", { className: `${sentiment.id} sentiment-label pf-u-ml-md pf-u-mr-md ${values.levelOfSatisfied === sentiment.label ? 'sentiment-selected' : ''}`, htmlFor: sentiment.id, key: sentiment.id },
219
149
  react_1.default.createElement("input", { type: "radio", id: sentiment.id, "aria-label": t(sentiment.label), disabled: isFetching, name: "levelOfSatisfied", value: sentiment.label, checked: values.levelOfSatisfied === sentiment.label, "aria-checked": values.levelOfSatisfied === sentiment.label, required: true, className: "feedback_button_values pf-u-mb-sm pf-screen-reader", onChange: handleSentimentChange }),
220
150
  ' ',
221
151
  sentiment.icon,
@@ -1,15 +1,4 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
3
  if (k2 === undefined) k2 = k;
15
4
  Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -40,39 +29,18 @@ var __rest = (this && this.__rest) || function (s, e) {
40
29
  }
41
30
  return t;
42
31
  };
43
- var __read = (this && this.__read) || function (o, n) {
44
- var m = typeof Symbol === "function" && o[Symbol.iterator];
45
- if (!m) return o;
46
- var i = m.call(o), r, ar = [], e;
47
- try {
48
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
49
- }
50
- catch (error) { e = { error: error }; }
51
- finally {
52
- try {
53
- if (r && !r.done && (m = i["return"])) m.call(i);
54
- }
55
- finally { if (e) throw e.error; }
56
- }
57
- return ar;
58
- };
59
- var __spreadArray = (this && this.__spreadArray) || function (to, from) {
60
- for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
61
- to[j] = from[i];
62
- return to;
63
- };
64
32
  var __importDefault = (this && this.__importDefault) || function (mod) {
65
33
  return (mod && mod.__esModule) ? mod : { "default": mod };
66
34
  };
67
35
  Object.defineProperty(exports, "__esModule", { value: true });
68
36
  exports.PFTable = exports.defaultTableSortMethod = void 0;
69
- var react_core_1 = require("@patternfly/react-core");
70
- var search_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/search-icon"));
71
- var react_table_1 = require("@patternfly/react-table");
72
- var react_1 = __importStar(require("react"));
73
- var TableProvider_1 = require("./TableProvider");
74
- var noop = function () { };
75
- var emptyStateRowDefault = [
37
+ const react_core_1 = require("@patternfly/react-core");
38
+ const search_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/search-icon"));
39
+ const react_table_1 = require("@patternfly/react-table");
40
+ const react_1 = __importStar(require("react"));
41
+ const TableProvider_1 = require("./TableProvider");
42
+ const noop = () => { };
43
+ const emptyStateRowDefault = [
76
44
  {
77
45
  heightAuto: true,
78
46
  cells: [
@@ -86,7 +54,7 @@ var emptyStateRowDefault = [
86
54
  ],
87
55
  },
88
56
  ];
89
- var loadingRowDefault = [
57
+ const loadingRowDefault = [
90
58
  {
91
59
  heightAuto: true,
92
60
  cells: [
@@ -99,56 +67,55 @@ var loadingRowDefault = [
99
67
  ],
100
68
  },
101
69
  ];
102
- var defaultSortMethod = function (a, b) { return (a < b ? -1 : a > b ? 1 : 0); };
70
+ const defaultSortMethod = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
103
71
  exports.defaultTableSortMethod = defaultSortMethod;
104
72
  function PFTable(props) {
105
- var className = props.className, pagination = props.pagination, onRowClick = props.onRowClick, onSortChange = props.onSortChange, onSelect = props.onSelect, _a = props.emptyStateRow, emptyStateRow = _a === void 0 ? emptyStateRowDefault : _a, _b = props.loadingRow, loadingRow = _b === void 0 ? loadingRowDefault : _b, isLoading = props.isLoading, keepPageNumberOnDataChange = props.keepPageNumberOnDataChange, sortInfo = props.sortInfo, restProps = __rest(props, ["className", "pagination", "onRowClick", "onSortChange", "onSelect", "emptyStateRow", "loadingRow", "isLoading", "keepPageNumberOnDataChange", "sortInfo"]);
106
- var _c = TableProvider_1.useTableContext(), columns = _c.columns, data = _c.data, currentPage = _c.currentPage, perPage = _c.perPage, setSelectedPage = _c.setSelectedPage;
107
- var _d = __read(react_1.useState(), 2), sortBy = _d[0], setSortBy = _d[1];
108
- var _e = __read(react_1.useState([]), 2), pfColumns = _e[0], setPFColumns = _e[1];
109
- var _f = __read(react_1.useState([]), 2), pfRows = _f[0], setPFRows = _f[1];
110
- var isSelectColumnVisible = onSelect && (data || []).length > 0;
111
- var onSort = function (event, index, direction) {
73
+ const { className, pagination, onRowClick, onSortChange, onSelect, emptyStateRow = emptyStateRowDefault, loadingRow = loadingRowDefault, isLoading, keepPageNumberOnDataChange, sortInfo } = props, restProps = __rest(props, ["className", "pagination", "onRowClick", "onSortChange", "onSelect", "emptyStateRow", "loadingRow", "isLoading", "keepPageNumberOnDataChange", "sortInfo"]);
74
+ const { columns, data, currentPage, perPage, setSelectedPage } = TableProvider_1.useTableContext();
75
+ const [sortBy, setSortBy] = react_1.useState();
76
+ const [pfColumns, setPFColumns] = react_1.useState([]);
77
+ const [pfRows, setPFRows] = react_1.useState([]);
78
+ const isSelectColumnVisible = onSelect && (data || []).length > 0;
79
+ const onSort = (event, index, direction) => {
112
80
  // if onselect option is passed we need to decrease index by 1 to account for the checkbox column
113
- var actualIndex = isSelectColumnVisible ? index - 1 : index;
81
+ const actualIndex = isSelectColumnVisible ? index - 1 : index;
114
82
  if (sortBy && sortBy.index === index && sortBy.direction === direction)
115
83
  return;
116
84
  setSortBy({
117
- index: index,
118
- direction: direction,
85
+ index,
86
+ direction,
119
87
  });
120
88
  onSortChange ? onSortChange(columns[actualIndex], direction) : setSortedRows(actualIndex, direction);
121
89
  };
122
- react_1.useEffect(function () {
90
+ react_1.useEffect(() => {
123
91
  if (!sortInfo)
124
92
  return;
125
- var column = sortInfo.column, direction = sortInfo.direction;
126
- var columnIndex = columns.findIndex(function (item) { return item.id === column; });
127
- var actualIndex = onSelect ? columnIndex + 1 : columnIndex;
93
+ const { column, direction } = sortInfo;
94
+ const columnIndex = columns.findIndex((item) => item.id === column);
95
+ const actualIndex = onSelect ? columnIndex + 1 : columnIndex;
128
96
  if (sortBy && sortBy.index === actualIndex && sortBy.direction === direction)
129
97
  return;
130
98
  setSortBy({
131
99
  index: actualIndex,
132
- direction: direction,
100
+ direction,
133
101
  });
134
102
  // eslint-disable-next-line react-hooks/exhaustive-deps
135
103
  }, [sortInfo]);
136
- var setSortedRows = react_1.useCallback(function (index, direction, rows) {
137
- if (rows === void 0) { rows = null; }
104
+ const setSortedRows = react_1.useCallback((index, direction, rows = null) => {
138
105
  if (onSortChange)
139
106
  return;
140
- var sortMethod = columns[index].sortMethod || defaultSortMethod;
141
- var sortedRows = (rows || pfRows).sort(function (a, b) { return sortMethod(a.cells[index], b.cells[index], direction); });
142
- var sortedData = direction === react_table_1.SortByDirection.asc ? sortedRows : sortedRows.reverse();
107
+ const sortMethod = columns[index].sortMethod || defaultSortMethod;
108
+ const sortedRows = (rows || pfRows).sort((a, b) => sortMethod(a.cells[index], b.cells[index], direction));
109
+ const sortedData = direction === react_table_1.SortByDirection.asc ? sortedRows : sortedRows.reverse();
143
110
  setPFRows(sortedData);
144
111
  },
145
112
  // eslint-disable-next-line react-hooks/exhaustive-deps
146
113
  [pfRows, columns]);
147
- react_1.useEffect(function () {
148
- var mappedPFColumns = columns.map(function (item) {
149
- var title = item.title, isSortable = item.sortable, show = item.show, width = item.cellWidth;
114
+ react_1.useEffect(() => {
115
+ const mappedPFColumns = columns.map((item) => {
116
+ const { title, sortable: isSortable, show, cellWidth: width } = item;
150
117
  // tslint:disable-next-line:no-object-literal-type-assertion
151
- var mappedColumn = {};
118
+ const mappedColumn = {};
152
119
  mappedColumn['title'] = title || '';
153
120
  if (isSortable) {
154
121
  mappedColumn['transforms'] = [];
@@ -165,16 +132,16 @@ function PFTable(props) {
165
132
  });
166
133
  setPFColumns(mappedPFColumns);
167
134
  }, [columns]);
168
- react_1.useEffect(function () {
169
- var rows = data.map(function (row, index) {
170
- var a = [];
171
- columns.forEach(function (item) {
172
- var accessor = item.accessor, cell = item.cell, _a = item.rowProps, rowProps = _a === void 0 ? noop : _a;
135
+ react_1.useEffect(() => {
136
+ const rows = data.map((row, index) => {
137
+ const a = [];
138
+ columns.forEach((item) => {
139
+ const { accessor, cell, rowProps = noop } = item;
173
140
  if (cell) {
174
- a.push({ title: cell(row, index), props: __assign({}, rowProps(row)) });
141
+ a.push({ title: cell(row, index), props: Object.assign({}, rowProps(row)) });
175
142
  }
176
143
  else if (accessor) {
177
- var rowData = accessor(row);
144
+ const rowData = accessor(row);
178
145
  a.push(rowData);
179
146
  }
180
147
  });
@@ -183,36 +150,32 @@ function PFTable(props) {
183
150
  setPFRows(rows);
184
151
  pagination && !keepPageNumberOnDataChange && setSelectedPage(1);
185
152
  if (sortBy && sortBy.direction && sortBy.index !== undefined && (data || []).length > 0) {
186
- var actualIndex = isSelectColumnVisible ? sortBy.index - 1 : sortBy.index;
153
+ const actualIndex = isSelectColumnVisible ? sortBy.index - 1 : sortBy.index;
187
154
  setSortedRows(actualIndex, sortBy.direction, rows);
188
155
  }
189
156
  // eslint-disable-next-line react-hooks/exhaustive-deps
190
157
  }, [data]);
191
- var getVisibleRows = function () {
192
- return pagination ? pfRows.slice((currentPage - 1) * perPage, currentPage * perPage) : pfRows;
193
- };
194
- var onRowSelect = function (ev, isSelected, rowindex, rowdata, extradata) {
158
+ const getVisibleRows = () => pagination ? pfRows.slice((currentPage - 1) * perPage, currentPage * perPage) : pfRows;
159
+ const onRowSelect = (ev, isSelected, rowindex, rowdata, extradata) => {
195
160
  // currently there seems to be a bug in PFTable if the data is not changed
196
161
  // then this function is called with the previous state
197
162
  // so we call all the setState functions with the function syntax.
198
163
  if (rowindex === -1) {
199
- setPFRows(function (currentRows) {
200
- return currentRows.map(function (row) {
201
- row.selected = isSelected;
202
- return row;
203
- });
204
- });
164
+ setPFRows((currentRows) => currentRows.map((row) => {
165
+ row.selected = isSelected;
166
+ return row;
167
+ }));
205
168
  }
206
169
  else {
207
- setPFRows(function (currentRows) {
208
- var updatedRows = __spreadArray([], __read(currentRows));
170
+ setPFRows((currentRows) => {
171
+ const updatedRows = [...currentRows];
209
172
  updatedRows[rowindex].selected = isSelected;
210
173
  return updatedRows;
211
174
  });
212
175
  }
213
176
  onSelect && onSelect(ev, isSelected, rowindex, rowdata, extradata);
214
177
  };
215
- var getTableRows = function () {
178
+ const getTableRows = () => {
216
179
  if (!isLoading && emptyStateRow && (data || []).length < 1) {
217
180
  return emptyStateRow;
218
181
  }
@@ -223,8 +186,8 @@ function PFTable(props) {
223
186
  return getVisibleRows();
224
187
  }
225
188
  };
226
- var conditionalProps = __assign({}, (isSelectColumnVisible ? { onSelect: onRowSelect } : undefined));
227
- var getSortBy = function () {
189
+ const conditionalProps = Object.assign({}, (isSelectColumnVisible ? { onSelect: onRowSelect } : undefined));
190
+ const getSortBy = () => {
228
191
  var _a;
229
192
  if (sortBy) {
230
193
  return {
@@ -234,7 +197,7 @@ function PFTable(props) {
234
197
  }
235
198
  };
236
199
  return (react_1.default.createElement(react_1.default.Fragment, null,
237
- react_1.default.createElement(react_table_1.Table, __assign({}, restProps, conditionalProps, { variant: react_table_1.TableVariant.compact, cells: pfColumns, sortBy: getSortBy(), onSort: onSort, rows: getTableRows(), className: props.className ? props.className : '', actionResolver: props.actionResolver, actions: props.actions || null, areActionsDisabled: props.areActionsDisabled || null }),
200
+ react_1.default.createElement(react_table_1.Table, Object.assign({}, restProps, conditionalProps, { variant: react_table_1.TableVariant.compact, cells: pfColumns, sortBy: getSortBy(), onSort: onSort, rows: getTableRows(), className: props.className ? props.className : '', actionResolver: props.actionResolver, actions: props.actions || null, areActionsDisabled: props.areActionsDisabled || null }),
238
201
  react_1.default.createElement(react_table_1.TableHeader, null),
239
202
  react_1.default.createElement(react_table_1.TableBody, { onRowClick: onRowClick ? onRowClick : noop }))));
240
203
  }
@@ -18,38 +18,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
18
18
  __setModuleDefault(result, mod);
19
19
  return result;
20
20
  };
21
- var __read = (this && this.__read) || function (o, n) {
22
- var m = typeof Symbol === "function" && o[Symbol.iterator];
23
- if (!m) return o;
24
- var i = m.call(o), r, ar = [], e;
25
- try {
26
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
27
- }
28
- catch (error) { e = { error: error }; }
29
- finally {
30
- try {
31
- if (r && !r.done && (m = i["return"])) m.call(i);
32
- }
33
- finally { if (e) throw e.error; }
34
- }
35
- return ar;
36
- };
37
21
  Object.defineProperty(exports, "__esModule", { value: true });
38
22
  exports.Table = void 0;
39
- var react_1 = __importStar(require("react"));
40
- var TableProvider_1 = require("./TableProvider");
41
- function Table(_a) {
42
- var children = _a.children, columns = _a.columns, data = _a.data, selectedColumns = _a.selectedColumns;
43
- var _b = __read(react_1.useState(1), 2), currentPage = _b[0], setSelectedPage = _b[1];
44
- var _c = __read(react_1.useState(10), 2), perPage = _c[0], setPerPage = _c[1];
23
+ const react_1 = __importStar(require("react"));
24
+ const TableProvider_1 = require("./TableProvider");
25
+ function Table({ children, columns, data, selectedColumns }) {
26
+ const [currentPage, setSelectedPage] = react_1.useState(1);
27
+ const [perPage, setPerPage] = react_1.useState(10);
45
28
  return (react_1.default.createElement(TableProvider_1.TableContext.Provider, { value: {
46
- columns: columns,
47
- data: data,
48
- perPage: perPage,
49
- currentPage: currentPage,
50
- setSelectedPage: setSelectedPage,
51
- setPerPage: setPerPage,
52
- selectedColumns: selectedColumns,
29
+ columns,
30
+ data,
31
+ perPage,
32
+ currentPage,
33
+ setSelectedPage,
34
+ setPerPage,
35
+ selectedColumns,
53
36
  } }, children));
54
37
  }
55
38
  exports.Table = Table;
@@ -6,30 +6,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.TableColumnSelector = void 0;
7
7
  // import { Button } from '@patternfly/react-core';
8
8
  require("./columnSelector.css");
9
- var utils_1 = require("@rh-support/utils");
10
- var react_1 = __importDefault(require("react"));
11
- var react_i18next_1 = require("react-i18next");
12
- var DropDownList_1 = require("../DropDownList");
13
- var TableProvider_1 = require("./TableProvider");
14
- function TableColumnSelector(_a) {
15
- var onColumnSelectorChange = _a.onColumnSelectorChange;
16
- var _b = TableProvider_1.useTableContext(), selectedItems = _b.selectedColumns, columns = _b.columns;
17
- var t = react_i18next_1.useTranslation().t;
18
- var handleChange = function (selectedCols) {
19
- selectedCols = selectedCols.map(function (i) { return i.value.value; });
9
+ const utils_1 = require("@rh-support/utils");
10
+ const react_1 = __importDefault(require("react"));
11
+ const react_i18next_1 = require("react-i18next");
12
+ const DropDownList_1 = require("../DropDownList");
13
+ const TableProvider_1 = require("./TableProvider");
14
+ function TableColumnSelector({ onColumnSelectorChange }) {
15
+ const { selectedColumns: selectedItems, columns } = TableProvider_1.useTableContext();
16
+ const { t } = react_i18next_1.useTranslation();
17
+ const handleChange = (selectedCols) => {
18
+ selectedCols = selectedCols.map((i) => i.value.value);
20
19
  onColumnSelectorChange(selectedCols);
21
20
  };
22
- return (react_1.default.createElement(DropDownList_1.MultiSelectDropDownList, { id: "case-list-table-column-dropdown", "data-tracking-id": "case-list-table-column-dropdown", selectedItems: utils_1.toOptions((selectedItems || []).map(function (item) {
21
+ return (react_1.default.createElement(DropDownList_1.MultiSelectDropDownList, { id: "case-list-table-column-dropdown", "data-tracking-id": "case-list-table-column-dropdown", selectedItems: utils_1.toOptions((selectedItems || []).map((item) => {
23
22
  var _a;
24
23
  return ({
25
24
  value: item,
26
- label: (((_a = columns.find(function (col) { return item === col.id; })) === null || _a === void 0 ? void 0 : _a.title) || ''),
25
+ label: (((_a = columns.find((col) => item === col.id)) === null || _a === void 0 ? void 0 : _a.title) || ''),
27
26
  isDisabled: false,
28
27
  });
29
- }), { labelKey: 'label', disabledKey: 'isDisabled' }), list: utils_1.toOptions(columns.map(function (column) { return ({
28
+ }), { labelKey: 'label', disabledKey: 'isDisabled' }), list: utils_1.toOptions(columns.map((column) => ({
30
29
  value: column.id,
31
30
  label: column.title,
32
31
  isDisabled: column.show === undefined,
33
- }); }), { labelKey: 'label', disabledKey: 'isDisabled' }), title: 'column selector menu', placeholder: t('Columns'), onChange: handleChange, className: "column-selector", hasTwoColumns: true }));
32
+ })), { labelKey: 'label', disabledKey: 'isDisabled' }), title: 'column selector menu', placeholder: t('Columns'), onChange: handleChange, className: "column-selector", hasTwoColumns: true }));
34
33
  }
35
34
  exports.TableColumnSelector = TableColumnSelector;
@@ -20,21 +20,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
20
20
  };
21
21
  Object.defineProperty(exports, "__esModule", { value: true });
22
22
  exports.TablePagination = void 0;
23
- var react_core_1 = require("@patternfly/react-core");
24
- var react_1 = __importStar(require("react"));
25
- var TableProvider_1 = require("./TableProvider");
23
+ const react_core_1 = require("@patternfly/react-core");
24
+ const react_1 = __importStar(require("react"));
25
+ const TableProvider_1 = require("./TableProvider");
26
26
  function TablePagination(props) {
27
- var _a = TableProvider_1.useTableContext(), data = _a.data, setSelectedPage = _a.setSelectedPage, setPerPage = _a.setPerPage, perPage = _a.perPage, currentPage = _a.currentPage;
28
- var onSetPage = function (event, pageNumber) {
27
+ const { data, setSelectedPage, setPerPage, perPage, currentPage } = TableProvider_1.useTableContext();
28
+ const onSetPage = (event, pageNumber) => {
29
29
  setSelectedPage(pageNumber);
30
30
  props.onSetPage && props.onSetPage({ pageSize: perPage, currentPage: pageNumber });
31
31
  };
32
- var onPerPageSelect = function (event, pageSize) {
32
+ const onPerPageSelect = (event, pageSize) => {
33
33
  setSelectedPage(1);
34
34
  setPerPage(pageSize);
35
- props.onPerPageSelect && props.onPerPageSelect({ pageSize: pageSize, currentPage: 1 });
35
+ props.onPerPageSelect && props.onPerPageSelect({ pageSize, currentPage: 1 });
36
36
  };
37
- react_1.useEffect(function () {
37
+ react_1.useEffect(() => {
38
38
  props.perPage && props.perPage !== perPage && setPerPage(props.perPage);
39
39
  props.currentPage && props.currentPage !== currentPage && setSelectedPage(props.currentPage);
40
40
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4,21 +4,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.useTableContext = exports.TableContext = void 0;
7
- var react_1 = __importDefault(require("react"));
8
- var intialTableContext = {
7
+ const react_1 = __importDefault(require("react"));
8
+ const intialTableContext = {
9
9
  columns: [],
10
10
  data: [],
11
11
  currentPage: 1,
12
12
  perPage: 10,
13
- setSelectedPage: function () { },
14
- setPerPage: function () { },
13
+ setSelectedPage: () => { },
14
+ setPerPage: () => { },
15
15
  selectedColumns: [],
16
16
  };
17
17
  exports.TableContext = react_1.default.createContext(intialTableContext);
18
18
  function useTableContext() {
19
- var context = react_1.default.useContext(exports.TableContext);
19
+ const context = react_1.default.useContext(exports.TableContext);
20
20
  if (context === undefined) {
21
- throw new Error("useTableContext must be used within a TableProvider");
21
+ throw new Error(`useTableContext must be used within a TableProvider`);
22
22
  }
23
23
  return context;
24
24
  }