@rh-support/components 2.0.5 → 2.0.8
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/lib/cjs/AlertMessage/AlertMessage.js +5 -5
- package/lib/cjs/ConfirmationModal/ConfirmationContext.js +13 -41
- package/lib/cjs/ConfirmationModal/ConfirmationDialog.js +5 -5
- package/lib/cjs/CoverSpinner/CoverSpinner.js +1 -1
- package/lib/cjs/CustomContentLoader/CustomContentLoader.js +4 -4
- package/lib/cjs/CustomTextInput/CustomTextInput.js +8 -19
- package/lib/cjs/DropDownList/AsyncDropDownList.js +5 -5
- package/lib/cjs/DropDownList/DropDownList.js +45 -75
- package/lib/cjs/DropDownList/DropdownWrapper.js +7 -18
- package/lib/cjs/DropDownList/MultiSelectDropdownList.js +3 -3
- package/lib/cjs/DropDownList/SearchableList.js +41 -55
- package/lib/cjs/DropDownList/SelectList.js +15 -26
- package/lib/cjs/DropDownList/async.js +28 -38
- package/lib/cjs/DropDownList/dropdownUtils.js +9 -20
- package/lib/cjs/DropDownList/withMulti.js +15 -26
- package/lib/cjs/ErrorBoundary/ErrorBoundary.js +18 -47
- package/lib/cjs/ErrorBoundary/ErrorBoundaryFallbackComponent.js +10 -10
- package/lib/cjs/ErrorPages/Generic403.js +2 -2
- package/lib/cjs/FeedbackForm/FeedbackForm.js +24 -52
- package/lib/cjs/Functional/CaseContactsSelectorExternal.js +81 -154
- package/lib/cjs/InlineEdit/InlineEdit.js +56 -142
- package/lib/cjs/InlineEdit/NewInlineEdit.js +60 -145
- package/lib/cjs/LanguageSelector/LanguageSelector.js +10 -26
- package/lib/cjs/LoadingDots/LoadingDots.js +3 -3
- package/lib/cjs/LoadingIndicator/LoadingIndicator.js +3 -3
- package/lib/cjs/LoginModal/LoginModal.js +3 -3
- package/lib/cjs/MarkdownEditor/MarkdownEditor.js +113 -165
- package/lib/cjs/MoreOrLess/MoreOrLess.js +20 -40
- package/lib/cjs/PaginatedList/PaginatedList.js +15 -31
- package/lib/cjs/PaginationCompact/PaginationCompact.js +14 -31
- package/lib/cjs/ProgressBar/CircularProgressBar/CircularProgressBar.js +14 -14
- package/lib/cjs/ProgressBar/CircularProgressBar/Path.js +20 -18
- package/lib/cjs/ProgressBar/ProgressBar.js +8 -19
- package/lib/cjs/PromisifyModal/PromisifyModal.js +19 -36
- package/lib/cjs/SubscriptionAbuse/SubscriptionAbuseModal.js +5 -5
- package/lib/cjs/SubscriptionAbuse/const.js +3 -3
- package/lib/cjs/SupportFeedbackForm/SupportFeedbackForm.js +8 -24
- package/lib/cjs/SupportFeedbackForm/SupportFeedbackModal.js +50 -120
- package/lib/cjs/Table/PFTable.js +52 -89
- package/lib/cjs/Table/Table.js +12 -29
- package/lib/cjs/Table/TableColumnSelector.js +14 -15
- package/lib/cjs/Table/TablePagination.js +8 -8
- package/lib/cjs/Table/TableProvider.js +6 -6
- package/lib/cjs/TermsAndConditions/AcceptTermsModal.js +46 -100
- package/lib/cjs/TextAreaAutosize/TextAreaAutosize.js +35 -62
- package/lib/cjs/TextAreaResizable/TextAreaResizable.js +9 -25
- package/lib/cjs/ToastNotification/ToastNotification.js +35 -70
- package/lib/cjs/TopContentSearch/TopContentSearch.js +48 -113
- package/lib/cjs/ValueChangedIcon/ValueChangedIcon.js +13 -29
- package/lib/cjs/helperFunctions/errorMessage.js +13 -13
- package/lib/cjs/hooks/useBreakpoint.js +26 -43
- package/lib/cjs/hooks/useCopyToClipboard.js +8 -24
- package/lib/cjs/hooks/useDebounce.js +13 -38
- package/lib/cjs/hooks/useFetch.js +47 -123
- package/lib/cjs/hooks/useForceUpdate.js +2 -18
- package/lib/cjs/hooks/useForkRef.js +3 -3
- package/lib/cjs/hooks/useIsMounted.js +4 -4
- package/lib/cjs/hooks/useLRUCache.js +11 -11
- package/lib/cjs/hooks/useLocalStorage.js +7 -23
- package/lib/cjs/hooks/useOnScreen.js +5 -24
- package/lib/cjs/hooks/usePolling.js +8 -30
- package/lib/cjs/hooks/usePrevious.js +3 -3
- package/lib/cjs/hooks/useTitle.js +4 -4
- package/lib/cjs/hooks/useUndo.js +49 -72
- package/lib/esm/AlertMessage/AlertMessage.js +2 -2
- package/package.json +9 -10
|
@@ -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
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
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
|
-
|
|
54
|
+
const defaultProps = {
|
|
109
55
|
isModalOpen: false,
|
|
110
56
|
};
|
|
111
57
|
function SupportFeedbackModal(props) {
|
|
112
|
-
var _this = this;
|
|
113
58
|
var _a, _b;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
react_1.useEffect(
|
|
125
|
-
|
|
126
|
-
Object.keys(values).forEach(
|
|
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
|
-
|
|
135
|
-
var _a;
|
|
79
|
+
const handleSentimentChange = (event) => {
|
|
136
80
|
setIsSubmitDisabled(false);
|
|
137
|
-
setValues(
|
|
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
|
-
|
|
141
|
-
|
|
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
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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(
|
|
218
|
-
return (react_1.default.createElement("label", { className: 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,
|
package/lib/cjs/Table/PFTable.js
CHANGED
|
@@ -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
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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
|
-
|
|
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
|
-
|
|
70
|
+
const defaultSortMethod = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
|
|
103
71
|
exports.defaultTableSortMethod = defaultSortMethod;
|
|
104
72
|
function PFTable(props) {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
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
|
-
|
|
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
|
|
118
|
-
direction
|
|
85
|
+
index,
|
|
86
|
+
direction,
|
|
119
87
|
});
|
|
120
88
|
onSortChange ? onSortChange(columns[actualIndex], direction) : setSortedRows(actualIndex, direction);
|
|
121
89
|
};
|
|
122
|
-
react_1.useEffect(
|
|
90
|
+
react_1.useEffect(() => {
|
|
123
91
|
if (!sortInfo)
|
|
124
92
|
return;
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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
|
|
100
|
+
direction,
|
|
133
101
|
});
|
|
134
102
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
135
103
|
}, [sortInfo]);
|
|
136
|
-
|
|
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
|
-
|
|
141
|
-
|
|
142
|
-
|
|
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(
|
|
148
|
-
|
|
149
|
-
|
|
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
|
-
|
|
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(
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
columns.forEach(
|
|
172
|
-
|
|
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:
|
|
141
|
+
a.push({ title: cell(row, index), props: Object.assign({}, rowProps(row)) });
|
|
175
142
|
}
|
|
176
143
|
else if (accessor) {
|
|
177
|
-
|
|
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
|
-
|
|
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
|
-
|
|
192
|
-
|
|
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(
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
});
|
|
204
|
-
});
|
|
164
|
+
setPFRows((currentRows) => currentRows.map((row) => {
|
|
165
|
+
row.selected = isSelected;
|
|
166
|
+
return row;
|
|
167
|
+
}));
|
|
205
168
|
}
|
|
206
169
|
else {
|
|
207
|
-
setPFRows(
|
|
208
|
-
|
|
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
|
-
|
|
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
|
-
|
|
227
|
-
|
|
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,
|
|
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
|
}
|
package/lib/cjs/Table/Table.js
CHANGED
|
@@ -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
|
-
|
|
40
|
-
|
|
41
|
-
function Table(
|
|
42
|
-
|
|
43
|
-
|
|
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
|
|
47
|
-
data
|
|
48
|
-
perPage
|
|
49
|
-
currentPage
|
|
50
|
-
setSelectedPage
|
|
51
|
-
setPerPage
|
|
52
|
-
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
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
function TableColumnSelector(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
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
|
-
})
|
|
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
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
-
|
|
28
|
-
|
|
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
|
-
|
|
32
|
+
const onPerPageSelect = (event, pageSize) => {
|
|
33
33
|
setSelectedPage(1);
|
|
34
34
|
setPerPage(pageSize);
|
|
35
|
-
props.onPerPageSelect && props.onPerPageSelect({ pageSize
|
|
35
|
+
props.onPerPageSelect && props.onPerPageSelect({ pageSize, currentPage: 1 });
|
|
36
36
|
};
|
|
37
|
-
react_1.useEffect(
|
|
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
|
-
|
|
8
|
-
|
|
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:
|
|
14
|
-
setPerPage:
|
|
13
|
+
setSelectedPage: () => { },
|
|
14
|
+
setPerPage: () => { },
|
|
15
15
|
selectedColumns: [],
|
|
16
16
|
};
|
|
17
17
|
exports.TableContext = react_1.default.createContext(intialTableContext);
|
|
18
18
|
function useTableContext() {
|
|
19
|
-
|
|
19
|
+
const context = react_1.default.useContext(exports.TableContext);
|
|
20
20
|
if (context === undefined) {
|
|
21
|
-
throw new Error(
|
|
21
|
+
throw new Error(`useTableContext must be used within a TableProvider`);
|
|
22
22
|
}
|
|
23
23
|
return context;
|
|
24
24
|
}
|