@pdg/react-form 1.0.140 → 1.0.141
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/index.esm.js +149 -28
- package/dist/index.js +149 -28
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -965,7 +965,9 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
965
965
|
* Render
|
|
966
966
|
* ******************************************************************************************************************/
|
|
967
967
|
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
|
|
968
|
-
React.createElement(Grid, { ref:
|
|
968
|
+
React.createElement(Grid, { ref: function (ref) {
|
|
969
|
+
gridRef.current = ref;
|
|
970
|
+
}, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
|
|
969
971
|
React.createElement("div", null,
|
|
970
972
|
label && (React.createElement("div", { className: 'FormCol-header' },
|
|
971
973
|
React.createElement(StyledFormLabelContainerDiv, null,
|
|
@@ -1002,7 +1004,11 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
|
|
|
1002
1004
|
}
|
|
1003
1005
|
: undefined;
|
|
1004
1006
|
}, [fullHeight, height]);
|
|
1005
|
-
return (React.createElement(StyledContainerDiv, { ref: fullHeight
|
|
1007
|
+
return (React.createElement(StyledContainerDiv, { ref: fullHeight
|
|
1008
|
+
? function (ref) {
|
|
1009
|
+
containerRef.current = ref;
|
|
1010
|
+
}
|
|
1011
|
+
: undefined, className: 'FormBody', style: style },
|
|
1006
1012
|
React.createElement(StyledContentDiv, { style: contentStyle },
|
|
1007
1013
|
React.createElement(Grid, { container: true, spacing: spacing, direction: 'column' }, children))));
|
|
1008
1014
|
};var FormFooter = function (_a) {
|
|
@@ -2533,9 +2539,15 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2533
2539
|
React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
|
|
2534
2540
|
React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
|
|
2535
2541
|
React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
|
|
2536
|
-
variant === 'standard' && (React.createElement(Input, { ref:
|
|
2537
|
-
|
|
2538
|
-
|
|
2542
|
+
variant === 'standard' && (React.createElement(Input, { ref: function (ref) {
|
|
2543
|
+
inputRef.current = ref;
|
|
2544
|
+
}, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2545
|
+
variant === 'outlined' && (React.createElement(OutlinedInput, { ref: function (ref) {
|
|
2546
|
+
inputRef.current = ref;
|
|
2547
|
+
}, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2548
|
+
variant === 'filled' && (React.createElement(FilledInput, { ref: function (ref) {
|
|
2549
|
+
inputRef.current = ref;
|
|
2550
|
+
}, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2539
2551
|
React.createElement("div", { className: 'FormItemBase-Control', style: {
|
|
2540
2552
|
width: fullWidth ? '100%' : 'auto',
|
|
2541
2553
|
display: 'grid',
|
|
@@ -2737,7 +2749,9 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
|
|
|
2737
2749
|
/********************************************************************************************************************
|
|
2738
2750
|
* Render
|
|
2739
2751
|
* ******************************************************************************************************************/
|
|
2740
|
-
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(FormControlLabel, { ref:
|
|
2752
|
+
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(FormControlLabel, { ref: function (ref) {
|
|
2753
|
+
labelRef.current = ref;
|
|
2754
|
+
}, control: React.createElement(Checkbox, __assign({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
|
|
2741
2755
|
});
|
|
2742
2756
|
FormCheckbox.displayName = 'FormCheckbox';var PADDING_LEFT = 3;
|
|
2743
2757
|
var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
|
|
@@ -3031,12 +3045,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
3031
3045
|
/********************************************************************************************************************
|
|
3032
3046
|
* Render
|
|
3033
3047
|
* ******************************************************************************************************************/
|
|
3034
|
-
var
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
|
|
3048
|
+
var control = useMemo(function () {
|
|
3049
|
+
return (React.createElement(React.Fragment, null,
|
|
3050
|
+
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
|
|
3051
|
+
resizeWidthDetectorRef.current = ref;
|
|
3052
|
+
}, style: {
|
|
3040
3053
|
display: 'grid',
|
|
3041
3054
|
position: 'absolute',
|
|
3042
3055
|
whiteSpace: 'nowrap',
|
|
@@ -3044,7 +3057,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
3044
3057
|
} },
|
|
3045
3058
|
React.createElement(RadioGroup, __assign({}, props, { style: { display: 'inline-flex', flexWrap: 'nowrap' }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), items.map(function (_a, idx) {
|
|
3046
3059
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
|
|
3047
|
-
return (React.createElement(FormControlLabel, { ref: idx === 0
|
|
3060
|
+
return (React.createElement(FormControlLabel, { ref: idx === 0
|
|
3061
|
+
? function (ref) {
|
|
3062
|
+
resizeHeightDetectorRef.current = ref;
|
|
3063
|
+
}
|
|
3064
|
+
: null, key: idx, control: React.createElement(Radio, { icon: React.createElement(RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size }), label: label, style: {
|
|
3048
3065
|
color: error ? theme.palette.error.main : '',
|
|
3049
3066
|
marginTop: -5,
|
|
3050
3067
|
marginBottom: -5,
|
|
@@ -3052,7 +3069,9 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
3052
3069
|
}, value: value, disabled: disabled || readOnly || itemDisabled }));
|
|
3053
3070
|
})))),
|
|
3054
3071
|
React.createElement("div", null,
|
|
3055
|
-
React.createElement(RadioGroup, __assign({}, props, { ref:
|
|
3072
|
+
React.createElement(RadioGroup, __assign({}, props, { ref: function (ref) {
|
|
3073
|
+
resizeRealHeightDetectorRef.current = ref;
|
|
3074
|
+
}, style: {
|
|
3056
3075
|
display: 'inline-flex',
|
|
3057
3076
|
visibility: width == null ? 'hidden' : undefined,
|
|
3058
3077
|
position: width == null ? 'absolute' : undefined,
|
|
@@ -3063,13 +3082,40 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
3063
3082
|
React.createElement(CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
|
|
3064
3083
|
items.map(function (_a, idx) {
|
|
3065
3084
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
|
|
3066
|
-
return (React.createElement(FormControlLabel, { key: idx, control: React.createElement(Radio, { icon: React.createElement(RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size,
|
|
3085
|
+
return (React.createElement(FormControlLabel, { key: idx, control: React.createElement(Radio, { icon: React.createElement(RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size, slotProps: idx === 0 ? { input: { ref: firstInputRef } } : undefined }), label: label, style: {
|
|
3067
3086
|
color: error ? theme.palette.error.main : '',
|
|
3068
3087
|
whiteSpace: 'nowrap',
|
|
3069
3088
|
marginTop: -5,
|
|
3070
3089
|
marginBottom: -5,
|
|
3071
3090
|
}, value: value, disabled: disabled || readOnly || itemDisabled }));
|
|
3072
|
-
}))))))
|
|
3091
|
+
})))))));
|
|
3092
|
+
}, [
|
|
3093
|
+
color,
|
|
3094
|
+
disabled,
|
|
3095
|
+
error,
|
|
3096
|
+
fullWidth,
|
|
3097
|
+
handleChange,
|
|
3098
|
+
inline,
|
|
3099
|
+
isOnGetItemLoading,
|
|
3100
|
+
items,
|
|
3101
|
+
loading,
|
|
3102
|
+
name,
|
|
3103
|
+
nowrap,
|
|
3104
|
+
props,
|
|
3105
|
+
readOnly,
|
|
3106
|
+
resizeHeightDetectorRef,
|
|
3107
|
+
resizeRealHeightDetectorRef,
|
|
3108
|
+
resizeWidthDetectorRef,
|
|
3109
|
+
size,
|
|
3110
|
+
theme.palette.error.main,
|
|
3111
|
+
value,
|
|
3112
|
+
width,
|
|
3113
|
+
]);
|
|
3114
|
+
var singleHeight = height || (size === 'small' ? 35 : 39);
|
|
3115
|
+
var isMultiline = singleHeight <= ifUndefined(realHeight, 0);
|
|
3116
|
+
return (React.createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2, marginTop: isMultiline && notEmpty(label) ? 20 : 0 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight : singleHeight, controlContainerStyle: {
|
|
3117
|
+
paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
|
|
3118
|
+
}, controlVerticalCenter: !isMultiline, control: control }));
|
|
3073
3119
|
}));
|
|
3074
3120
|
FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".FormToggleButtonGroup.loading .FormItemBase-Control-wrap .FormItemBase-Control {\n align-items: center !important;\n}\n.FormToggleButtonGroup .ToggleButton {\n display: inline-flex;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n align-items: center;\n}\n.FormToggleButtonGroup .ToggleButton .__label__ {\n height: 0;\n line-height: 0 !important;\n overflow: visible !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n padding-left: 3px;\n padding-right: 5px;\n border: 0 !important;\n margin-left: 0 !important;\n justify-content: flex-start;\n display: flex;\n background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap {\n margin-top: 15px;\n margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap {\n margin-top: 15px;\n margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 13px;\n margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 13px;\n margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}";
|
|
3075
3121
|
styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
|
|
@@ -3233,9 +3279,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3233
3279
|
}
|
|
3234
3280
|
}
|
|
3235
3281
|
else {
|
|
3236
|
-
var
|
|
3237
|
-
if (
|
|
3238
|
-
finalValue =
|
|
3282
|
+
var realValue_1 = itemsValues["".concat(finalValue)];
|
|
3283
|
+
if (realValue_1 != null && finalValue !== realValue_1) {
|
|
3284
|
+
finalValue = realValue_1;
|
|
3239
3285
|
}
|
|
3240
3286
|
}
|
|
3241
3287
|
}
|
|
@@ -3476,23 +3522,75 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3476
3522
|
theme.palette.error.main,
|
|
3477
3523
|
type,
|
|
3478
3524
|
]);
|
|
3479
|
-
var
|
|
3480
|
-
|
|
3481
|
-
|
|
3525
|
+
var realValue = useMemo(function () {
|
|
3526
|
+
var newRealValue = value == null ? null : value;
|
|
3527
|
+
if (items && value != null) {
|
|
3528
|
+
if (Array.isArray(newRealValue)) {
|
|
3529
|
+
var stringRealValues_1 = newRealValue.map(function (v) { return v.toString(); });
|
|
3530
|
+
if (multiple) {
|
|
3531
|
+
var foundItems = items.filter(function (v) { return stringRealValues_1.includes(v.value.toString()); });
|
|
3532
|
+
newRealValue = foundItems.map(function (v) { return v.value; });
|
|
3533
|
+
}
|
|
3534
|
+
}
|
|
3535
|
+
else if (newRealValue != null) {
|
|
3536
|
+
var stringRealValue_1 = newRealValue.toString();
|
|
3537
|
+
var foundItem = items.find(function (v) { return v.value.toString() === stringRealValue_1; });
|
|
3538
|
+
if (foundItem) {
|
|
3539
|
+
newRealValue = foundItem.value;
|
|
3540
|
+
}
|
|
3541
|
+
}
|
|
3542
|
+
}
|
|
3543
|
+
return newRealValue;
|
|
3544
|
+
}, [items, multiple, value]);
|
|
3545
|
+
var control = useMemo(function () {
|
|
3546
|
+
return isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: function (ref) {
|
|
3547
|
+
refForLoadingResizeHeightDetect.current = ref;
|
|
3548
|
+
} },
|
|
3482
3549
|
React.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
|
|
3483
|
-
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref:
|
|
3550
|
+
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
|
|
3551
|
+
refForResizeWidthDetect.current = ref;
|
|
3552
|
+
}, style: {
|
|
3484
3553
|
display: 'grid',
|
|
3485
3554
|
position: 'absolute',
|
|
3486
3555
|
whiteSpace: 'nowrap',
|
|
3487
3556
|
visibility: 'hidden',
|
|
3488
3557
|
} },
|
|
3489
3558
|
React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
|
|
3490
|
-
React.createElement(ToggleButtonGroup, { ref:
|
|
3559
|
+
React.createElement(ToggleButtonGroup, { ref: function (ref) {
|
|
3560
|
+
refForButtonsResizeHeightDetect.current = ref;
|
|
3561
|
+
}, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
|
|
3491
3562
|
width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
|
|
3492
3563
|
? formColWidth
|
|
3493
3564
|
: undefined,
|
|
3494
3565
|
flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
|
|
3495
|
-
}, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React.createElement(ToggleButton, { ref:
|
|
3566
|
+
}, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React.createElement(ToggleButton, { ref: function (ref) {
|
|
3567
|
+
refForButtonResizeHeightDetect.current = ref;
|
|
3568
|
+
}, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))));
|
|
3569
|
+
}, [
|
|
3570
|
+
buttons,
|
|
3571
|
+
disabled,
|
|
3572
|
+
formColWidth,
|
|
3573
|
+
fullWidth,
|
|
3574
|
+
handleChange,
|
|
3575
|
+
isOnGetItemLoading,
|
|
3576
|
+
items,
|
|
3577
|
+
label,
|
|
3578
|
+
labelId,
|
|
3579
|
+
loading,
|
|
3580
|
+
multiple,
|
|
3581
|
+
readOnly,
|
|
3582
|
+
realValue,
|
|
3583
|
+
refForButtonResizeHeightDetect,
|
|
3584
|
+
refForButtonsResizeHeightDetect,
|
|
3585
|
+
refForLoadingResizeHeightDetect,
|
|
3586
|
+
refForResizeWidthDetect,
|
|
3587
|
+
size,
|
|
3588
|
+
type,
|
|
3589
|
+
width,
|
|
3590
|
+
]);
|
|
3591
|
+
var controlHeight = height || 0;
|
|
3592
|
+
var isMultiline = controlHeight <= ifUndefined(realHeight, 0);
|
|
3593
|
+
return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(className, 'FormValueItem', 'FormToggleButtonGroup', "variant-".concat(variant), "size-".concat(size), !!label && 'with-label', !!fullWidth && 'full-width', "type-".concat(type), (isOnGetItemLoading || loading) && 'loading'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, required: required, fullWidth: fullWidth, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight + (isMultiline ? 13 : 0) : controlHeight, controlVerticalCenter: isMultiline ? false : isOnGetItemLoading || loading, control: control })));
|
|
3496
3594
|
}));
|
|
3497
3595
|
FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = React.forwardRef(function (_a, ref) {
|
|
3498
3596
|
/********************************************************************************************************************
|
|
@@ -3681,7 +3779,9 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
|
|
|
3681
3779
|
/********************************************************************************************************************
|
|
3682
3780
|
* Render
|
|
3683
3781
|
* ******************************************************************************************************************/
|
|
3684
|
-
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: __assign({ width: width || 100 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(Rating, { ref:
|
|
3782
|
+
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: __assign({ width: width || 100 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(Rating, { ref: function (ref) {
|
|
3783
|
+
ratingRef.current = ref;
|
|
3784
|
+
}, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
|
|
3685
3785
|
});
|
|
3686
3786
|
FormRating.displayName = 'FormRating';var css_248z$c = ".FormTextEditor.initializing textarea {\n display: none;\n}\n.FormTextEditor.error .tox-tinymce {\n border-color: #d32f2f;\n}\n\n.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item {\n padding-right: 20px !important;\n}\n\n.tox-notifications-container {\n display: none;\n}";
|
|
3687
3787
|
styleInject(css_248z$c);var getFinalValue$8 = function (value) {
|
|
@@ -4113,7 +4213,7 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
|
|
|
4113
4213
|
}
|
|
4114
4214
|
}
|
|
4115
4215
|
else {
|
|
4116
|
-
if (!Array.isArray(valueItem) && finalValue === valueItem.value) {
|
|
4216
|
+
if (!Array.isArray(valueItem) && finalValue.toString() === valueItem.value.toString()) {
|
|
4117
4217
|
newComponentValue = valueItem;
|
|
4118
4218
|
}
|
|
4119
4219
|
}
|
|
@@ -4383,6 +4483,25 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
|
|
|
4383
4483
|
/********************************************************************************************************************
|
|
4384
4484
|
* Render
|
|
4385
4485
|
* ******************************************************************************************************************/
|
|
4486
|
+
// const realComponentValue = useMemo(() => {
|
|
4487
|
+
// let newRealValue = componentValue;
|
|
4488
|
+
// if (items && value != null) {
|
|
4489
|
+
// if (Array.isArray(newRealValue)) {
|
|
4490
|
+
// const stringRealValues = newRealValue.map((v) => v.toString());
|
|
4491
|
+
// if (multiple) {
|
|
4492
|
+
// const foundItems = items.filter((v) => stringRealValues.includes(v.value.toString()));
|
|
4493
|
+
// newRealValue = foundItems.map((v) => v.value) as any;
|
|
4494
|
+
// }
|
|
4495
|
+
// } else if (newRealValue != null) {
|
|
4496
|
+
// const stringRealValue = newRealValue.toString();
|
|
4497
|
+
// const foundItem = items.find((v) => v.value.toString() === stringRealValue);
|
|
4498
|
+
// if (foundItem) {
|
|
4499
|
+
// newRealValue = foundItem.value as any;
|
|
4500
|
+
// }
|
|
4501
|
+
// }
|
|
4502
|
+
// }
|
|
4503
|
+
// return newRealValue;
|
|
4504
|
+
// }, [componentValue, items, multiple, value]);
|
|
4386
4505
|
return (React.createElement(Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, getLimitTagsText: getLimitTagsText, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
|
|
4387
4506
|
if (reason === 'input') {
|
|
4388
4507
|
setInputValue(newInputValue);
|
|
@@ -8433,7 +8552,9 @@ var FormFile = React.forwardRef(function (_a, ref) {
|
|
|
8433
8552
|
preview,
|
|
8434
8553
|
React.createElement("div", null, error ? errorHelperText : helperText)), hideLabel: !hideUrl, style: { width: fullWidth ? '100%' : undefined }, control: React.createElement("div", { className: 'control-wrap' },
|
|
8435
8554
|
!hideUrl && (React.createElement("div", { className: 'file-name-wrap' },
|
|
8436
|
-
React.createElement(TextField, { ref:
|
|
8555
|
+
React.createElement(TextField, { ref: function (ref) {
|
|
8556
|
+
innerRef.current = ref;
|
|
8557
|
+
}, inputRef: textFieldRef, className: 'file-name', variant: variant, label: labelIcon ? (React.createElement(React.Fragment, null,
|
|
8437
8558
|
React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
|
|
8438
8559
|
React.createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, slotProps: {
|
|
8439
8560
|
inputLabel: labelShrink ? { shrink: labelShrink } : undefined,
|
package/dist/index.js
CHANGED
|
@@ -965,7 +965,9 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
965
965
|
* Render
|
|
966
966
|
* ******************************************************************************************************************/
|
|
967
967
|
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
|
|
968
|
-
React.createElement(material.Grid, { ref:
|
|
968
|
+
React.createElement(material.Grid, { ref: function (ref) {
|
|
969
|
+
gridRef.current = ref;
|
|
970
|
+
}, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
|
|
969
971
|
React.createElement("div", null,
|
|
970
972
|
label && (React.createElement("div", { className: 'FormCol-header' },
|
|
971
973
|
React.createElement(StyledFormLabelContainerDiv, null,
|
|
@@ -1002,7 +1004,11 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
|
|
|
1002
1004
|
}
|
|
1003
1005
|
: undefined;
|
|
1004
1006
|
}, [fullHeight, height]);
|
|
1005
|
-
return (React.createElement(StyledContainerDiv, { ref: fullHeight
|
|
1007
|
+
return (React.createElement(StyledContainerDiv, { ref: fullHeight
|
|
1008
|
+
? function (ref) {
|
|
1009
|
+
containerRef.current = ref;
|
|
1010
|
+
}
|
|
1011
|
+
: undefined, className: 'FormBody', style: style },
|
|
1006
1012
|
React.createElement(StyledContentDiv, { style: contentStyle },
|
|
1007
1013
|
React.createElement(material.Grid, { container: true, spacing: spacing, direction: 'column' }, children))));
|
|
1008
1014
|
};var FormFooter = function (_a) {
|
|
@@ -2533,9 +2539,15 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2533
2539
|
React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
|
|
2534
2540
|
React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
|
|
2535
2541
|
React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
|
|
2536
|
-
variant === 'standard' && (React.createElement(material.Input, { ref:
|
|
2537
|
-
|
|
2538
|
-
|
|
2542
|
+
variant === 'standard' && (React.createElement(material.Input, { ref: function (ref) {
|
|
2543
|
+
inputRef.current = ref;
|
|
2544
|
+
}, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2545
|
+
variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: function (ref) {
|
|
2546
|
+
inputRef.current = ref;
|
|
2547
|
+
}, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2548
|
+
variant === 'filled' && (React.createElement(material.FilledInput, { ref: function (ref) {
|
|
2549
|
+
inputRef.current = ref;
|
|
2550
|
+
}, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2539
2551
|
React.createElement("div", { className: 'FormItemBase-Control', style: {
|
|
2540
2552
|
width: fullWidth ? '100%' : 'auto',
|
|
2541
2553
|
display: 'grid',
|
|
@@ -2737,7 +2749,9 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
|
|
|
2737
2749
|
/********************************************************************************************************************
|
|
2738
2750
|
* Render
|
|
2739
2751
|
* ******************************************************************************************************************/
|
|
2740
|
-
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(material.FormControlLabel, { ref:
|
|
2752
|
+
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(material.FormControlLabel, { ref: function (ref) {
|
|
2753
|
+
labelRef.current = ref;
|
|
2754
|
+
}, control: React.createElement(material.Checkbox, __assign({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(iconsMaterial.CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(iconsMaterial.CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(material.Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
|
|
2741
2755
|
});
|
|
2742
2756
|
FormCheckbox.displayName = 'FormCheckbox';var PADDING_LEFT = 3;
|
|
2743
2757
|
var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
|
|
@@ -3031,12 +3045,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
3031
3045
|
/********************************************************************************************************************
|
|
3032
3046
|
* Render
|
|
3033
3047
|
* ******************************************************************************************************************/
|
|
3034
|
-
var
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
|
|
3048
|
+
var control = React.useMemo(function () {
|
|
3049
|
+
return (React.createElement(React.Fragment, null,
|
|
3050
|
+
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
|
|
3051
|
+
resizeWidthDetectorRef.current = ref;
|
|
3052
|
+
}, style: {
|
|
3040
3053
|
display: 'grid',
|
|
3041
3054
|
position: 'absolute',
|
|
3042
3055
|
whiteSpace: 'nowrap',
|
|
@@ -3044,7 +3057,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
3044
3057
|
} },
|
|
3045
3058
|
React.createElement(material.RadioGroup, __assign({}, props, { style: { display: 'inline-flex', flexWrap: 'nowrap' }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), items.map(function (_a, idx) {
|
|
3046
3059
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
|
|
3047
|
-
return (React.createElement(material.FormControlLabel, { ref: idx === 0
|
|
3060
|
+
return (React.createElement(material.FormControlLabel, { ref: idx === 0
|
|
3061
|
+
? function (ref) {
|
|
3062
|
+
resizeHeightDetectorRef.current = ref;
|
|
3063
|
+
}
|
|
3064
|
+
: null, key: idx, control: React.createElement(material.Radio, { icon: React.createElement(iconsMaterial.RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(iconsMaterial.RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size }), label: label, style: {
|
|
3048
3065
|
color: error ? theme.palette.error.main : '',
|
|
3049
3066
|
marginTop: -5,
|
|
3050
3067
|
marginBottom: -5,
|
|
@@ -3052,7 +3069,9 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
3052
3069
|
}, value: value, disabled: disabled || readOnly || itemDisabled }));
|
|
3053
3070
|
})))),
|
|
3054
3071
|
React.createElement("div", null,
|
|
3055
|
-
React.createElement(material.RadioGroup, __assign({}, props, { ref:
|
|
3072
|
+
React.createElement(material.RadioGroup, __assign({}, props, { ref: function (ref) {
|
|
3073
|
+
resizeRealHeightDetectorRef.current = ref;
|
|
3074
|
+
}, style: {
|
|
3056
3075
|
display: 'inline-flex',
|
|
3057
3076
|
visibility: width == null ? 'hidden' : undefined,
|
|
3058
3077
|
position: width == null ? 'absolute' : undefined,
|
|
@@ -3063,13 +3082,40 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
3063
3082
|
React.createElement(material.CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
|
|
3064
3083
|
items.map(function (_a, idx) {
|
|
3065
3084
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
|
|
3066
|
-
return (React.createElement(material.FormControlLabel, { key: idx, control: React.createElement(material.Radio, { icon: React.createElement(iconsMaterial.RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(iconsMaterial.RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size,
|
|
3085
|
+
return (React.createElement(material.FormControlLabel, { key: idx, control: React.createElement(material.Radio, { icon: React.createElement(iconsMaterial.RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(iconsMaterial.RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size, slotProps: idx === 0 ? { input: { ref: firstInputRef } } : undefined }), label: label, style: {
|
|
3067
3086
|
color: error ? theme.palette.error.main : '',
|
|
3068
3087
|
whiteSpace: 'nowrap',
|
|
3069
3088
|
marginTop: -5,
|
|
3070
3089
|
marginBottom: -5,
|
|
3071
3090
|
}, value: value, disabled: disabled || readOnly || itemDisabled }));
|
|
3072
|
-
}))))))
|
|
3091
|
+
})))))));
|
|
3092
|
+
}, [
|
|
3093
|
+
color,
|
|
3094
|
+
disabled,
|
|
3095
|
+
error,
|
|
3096
|
+
fullWidth,
|
|
3097
|
+
handleChange,
|
|
3098
|
+
inline,
|
|
3099
|
+
isOnGetItemLoading,
|
|
3100
|
+
items,
|
|
3101
|
+
loading,
|
|
3102
|
+
name,
|
|
3103
|
+
nowrap,
|
|
3104
|
+
props,
|
|
3105
|
+
readOnly,
|
|
3106
|
+
resizeHeightDetectorRef,
|
|
3107
|
+
resizeRealHeightDetectorRef,
|
|
3108
|
+
resizeWidthDetectorRef,
|
|
3109
|
+
size,
|
|
3110
|
+
theme.palette.error.main,
|
|
3111
|
+
value,
|
|
3112
|
+
width,
|
|
3113
|
+
]);
|
|
3114
|
+
var singleHeight = height || (size === 'small' ? 35 : 39);
|
|
3115
|
+
var isMultiline = singleHeight <= util.ifUndefined(realHeight, 0);
|
|
3116
|
+
return (React.createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2, marginTop: isMultiline && util.notEmpty(label) ? 20 : 0 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight : singleHeight, controlContainerStyle: {
|
|
3117
|
+
paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
|
|
3118
|
+
}, controlVerticalCenter: !isMultiline, control: control }));
|
|
3073
3119
|
}));
|
|
3074
3120
|
FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".FormToggleButtonGroup.loading .FormItemBase-Control-wrap .FormItemBase-Control {\n align-items: center !important;\n}\n.FormToggleButtonGroup .ToggleButton {\n display: inline-flex;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n align-items: center;\n}\n.FormToggleButtonGroup .ToggleButton .__label__ {\n height: 0;\n line-height: 0 !important;\n overflow: visible !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n padding-left: 3px;\n padding-right: 5px;\n border: 0 !important;\n margin-left: 0 !important;\n justify-content: flex-start;\n display: flex;\n background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap {\n margin-top: 15px;\n margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap {\n margin-top: 15px;\n margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 13px;\n margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 13px;\n margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}";
|
|
3075
3121
|
styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
|
|
@@ -3233,9 +3279,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3233
3279
|
}
|
|
3234
3280
|
}
|
|
3235
3281
|
else {
|
|
3236
|
-
var
|
|
3237
|
-
if (
|
|
3238
|
-
finalValue =
|
|
3282
|
+
var realValue_1 = itemsValues["".concat(finalValue)];
|
|
3283
|
+
if (realValue_1 != null && finalValue !== realValue_1) {
|
|
3284
|
+
finalValue = realValue_1;
|
|
3239
3285
|
}
|
|
3240
3286
|
}
|
|
3241
3287
|
}
|
|
@@ -3476,23 +3522,75 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3476
3522
|
theme.palette.error.main,
|
|
3477
3523
|
type,
|
|
3478
3524
|
]);
|
|
3479
|
-
var
|
|
3480
|
-
|
|
3481
|
-
|
|
3525
|
+
var realValue = React.useMemo(function () {
|
|
3526
|
+
var newRealValue = value == null ? null : value;
|
|
3527
|
+
if (items && value != null) {
|
|
3528
|
+
if (Array.isArray(newRealValue)) {
|
|
3529
|
+
var stringRealValues_1 = newRealValue.map(function (v) { return v.toString(); });
|
|
3530
|
+
if (multiple) {
|
|
3531
|
+
var foundItems = items.filter(function (v) { return stringRealValues_1.includes(v.value.toString()); });
|
|
3532
|
+
newRealValue = foundItems.map(function (v) { return v.value; });
|
|
3533
|
+
}
|
|
3534
|
+
}
|
|
3535
|
+
else if (newRealValue != null) {
|
|
3536
|
+
var stringRealValue_1 = newRealValue.toString();
|
|
3537
|
+
var foundItem = items.find(function (v) { return v.value.toString() === stringRealValue_1; });
|
|
3538
|
+
if (foundItem) {
|
|
3539
|
+
newRealValue = foundItem.value;
|
|
3540
|
+
}
|
|
3541
|
+
}
|
|
3542
|
+
}
|
|
3543
|
+
return newRealValue;
|
|
3544
|
+
}, [items, multiple, value]);
|
|
3545
|
+
var control = React.useMemo(function () {
|
|
3546
|
+
return isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: function (ref) {
|
|
3547
|
+
refForLoadingResizeHeightDetect.current = ref;
|
|
3548
|
+
} },
|
|
3482
3549
|
React.createElement(material.CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
|
|
3483
|
-
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref:
|
|
3550
|
+
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
|
|
3551
|
+
refForResizeWidthDetect.current = ref;
|
|
3552
|
+
}, style: {
|
|
3484
3553
|
display: 'grid',
|
|
3485
3554
|
position: 'absolute',
|
|
3486
3555
|
whiteSpace: 'nowrap',
|
|
3487
3556
|
visibility: 'hidden',
|
|
3488
3557
|
} },
|
|
3489
3558
|
React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
|
|
3490
|
-
React.createElement(material.ToggleButtonGroup, { ref:
|
|
3559
|
+
React.createElement(material.ToggleButtonGroup, { ref: function (ref) {
|
|
3560
|
+
refForButtonsResizeHeightDetect.current = ref;
|
|
3561
|
+
}, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
|
|
3491
3562
|
width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
|
|
3492
3563
|
? formColWidth
|
|
3493
3564
|
: undefined,
|
|
3494
3565
|
flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
|
|
3495
|
-
}, "aria-labelledby": util.notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || util.empty(items) ? (React.createElement(material.ToggleButton, { ref:
|
|
3566
|
+
}, "aria-labelledby": util.notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || util.empty(items) ? (React.createElement(material.ToggleButton, { ref: function (ref) {
|
|
3567
|
+
refForButtonResizeHeightDetect.current = ref;
|
|
3568
|
+
}, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))));
|
|
3569
|
+
}, [
|
|
3570
|
+
buttons,
|
|
3571
|
+
disabled,
|
|
3572
|
+
formColWidth,
|
|
3573
|
+
fullWidth,
|
|
3574
|
+
handleChange,
|
|
3575
|
+
isOnGetItemLoading,
|
|
3576
|
+
items,
|
|
3577
|
+
label,
|
|
3578
|
+
labelId,
|
|
3579
|
+
loading,
|
|
3580
|
+
multiple,
|
|
3581
|
+
readOnly,
|
|
3582
|
+
realValue,
|
|
3583
|
+
refForButtonResizeHeightDetect,
|
|
3584
|
+
refForButtonsResizeHeightDetect,
|
|
3585
|
+
refForLoadingResizeHeightDetect,
|
|
3586
|
+
refForResizeWidthDetect,
|
|
3587
|
+
size,
|
|
3588
|
+
type,
|
|
3589
|
+
width,
|
|
3590
|
+
]);
|
|
3591
|
+
var controlHeight = height || 0;
|
|
3592
|
+
var isMultiline = controlHeight <= util.ifUndefined(realHeight, 0);
|
|
3593
|
+
return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(className, 'FormValueItem', 'FormToggleButtonGroup', "variant-".concat(variant), "size-".concat(size), !!label && 'with-label', !!fullWidth && 'full-width', "type-".concat(type), (isOnGetItemLoading || loading) && 'loading'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, required: required, fullWidth: fullWidth, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight + (isMultiline ? 13 : 0) : controlHeight, controlVerticalCenter: isMultiline ? false : isOnGetItemLoading || loading, control: control })));
|
|
3496
3594
|
}));
|
|
3497
3595
|
FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = React.forwardRef(function (_a, ref) {
|
|
3498
3596
|
/********************************************************************************************************************
|
|
@@ -3681,7 +3779,9 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
|
|
|
3681
3779
|
/********************************************************************************************************************
|
|
3682
3780
|
* Render
|
|
3683
3781
|
* ******************************************************************************************************************/
|
|
3684
|
-
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: __assign({ width: width || 100 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(material.Rating, { ref:
|
|
3782
|
+
return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: __assign({ width: width || 100 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(material.Rating, { ref: function (ref) {
|
|
3783
|
+
ratingRef.current = ref;
|
|
3784
|
+
}, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(reactComponent.PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(reactComponent.PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
|
|
3685
3785
|
});
|
|
3686
3786
|
FormRating.displayName = 'FormRating';var css_248z$c = ".FormTextEditor.initializing textarea {\n display: none;\n}\n.FormTextEditor.error .tox-tinymce {\n border-color: #d32f2f;\n}\n\n.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item {\n padding-right: 20px !important;\n}\n\n.tox-notifications-container {\n display: none;\n}";
|
|
3687
3787
|
styleInject(css_248z$c);var getFinalValue$8 = function (value) {
|
|
@@ -4113,7 +4213,7 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
|
|
|
4113
4213
|
}
|
|
4114
4214
|
}
|
|
4115
4215
|
else {
|
|
4116
|
-
if (!Array.isArray(valueItem) && finalValue === valueItem.value) {
|
|
4216
|
+
if (!Array.isArray(valueItem) && finalValue.toString() === valueItem.value.toString()) {
|
|
4117
4217
|
newComponentValue = valueItem;
|
|
4118
4218
|
}
|
|
4119
4219
|
}
|
|
@@ -4383,6 +4483,25 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
|
|
|
4383
4483
|
/********************************************************************************************************************
|
|
4384
4484
|
* Render
|
|
4385
4485
|
* ******************************************************************************************************************/
|
|
4486
|
+
// const realComponentValue = useMemo(() => {
|
|
4487
|
+
// let newRealValue = componentValue;
|
|
4488
|
+
// if (items && value != null) {
|
|
4489
|
+
// if (Array.isArray(newRealValue)) {
|
|
4490
|
+
// const stringRealValues = newRealValue.map((v) => v.toString());
|
|
4491
|
+
// if (multiple) {
|
|
4492
|
+
// const foundItems = items.filter((v) => stringRealValues.includes(v.value.toString()));
|
|
4493
|
+
// newRealValue = foundItems.map((v) => v.value) as any;
|
|
4494
|
+
// }
|
|
4495
|
+
// } else if (newRealValue != null) {
|
|
4496
|
+
// const stringRealValue = newRealValue.toString();
|
|
4497
|
+
// const foundItem = items.find((v) => v.value.toString() === stringRealValue);
|
|
4498
|
+
// if (foundItem) {
|
|
4499
|
+
// newRealValue = foundItem.value as any;
|
|
4500
|
+
// }
|
|
4501
|
+
// }
|
|
4502
|
+
// }
|
|
4503
|
+
// return newRealValue;
|
|
4504
|
+
// }, [componentValue, items, multiple, value]);
|
|
4386
4505
|
return (React.createElement(material.Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, getLimitTagsText: getLimitTagsText, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
|
|
4387
4506
|
if (reason === 'input') {
|
|
4388
4507
|
setInputValue(newInputValue);
|
|
@@ -8433,7 +8552,9 @@ var FormFile = React.forwardRef(function (_a, ref) {
|
|
|
8433
8552
|
preview,
|
|
8434
8553
|
React.createElement("div", null, error ? errorHelperText : helperText)), hideLabel: !hideUrl, style: { width: fullWidth ? '100%' : undefined }, control: React.createElement("div", { className: 'control-wrap' },
|
|
8435
8554
|
!hideUrl && (React.createElement("div", { className: 'file-name-wrap' },
|
|
8436
|
-
React.createElement(material.TextField, { ref:
|
|
8555
|
+
React.createElement(material.TextField, { ref: function (ref) {
|
|
8556
|
+
innerRef.current = ref;
|
|
8557
|
+
}, inputRef: textFieldRef, className: 'file-name', variant: variant, label: labelIcon ? (React.createElement(React.Fragment, null,
|
|
8437
8558
|
React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
|
|
8438
8559
|
React.createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, slotProps: {
|
|
8439
8560
|
inputLabel: labelShrink ? { shrink: labelShrink } : undefined,
|