@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,60 +27,17 @@ 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.InlineEdit = void 0;
|
|
89
35
|
require("./inlineEdit.css");
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
36
|
+
const pencil_alt_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/pencil-alt-icon"));
|
|
37
|
+
const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const react_i18next_1 = require("react-i18next");
|
|
40
|
+
const defaultProps = {
|
|
95
41
|
allowInlineEdit: false,
|
|
96
42
|
formClassName: '',
|
|
97
43
|
formId: '',
|
|
@@ -111,110 +57,78 @@ var defaultProps = {
|
|
|
111
57
|
isSpaceAllowed: true,
|
|
112
58
|
};
|
|
113
59
|
function InlineEdit(props) {
|
|
114
|
-
var _this = this;
|
|
115
60
|
var _a;
|
|
116
|
-
|
|
61
|
+
const [isEditing, setIsEditing] = react_1.useState(props.initialIsEditing);
|
|
117
62
|
// editingTrueOnStart is a state to track if inlineEdit component is open on start, we don't want to focus
|
|
118
63
|
// on input/textareat in this situation as we may have other form elements on page that we want to focus
|
|
119
|
-
|
|
120
|
-
|
|
64
|
+
const [canAutoSetFocus, setCanAutoSfocus] = react_1.useState(!props.initialIsEditing);
|
|
65
|
+
const onEditClicked = (e) => {
|
|
121
66
|
setCanAutoSfocus(true);
|
|
122
67
|
e.preventDefault();
|
|
123
68
|
props.cancelOnToggle && isEditing && props.onCancel && props.onCancel();
|
|
124
69
|
setIsEditing(!isEditing);
|
|
125
70
|
};
|
|
126
71
|
// To Render edit button
|
|
127
|
-
|
|
72
|
+
const renderEditButton = () => {
|
|
128
73
|
if (!props.allowInlineEdit) {
|
|
129
74
|
return null;
|
|
130
75
|
}
|
|
131
76
|
return (react_1.default.createElement("button", { className: "btn btn-link btn-app btn-edit", "aria-label": "Edit", onClick: onEditClicked },
|
|
132
77
|
react_1.default.createElement(pencil_alt_icon_1.default, null)));
|
|
133
78
|
};
|
|
134
|
-
|
|
79
|
+
const onBlurChild = () => {
|
|
135
80
|
props.collapseOnBlur && setIsEditing(!isEditing);
|
|
136
81
|
props.saveOnBlur && !props.saveDisabled && props.onSave && props.onSave();
|
|
137
82
|
props.cancelOnBlur && props.onCancel && props.onCancel();
|
|
138
83
|
};
|
|
139
|
-
|
|
84
|
+
const onCancelClicked = () => {
|
|
140
85
|
props.onCancel && props.onCancel();
|
|
141
86
|
setIsEditing(false);
|
|
142
87
|
};
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
setIsEditing(false);
|
|
158
|
-
return [3 /*break*/, 4];
|
|
159
|
-
case 3:
|
|
160
|
-
e_1 = _b.sent();
|
|
161
|
-
return [3 /*break*/, 4];
|
|
162
|
-
case 4: return [2 /*return*/];
|
|
163
|
-
}
|
|
164
|
-
});
|
|
165
|
-
}); };
|
|
166
|
-
var onSaveClicked = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
167
|
-
return __generator(this, function (_a) {
|
|
168
|
-
switch (_a.label) {
|
|
169
|
-
case 0:
|
|
170
|
-
if (props.saveDisabled)
|
|
171
|
-
return [2 /*return*/];
|
|
172
|
-
return [4 /*yield*/, onSave()];
|
|
173
|
-
case 1:
|
|
174
|
-
_a.sent();
|
|
175
|
-
return [2 /*return*/];
|
|
176
|
-
}
|
|
177
|
-
});
|
|
178
|
-
}); };
|
|
88
|
+
const onSave = () => __awaiter(this, void 0, void 0, function* () {
|
|
89
|
+
try {
|
|
90
|
+
props.onSave && (yield props.onSave());
|
|
91
|
+
setIsEditing(false);
|
|
92
|
+
}
|
|
93
|
+
catch (e) {
|
|
94
|
+
// we will keep the user in the editing state. so nothing to do here
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
const onSaveClicked = () => __awaiter(this, void 0, void 0, function* () {
|
|
98
|
+
if (props.saveDisabled)
|
|
99
|
+
return;
|
|
100
|
+
yield onSave();
|
|
101
|
+
});
|
|
179
102
|
// Disables button if isSpaceAllowed is False and Input has Spaces
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
case 1:
|
|
190
|
-
if (!(!props.hideSaveCancel &&
|
|
191
|
-
props.allowInlineEdit &&
|
|
192
|
-
isEditing &&
|
|
193
|
-
!diabledCheckForSpaceAllowed &&
|
|
194
|
-
!props.saveDisabled &&
|
|
195
|
-
e.keyCode === 13)) return [3 /*break*/, 3];
|
|
196
|
-
return [4 /*yield*/, onSave()];
|
|
197
|
-
case 2:
|
|
198
|
-
_a.sent();
|
|
199
|
-
_a.label = 3;
|
|
200
|
-
case 3: return [2 /*return*/];
|
|
201
|
-
}
|
|
202
|
-
});
|
|
203
|
-
}); };
|
|
204
|
-
var renderSaveCancel = function () {
|
|
205
|
-
return !props.hideSaveCancel &&
|
|
103
|
+
const diabledCheckForSpaceAllowed = !props.isSpaceAllowed && isEmpty_1.default((_a = props.inputValue) === null || _a === void 0 ? void 0 : _a.trim());
|
|
104
|
+
const handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
105
|
+
// Cancel on pressing esc
|
|
106
|
+
if (props.allowInlineEdit && isEditing && e.keyCode === 27) {
|
|
107
|
+
props.onCancel && props.onCancel();
|
|
108
|
+
setIsEditing(false);
|
|
109
|
+
}
|
|
110
|
+
// Save on pressing enter
|
|
111
|
+
else if (!props.hideSaveCancel &&
|
|
206
112
|
props.allowInlineEdit &&
|
|
207
|
-
isEditing &&
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
};
|
|
214
|
-
|
|
215
|
-
|
|
113
|
+
isEditing &&
|
|
114
|
+
!diabledCheckForSpaceAllowed &&
|
|
115
|
+
!props.saveDisabled &&
|
|
116
|
+
e.keyCode === 13) {
|
|
117
|
+
yield onSave();
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
const renderSaveCancel = () => !props.hideSaveCancel &&
|
|
121
|
+
props.allowInlineEdit &&
|
|
122
|
+
isEditing && (react_1.default.createElement("span", { className: "edit-actions" },
|
|
123
|
+
props.loadingIndicator && react_1.default.createElement("span", null, props.loadingIndicator),
|
|
124
|
+
react_1.default.createElement("button", { "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-save` : null, className: "btn btn-app btn-link", type: "button", onClick: onSaveClicked, disabled: diabledCheckForSpaceAllowed || props.saveDisabled },
|
|
125
|
+
react_1.default.createElement(react_i18next_1.Trans, null, props.saveLabel)),
|
|
126
|
+
react_1.default.createElement("button", { type: "button", "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-cancel` : null, className: "btn btn-app btn-link", onClick: onCancelClicked },
|
|
127
|
+
react_1.default.createElement(react_i18next_1.Trans, null, props.cancelLabel))));
|
|
128
|
+
const canShowContent = !isEditing && props.allowInlineEdit && props.content;
|
|
129
|
+
return (react_1.default.createElement("div", { className: `form-group edit-question ${props.formClassName}`, id: props.formId },
|
|
216
130
|
!props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
217
|
-
react_1.default.createElement("label",
|
|
131
|
+
react_1.default.createElement("label", Object.assign({}, props.labelProps),
|
|
218
132
|
react_1.default.createElement("span", { className: "label-edit" }, props.labelContent),
|
|
219
133
|
props.helperContent,
|
|
220
134
|
renderEditButton()))),
|
|
@@ -232,15 +146,15 @@ function InlineEdit(props) {
|
|
|
232
146
|
!props.allowInlineEdit && props.children,
|
|
233
147
|
props.allowInlineEdit &&
|
|
234
148
|
isEditing &&
|
|
235
|
-
react_1.default.Children.map(props.children,
|
|
149
|
+
react_1.default.Children.map(props.children, (child) => {
|
|
236
150
|
if (!child)
|
|
237
151
|
return;
|
|
238
|
-
|
|
152
|
+
const canFocusChild = (child.type === 'input' || child.type === 'textarea') && canAutoSetFocus;
|
|
239
153
|
// if input/textarea had autoFocus but focus was lost in the wrapper component
|
|
240
|
-
|
|
154
|
+
const needsReFocus = !canAutoSetFocus && child.props.autoFocus;
|
|
241
155
|
if (canFocusChild || needsReFocus) {
|
|
242
156
|
return react_1.default.cloneElement(child, {
|
|
243
|
-
ref:
|
|
157
|
+
ref: (node) => {
|
|
244
158
|
node && node.focus();
|
|
245
159
|
setCanAutoSfocus(false);
|
|
246
160
|
},
|
|
@@ -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,60 +27,17 @@ 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.NewInlineEdit = void 0;
|
|
89
35
|
require("./newInlineEdit.css");
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
36
|
+
const pencil_alt_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/pencil-alt-icon"));
|
|
37
|
+
const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
|
|
38
|
+
const react_1 = __importStar(require("react"));
|
|
39
|
+
const react_i18next_1 = require("react-i18next");
|
|
40
|
+
const defaultProps = {
|
|
95
41
|
allowInlineEdit: false,
|
|
96
42
|
formClassName: '',
|
|
97
43
|
formId: '',
|
|
@@ -111,122 +57,91 @@ var defaultProps = {
|
|
|
111
57
|
isSpaceAllowed: true,
|
|
112
58
|
};
|
|
113
59
|
function NewInlineEdit(props) {
|
|
114
|
-
var _this = this;
|
|
115
60
|
var _a;
|
|
116
|
-
|
|
61
|
+
const [isEditing, setIsEditing] = react_1.useState(props.initialIsEditing);
|
|
117
62
|
// editingTrueOnStart is a state to track if inlineEdit component is open on start, we don't want to focus
|
|
118
63
|
// on input/textareat in this situation as we may have other form elements on page that we want to focus
|
|
119
|
-
|
|
64
|
+
const [canAutoSetFocus, setCanAutoSfocus] = react_1.useState(!props.initialIsEditing);
|
|
120
65
|
// To close InlineEdit input and show content whenever cancel is clicked
|
|
121
|
-
react_1.useEffect(
|
|
66
|
+
react_1.useEffect(() => {
|
|
122
67
|
if (isEditing) {
|
|
123
68
|
setIsEditing(!isEditing);
|
|
124
69
|
}
|
|
125
70
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
126
71
|
}, [props.cancelToggleState, props.saveToggleState]);
|
|
127
|
-
|
|
72
|
+
const onEditClicked = (e) => {
|
|
128
73
|
setCanAutoSfocus(true);
|
|
129
74
|
e.preventDefault();
|
|
130
75
|
props.cancelOnToggle && isEditing && props.onCancel && props.onCancel();
|
|
131
76
|
setIsEditing(!isEditing);
|
|
132
77
|
};
|
|
133
|
-
|
|
78
|
+
const renderEditButton = () => {
|
|
134
79
|
if (!props.allowInlineEdit) {
|
|
135
80
|
return null;
|
|
136
81
|
}
|
|
137
82
|
return (react_1.default.createElement("button", { className: "btn btn-link btn-app btn-edit", "aria-label": "Edit", onClick: onEditClicked },
|
|
138
83
|
react_1.default.createElement(pencil_alt_icon_1.default, null)));
|
|
139
84
|
};
|
|
140
|
-
|
|
85
|
+
const onBlurChild = () => {
|
|
141
86
|
props.collapseOnBlur && setIsEditing(!isEditing);
|
|
142
87
|
props.saveOnBlur && !props.saveDisabled && props.onSave && props.onSave();
|
|
143
88
|
props.cancelOnBlur && props.onCancel && props.onCancel();
|
|
144
89
|
};
|
|
145
|
-
|
|
90
|
+
const onCancelClicked = () => {
|
|
146
91
|
props.onCancel && props.onCancel();
|
|
147
92
|
setIsEditing(false);
|
|
148
93
|
};
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
setIsEditing(false);
|
|
164
|
-
return [3 /*break*/, 4];
|
|
165
|
-
case 3:
|
|
166
|
-
e_1 = _b.sent();
|
|
167
|
-
return [3 /*break*/, 4];
|
|
168
|
-
case 4: return [2 /*return*/];
|
|
169
|
-
}
|
|
170
|
-
});
|
|
171
|
-
}); };
|
|
172
|
-
var onSaveClicked = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
173
|
-
return __generator(this, function (_a) {
|
|
174
|
-
switch (_a.label) {
|
|
175
|
-
case 0:
|
|
176
|
-
if (props.saveDisabled)
|
|
177
|
-
return [2 /*return*/];
|
|
178
|
-
return [4 /*yield*/, onSave()];
|
|
179
|
-
case 1:
|
|
180
|
-
_a.sent();
|
|
181
|
-
return [2 /*return*/];
|
|
182
|
-
}
|
|
183
|
-
});
|
|
184
|
-
}); };
|
|
94
|
+
const onSave = () => __awaiter(this, void 0, void 0, function* () {
|
|
95
|
+
try {
|
|
96
|
+
props.onSave && (yield props.onSave());
|
|
97
|
+
setIsEditing(false);
|
|
98
|
+
}
|
|
99
|
+
catch (e) {
|
|
100
|
+
// we will keep the user in the editing state. so nothing to do here
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
const onSaveClicked = () => __awaiter(this, void 0, void 0, function* () {
|
|
104
|
+
if (props.saveDisabled)
|
|
105
|
+
return;
|
|
106
|
+
yield onSave();
|
|
107
|
+
});
|
|
185
108
|
// Disables button if isSpaceAllowed is False and Input has Spaces
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
case 1:
|
|
196
|
-
if (!(!props.hideSaveCancel &&
|
|
197
|
-
props.allowInlineEdit &&
|
|
198
|
-
isEditing &&
|
|
199
|
-
!diabledCheckForSpaceAllowed &&
|
|
200
|
-
!props.saveDisabled &&
|
|
201
|
-
e.keyCode === 13)) return [3 /*break*/, 3];
|
|
202
|
-
return [4 /*yield*/, onSave()];
|
|
203
|
-
case 2:
|
|
204
|
-
_a.sent();
|
|
205
|
-
_a.label = 3;
|
|
206
|
-
case 3: return [2 /*return*/];
|
|
207
|
-
}
|
|
208
|
-
});
|
|
209
|
-
}); };
|
|
210
|
-
var renderSaveCancel = function () {
|
|
211
|
-
return !props.hideSaveCancel &&
|
|
109
|
+
const diabledCheckForSpaceAllowed = !props.isSpaceAllowed && isEmpty_1.default((_a = props.inputValue) === null || _a === void 0 ? void 0 : _a.trim());
|
|
110
|
+
const handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
111
|
+
// Cancel on pressing esc
|
|
112
|
+
if (props.allowInlineEdit && isEditing && e.keyCode === 27) {
|
|
113
|
+
props.onCancel && props.onCancel();
|
|
114
|
+
setIsEditing(false);
|
|
115
|
+
}
|
|
116
|
+
// Save on pressing enter
|
|
117
|
+
else if (!props.hideSaveCancel &&
|
|
212
118
|
props.allowInlineEdit &&
|
|
213
|
-
isEditing &&
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
};
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
119
|
+
isEditing &&
|
|
120
|
+
!diabledCheckForSpaceAllowed &&
|
|
121
|
+
!props.saveDisabled &&
|
|
122
|
+
e.keyCode === 13) {
|
|
123
|
+
yield onSave();
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
const renderSaveCancel = () => !props.hideSaveCancel &&
|
|
127
|
+
props.allowInlineEdit &&
|
|
128
|
+
isEditing && (react_1.default.createElement("span", { className: "edit-actions" },
|
|
129
|
+
props.loadingIndicator && react_1.default.createElement("span", null, props.loadingIndicator),
|
|
130
|
+
react_1.default.createElement("button", { "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-save` : null, className: "btn btn-app btn-link", type: "button", onClick: onSaveClicked, disabled: diabledCheckForSpaceAllowed || props.saveDisabled },
|
|
131
|
+
react_1.default.createElement(react_i18next_1.Trans, null, props.saveLabel)),
|
|
132
|
+
react_1.default.createElement("button", { type: "button", "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-cancel` : null, className: "btn btn-app btn-link", onClick: onCancelClicked },
|
|
133
|
+
react_1.default.createElement(react_i18next_1.Trans, null, props.cancelLabel))));
|
|
134
|
+
const canShowContent = !isEditing && props.allowInlineEdit && props.content;
|
|
135
|
+
const showCount = ` ${props.charCount} / ${props.charTotal}`;
|
|
136
|
+
return (react_1.default.createElement("div", { className: `form-group edit-question ${props.formClassName}`, id: props.formId },
|
|
223
137
|
!props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
224
|
-
react_1.default.createElement("label",
|
|
138
|
+
react_1.default.createElement("label", Object.assign({}, props.labelProps),
|
|
225
139
|
react_1.default.createElement("span", { className: "label-edit" }, props.labelContent),
|
|
226
140
|
props.helperContent,
|
|
227
141
|
!props.content && !isEditing ? renderEditButton() : null))),
|
|
228
142
|
renderSaveCancel(),
|
|
229
|
-
props.hideSaveCancel && isEditing && (react_1.default.createElement("span", { className:
|
|
143
|
+
props.hideSaveCancel && isEditing && (react_1.default.createElement("span", { className: `
|
|
144
|
+
${props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
|
|
230
145
|
canShowContent && !props.usePreformattedTag && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
231
146
|
react_1.default.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
|
|
232
147
|
props.content,
|
|
@@ -240,15 +155,15 @@ function NewInlineEdit(props) {
|
|
|
240
155
|
!props.allowInlineEdit && props.children,
|
|
241
156
|
props.allowInlineEdit &&
|
|
242
157
|
isEditing &&
|
|
243
|
-
react_1.default.Children.map(props.children,
|
|
158
|
+
react_1.default.Children.map(props.children, (child) => {
|
|
244
159
|
if (!child)
|
|
245
160
|
return;
|
|
246
|
-
|
|
161
|
+
const canFocusChild = (child.type === 'input' || child.type === 'textarea') && canAutoSetFocus;
|
|
247
162
|
// if input/textarea had autoFocus but focus was lost in the wrapper component
|
|
248
|
-
|
|
163
|
+
const needsReFocus = !canAutoSetFocus && child.props.autoFocus;
|
|
249
164
|
if (canFocusChild || needsReFocus) {
|
|
250
165
|
return react_1.default.cloneElement(child, {
|
|
251
|
-
ref:
|
|
166
|
+
ref: (node) => {
|
|
252
167
|
node && node.focus();
|
|
253
168
|
setCanAutoSfocus(false);
|
|
254
169
|
},
|
|
@@ -18,32 +18,16 @@ 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
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
38
22
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
39
23
|
};
|
|
40
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
25
|
exports.LanguageSelector = exports.languageConst = void 0;
|
|
42
26
|
require("./languageSelector.css");
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
27
|
+
const map_1 = __importDefault(require("lodash/map"));
|
|
28
|
+
const react_1 = __importStar(require("react"));
|
|
29
|
+
const react_i18next_1 = require("react-i18next");
|
|
30
|
+
const DropDownList_1 = require("../DropDownList/DropDownList");
|
|
47
31
|
exports.languageConst = {
|
|
48
32
|
en: 'English',
|
|
49
33
|
ja: '日本語',
|
|
@@ -56,21 +40,21 @@ exports.languageConst = {
|
|
|
56
40
|
ru: 'Pу́сский',
|
|
57
41
|
es: 'Español',
|
|
58
42
|
};
|
|
59
|
-
|
|
43
|
+
const defaultProps = {
|
|
60
44
|
showLoader: false,
|
|
61
45
|
className: '',
|
|
62
46
|
};
|
|
63
47
|
function LanguageSelector(props) {
|
|
64
|
-
|
|
48
|
+
const [language, setLanguage] = react_1.useState({
|
|
65
49
|
label: exports.languageConst[props.currentLanguage],
|
|
66
50
|
value: props.currentLanguage,
|
|
67
|
-
})
|
|
68
|
-
|
|
69
|
-
|
|
51
|
+
});
|
|
52
|
+
const { t } = react_i18next_1.useTranslation();
|
|
53
|
+
const handleLanguageChange = (language) => {
|
|
70
54
|
setLanguage(language);
|
|
71
55
|
props.updateLang(language.value);
|
|
72
56
|
};
|
|
73
|
-
|
|
57
|
+
const languageOption = () => map_1.default(exports.languageConst, (value, key) => ({ label: value, value: key }));
|
|
74
58
|
return (react_1.default.createElement(DropDownList_1.Dropdown, { "data-tracking-id": "app-language-selector", id: "app-language-selector", title: t('Language selector'), className: "language-selector", list: languageOption(), selectedItem: language, onChange: handleLanguageChange, isLoadingList: props.showLoader }));
|
|
75
59
|
}
|
|
76
60
|
exports.LanguageSelector = LanguageSelector;
|
|
@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.LoadingDots = void 0;
|
|
7
7
|
require("./LoadingDots.css");
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const react_i18next_1 = require("react-i18next");
|
|
10
|
+
const defaultProps = {
|
|
11
11
|
show: true,
|
|
12
12
|
};
|
|
13
13
|
function LoadingDots(props) {
|
|
@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.LoadingIndicator = void 0;
|
|
7
7
|
require("./loadingIndicator.css");
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const defaultProps = {
|
|
10
10
|
isInline: false,
|
|
11
11
|
show: true,
|
|
12
12
|
size: 'sm',
|
|
@@ -17,7 +17,7 @@ function LoadingIndicator(props) {
|
|
|
17
17
|
return null;
|
|
18
18
|
}
|
|
19
19
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
20
|
-
react_1.default.createElement("div", { className:
|
|
20
|
+
react_1.default.createElement("div", { className: `rh-support-spinner spinner-${props.size} ${props.className} ${props.isInline ? 'spinner-inline' : ''}` },
|
|
21
21
|
react_1.default.createElement("span", { className: "sr-only" }, "Loading...")),
|
|
22
22
|
props.message && react_1.default.createElement("span", { className: "spinner-message" }, props.message)));
|
|
23
23
|
}
|