@pingux/astro 2.21.0-alpha.2 → 2.21.0-alpha.4
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.
@@ -9,13 +9,12 @@ _Object$defineProperty(exports, "__esModule", {
|
|
9
9
|
value: true
|
10
10
|
});
|
11
11
|
exports["default"] = exports.EditRow = exports.Edit = exports.DisplayWithError = exports.DisplayRow = exports.Display = void 0;
|
12
|
-
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
13
12
|
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
|
13
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
14
14
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
15
15
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
16
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
17
17
|
var _react = _interopRequireWildcard(require("react"));
|
18
|
-
var _AddIcon = _interopRequireDefault(require("@pingux/mdi-react/AddIcon"));
|
19
18
|
var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
|
20
19
|
var _CogsIcon = _interopRequireDefault(require("@pingux/mdi-react/CogsIcon"));
|
21
20
|
var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
|
@@ -82,66 +81,43 @@ var sx = {
|
|
82
81
|
}
|
83
82
|
};
|
84
83
|
var editSx = {
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
84
|
+
comboBoxFieldWrapper: {
|
85
|
+
width: '275px',
|
86
|
+
'& .is-float-label .field-control-input': {
|
87
|
+
pt: '11px',
|
88
|
+
pb: '11px'
|
89
|
+
}
|
90
90
|
},
|
91
91
|
comboBoxField: {
|
92
|
-
|
93
|
-
pt: '5px !important'
|
94
|
-
},
|
95
|
-
headingText: {
|
96
|
-
fontSize: 'sm',
|
97
|
-
fontWeight: 0,
|
98
|
-
color: 'neutral.40'
|
92
|
+
maxHeight: '40px'
|
99
93
|
},
|
100
|
-
|
94
|
+
rowTitle: {
|
101
95
|
fontWeight: 3,
|
102
96
|
fontSize: 'md',
|
103
|
-
|
104
|
-
|
105
|
-
|
97
|
+
width: '275px',
|
98
|
+
minWidth: '153px',
|
99
|
+
mr: 'sm'
|
106
100
|
},
|
107
|
-
|
101
|
+
lastRowTitle: {
|
108
102
|
fontWeight: 3,
|
109
103
|
fontSize: 'md',
|
110
|
-
|
111
|
-
|
112
|
-
},
|
113
|
-
comboBoxAndIconParentBox: {
|
114
|
-
width: '378px',
|
115
|
-
ml: '12px',
|
116
|
-
alignItems: 'center'
|
117
|
-
},
|
118
|
-
headingParentBox: {
|
119
|
-
alignItems: 'center',
|
120
|
-
mb: 'md',
|
121
|
-
ml: 'xs'
|
122
|
-
},
|
123
|
-
addRowButton: {
|
124
|
-
ml: 'auto',
|
125
|
-
height: '22px',
|
126
|
-
minWidth: '0',
|
127
|
-
width: '70px'
|
128
|
-
},
|
129
|
-
addButtonIconBox: {
|
130
|
-
alignItems: 'center',
|
131
|
-
width: '38px',
|
132
|
-
justifyContent: 'center'
|
133
|
-
},
|
134
|
-
addIcon: {
|
135
|
-
mr: 'xs',
|
136
|
-
color: 'active'
|
104
|
+
width: '135px',
|
105
|
+
textAlign: 'center'
|
137
106
|
},
|
138
107
|
editAttributesBox: {
|
139
108
|
bg: 'accent.99',
|
140
|
-
p: '
|
109
|
+
p: 'md',
|
110
|
+
pr: '12px',
|
111
|
+
pt: 'sm'
|
141
112
|
},
|
142
113
|
scrollBox: {
|
143
114
|
mt: 'md',
|
144
115
|
maxHeight: '700px'
|
116
|
+
},
|
117
|
+
checkbox: {
|
118
|
+
'& .field-control-input': {
|
119
|
+
margin: 0
|
120
|
+
}
|
145
121
|
}
|
146
122
|
};
|
147
123
|
var helperTextId = (0, _uuid.v4)();
|
@@ -227,44 +203,35 @@ var DisplayWithError = function DisplayWithError() {
|
|
227
203
|
exports.DisplayWithError = DisplayWithError;
|
228
204
|
var Edit = function Edit() {
|
229
205
|
var defaultRows = [{
|
230
|
-
|
231
|
-
|
232
|
-
inputValue: '',
|
206
|
+
leftValue: 'username',
|
207
|
+
rightValue: 'User ID',
|
233
208
|
name: 'first default'
|
234
209
|
}, {
|
235
|
-
|
236
|
-
|
237
|
-
inputValue: '',
|
210
|
+
leftValue: 'firstName',
|
211
|
+
rightValue: 'Given Name',
|
238
212
|
name: 'second default'
|
213
|
+
}, {
|
214
|
+
leftValue: 'lastName',
|
215
|
+
rightValue: 'Family Name',
|
216
|
+
name: 'third default'
|
217
|
+
}, {
|
218
|
+
leftValue: 'population',
|
219
|
+
rightValue: 'Population',
|
220
|
+
name: 'fourth default'
|
239
221
|
}];
|
240
222
|
var _useState = (0, _react.useState)(defaultRows),
|
241
223
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
242
224
|
rows = _useState2[0],
|
243
225
|
setRows = _useState2[1];
|
244
|
-
var _useState3 = (0, _react.useState)(false),
|
245
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
246
|
-
isSubmitted = _useState4[0],
|
247
|
-
setIsSubmitted = _useState4[1];
|
248
|
-
var addRow = function addRow() {
|
249
|
-
var _context;
|
250
|
-
var newRow = {
|
251
|
-
isDisabled: false,
|
252
|
-
isNewRow: true,
|
253
|
-
textValue: '',
|
254
|
-
inputValue: '',
|
255
|
-
name: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
|
256
|
-
};
|
257
|
-
setRows((0, _concat["default"])(_context = []).call(_context, rows, [newRow]));
|
258
|
-
};
|
259
226
|
var removeRow = function removeRow(rowIndex) {
|
260
|
-
var
|
227
|
+
var _context;
|
261
228
|
var newArray = (0, _filter["default"])(rows).call(rows, function (row, index) {
|
262
229
|
return rowIndex !== index;
|
263
230
|
});
|
264
|
-
setRows((0, _concat["default"])(
|
231
|
+
setRows((0, _concat["default"])(_context = []).call(_context, newArray));
|
265
232
|
};
|
266
233
|
var updateRow = function updateRow(rowIndex, value, attribute) {
|
267
|
-
var
|
234
|
+
var _context2;
|
268
235
|
var newArray = (0, _map["default"])(rows).call(rows, function (row, index) {
|
269
236
|
if (rowIndex === index) {
|
270
237
|
var thisRow = rows[index];
|
@@ -273,47 +240,37 @@ var Edit = function Edit() {
|
|
273
240
|
}
|
274
241
|
return row;
|
275
242
|
});
|
276
|
-
setRows((0, _concat["default"])(
|
243
|
+
setRows((0, _concat["default"])(_context2 = []).call(_context2, newArray));
|
277
244
|
};
|
278
245
|
return (0, _react2.jsx)(_index.Box, {
|
279
|
-
maxWidth: "
|
246
|
+
maxWidth: "735px"
|
280
247
|
}, (0, _react2.jsx)(_index.Box, {
|
281
|
-
isRow: true,
|
282
|
-
sx: editSx.headingParentBox
|
283
|
-
}, (0, _react2.jsx)(_index.Text, {
|
284
|
-
sx: editSx.headingText
|
285
|
-
}, "Create new attributes and map predefined attributes with their PingOne Mappings."), (0, _react2.jsx)(_index.Button, {
|
286
|
-
variant: "inline",
|
287
|
-
onPress: addRow,
|
288
|
-
sx: editSx.addRowButton
|
289
|
-
}, (0, _react2.jsx)(_index.Box, {
|
290
|
-
isRow: true,
|
291
|
-
sx: editSx.addButtonIconBox
|
292
|
-
}, (0, _react2.jsx)(_index.Icon, {
|
293
|
-
icon: _AddIcon["default"],
|
294
|
-
size: 15,
|
295
|
-
title: {
|
296
|
-
name: 'Add Icon'
|
297
|
-
},
|
298
|
-
sx: editSx.addIcon
|
299
|
-
}), "Add"))), (0, _react2.jsx)(_index.Box, {
|
300
248
|
sx: editSx.editAttributesBox
|
301
249
|
}, (0, _react2.jsx)(_index.Box, {
|
302
250
|
isRow: true
|
303
251
|
}, (0, _react2.jsx)(_index.Text, {
|
304
|
-
sx: editSx.
|
305
|
-
}, "
|
306
|
-
sx: editSx.
|
307
|
-
}, "PingOne
|
252
|
+
sx: editSx.rowTitle
|
253
|
+
}, "Application"), (0, _react2.jsx)(_index.Text, {
|
254
|
+
sx: editSx.rowTitle
|
255
|
+
}, "PingOne"), (0, _react2.jsx)(_index.Text, {
|
256
|
+
sx: editSx.lastRowTitle
|
257
|
+
}, "Required")), (0, _react2.jsx)(_index.Box, {
|
258
|
+
sx: {
|
259
|
+
mr: '3px'
|
260
|
+
}
|
261
|
+
}, (0, _react2.jsx)(_index.Separator, {
|
262
|
+
sx: {
|
263
|
+
mb: 0,
|
264
|
+
mt: 'sm'
|
265
|
+
}
|
266
|
+
})), (0, _react2.jsx)(_index.ScrollBox, {
|
308
267
|
sx: editSx.scrollBox
|
309
268
|
}, (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(rows).call(rows, function (row, index) {
|
310
269
|
return (0, _react2.jsx)(EditRow, (0, _extends2["default"])({}, row, {
|
311
270
|
index: index,
|
312
271
|
removeRow: removeRow,
|
313
272
|
updateRow: updateRow,
|
314
|
-
key: "row container ".concat(row.name)
|
315
|
-
isSubmitted: isSubmitted,
|
316
|
-
setIsSubmitted: setIsSubmitted
|
273
|
+
key: "row container ".concat(row.name)
|
317
274
|
}));
|
318
275
|
})))));
|
319
276
|
};
|
@@ -380,88 +337,95 @@ var DisplayRow = function DisplayRow(props) {
|
|
380
337
|
};
|
381
338
|
exports.DisplayRow = DisplayRow;
|
382
339
|
var EditRow = function EditRow(props) {
|
383
|
-
var
|
384
|
-
isNewRow = props.isNewRow,
|
340
|
+
var isNewRow = props.isNewRow,
|
385
341
|
index = props.index,
|
386
|
-
|
387
|
-
|
388
|
-
_props$removeRow = props.removeRow,
|
389
|
-
removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow,
|
342
|
+
leftValue = props.leftValue,
|
343
|
+
rightValue = props.rightValue,
|
390
344
|
_props$updateRow = props.updateRow,
|
391
345
|
updateRow = _props$updateRow === void 0 ? function () {} : _props$updateRow,
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
var items = [{
|
397
|
-
name: 'Aardvark',
|
346
|
+
_props$removeRow = props.removeRow,
|
347
|
+
removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow;
|
348
|
+
var leftItems = [{
|
349
|
+
name: 'username',
|
398
350
|
id: '1'
|
399
351
|
}, {
|
400
|
-
name: '
|
352
|
+
name: 'firstName',
|
401
353
|
id: '2'
|
402
354
|
}, {
|
403
|
-
name: '
|
355
|
+
name: 'lastName',
|
404
356
|
id: '3'
|
357
|
+
}, {
|
358
|
+
name: 'population',
|
359
|
+
id: '4'
|
360
|
+
}];
|
361
|
+
var rightItems = [{
|
362
|
+
name: 'User ID',
|
363
|
+
id: '1'
|
364
|
+
}, {
|
365
|
+
name: 'Given Name',
|
366
|
+
id: '2'
|
367
|
+
}, {
|
368
|
+
name: 'Family Name',
|
369
|
+
id: '3'
|
370
|
+
}, {
|
371
|
+
name: 'Population',
|
372
|
+
id: '4'
|
405
373
|
}];
|
406
374
|
var rowRef = (0, _react.useRef)();
|
407
|
-
var
|
408
|
-
var
|
409
|
-
updateRow(index, value, '
|
410
|
-
setIsSubmitted(false);
|
375
|
+
var comboBoxFieldRef = (0, _react.useRef)();
|
376
|
+
var setLeftInputValue = function setLeftInputValue(value) {
|
377
|
+
updateRow(index, value, 'leftValue');
|
411
378
|
};
|
412
|
-
var
|
413
|
-
updateRow(index, value, '
|
414
|
-
setIsSubmitted(false);
|
379
|
+
var setRightInputValue = function setRightInputValue(value) {
|
380
|
+
updateRow(index, value, 'rightValue');
|
415
381
|
};
|
416
382
|
(0, _react.useEffect)(function () {
|
417
383
|
if (isNewRow) {
|
418
|
-
|
419
|
-
|
384
|
+
comboBoxFieldRef.current.focus();
|
385
|
+
comboBoxFieldRef.current.scrollIntoView();
|
420
386
|
}
|
421
387
|
}, []);
|
422
|
-
var isInputValueEmpty = !areRowsValid && isSubmitted && inputValue === '' && textValue !== '';
|
423
|
-
var isTextValueEmpty = !areRowsValid && isSubmitted && textValue === '' && inputValue !== '';
|
424
388
|
return (0, _react2.jsx)(_index.Box, {
|
425
389
|
isRow: true,
|
426
390
|
alignItems: "center",
|
427
|
-
mb: "
|
391
|
+
mb: "sm",
|
392
|
+
gap: "sm",
|
428
393
|
ref: rowRef
|
429
394
|
}, (0, _react2.jsx)(_index.Box, {
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
395
|
+
sx: editSx.comboBoxFieldWrapper
|
396
|
+
}, (0, _react2.jsx)(_index.ComboBoxField, {
|
397
|
+
ref: comboBoxFieldRef,
|
398
|
+
items: leftItems,
|
399
|
+
labelMode: "float",
|
400
|
+
id: "leftInputField ".concat(index),
|
401
|
+
key: "leftInputField ".concat(index),
|
435
402
|
labelProps: {
|
436
403
|
'aria-label': 'selection field',
|
437
404
|
mb: 0
|
438
405
|
},
|
406
|
+
"aria-label": "selection field",
|
439
407
|
controlProps: {
|
440
|
-
|
408
|
+
'aria-label': 'selection field',
|
409
|
+
sx: editSx.comboBoxField
|
441
410
|
},
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
value: textValue,
|
446
|
-
onChange: function onChange(e) {
|
447
|
-
return setTextValue(e.target.value);
|
411
|
+
containerProps: {
|
412
|
+
width: '100%',
|
413
|
+
maxWidth: '275px'
|
448
414
|
},
|
449
|
-
|
450
|
-
|
451
|
-
|
415
|
+
inputValue: leftValue,
|
416
|
+
onInputChange: setLeftInputValue
|
417
|
+
}, function (item) {
|
418
|
+
return (0, _react2.jsx)(_index.Item, {
|
419
|
+
key: item.name,
|
420
|
+
"data-id": item.name
|
421
|
+
}, item.name);
|
452
422
|
})), (0, _react2.jsx)(_index.Box, {
|
453
|
-
|
454
|
-
sx: isInputValueEmpty ? editSx.rowBox : {} && editSx.comboBoxAndIconParentBox
|
455
|
-
}, (0, _react2.jsx)(_index.Box, {
|
456
|
-
flexGrow: "1",
|
457
|
-
maxWidth: "310px"
|
423
|
+
sx: editSx.comboBoxFieldWrapper
|
458
424
|
}, (0, _react2.jsx)(_index.ComboBoxField, {
|
459
|
-
items:
|
425
|
+
items: rightItems,
|
460
426
|
labelMode: "float",
|
461
|
-
id: "
|
462
|
-
key: "
|
463
|
-
status: isInputValueEmpty ? 'error' : 'default',
|
464
|
-
helperText: isInputValueEmpty ? 'Select an item.' : null,
|
427
|
+
id: "rightInputField ".concat(index),
|
428
|
+
key: "rightInputField ".concat(index),
|
465
429
|
labelProps: {
|
466
430
|
'aria-label': 'selection field',
|
467
431
|
mb: 0
|
@@ -473,24 +437,27 @@ var EditRow = function EditRow(props) {
|
|
473
437
|
},
|
474
438
|
containerProps: {
|
475
439
|
width: '100%',
|
476
|
-
maxWidth: '
|
440
|
+
maxWidth: '275px'
|
477
441
|
},
|
478
|
-
inputValue:
|
479
|
-
onInputChange:
|
442
|
+
inputValue: rightValue,
|
443
|
+
onInputChange: setRightInputValue
|
480
444
|
}, function (item) {
|
481
445
|
return (0, _react2.jsx)(_index.Item, {
|
482
446
|
key: item.name,
|
483
447
|
"data-id": item.name
|
484
448
|
}, item.name);
|
485
449
|
})), (0, _react2.jsx)(_index.Box, {
|
450
|
+
width: "135px"
|
451
|
+
}, (0, _react2.jsx)(_index.Box, {
|
486
452
|
isRow: true,
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
mb: '22.475px',
|
491
|
-
ml: 'xs'
|
453
|
+
sx: {
|
454
|
+
alignItems: 'center',
|
455
|
+
justifyContent: 'space-between'
|
492
456
|
}
|
493
457
|
}, (0, _react2.jsx)(_index.IconButton, {
|
458
|
+
sx: {
|
459
|
+
alignSelf: 'center'
|
460
|
+
},
|
494
461
|
"aria-label": "icon button with tooltip",
|
495
462
|
title: "Advanced Expression"
|
496
463
|
}, (0, _react2.jsx)(_index.Icon, {
|
@@ -499,18 +466,21 @@ var EditRow = function EditRow(props) {
|
|
499
466
|
title: {
|
500
467
|
name: 'Cogs Icon'
|
501
468
|
}
|
502
|
-
})), (0, _react2.jsx)(_index.
|
469
|
+
})), (0, _react2.jsx)(_index.CheckboxField, {
|
470
|
+
"aria-label": "required checkbox",
|
471
|
+
containerProps: {
|
472
|
+
sx: editSx.checkbox
|
473
|
+
}
|
474
|
+
}), (0, _react2.jsx)(_index.IconButton, {
|
503
475
|
"aria-label": "icon button with tooltip",
|
504
476
|
title: "Delete",
|
505
|
-
sx: {
|
506
|
-
ml: 'xs'
|
507
|
-
},
|
508
477
|
onPress: function onPress() {
|
509
478
|
return removeRow(index);
|
510
479
|
}
|
511
480
|
}, (0, _react2.jsx)(_index.Icon, {
|
512
481
|
icon: _DeleteIcon["default"],
|
513
|
-
|
482
|
+
color: "neutral.30",
|
483
|
+
size: "24px",
|
514
484
|
title: {
|
515
485
|
name: 'Delete Icon'
|
516
486
|
}
|
package/lib/cjs/styles/colors.js
CHANGED
@@ -1,15 +1,14 @@
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
2
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
3
|
-
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
4
3
|
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
4
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
5
5
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
6
6
|
import React, { useEffect, useRef, useState } from 'react';
|
7
|
-
import AddIcon from '@pingux/mdi-react/AddIcon';
|
8
7
|
import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
|
9
8
|
import CogsIcon from '@pingux/mdi-react/CogsIcon';
|
10
9
|
import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
|
11
10
|
import { v4 as uuid } from 'uuid';
|
12
|
-
import { Badge, Box,
|
11
|
+
import { Badge, Box, Callout, CheckboxField, ComboBoxField, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
|
13
12
|
import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
|
14
13
|
import statuses from '../utils/devUtils/constants/statuses';
|
15
14
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
@@ -68,66 +67,43 @@ var sx = {
|
|
68
67
|
}
|
69
68
|
};
|
70
69
|
var editSx = {
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
70
|
+
comboBoxFieldWrapper: {
|
71
|
+
width: '275px',
|
72
|
+
'& .is-float-label .field-control-input': {
|
73
|
+
pt: '11px',
|
74
|
+
pb: '11px'
|
75
|
+
}
|
76
76
|
},
|
77
77
|
comboBoxField: {
|
78
|
-
|
79
|
-
pt: '5px !important'
|
80
|
-
},
|
81
|
-
headingText: {
|
82
|
-
fontSize: 'sm',
|
83
|
-
fontWeight: 0,
|
84
|
-
color: 'neutral.40'
|
78
|
+
maxHeight: '40px'
|
85
79
|
},
|
86
|
-
|
80
|
+
rowTitle: {
|
87
81
|
fontWeight: 3,
|
88
82
|
fontSize: 'md',
|
89
|
-
|
90
|
-
|
91
|
-
|
83
|
+
width: '275px',
|
84
|
+
minWidth: '153px',
|
85
|
+
mr: 'sm'
|
92
86
|
},
|
93
|
-
|
87
|
+
lastRowTitle: {
|
94
88
|
fontWeight: 3,
|
95
89
|
fontSize: 'md',
|
96
|
-
|
97
|
-
|
98
|
-
},
|
99
|
-
comboBoxAndIconParentBox: {
|
100
|
-
width: '378px',
|
101
|
-
ml: '12px',
|
102
|
-
alignItems: 'center'
|
103
|
-
},
|
104
|
-
headingParentBox: {
|
105
|
-
alignItems: 'center',
|
106
|
-
mb: 'md',
|
107
|
-
ml: 'xs'
|
108
|
-
},
|
109
|
-
addRowButton: {
|
110
|
-
ml: 'auto',
|
111
|
-
height: '22px',
|
112
|
-
minWidth: '0',
|
113
|
-
width: '70px'
|
114
|
-
},
|
115
|
-
addButtonIconBox: {
|
116
|
-
alignItems: 'center',
|
117
|
-
width: '38px',
|
118
|
-
justifyContent: 'center'
|
119
|
-
},
|
120
|
-
addIcon: {
|
121
|
-
mr: 'xs',
|
122
|
-
color: 'active'
|
90
|
+
width: '135px',
|
91
|
+
textAlign: 'center'
|
123
92
|
},
|
124
93
|
editAttributesBox: {
|
125
94
|
bg: 'accent.99',
|
126
|
-
p: '
|
95
|
+
p: 'md',
|
96
|
+
pr: '12px',
|
97
|
+
pt: 'sm'
|
127
98
|
},
|
128
99
|
scrollBox: {
|
129
100
|
mt: 'md',
|
130
101
|
maxHeight: '700px'
|
102
|
+
},
|
103
|
+
checkbox: {
|
104
|
+
'& .field-control-input': {
|
105
|
+
margin: 0
|
106
|
+
}
|
131
107
|
}
|
132
108
|
};
|
133
109
|
var helperTextId = uuid();
|
@@ -211,44 +187,35 @@ export var DisplayWithError = function DisplayWithError() {
|
|
211
187
|
};
|
212
188
|
export var Edit = function Edit() {
|
213
189
|
var defaultRows = [{
|
214
|
-
|
215
|
-
|
216
|
-
inputValue: '',
|
190
|
+
leftValue: 'username',
|
191
|
+
rightValue: 'User ID',
|
217
192
|
name: 'first default'
|
218
193
|
}, {
|
219
|
-
|
220
|
-
|
221
|
-
inputValue: '',
|
194
|
+
leftValue: 'firstName',
|
195
|
+
rightValue: 'Given Name',
|
222
196
|
name: 'second default'
|
197
|
+
}, {
|
198
|
+
leftValue: 'lastName',
|
199
|
+
rightValue: 'Family Name',
|
200
|
+
name: 'third default'
|
201
|
+
}, {
|
202
|
+
leftValue: 'population',
|
203
|
+
rightValue: 'Population',
|
204
|
+
name: 'fourth default'
|
223
205
|
}];
|
224
206
|
var _useState = useState(defaultRows),
|
225
207
|
_useState2 = _slicedToArray(_useState, 2),
|
226
208
|
rows = _useState2[0],
|
227
209
|
setRows = _useState2[1];
|
228
|
-
var _useState3 = useState(false),
|
229
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
230
|
-
isSubmitted = _useState4[0],
|
231
|
-
setIsSubmitted = _useState4[1];
|
232
|
-
var addRow = function addRow() {
|
233
|
-
var _context;
|
234
|
-
var newRow = {
|
235
|
-
isDisabled: false,
|
236
|
-
isNewRow: true,
|
237
|
-
textValue: '',
|
238
|
-
inputValue: '',
|
239
|
-
name: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
|
240
|
-
};
|
241
|
-
setRows(_concatInstanceProperty(_context = []).call(_context, rows, [newRow]));
|
242
|
-
};
|
243
210
|
var removeRow = function removeRow(rowIndex) {
|
244
|
-
var
|
211
|
+
var _context;
|
245
212
|
var newArray = _filterInstanceProperty(rows).call(rows, function (row, index) {
|
246
213
|
return rowIndex !== index;
|
247
214
|
});
|
248
|
-
setRows(_concatInstanceProperty(
|
215
|
+
setRows(_concatInstanceProperty(_context = []).call(_context, newArray));
|
249
216
|
};
|
250
217
|
var updateRow = function updateRow(rowIndex, value, attribute) {
|
251
|
-
var
|
218
|
+
var _context2;
|
252
219
|
var newArray = _mapInstanceProperty(rows).call(rows, function (row, index) {
|
253
220
|
if (rowIndex === index) {
|
254
221
|
var thisRow = rows[index];
|
@@ -257,47 +224,37 @@ export var Edit = function Edit() {
|
|
257
224
|
}
|
258
225
|
return row;
|
259
226
|
});
|
260
|
-
setRows(_concatInstanceProperty(
|
227
|
+
setRows(_concatInstanceProperty(_context2 = []).call(_context2, newArray));
|
261
228
|
};
|
262
229
|
return ___EmotionJSX(Box, {
|
263
|
-
maxWidth: "
|
230
|
+
maxWidth: "735px"
|
264
231
|
}, ___EmotionJSX(Box, {
|
265
|
-
isRow: true,
|
266
|
-
sx: editSx.headingParentBox
|
267
|
-
}, ___EmotionJSX(Text, {
|
268
|
-
sx: editSx.headingText
|
269
|
-
}, "Create new attributes and map predefined attributes with their PingOne Mappings."), ___EmotionJSX(Button, {
|
270
|
-
variant: "inline",
|
271
|
-
onPress: addRow,
|
272
|
-
sx: editSx.addRowButton
|
273
|
-
}, ___EmotionJSX(Box, {
|
274
|
-
isRow: true,
|
275
|
-
sx: editSx.addButtonIconBox
|
276
|
-
}, ___EmotionJSX(Icon, {
|
277
|
-
icon: AddIcon,
|
278
|
-
size: 15,
|
279
|
-
title: {
|
280
|
-
name: 'Add Icon'
|
281
|
-
},
|
282
|
-
sx: editSx.addIcon
|
283
|
-
}), "Add"))), ___EmotionJSX(Box, {
|
284
232
|
sx: editSx.editAttributesBox
|
285
233
|
}, ___EmotionJSX(Box, {
|
286
234
|
isRow: true
|
287
235
|
}, ___EmotionJSX(Text, {
|
288
|
-
sx: editSx.
|
289
|
-
}, "
|
290
|
-
sx: editSx.
|
291
|
-
}, "PingOne
|
236
|
+
sx: editSx.rowTitle
|
237
|
+
}, "Application"), ___EmotionJSX(Text, {
|
238
|
+
sx: editSx.rowTitle
|
239
|
+
}, "PingOne"), ___EmotionJSX(Text, {
|
240
|
+
sx: editSx.lastRowTitle
|
241
|
+
}, "Required")), ___EmotionJSX(Box, {
|
242
|
+
sx: {
|
243
|
+
mr: '3px'
|
244
|
+
}
|
245
|
+
}, ___EmotionJSX(Separator, {
|
246
|
+
sx: {
|
247
|
+
mb: 0,
|
248
|
+
mt: 'sm'
|
249
|
+
}
|
250
|
+
})), ___EmotionJSX(ScrollBox, {
|
292
251
|
sx: editSx.scrollBox
|
293
252
|
}, ___EmotionJSX(Box, null, _mapInstanceProperty(rows).call(rows, function (row, index) {
|
294
253
|
return ___EmotionJSX(EditRow, _extends({}, row, {
|
295
254
|
index: index,
|
296
255
|
removeRow: removeRow,
|
297
256
|
updateRow: updateRow,
|
298
|
-
key: "row container ".concat(row.name)
|
299
|
-
isSubmitted: isSubmitted,
|
300
|
-
setIsSubmitted: setIsSubmitted
|
257
|
+
key: "row container ".concat(row.name)
|
301
258
|
}));
|
302
259
|
})))));
|
303
260
|
};
|
@@ -362,88 +319,95 @@ export var DisplayRow = function DisplayRow(props) {
|
|
362
319
|
}));
|
363
320
|
};
|
364
321
|
export var EditRow = function EditRow(props) {
|
365
|
-
var
|
366
|
-
isNewRow = props.isNewRow,
|
322
|
+
var isNewRow = props.isNewRow,
|
367
323
|
index = props.index,
|
368
|
-
|
369
|
-
|
370
|
-
_props$removeRow = props.removeRow,
|
371
|
-
removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow,
|
324
|
+
leftValue = props.leftValue,
|
325
|
+
rightValue = props.rightValue,
|
372
326
|
_props$updateRow = props.updateRow,
|
373
327
|
updateRow = _props$updateRow === void 0 ? function () {} : _props$updateRow,
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
var items = [{
|
379
|
-
name: 'Aardvark',
|
328
|
+
_props$removeRow = props.removeRow,
|
329
|
+
removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow;
|
330
|
+
var leftItems = [{
|
331
|
+
name: 'username',
|
380
332
|
id: '1'
|
381
333
|
}, {
|
382
|
-
name: '
|
334
|
+
name: 'firstName',
|
383
335
|
id: '2'
|
384
336
|
}, {
|
385
|
-
name: '
|
337
|
+
name: 'lastName',
|
386
338
|
id: '3'
|
339
|
+
}, {
|
340
|
+
name: 'population',
|
341
|
+
id: '4'
|
342
|
+
}];
|
343
|
+
var rightItems = [{
|
344
|
+
name: 'User ID',
|
345
|
+
id: '1'
|
346
|
+
}, {
|
347
|
+
name: 'Given Name',
|
348
|
+
id: '2'
|
349
|
+
}, {
|
350
|
+
name: 'Family Name',
|
351
|
+
id: '3'
|
352
|
+
}, {
|
353
|
+
name: 'Population',
|
354
|
+
id: '4'
|
387
355
|
}];
|
388
356
|
var rowRef = useRef();
|
389
|
-
var
|
390
|
-
var
|
391
|
-
updateRow(index, value, '
|
392
|
-
setIsSubmitted(false);
|
357
|
+
var comboBoxFieldRef = useRef();
|
358
|
+
var setLeftInputValue = function setLeftInputValue(value) {
|
359
|
+
updateRow(index, value, 'leftValue');
|
393
360
|
};
|
394
|
-
var
|
395
|
-
updateRow(index, value, '
|
396
|
-
setIsSubmitted(false);
|
361
|
+
var setRightInputValue = function setRightInputValue(value) {
|
362
|
+
updateRow(index, value, 'rightValue');
|
397
363
|
};
|
398
364
|
useEffect(function () {
|
399
365
|
if (isNewRow) {
|
400
|
-
|
401
|
-
|
366
|
+
comboBoxFieldRef.current.focus();
|
367
|
+
comboBoxFieldRef.current.scrollIntoView();
|
402
368
|
}
|
403
369
|
}, []);
|
404
|
-
var isInputValueEmpty = !areRowsValid && isSubmitted && inputValue === '' && textValue !== '';
|
405
|
-
var isTextValueEmpty = !areRowsValid && isSubmitted && textValue === '' && inputValue !== '';
|
406
370
|
return ___EmotionJSX(Box, {
|
407
371
|
isRow: true,
|
408
372
|
alignItems: "center",
|
409
|
-
mb: "
|
373
|
+
mb: "sm",
|
374
|
+
gap: "sm",
|
410
375
|
ref: rowRef
|
411
376
|
}, ___EmotionJSX(Box, {
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
377
|
+
sx: editSx.comboBoxFieldWrapper
|
378
|
+
}, ___EmotionJSX(ComboBoxField, {
|
379
|
+
ref: comboBoxFieldRef,
|
380
|
+
items: leftItems,
|
381
|
+
labelMode: "float",
|
382
|
+
id: "leftInputField ".concat(index),
|
383
|
+
key: "leftInputField ".concat(index),
|
417
384
|
labelProps: {
|
418
385
|
'aria-label': 'selection field',
|
419
386
|
mb: 0
|
420
387
|
},
|
388
|
+
"aria-label": "selection field",
|
421
389
|
controlProps: {
|
422
|
-
|
390
|
+
'aria-label': 'selection field',
|
391
|
+
sx: editSx.comboBoxField
|
423
392
|
},
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
value: textValue,
|
428
|
-
onChange: function onChange(e) {
|
429
|
-
return setTextValue(e.target.value);
|
393
|
+
containerProps: {
|
394
|
+
width: '100%',
|
395
|
+
maxWidth: '275px'
|
430
396
|
},
|
431
|
-
|
432
|
-
|
433
|
-
|
397
|
+
inputValue: leftValue,
|
398
|
+
onInputChange: setLeftInputValue
|
399
|
+
}, function (item) {
|
400
|
+
return ___EmotionJSX(Item, {
|
401
|
+
key: item.name,
|
402
|
+
"data-id": item.name
|
403
|
+
}, item.name);
|
434
404
|
})), ___EmotionJSX(Box, {
|
435
|
-
|
436
|
-
sx: isInputValueEmpty ? editSx.rowBox : {} && editSx.comboBoxAndIconParentBox
|
437
|
-
}, ___EmotionJSX(Box, {
|
438
|
-
flexGrow: "1",
|
439
|
-
maxWidth: "310px"
|
405
|
+
sx: editSx.comboBoxFieldWrapper
|
440
406
|
}, ___EmotionJSX(ComboBoxField, {
|
441
|
-
items:
|
407
|
+
items: rightItems,
|
442
408
|
labelMode: "float",
|
443
|
-
id: "
|
444
|
-
key: "
|
445
|
-
status: isInputValueEmpty ? 'error' : 'default',
|
446
|
-
helperText: isInputValueEmpty ? 'Select an item.' : null,
|
409
|
+
id: "rightInputField ".concat(index),
|
410
|
+
key: "rightInputField ".concat(index),
|
447
411
|
labelProps: {
|
448
412
|
'aria-label': 'selection field',
|
449
413
|
mb: 0
|
@@ -455,24 +419,27 @@ export var EditRow = function EditRow(props) {
|
|
455
419
|
},
|
456
420
|
containerProps: {
|
457
421
|
width: '100%',
|
458
|
-
maxWidth: '
|
422
|
+
maxWidth: '275px'
|
459
423
|
},
|
460
|
-
inputValue:
|
461
|
-
onInputChange:
|
424
|
+
inputValue: rightValue,
|
425
|
+
onInputChange: setRightInputValue
|
462
426
|
}, function (item) {
|
463
427
|
return ___EmotionJSX(Item, {
|
464
428
|
key: item.name,
|
465
429
|
"data-id": item.name
|
466
430
|
}, item.name);
|
467
431
|
})), ___EmotionJSX(Box, {
|
432
|
+
width: "135px"
|
433
|
+
}, ___EmotionJSX(Box, {
|
468
434
|
isRow: true,
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
mb: '22.475px',
|
473
|
-
ml: 'xs'
|
435
|
+
sx: {
|
436
|
+
alignItems: 'center',
|
437
|
+
justifyContent: 'space-between'
|
474
438
|
}
|
475
439
|
}, ___EmotionJSX(IconButton, {
|
440
|
+
sx: {
|
441
|
+
alignSelf: 'center'
|
442
|
+
},
|
476
443
|
"aria-label": "icon button with tooltip",
|
477
444
|
title: "Advanced Expression"
|
478
445
|
}, ___EmotionJSX(Icon, {
|
@@ -481,18 +448,21 @@ export var EditRow = function EditRow(props) {
|
|
481
448
|
title: {
|
482
449
|
name: 'Cogs Icon'
|
483
450
|
}
|
484
|
-
})), ___EmotionJSX(
|
451
|
+
})), ___EmotionJSX(CheckboxField, {
|
452
|
+
"aria-label": "required checkbox",
|
453
|
+
containerProps: {
|
454
|
+
sx: editSx.checkbox
|
455
|
+
}
|
456
|
+
}), ___EmotionJSX(IconButton, {
|
485
457
|
"aria-label": "icon button with tooltip",
|
486
458
|
title: "Delete",
|
487
|
-
sx: {
|
488
|
-
ml: 'xs'
|
489
|
-
},
|
490
459
|
onPress: function onPress() {
|
491
460
|
return removeRow(index);
|
492
461
|
}
|
493
462
|
}, ___EmotionJSX(Icon, {
|
494
463
|
icon: DeleteIcon,
|
495
|
-
|
464
|
+
color: "neutral.30",
|
465
|
+
size: "24px",
|
496
466
|
title: {
|
497
467
|
name: 'Delete Icon'
|
498
468
|
}
|
package/lib/styles/colors.js
CHANGED