iguazio.dashboard-react-controls 2.1.3 → 2.1.5
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/dist/components/Backdrop/Backdrop.js +1 -5
- package/dist/components/Button/Button.js +6 -14
- package/dist/components/ConfirmDialog/ConfirmDialog.js +7 -16
- package/dist/components/FormCheckBox/FormCheckBox.js +4 -10
- package/dist/components/FormChipCell/FormChip/FormChip.js +12 -22
- package/dist/components/FormChipCell/FormChipCell.js +17 -29
- package/dist/components/FormChipCell/FormChipCellView.js +11 -17
- package/dist/components/FormChipCell/HiddenChipsBlock/HiddenChipsBlock.js +1 -4
- package/dist/components/FormChipCell/NewChipForm/NewChipForm.js +5 -6
- package/dist/components/FormCombobox/FormCombobox.js +22 -42
- package/dist/components/FormInput/FormInput.js +41 -59
- package/dist/components/FormInput/InputNumberButtons/InputNumberButtons.js +4 -10
- package/dist/components/FormKeyValueTable/FormKeyValueTable.js +18 -38
- package/dist/components/FormRadio/FormRadio.js +2 -6
- package/dist/components/FormSelect/FormSelect.js +11 -27
- package/dist/components/FormTextarea/FormTextarea.js +13 -28
- package/dist/components/FormToggle/FormToggle.js +3 -8
- package/dist/components/Modal/Modal.js +6 -14
- package/dist/components/PopUpDialog/PopUpDialog.js +8 -18
- package/dist/components/RoundedIcon/RoundedIcon.js +6 -14
- package/dist/components/Tip/Tip.js +1 -4
- package/dist/components/Tooltip/Tooltip.js +4 -10
- package/dist/components/TooltipTemplate/ProducerTooltipTemplate.js +2 -6
- package/dist/components/Wizard/Wizard.js +6 -16
- package/dist/components/Wizard/WizardSteps/WizardSteps.js +1 -4
- package/dist/elements/FormActionButton/FormActionButton.js +3 -8
- package/dist/elements/FormRowActions/FormRowActions.js +4 -10
- package/dist/elements/OptionsMenu/OptionsMenu.js +4 -9
- package/dist/elements/SelectOption/SelectOption.js +3 -8
- package/dist/utils/form.util.js +6 -2
- package/dist/utils/validation.util.js +18 -21
- package/package.json +1 -1
|
@@ -30,7 +30,7 @@ such restriction.
|
|
|
30
30
|
const Backdrop = _ref => {
|
|
31
31
|
let {
|
|
32
32
|
duration = 300,
|
|
33
|
-
show,
|
|
33
|
+
show = false,
|
|
34
34
|
onClose
|
|
35
35
|
} = _ref;
|
|
36
36
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
|
|
@@ -45,10 +45,6 @@ const Backdrop = _ref => {
|
|
|
45
45
|
})
|
|
46
46
|
});
|
|
47
47
|
};
|
|
48
|
-
Backdrop.defaultProps = {
|
|
49
|
-
duration: 300,
|
|
50
|
-
show: false
|
|
51
|
-
};
|
|
52
48
|
Backdrop.propTypes = {
|
|
53
49
|
show: _propTypes.default.bool.isRequired
|
|
54
50
|
};
|
|
@@ -35,13 +35,13 @@ such restriction.
|
|
|
35
35
|
|
|
36
36
|
const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
37
37
|
let {
|
|
38
|
-
className,
|
|
39
|
-
density,
|
|
38
|
+
className = '',
|
|
39
|
+
density = 'normal',
|
|
40
40
|
icon,
|
|
41
|
-
id,
|
|
42
|
-
label,
|
|
43
|
-
tooltip,
|
|
44
|
-
variant,
|
|
41
|
+
id = 'btn',
|
|
42
|
+
label = 'Button',
|
|
43
|
+
tooltip = '',
|
|
44
|
+
variant = _constants.TERTIARY_BUTTON,
|
|
45
45
|
...restProps
|
|
46
46
|
} = _ref;
|
|
47
47
|
const buttonClassName = (0, _classnames.default)('btn', "btn-".concat(variant), "btn-".concat(density), className);
|
|
@@ -62,14 +62,6 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
62
62
|
})]
|
|
63
63
|
});
|
|
64
64
|
});
|
|
65
|
-
Button.defaultProps = {
|
|
66
|
-
className: '',
|
|
67
|
-
density: 'normal',
|
|
68
|
-
id: 'btn',
|
|
69
|
-
label: 'Button',
|
|
70
|
-
tooltip: '',
|
|
71
|
-
variant: _constants.TERTIARY_BUTTON
|
|
72
|
-
};
|
|
73
65
|
Button.propTypes = {
|
|
74
66
|
className: _propTypes.default.string,
|
|
75
67
|
density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
|
|
@@ -32,16 +32,16 @@ such restriction.
|
|
|
32
32
|
|
|
33
33
|
const ConfirmDialog = _ref => {
|
|
34
34
|
let {
|
|
35
|
-
cancelButton,
|
|
35
|
+
cancelButton = null,
|
|
36
36
|
children,
|
|
37
|
-
className,
|
|
37
|
+
className = '',
|
|
38
38
|
closePopUp,
|
|
39
|
-
confirmButton,
|
|
40
|
-
customPosition,
|
|
41
|
-
header,
|
|
39
|
+
confirmButton = null,
|
|
40
|
+
customPosition = {},
|
|
41
|
+
header = '',
|
|
42
42
|
isOpen,
|
|
43
|
-
message,
|
|
44
|
-
messageOnly,
|
|
43
|
+
message = '',
|
|
44
|
+
messageOnly = false,
|
|
45
45
|
onResolve
|
|
46
46
|
} = _ref;
|
|
47
47
|
const messageClassNames = (0, _classnames.default)('confirm-dialog__message', messageOnly && 'confirm-dialog__message-only');
|
|
@@ -88,15 +88,6 @@ const ConfirmDialog = _ref => {
|
|
|
88
88
|
})
|
|
89
89
|
});
|
|
90
90
|
};
|
|
91
|
-
ConfirmDialog.defaultProps = {
|
|
92
|
-
cancelButton: null,
|
|
93
|
-
className: '',
|
|
94
|
-
confirmButton: null,
|
|
95
|
-
customPosition: {},
|
|
96
|
-
header: '',
|
|
97
|
-
message: '',
|
|
98
|
-
messageOnly: false
|
|
99
|
-
};
|
|
100
91
|
ConfirmDialog.propTypes = {
|
|
101
92
|
cancelButton: _types.CONFIRM_DIALOG_CANCEL_BUTTON,
|
|
102
93
|
className: _propTypes.default.string,
|
|
@@ -33,11 +33,11 @@ such restriction.
|
|
|
33
33
|
const FormCheckBox = _ref => {
|
|
34
34
|
let {
|
|
35
35
|
children,
|
|
36
|
-
className,
|
|
37
|
-
highlightLabel,
|
|
38
|
-
label,
|
|
36
|
+
className = '',
|
|
37
|
+
highlightLabel = false,
|
|
38
|
+
label = '',
|
|
39
39
|
name,
|
|
40
|
-
readOnly,
|
|
40
|
+
readOnly = false,
|
|
41
41
|
...inputProps
|
|
42
42
|
} = _ref;
|
|
43
43
|
const formFieldClassNames = (0, _classnames.default)('form-field-checkbox', readOnly && 'form-field-checkbox_readonly', className);
|
|
@@ -73,12 +73,6 @@ const FormCheckBox = _ref => {
|
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
75
|
};
|
|
76
|
-
FormCheckBox.defaultProps = {
|
|
77
|
-
className: '',
|
|
78
|
-
highlightLabel: false,
|
|
79
|
-
label: '',
|
|
80
|
-
readOnly: false
|
|
81
|
-
};
|
|
82
76
|
FormCheckBox.propTypes = {
|
|
83
77
|
className: _propTypes.default.string,
|
|
84
78
|
highlightLabel: _propTypes.default.bool,
|
|
@@ -34,19 +34,25 @@ const FormChip = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
34
34
|
let {
|
|
35
35
|
chip,
|
|
36
36
|
chipIndex,
|
|
37
|
-
chipOptions
|
|
37
|
+
chipOptions = {
|
|
38
|
+
background: 'purple',
|
|
39
|
+
boldValue: false,
|
|
40
|
+
borderRadius: 'primary',
|
|
41
|
+
borderColor: 'transparent',
|
|
42
|
+
density: 'dense',
|
|
43
|
+
font: 'purple'
|
|
44
|
+
},
|
|
38
45
|
editConfig,
|
|
39
46
|
handleEditChip,
|
|
40
47
|
handleRemoveChip,
|
|
41
48
|
handleToEditMode,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
keyName,
|
|
49
|
+
isEditable = false,
|
|
50
|
+
keyName = '',
|
|
45
51
|
meta,
|
|
46
52
|
setChipsSizes,
|
|
47
53
|
setEditConfig,
|
|
48
|
-
validationRules,
|
|
49
|
-
valueName
|
|
54
|
+
validationRules = {},
|
|
55
|
+
valueName = ''
|
|
50
56
|
} = _ref;
|
|
51
57
|
const chipRef = _react.default.useRef();
|
|
52
58
|
(0, _react.useEffect)(() => {
|
|
@@ -80,21 +86,6 @@ const FormChip = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
80
86
|
})
|
|
81
87
|
});
|
|
82
88
|
});
|
|
83
|
-
FormChip.defaultProps = {
|
|
84
|
-
chipOptions: {
|
|
85
|
-
background: 'purple',
|
|
86
|
-
boldValue: false,
|
|
87
|
-
borderRadius: 'primary',
|
|
88
|
-
borderColor: 'transparent',
|
|
89
|
-
density: 'dense',
|
|
90
|
-
font: 'purple'
|
|
91
|
-
},
|
|
92
|
-
isDeleteMode: false,
|
|
93
|
-
isEditable: false,
|
|
94
|
-
keyName: '',
|
|
95
|
-
validationRules: {},
|
|
96
|
-
valueName: ''
|
|
97
|
-
};
|
|
98
89
|
FormChip.propTypes = {
|
|
99
90
|
chip: _propTypes.default.object.isRequired,
|
|
100
91
|
chipIndex: _propTypes.default.number.isRequired,
|
|
@@ -103,7 +94,6 @@ FormChip.propTypes = {
|
|
|
103
94
|
handleEditChip: _propTypes.default.func.isRequired,
|
|
104
95
|
handleRemoveChip: _propTypes.default.func.isRequired,
|
|
105
96
|
handleToEditMode: _propTypes.default.func.isRequired,
|
|
106
|
-
isDeleteMode: _propTypes.default.bool,
|
|
107
97
|
isEditable: _propTypes.default.bool,
|
|
108
98
|
keyName: _propTypes.default.string,
|
|
109
99
|
meta: _propTypes.default.object.isRequired,
|
|
@@ -40,20 +40,27 @@ such restriction.
|
|
|
40
40
|
|
|
41
41
|
const FormChipCell = _ref => {
|
|
42
42
|
let {
|
|
43
|
-
chipOptions
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
chipOptions = {
|
|
44
|
+
background: 'purple',
|
|
45
|
+
boldValue: false,
|
|
46
|
+
borderRadius: 'primary',
|
|
47
|
+
borderColor: 'transparent',
|
|
48
|
+
density: 'dense',
|
|
49
|
+
font: 'purple'
|
|
50
|
+
},
|
|
51
|
+
className = '',
|
|
52
|
+
delimiter = null,
|
|
46
53
|
formState,
|
|
47
54
|
initialValues,
|
|
48
|
-
isEditable,
|
|
49
|
-
label,
|
|
55
|
+
isEditable = false,
|
|
56
|
+
label = null,
|
|
50
57
|
name,
|
|
51
|
-
onClick,
|
|
52
|
-
shortChips,
|
|
53
|
-
validationRules,
|
|
54
|
-
validator,
|
|
58
|
+
onClick = () => {},
|
|
59
|
+
shortChips = false,
|
|
60
|
+
validationRules = {},
|
|
61
|
+
validator = null,
|
|
55
62
|
onExitEditModeCallback,
|
|
56
|
-
visibleChipsMaxLength
|
|
63
|
+
visibleChipsMaxLength = null
|
|
57
64
|
} = _ref;
|
|
58
65
|
const chipsClassName = (0, _classnames.default)('chips', className);
|
|
59
66
|
const {
|
|
@@ -314,25 +321,6 @@ const FormChipCell = _ref => {
|
|
|
314
321
|
})]
|
|
315
322
|
});
|
|
316
323
|
};
|
|
317
|
-
FormChipCell.defaultProps = {
|
|
318
|
-
chipOptions: {
|
|
319
|
-
background: 'purple',
|
|
320
|
-
boldValue: false,
|
|
321
|
-
borderRadius: 'primary',
|
|
322
|
-
borderColor: 'transparent',
|
|
323
|
-
density: 'dense',
|
|
324
|
-
font: 'purple'
|
|
325
|
-
},
|
|
326
|
-
className: '',
|
|
327
|
-
delimiter: null,
|
|
328
|
-
isEditable: false,
|
|
329
|
-
label: null,
|
|
330
|
-
onClick: () => {},
|
|
331
|
-
shortChips: false,
|
|
332
|
-
validationRules: {},
|
|
333
|
-
validator: null,
|
|
334
|
-
visibleChipsMaxLength: null
|
|
335
|
-
};
|
|
336
324
|
FormChipCell.propTypes = {
|
|
337
325
|
chipOptions: _types.CHIP_OPTIONS,
|
|
338
326
|
className: _propTypes.default.string,
|
|
@@ -38,7 +38,14 @@ such restriction.
|
|
|
38
38
|
|
|
39
39
|
const FormChipCellView = /*#__PURE__*/_react.default.forwardRef((_ref, _ref2) => {
|
|
40
40
|
let {
|
|
41
|
-
chipOptions
|
|
41
|
+
chipOptions = {
|
|
42
|
+
background: 'purple',
|
|
43
|
+
boldValue: false,
|
|
44
|
+
borderRadius: 'primary',
|
|
45
|
+
borderColor: 'transparent',
|
|
46
|
+
density: 'dense',
|
|
47
|
+
font: 'purple'
|
|
48
|
+
},
|
|
42
49
|
chips,
|
|
43
50
|
editConfig,
|
|
44
51
|
formState,
|
|
@@ -47,15 +54,15 @@ const FormChipCellView = /*#__PURE__*/_react.default.forwardRef((_ref, _ref2) =>
|
|
|
47
54
|
handleRemoveChip,
|
|
48
55
|
handleShowElements,
|
|
49
56
|
handleToEditMode,
|
|
50
|
-
isEditable,
|
|
57
|
+
isEditable = false,
|
|
51
58
|
name,
|
|
52
59
|
setChipsSizes,
|
|
53
60
|
setEditConfig,
|
|
54
|
-
shortChips,
|
|
61
|
+
shortChips = false,
|
|
55
62
|
showChips,
|
|
56
63
|
showHiddenChips,
|
|
57
64
|
validateFields,
|
|
58
|
-
validationRules
|
|
65
|
+
validationRules = {}
|
|
59
66
|
} = _ref;
|
|
60
67
|
let {
|
|
61
68
|
chipsCellRef,
|
|
@@ -150,19 +157,6 @@ const FormChipCellView = /*#__PURE__*/_react.default.forwardRef((_ref, _ref2) =>
|
|
|
150
157
|
}
|
|
151
158
|
});
|
|
152
159
|
});
|
|
153
|
-
FormChipCellView.defaultProps = {
|
|
154
|
-
chipOptions: {
|
|
155
|
-
background: 'purple',
|
|
156
|
-
boldValue: false,
|
|
157
|
-
borderRadius: 'primary',
|
|
158
|
-
borderColor: 'transparent',
|
|
159
|
-
density: 'dense',
|
|
160
|
-
font: 'purple'
|
|
161
|
-
},
|
|
162
|
-
isEditable: false,
|
|
163
|
-
shortChips: false,
|
|
164
|
-
validationRules: {}
|
|
165
|
-
};
|
|
166
160
|
FormChipCellView.propTypes = {
|
|
167
161
|
chipOptions: _types.CHIP_OPTIONS,
|
|
168
162
|
chips: _propTypes.default.object.isRequired,
|
|
@@ -39,7 +39,7 @@ const HiddenChipsBlock = /*#__PURE__*/_react.default.forwardRef((_ref, _ref2) =>
|
|
|
39
39
|
chipOptions,
|
|
40
40
|
chips,
|
|
41
41
|
handleShowElements,
|
|
42
|
-
textOverflowEllipsis
|
|
42
|
+
textOverflowEllipsis = false
|
|
43
43
|
} = _ref;
|
|
44
44
|
let {
|
|
45
45
|
hiddenChipsCounterRef,
|
|
@@ -97,9 +97,6 @@ const HiddenChipsBlock = /*#__PURE__*/_react.default.forwardRef((_ref, _ref2) =>
|
|
|
97
97
|
})
|
|
98
98
|
}), document.getElementById('overlay_container'));
|
|
99
99
|
});
|
|
100
|
-
HiddenChipsBlock.defaultProps = {
|
|
101
|
-
textOverflowEllipsis: false
|
|
102
|
-
};
|
|
103
100
|
HiddenChipsBlock.propTypes = {
|
|
104
101
|
chipClassNames: _propTypes.default.string.isRequired,
|
|
105
102
|
chipOptions: _types.CHIP_OPTIONS.isRequired,
|
|
@@ -37,12 +37,15 @@ under the Apache 2.0 license is conditioned upon your compliance with
|
|
|
37
37
|
such restriction.
|
|
38
38
|
*/
|
|
39
39
|
|
|
40
|
+
const defaultProps = {
|
|
41
|
+
rules: {}
|
|
42
|
+
};
|
|
40
43
|
const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
41
44
|
let {
|
|
42
45
|
chip,
|
|
43
46
|
chipIndex,
|
|
44
47
|
chipOptions,
|
|
45
|
-
className,
|
|
48
|
+
className = '',
|
|
46
49
|
editConfig,
|
|
47
50
|
handleRemoveChip,
|
|
48
51
|
isEditable,
|
|
@@ -50,7 +53,7 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
50
53
|
meta,
|
|
51
54
|
onChange,
|
|
52
55
|
setEditConfig,
|
|
53
|
-
validationRules: rules,
|
|
56
|
+
validationRules: rules = defaultProps.rules,
|
|
54
57
|
valueName
|
|
55
58
|
} = _ref;
|
|
56
59
|
const [chipData, setChipData] = (0, _react.useState)({
|
|
@@ -282,10 +285,6 @@ const NewChipForm = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
282
285
|
})]
|
|
283
286
|
});
|
|
284
287
|
});
|
|
285
|
-
NewChipForm.defaultProps = {
|
|
286
|
-
className: '',
|
|
287
|
-
validationRules: {}
|
|
288
|
-
};
|
|
289
288
|
NewChipForm.propTypes = {
|
|
290
289
|
chip: _propTypes.default.object.isRequired,
|
|
291
290
|
chipIndex: _propTypes.default.number.isRequired,
|
|
@@ -44,27 +44,31 @@ such restriction.
|
|
|
44
44
|
|
|
45
45
|
const FormCombobox = _ref => {
|
|
46
46
|
let {
|
|
47
|
-
comboboxClassName,
|
|
48
|
-
density,
|
|
49
|
-
disabled,
|
|
50
|
-
hideSearchInput,
|
|
51
|
-
inputDefaultValue,
|
|
52
|
-
inputPlaceholder,
|
|
47
|
+
comboboxClassName = '',
|
|
48
|
+
density = 'normal',
|
|
49
|
+
disabled = false,
|
|
50
|
+
hideSearchInput = false,
|
|
51
|
+
inputDefaultValue = '',
|
|
52
|
+
inputPlaceholder = '',
|
|
53
53
|
invalidText,
|
|
54
|
-
label,
|
|
55
|
-
maxSuggestedMatches,
|
|
54
|
+
label = '',
|
|
55
|
+
maxSuggestedMatches = 1,
|
|
56
56
|
name,
|
|
57
|
-
onBlur,
|
|
58
|
-
onChange,
|
|
59
|
-
onFocus,
|
|
60
|
-
required,
|
|
61
|
-
rules,
|
|
62
|
-
selectDefaultValue
|
|
57
|
+
onBlur = null,
|
|
58
|
+
onChange = null,
|
|
59
|
+
onFocus = null,
|
|
60
|
+
required = false,
|
|
61
|
+
rules = [],
|
|
62
|
+
selectDefaultValue = {
|
|
63
|
+
label: '',
|
|
64
|
+
id: '',
|
|
65
|
+
className: ''
|
|
66
|
+
},
|
|
63
67
|
selectOptions,
|
|
64
|
-
selectPlaceholder,
|
|
65
|
-
suggestionList,
|
|
66
|
-
validator,
|
|
67
|
-
withoutBorder
|
|
68
|
+
selectPlaceholder = '',
|
|
69
|
+
suggestionList = [],
|
|
70
|
+
validator = null,
|
|
71
|
+
withoutBorder = false
|
|
68
72
|
} = _ref;
|
|
69
73
|
const {
|
|
70
74
|
input,
|
|
@@ -403,30 +407,6 @@ const FormCombobox = _ref => {
|
|
|
403
407
|
}
|
|
404
408
|
});
|
|
405
409
|
};
|
|
406
|
-
FormCombobox.defaultProps = {
|
|
407
|
-
comboboxClassName: '',
|
|
408
|
-
density: 'normal',
|
|
409
|
-
disabled: false,
|
|
410
|
-
hideSearchInput: false,
|
|
411
|
-
inputDefaultValue: '',
|
|
412
|
-
inputPlaceholder: '',
|
|
413
|
-
label: '',
|
|
414
|
-
maxSuggestedMatches: 1,
|
|
415
|
-
onBlur: null,
|
|
416
|
-
onFocus: null,
|
|
417
|
-
onChange: null,
|
|
418
|
-
required: false,
|
|
419
|
-
rules: [],
|
|
420
|
-
selectDefaultValue: {
|
|
421
|
-
label: '',
|
|
422
|
-
id: '',
|
|
423
|
-
className: ''
|
|
424
|
-
},
|
|
425
|
-
selectPlaceholder: '',
|
|
426
|
-
suggestionList: [],
|
|
427
|
-
validator: null,
|
|
428
|
-
withoutBorder: false
|
|
429
|
-
};
|
|
430
410
|
FormCombobox.propTypes = {
|
|
431
411
|
comboboxClassName: _propTypes.default.string,
|
|
432
412
|
density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
|
|
@@ -42,33 +42,47 @@ under the Apache 2.0 license is conditioned upon your compliance with
|
|
|
42
42
|
such restriction.
|
|
43
43
|
*/
|
|
44
44
|
|
|
45
|
+
const defaultProps = {
|
|
46
|
+
iconClick: () => {},
|
|
47
|
+
link: {
|
|
48
|
+
show: '',
|
|
49
|
+
value: ''
|
|
50
|
+
},
|
|
51
|
+
onBlur: () => {},
|
|
52
|
+
onChange: () => {},
|
|
53
|
+
onKeyDown: () => {},
|
|
54
|
+
validator: () => {},
|
|
55
|
+
rules: []
|
|
56
|
+
};
|
|
45
57
|
const FormInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
46
58
|
var _ref2;
|
|
47
59
|
let {
|
|
48
|
-
async,
|
|
49
|
-
className,
|
|
50
|
-
customRequiredLabel,
|
|
51
|
-
density,
|
|
52
|
-
disabled,
|
|
53
|
-
focused,
|
|
54
|
-
iconClass,
|
|
55
|
-
iconClick,
|
|
56
|
-
inputIcon,
|
|
57
|
-
invalidText,
|
|
58
|
-
label,
|
|
59
|
-
link,
|
|
60
|
+
async = false,
|
|
61
|
+
className = '',
|
|
62
|
+
customRequiredLabel = '',
|
|
63
|
+
density = 'normal',
|
|
64
|
+
disabled = false,
|
|
65
|
+
focused = false,
|
|
66
|
+
iconClass = '',
|
|
67
|
+
iconClick = defaultProps.iconClick,
|
|
68
|
+
inputIcon = null,
|
|
69
|
+
invalidText = 'This field is invalid',
|
|
70
|
+
label = '',
|
|
71
|
+
link = defaultProps.link,
|
|
60
72
|
name,
|
|
61
|
-
onBlur,
|
|
62
|
-
onChange,
|
|
73
|
+
onBlur = defaultProps.onBlur,
|
|
74
|
+
onChange = defaultProps.onChange,
|
|
63
75
|
onFocus,
|
|
64
|
-
onKeyDown,
|
|
65
|
-
pattern,
|
|
66
|
-
required,
|
|
67
|
-
suggestionList,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
76
|
+
onKeyDown = defaultProps.onKeyDown,
|
|
77
|
+
pattern = null,
|
|
78
|
+
required = false,
|
|
79
|
+
suggestionList = [],
|
|
80
|
+
step = '1',
|
|
81
|
+
tip = '',
|
|
82
|
+
type = 'text',
|
|
83
|
+
validationRules: rules = defaultProps.rules,
|
|
84
|
+
validator = defaultProps.validator,
|
|
85
|
+
withoutBorder = false,
|
|
72
86
|
...inputProps
|
|
73
87
|
} = _ref;
|
|
74
88
|
const {
|
|
@@ -199,7 +213,7 @@ const FormInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
199
213
|
}
|
|
200
214
|
}
|
|
201
215
|
if ((0, _lodash.isEmpty)(validationError)) {
|
|
202
|
-
if (
|
|
216
|
+
if (type === 'number') {
|
|
203
217
|
if (inputProps.max && +valueToValidate > +inputProps.max) {
|
|
204
218
|
validationError = {
|
|
205
219
|
name: 'maxValue',
|
|
@@ -249,7 +263,7 @@ const FormInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
249
263
|
return validationError;
|
|
250
264
|
}, 400);
|
|
251
265
|
const parseField = val => {
|
|
252
|
-
return
|
|
266
|
+
return type === 'number' && val ? parseFloat(val) || val : val;
|
|
253
267
|
};
|
|
254
268
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
|
|
255
269
|
validate: async ? validateFieldAsync : validateField,
|
|
@@ -299,6 +313,7 @@ const FormInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
299
313
|
required: isInvalid || required,
|
|
300
314
|
disabled,
|
|
301
315
|
pattern,
|
|
316
|
+
type,
|
|
302
317
|
...inputProps,
|
|
303
318
|
...input,
|
|
304
319
|
autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
|
|
@@ -328,9 +343,9 @@ const FormInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
328
343
|
onClick: iconClick,
|
|
329
344
|
children: inputIcon
|
|
330
345
|
})]
|
|
331
|
-
}),
|
|
346
|
+
}), type === 'number' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputNumberButtons.default, {
|
|
332
347
|
...inputProps,
|
|
333
|
-
step: +
|
|
348
|
+
step: +step,
|
|
334
349
|
...input,
|
|
335
350
|
disabled
|
|
336
351
|
})]
|
|
@@ -357,39 +372,6 @@ const FormInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
357
372
|
}
|
|
358
373
|
});
|
|
359
374
|
});
|
|
360
|
-
FormInput.defaultProps = {
|
|
361
|
-
async: false,
|
|
362
|
-
className: '',
|
|
363
|
-
customRequiredLabel: '',
|
|
364
|
-
density: 'normal',
|
|
365
|
-
disabled: false,
|
|
366
|
-
focused: false,
|
|
367
|
-
iconClass: '',
|
|
368
|
-
iconClick: () => {},
|
|
369
|
-
inputIcon: null,
|
|
370
|
-
invalidText: 'This field is invalid',
|
|
371
|
-
label: '',
|
|
372
|
-
link: {
|
|
373
|
-
show: '',
|
|
374
|
-
value: ''
|
|
375
|
-
},
|
|
376
|
-
min: null,
|
|
377
|
-
max: null,
|
|
378
|
-
onBlur: () => {},
|
|
379
|
-
onChange: () => {},
|
|
380
|
-
onKeyDown: () => {},
|
|
381
|
-
pattern: null,
|
|
382
|
-
placeholder: '',
|
|
383
|
-
required: false,
|
|
384
|
-
step: '1',
|
|
385
|
-
suggestionList: [],
|
|
386
|
-
tip: '',
|
|
387
|
-
type: 'text',
|
|
388
|
-
validationRules: [],
|
|
389
|
-
validator: () => {},
|
|
390
|
-
value: '',
|
|
391
|
-
withoutBorder: false
|
|
392
|
-
};
|
|
393
375
|
FormInput.propTypes = {
|
|
394
376
|
async: _propTypes.default.bool,
|
|
395
377
|
className: _propTypes.default.string,
|
|
@@ -31,11 +31,11 @@ such restriction.
|
|
|
31
31
|
|
|
32
32
|
const InputNumberButtons = _ref => {
|
|
33
33
|
let {
|
|
34
|
-
disabled,
|
|
35
|
-
min,
|
|
36
|
-
max,
|
|
34
|
+
disabled = false,
|
|
35
|
+
min = null,
|
|
36
|
+
max = null,
|
|
37
37
|
onChange,
|
|
38
|
-
step,
|
|
38
|
+
step = 1,
|
|
39
39
|
value
|
|
40
40
|
} = _ref;
|
|
41
41
|
const handleIncrease = event => {
|
|
@@ -80,12 +80,6 @@ const InputNumberButtons = _ref => {
|
|
|
80
80
|
})
|
|
81
81
|
});
|
|
82
82
|
};
|
|
83
|
-
InputNumberButtons.defaultProps = {
|
|
84
|
-
disabled: false,
|
|
85
|
-
min: null,
|
|
86
|
-
max: null,
|
|
87
|
-
step: 1
|
|
88
|
-
};
|
|
89
83
|
InputNumberButtons.propTypes = {
|
|
90
84
|
disabled: _propTypes.default.bool,
|
|
91
85
|
min: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
@@ -33,26 +33,26 @@ such restriction.
|
|
|
33
33
|
|
|
34
34
|
const FormKeyValueTable = _ref => {
|
|
35
35
|
let {
|
|
36
|
-
actionButtonId,
|
|
37
|
-
addNewItemLabel,
|
|
38
|
-
className,
|
|
39
|
-
defaultKey,
|
|
40
|
-
disabled,
|
|
41
|
-
exitEditModeTriggerItem,
|
|
36
|
+
actionButtonId = '',
|
|
37
|
+
addNewItemLabel = 'Add new item',
|
|
38
|
+
className = '',
|
|
39
|
+
defaultKey = '',
|
|
40
|
+
disabled = false,
|
|
41
|
+
exitEditModeTriggerItem = null,
|
|
42
42
|
fieldsPath,
|
|
43
43
|
formState,
|
|
44
|
-
isKeyEditable,
|
|
45
|
-
isKeyRequired,
|
|
46
|
-
isValueRequired,
|
|
47
|
-
keyHeader,
|
|
48
|
-
keyLabel,
|
|
49
|
-
keyOptions,
|
|
50
|
-
keyValidationRules,
|
|
51
|
-
onExitEditModeCallback,
|
|
52
|
-
valueHeader,
|
|
53
|
-
valueLabel,
|
|
54
|
-
valueType,
|
|
55
|
-
valueValidationRules
|
|
44
|
+
isKeyEditable = true,
|
|
45
|
+
isKeyRequired = true,
|
|
46
|
+
isValueRequired = true,
|
|
47
|
+
keyHeader = 'Key',
|
|
48
|
+
keyLabel = 'Key',
|
|
49
|
+
keyOptions = null,
|
|
50
|
+
keyValidationRules = [],
|
|
51
|
+
onExitEditModeCallback = () => {},
|
|
52
|
+
valueHeader = 'Value',
|
|
53
|
+
valueLabel = 'Value',
|
|
54
|
+
valueType = 'text',
|
|
55
|
+
valueValidationRules = []
|
|
56
56
|
} = _ref;
|
|
57
57
|
const tableClassNames = (0, _classnames.default)('form-table form-key-value-table', disabled && 'form-table_disabled', className);
|
|
58
58
|
const {
|
|
@@ -194,26 +194,6 @@ const FormKeyValueTable = _ref => {
|
|
|
194
194
|
})]
|
|
195
195
|
});
|
|
196
196
|
};
|
|
197
|
-
FormKeyValueTable.defaultProps = {
|
|
198
|
-
actionButtonId: '',
|
|
199
|
-
addNewItemLabel: 'Add new item',
|
|
200
|
-
className: '',
|
|
201
|
-
defaultKey: '',
|
|
202
|
-
disabled: false,
|
|
203
|
-
exitEditModeTriggerItem: null,
|
|
204
|
-
isKeyEditable: true,
|
|
205
|
-
isKeyRequired: true,
|
|
206
|
-
isValueRequired: true,
|
|
207
|
-
keyHeader: 'Key',
|
|
208
|
-
keyLabel: 'Key',
|
|
209
|
-
keyOptions: null,
|
|
210
|
-
keyValidationRules: [],
|
|
211
|
-
onExitEditModeCallback: () => {},
|
|
212
|
-
valueHeader: 'Value',
|
|
213
|
-
valueLabel: 'Value',
|
|
214
|
-
valueType: 'text',
|
|
215
|
-
valueValidationRules: []
|
|
216
|
-
};
|
|
217
197
|
FormKeyValueTable.propTypes = {
|
|
218
198
|
actionButtonId: _propTypes.default.string,
|
|
219
199
|
addNewItemLabel: _propTypes.default.string,
|