@pdg/react-form 1.0.129 → 1.0.131
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.
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { FormHelperTextProps } from '@mui/material';
|
|
3
|
-
import { PartialPick, CommonSxProps } from '../../@types';
|
|
3
|
+
import { PartialPick, CommonSxProps, CommonProps } from '../../@types';
|
|
4
4
|
import { FormContextValue } from '../../FormContext';
|
|
5
5
|
export interface FormItemBaseProps extends CommonSxProps, PartialPick<FormContextValue, 'variant' | 'size' | 'color'> {
|
|
6
6
|
control: ReactNode;
|
|
7
7
|
controlHeight?: number;
|
|
8
|
+
controlSingleHeight?: number;
|
|
8
9
|
controlVerticalCenter?: boolean;
|
|
10
|
+
controlContainerStyle?: CommonProps['style'];
|
|
9
11
|
width?: number | string;
|
|
10
12
|
fullWidth?: boolean;
|
|
11
13
|
required?: boolean;
|
package/dist/index.esm.js
CHANGED
|
@@ -2369,7 +2369,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2369
2369
|
* ******************************************************************************************************************/
|
|
2370
2370
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFullWidth = _a.fullWidth,
|
|
2371
2371
|
//----------------------------------------------------------------------------------------------------------------
|
|
2372
|
-
control = _a.control, controlHeight = _a.controlHeight, controlVerticalCenter = _a.controlVerticalCenter, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, autoSize = _a.autoSize,
|
|
2372
|
+
control = _a.control, controlHeight = _a.controlHeight, controlSingleHeight = _a.controlSingleHeight, controlVerticalCenter = _a.controlVerticalCenter, controlContainerStyle = _a.controlContainerStyle, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, autoSize = _a.autoSize,
|
|
2373
2373
|
//----------------------------------------------------------------------------------------------------------------
|
|
2374
2374
|
className = _a.className, style = _a.style, sx = _a.sx;
|
|
2375
2375
|
var inputRef = useRef(null);
|
|
@@ -2403,7 +2403,20 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2403
2403
|
var controlMarginTop = useMemo(function () {
|
|
2404
2404
|
var topMargin = 0;
|
|
2405
2405
|
if (inputHeight && controlHeight && controlVerticalCenter) {
|
|
2406
|
-
|
|
2406
|
+
if (controlHeight > inputHeight) {
|
|
2407
|
+
if (controlSingleHeight) {
|
|
2408
|
+
topMargin = inputHeight / 2 - controlSingleHeight / 2;
|
|
2409
|
+
}
|
|
2410
|
+
else {
|
|
2411
|
+
topMargin = 0;
|
|
2412
|
+
}
|
|
2413
|
+
}
|
|
2414
|
+
else {
|
|
2415
|
+
topMargin = inputHeight / 2 - controlHeight / 2;
|
|
2416
|
+
}
|
|
2417
|
+
}
|
|
2418
|
+
else {
|
|
2419
|
+
topMargin = 0;
|
|
2407
2420
|
}
|
|
2408
2421
|
var withLabelControlAddTopMargin;
|
|
2409
2422
|
if (size === 'small') {
|
|
@@ -2428,7 +2441,16 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2428
2441
|
break;
|
|
2429
2442
|
}
|
|
2430
2443
|
return controlMarginTop;
|
|
2431
|
-
}, [
|
|
2444
|
+
}, [
|
|
2445
|
+
controlHeight,
|
|
2446
|
+
controlSingleHeight,
|
|
2447
|
+
controlVerticalCenter,
|
|
2448
|
+
formColWithLabel,
|
|
2449
|
+
inputHeight,
|
|
2450
|
+
label,
|
|
2451
|
+
size,
|
|
2452
|
+
variant,
|
|
2453
|
+
]);
|
|
2432
2454
|
/********************************************************************************************************************
|
|
2433
2455
|
* Variable
|
|
2434
2456
|
* ******************************************************************************************************************/
|
|
@@ -2448,7 +2470,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2448
2470
|
!formColWithLabel && label && (React.createElement(InputLabel, { shrink: true, className: 'FormItemBase-InputLabel', size: size === 'medium' ? 'normal' : size, required: required }, labelIcon ? (React.createElement(React.Fragment, null,
|
|
2449
2471
|
React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
|
|
2450
2472
|
React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
|
|
2451
|
-
React.createElement("div", { className: 'FormItemBase-Control-wrap', style: { display: 'grid', marginTop: hideLabel ? 0 : undefined } }, autoSize ? (React.createElement(React.Fragment, null,
|
|
2473
|
+
React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
|
|
2452
2474
|
variant === 'standard' && (React.createElement(Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2453
2475
|
variant === 'outlined' && (React.createElement(OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2454
2476
|
variant === 'filled' && (React.createElement(FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
@@ -2456,7 +2478,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2456
2478
|
width: fullWidth ? '100%' : 'auto',
|
|
2457
2479
|
display: 'grid',
|
|
2458
2480
|
marginTop: -inputHeight,
|
|
2459
|
-
height: inputHeight,
|
|
2481
|
+
height: ifUndefined(controlHeight, inputHeight) > inputHeight ? controlHeight : undefined,
|
|
2460
2482
|
alignItems: 'flex-start',
|
|
2461
2483
|
paddingTop: controlMarginTop,
|
|
2462
2484
|
position: 'relative',
|
|
@@ -2729,6 +2751,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
2729
2751
|
* State - height (ResizeDetector)
|
|
2730
2752
|
* ******************************************************************************************************************/
|
|
2731
2753
|
var _r = useResizeDetector(), height = _r.height, resizeHeightDetectorRef = _r.ref;
|
|
2754
|
+
var _s = useResizeDetector(), realHeight = _s.height, resizeRealHeightDetectorRef = _s.ref;
|
|
2732
2755
|
/********************************************************************************************************************
|
|
2733
2756
|
* Function - setErrorErrorHelperText
|
|
2734
2757
|
* ******************************************************************************************************************/
|
|
@@ -2760,7 +2783,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
2760
2783
|
var getFinalValue = useCallback(function (value) {
|
|
2761
2784
|
return onValue ? onValue(value) : value;
|
|
2762
2785
|
}, [onValue]);
|
|
2763
|
-
var
|
|
2786
|
+
var _t = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _t[0], value = _t[1], setValue = _t[2];
|
|
2764
2787
|
useFirstSkipEffect(function () {
|
|
2765
2788
|
if (error)
|
|
2766
2789
|
validate(value);
|
|
@@ -2948,31 +2971,44 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
2948
2971
|
/********************************************************************************************************************
|
|
2949
2972
|
* Render
|
|
2950
2973
|
* ******************************************************************************************************************/
|
|
2951
|
-
|
|
2974
|
+
var singleHeight = height || (size === 'small' ? 35 : 39);
|
|
2975
|
+
var isMultiline = singleHeight <= ifUndefined(realHeight, 0);
|
|
2976
|
+
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: {
|
|
2977
|
+
paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
|
|
2978
|
+
}, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
|
|
2952
2979
|
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
|
|
2953
2980
|
display: 'grid',
|
|
2954
2981
|
position: 'absolute',
|
|
2955
2982
|
whiteSpace: 'nowrap',
|
|
2956
2983
|
visibility: 'hidden',
|
|
2957
2984
|
} },
|
|
2958
|
-
React.createElement(RadioGroup, __assign({}, props, { style: {
|
|
2985
|
+
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) {
|
|
2959
2986
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
|
|
2960
|
-
return (React.createElement(FormControlLabel, { ref: idx === 0 ? resizeHeightDetectorRef : 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: {
|
|
2987
|
+
return (React.createElement(FormControlLabel, { ref: idx === 0 ? resizeHeightDetectorRef : 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: {
|
|
2988
|
+
color: error ? theme.palette.error.main : '',
|
|
2989
|
+
marginTop: -5,
|
|
2990
|
+
marginBottom: -5,
|
|
2991
|
+
whiteSpace: 'nowrap',
|
|
2992
|
+
}, value: value, disabled: disabled || readOnly || itemDisabled }));
|
|
2961
2993
|
})))),
|
|
2962
2994
|
React.createElement("div", null,
|
|
2963
|
-
React.createElement(RadioGroup, __assign({}, props, { style: {
|
|
2964
|
-
marginTop: 10,
|
|
2995
|
+
React.createElement(RadioGroup, __assign({}, props, { ref: resizeRealHeightDetectorRef, style: {
|
|
2965
2996
|
display: 'inline-flex',
|
|
2966
2997
|
visibility: width == null ? 'hidden' : undefined,
|
|
2967
2998
|
position: width == null ? 'absolute' : undefined,
|
|
2968
2999
|
flexWrap: nowrap ? 'nowrap' : undefined,
|
|
2969
3000
|
}, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), isOnGetItemLoading || loading ? (React.createElement("div", { style: { position: 'relative' } },
|
|
2970
|
-
React.createElement(FormControlLabel, {
|
|
2971
|
-
React.createElement("div", { style: { position: 'absolute', left: 0, top:
|
|
3001
|
+
React.createElement(FormControlLabel, { label: '', control: React.createElement(Radio, { color: color, size: size }), style: { visibility: 'hidden' } }),
|
|
3002
|
+
React.createElement("div", { style: { position: 'absolute', left: 0, top: 11, opacity: 0.54 } },
|
|
2972
3003
|
React.createElement(CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
|
|
2973
3004
|
items.map(function (_a, idx) {
|
|
2974
3005
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
|
|
2975
|
-
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, inputRef: idx === 0 ? firstInputRef : null }), label: label, style: {
|
|
3006
|
+
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, inputRef: idx === 0 ? firstInputRef : null }), label: label, style: {
|
|
3007
|
+
color: error ? theme.palette.error.main : '',
|
|
3008
|
+
whiteSpace: 'nowrap',
|
|
3009
|
+
marginTop: -5,
|
|
3010
|
+
marginBottom: -5,
|
|
3011
|
+
}, value: value, disabled: disabled || readOnly || itemDisabled }));
|
|
2976
3012
|
})))))) }));
|
|
2977
3013
|
}));
|
|
2978
3014
|
FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".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}";
|
|
@@ -2997,6 +3033,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
2997
3033
|
* ******************************************************************************************************************/
|
|
2998
3034
|
var refForResizeWidthDetect = useRef(null);
|
|
2999
3035
|
var refForButtonResizeHeightDetect = useRef(null);
|
|
3036
|
+
var refForButtonsResizeHeightDetect = useRef(null);
|
|
3000
3037
|
var refForLoadingResizeHeightDetect = useRef(null);
|
|
3001
3038
|
/********************************************************************************************************************
|
|
3002
3039
|
* FormState
|
|
@@ -3033,6 +3070,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3033
3070
|
* State - height (ResizeDetector)
|
|
3034
3071
|
* ******************************************************************************************************************/
|
|
3035
3072
|
var _g = useState(), height = _g[0], setHeight = _g[1];
|
|
3073
|
+
var _h = useState(), realHeight = _h[0], setRealHeight = _h[1];
|
|
3036
3074
|
useResizeDetector({
|
|
3037
3075
|
targetRef: refForButtonResizeHeightDetect,
|
|
3038
3076
|
handleHeight: true,
|
|
@@ -3041,6 +3079,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3041
3079
|
setHeight((_b = (_a = refForButtonResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
|
|
3042
3080
|
},
|
|
3043
3081
|
});
|
|
3082
|
+
useResizeDetector({
|
|
3083
|
+
targetRef: refForButtonsResizeHeightDetect,
|
|
3084
|
+
handleHeight: true,
|
|
3085
|
+
onResize: function () {
|
|
3086
|
+
var _a, _b;
|
|
3087
|
+
setRealHeight((_b = (_a = refForButtonsResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
|
|
3088
|
+
},
|
|
3089
|
+
});
|
|
3044
3090
|
useResizeDetector({
|
|
3045
3091
|
targetRef: refForLoadingResizeHeightDetect,
|
|
3046
3092
|
handleHeight: true,
|
|
@@ -3052,14 +3098,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3052
3098
|
/********************************************************************************************************************
|
|
3053
3099
|
* State
|
|
3054
3100
|
* ******************************************************************************************************************/
|
|
3055
|
-
var
|
|
3056
|
-
var
|
|
3057
|
-
var
|
|
3058
|
-
var
|
|
3059
|
-
var
|
|
3060
|
-
var
|
|
3061
|
-
var
|
|
3062
|
-
var
|
|
3101
|
+
var _j = useState(false), isOnGetItemLoading = _j[0], setIsOnGetItemLoading = _j[1];
|
|
3102
|
+
var _k = useAutoUpdateState(initError), error = _k[0], setError = _k[1];
|
|
3103
|
+
var _l = useState(), errorHelperText = _l[0], setErrorHelperText = _l[1];
|
|
3104
|
+
var _m = useAutoUpdateRefState(initData), dataRef = _m[0], setData = _m[2];
|
|
3105
|
+
var _o = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _o[0], disabled = _o[1], setDisabled = _o[2];
|
|
3106
|
+
var _p = useAutoUpdateRefState(initHidden), hiddenRef = _p[0], hidden = _p[1], setHidden = _p[2];
|
|
3107
|
+
var _q = useAutoUpdateRefState(initLoading), loadingRef = _q[0], loading = _q[1], setLoading = _q[2];
|
|
3108
|
+
var _r = useAutoUpdateRefState(initItems), itemsRef = _r[0], items = _r[1], setItems = _r[2];
|
|
3063
3109
|
/********************************************************************************************************************
|
|
3064
3110
|
* Memo
|
|
3065
3111
|
* ******************************************************************************************************************/
|
|
@@ -3174,7 +3220,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3174
3220
|
finalValue = onValue ? onValue(finalValue) : finalValue;
|
|
3175
3221
|
return equal(value, finalValue) ? value : finalValue;
|
|
3176
3222
|
}, [multiple, formValueSeparator, itemsValues, onValue]);
|
|
3177
|
-
var
|
|
3223
|
+
var _s = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _s[0], value = _s[1], setValue = _s[2];
|
|
3178
3224
|
useFirstSkipEffect(function () {
|
|
3179
3225
|
if (error)
|
|
3180
3226
|
validate(value);
|
|
@@ -3399,7 +3445,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3399
3445
|
theme.palette.error.main,
|
|
3400
3446
|
type,
|
|
3401
3447
|
]);
|
|
3402
|
-
|
|
3448
|
+
var controlHeight = height || 0;
|
|
3449
|
+
var isMultiline = controlHeight <= ifUndefined(realHeight, 0);
|
|
3450
|
+
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)), 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: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
|
|
3403
3451
|
React.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
|
|
3404
3452
|
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
|
|
3405
3453
|
display: 'grid',
|
|
@@ -3408,7 +3456,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3408
3456
|
visibility: 'hidden',
|
|
3409
3457
|
} },
|
|
3410
3458
|
React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
|
|
3411
|
-
React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
|
|
3459
|
+
React.createElement(ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
|
|
3412
3460
|
width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
|
|
3413
3461
|
? formColWidth
|
|
3414
3462
|
: undefined,
|
package/dist/index.js
CHANGED
|
@@ -2369,7 +2369,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2369
2369
|
* ******************************************************************************************************************/
|
|
2370
2370
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFullWidth = _a.fullWidth,
|
|
2371
2371
|
//----------------------------------------------------------------------------------------------------------------
|
|
2372
|
-
control = _a.control, controlHeight = _a.controlHeight, controlVerticalCenter = _a.controlVerticalCenter, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, autoSize = _a.autoSize,
|
|
2372
|
+
control = _a.control, controlHeight = _a.controlHeight, controlSingleHeight = _a.controlSingleHeight, controlVerticalCenter = _a.controlVerticalCenter, controlContainerStyle = _a.controlContainerStyle, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, autoSize = _a.autoSize,
|
|
2373
2373
|
//----------------------------------------------------------------------------------------------------------------
|
|
2374
2374
|
className = _a.className, style = _a.style, sx = _a.sx;
|
|
2375
2375
|
var inputRef = React.useRef(null);
|
|
@@ -2403,7 +2403,20 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2403
2403
|
var controlMarginTop = React.useMemo(function () {
|
|
2404
2404
|
var topMargin = 0;
|
|
2405
2405
|
if (inputHeight && controlHeight && controlVerticalCenter) {
|
|
2406
|
-
|
|
2406
|
+
if (controlHeight > inputHeight) {
|
|
2407
|
+
if (controlSingleHeight) {
|
|
2408
|
+
topMargin = inputHeight / 2 - controlSingleHeight / 2;
|
|
2409
|
+
}
|
|
2410
|
+
else {
|
|
2411
|
+
topMargin = 0;
|
|
2412
|
+
}
|
|
2413
|
+
}
|
|
2414
|
+
else {
|
|
2415
|
+
topMargin = inputHeight / 2 - controlHeight / 2;
|
|
2416
|
+
}
|
|
2417
|
+
}
|
|
2418
|
+
else {
|
|
2419
|
+
topMargin = 0;
|
|
2407
2420
|
}
|
|
2408
2421
|
var withLabelControlAddTopMargin;
|
|
2409
2422
|
if (size === 'small') {
|
|
@@ -2428,7 +2441,16 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2428
2441
|
break;
|
|
2429
2442
|
}
|
|
2430
2443
|
return controlMarginTop;
|
|
2431
|
-
}, [
|
|
2444
|
+
}, [
|
|
2445
|
+
controlHeight,
|
|
2446
|
+
controlSingleHeight,
|
|
2447
|
+
controlVerticalCenter,
|
|
2448
|
+
formColWithLabel,
|
|
2449
|
+
inputHeight,
|
|
2450
|
+
label,
|
|
2451
|
+
size,
|
|
2452
|
+
variant,
|
|
2453
|
+
]);
|
|
2432
2454
|
/********************************************************************************************************************
|
|
2433
2455
|
* Variable
|
|
2434
2456
|
* ******************************************************************************************************************/
|
|
@@ -2448,7 +2470,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2448
2470
|
!formColWithLabel && label && (React.createElement(material.InputLabel, { shrink: true, className: 'FormItemBase-InputLabel', size: size === 'medium' ? 'normal' : size, required: required }, labelIcon ? (React.createElement(React.Fragment, null,
|
|
2449
2471
|
React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
|
|
2450
2472
|
React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
|
|
2451
|
-
React.createElement("div", { className: 'FormItemBase-Control-wrap', style: { display: 'grid', marginTop: hideLabel ? 0 : undefined } }, autoSize ? (React.createElement(React.Fragment, null,
|
|
2473
|
+
React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
|
|
2452
2474
|
variant === 'standard' && (React.createElement(material.Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2453
2475
|
variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
2454
2476
|
variant === 'filled' && (React.createElement(material.FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
|
|
@@ -2456,7 +2478,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
|
|
|
2456
2478
|
width: fullWidth ? '100%' : 'auto',
|
|
2457
2479
|
display: 'grid',
|
|
2458
2480
|
marginTop: -inputHeight,
|
|
2459
|
-
height: inputHeight,
|
|
2481
|
+
height: util.ifUndefined(controlHeight, inputHeight) > inputHeight ? controlHeight : undefined,
|
|
2460
2482
|
alignItems: 'flex-start',
|
|
2461
2483
|
paddingTop: controlMarginTop,
|
|
2462
2484
|
position: 'relative',
|
|
@@ -2729,6 +2751,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
2729
2751
|
* State - height (ResizeDetector)
|
|
2730
2752
|
* ******************************************************************************************************************/
|
|
2731
2753
|
var _r = reactResizeDetector.useResizeDetector(), height = _r.height, resizeHeightDetectorRef = _r.ref;
|
|
2754
|
+
var _s = reactResizeDetector.useResizeDetector(), realHeight = _s.height, resizeRealHeightDetectorRef = _s.ref;
|
|
2732
2755
|
/********************************************************************************************************************
|
|
2733
2756
|
* Function - setErrorErrorHelperText
|
|
2734
2757
|
* ******************************************************************************************************************/
|
|
@@ -2760,7 +2783,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
2760
2783
|
var getFinalValue = React.useCallback(function (value) {
|
|
2761
2784
|
return onValue ? onValue(value) : value;
|
|
2762
2785
|
}, [onValue]);
|
|
2763
|
-
var
|
|
2786
|
+
var _t = reactHook.useAutoUpdateRefState(initValue, getFinalValue), valueRef = _t[0], value = _t[1], setValue = _t[2];
|
|
2764
2787
|
reactHook.useFirstSkipEffect(function () {
|
|
2765
2788
|
if (error)
|
|
2766
2789
|
validate(value);
|
|
@@ -2948,31 +2971,44 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
|
|
|
2948
2971
|
/********************************************************************************************************************
|
|
2949
2972
|
* Render
|
|
2950
2973
|
* ******************************************************************************************************************/
|
|
2951
|
-
|
|
2974
|
+
var singleHeight = height || (size === 'small' ? 35 : 39);
|
|
2975
|
+
var isMultiline = singleHeight <= util.ifUndefined(realHeight, 0);
|
|
2976
|
+
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: {
|
|
2977
|
+
paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
|
|
2978
|
+
}, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
|
|
2952
2979
|
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
|
|
2953
2980
|
display: 'grid',
|
|
2954
2981
|
position: 'absolute',
|
|
2955
2982
|
whiteSpace: 'nowrap',
|
|
2956
2983
|
visibility: 'hidden',
|
|
2957
2984
|
} },
|
|
2958
|
-
React.createElement(material.RadioGroup, __assign({}, props, { style: {
|
|
2985
|
+
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) {
|
|
2959
2986
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
|
|
2960
|
-
return (React.createElement(material.FormControlLabel, { ref: idx === 0 ? resizeHeightDetectorRef : 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: {
|
|
2987
|
+
return (React.createElement(material.FormControlLabel, { ref: idx === 0 ? resizeHeightDetectorRef : 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: {
|
|
2988
|
+
color: error ? theme.palette.error.main : '',
|
|
2989
|
+
marginTop: -5,
|
|
2990
|
+
marginBottom: -5,
|
|
2991
|
+
whiteSpace: 'nowrap',
|
|
2992
|
+
}, value: value, disabled: disabled || readOnly || itemDisabled }));
|
|
2961
2993
|
})))),
|
|
2962
2994
|
React.createElement("div", null,
|
|
2963
|
-
React.createElement(material.RadioGroup, __assign({}, props, { style: {
|
|
2964
|
-
marginTop: 10,
|
|
2995
|
+
React.createElement(material.RadioGroup, __assign({}, props, { ref: resizeRealHeightDetectorRef, style: {
|
|
2965
2996
|
display: 'inline-flex',
|
|
2966
2997
|
visibility: width == null ? 'hidden' : undefined,
|
|
2967
2998
|
position: width == null ? 'absolute' : undefined,
|
|
2968
2999
|
flexWrap: nowrap ? 'nowrap' : undefined,
|
|
2969
3000
|
}, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), isOnGetItemLoading || loading ? (React.createElement("div", { style: { position: 'relative' } },
|
|
2970
|
-
React.createElement(material.FormControlLabel, {
|
|
2971
|
-
React.createElement("div", { style: { position: 'absolute', left: 0, top:
|
|
3001
|
+
React.createElement(material.FormControlLabel, { label: '', control: React.createElement(material.Radio, { color: color, size: size }), style: { visibility: 'hidden' } }),
|
|
3002
|
+
React.createElement("div", { style: { position: 'absolute', left: 0, top: 11, opacity: 0.54 } },
|
|
2972
3003
|
React.createElement(material.CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
|
|
2973
3004
|
items.map(function (_a, idx) {
|
|
2974
3005
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
|
|
2975
|
-
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, inputRef: idx === 0 ? firstInputRef : null }), label: label, style: {
|
|
3006
|
+
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, inputRef: idx === 0 ? firstInputRef : null }), label: label, style: {
|
|
3007
|
+
color: error ? theme.palette.error.main : '',
|
|
3008
|
+
whiteSpace: 'nowrap',
|
|
3009
|
+
marginTop: -5,
|
|
3010
|
+
marginBottom: -5,
|
|
3011
|
+
}, value: value, disabled: disabled || readOnly || itemDisabled }));
|
|
2976
3012
|
})))))) }));
|
|
2977
3013
|
}));
|
|
2978
3014
|
FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".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}";
|
|
@@ -2997,6 +3033,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
2997
3033
|
* ******************************************************************************************************************/
|
|
2998
3034
|
var refForResizeWidthDetect = React.useRef(null);
|
|
2999
3035
|
var refForButtonResizeHeightDetect = React.useRef(null);
|
|
3036
|
+
var refForButtonsResizeHeightDetect = React.useRef(null);
|
|
3000
3037
|
var refForLoadingResizeHeightDetect = React.useRef(null);
|
|
3001
3038
|
/********************************************************************************************************************
|
|
3002
3039
|
* FormState
|
|
@@ -3033,6 +3070,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3033
3070
|
* State - height (ResizeDetector)
|
|
3034
3071
|
* ******************************************************************************************************************/
|
|
3035
3072
|
var _g = React.useState(), height = _g[0], setHeight = _g[1];
|
|
3073
|
+
var _h = React.useState(), realHeight = _h[0], setRealHeight = _h[1];
|
|
3036
3074
|
reactResizeDetector.useResizeDetector({
|
|
3037
3075
|
targetRef: refForButtonResizeHeightDetect,
|
|
3038
3076
|
handleHeight: true,
|
|
@@ -3041,6 +3079,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3041
3079
|
setHeight((_b = (_a = refForButtonResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
|
|
3042
3080
|
},
|
|
3043
3081
|
});
|
|
3082
|
+
reactResizeDetector.useResizeDetector({
|
|
3083
|
+
targetRef: refForButtonsResizeHeightDetect,
|
|
3084
|
+
handleHeight: true,
|
|
3085
|
+
onResize: function () {
|
|
3086
|
+
var _a, _b;
|
|
3087
|
+
setRealHeight((_b = (_a = refForButtonsResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
|
|
3088
|
+
},
|
|
3089
|
+
});
|
|
3044
3090
|
reactResizeDetector.useResizeDetector({
|
|
3045
3091
|
targetRef: refForLoadingResizeHeightDetect,
|
|
3046
3092
|
handleHeight: true,
|
|
@@ -3052,14 +3098,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3052
3098
|
/********************************************************************************************************************
|
|
3053
3099
|
* State
|
|
3054
3100
|
* ******************************************************************************************************************/
|
|
3055
|
-
var
|
|
3056
|
-
var
|
|
3057
|
-
var
|
|
3058
|
-
var
|
|
3059
|
-
var
|
|
3060
|
-
var
|
|
3061
|
-
var
|
|
3062
|
-
var
|
|
3101
|
+
var _j = React.useState(false), isOnGetItemLoading = _j[0], setIsOnGetItemLoading = _j[1];
|
|
3102
|
+
var _k = reactHook.useAutoUpdateState(initError), error = _k[0], setError = _k[1];
|
|
3103
|
+
var _l = React.useState(), errorHelperText = _l[0], setErrorHelperText = _l[1];
|
|
3104
|
+
var _m = reactHook.useAutoUpdateRefState(initData), dataRef = _m[0], setData = _m[2];
|
|
3105
|
+
var _o = reactHook.useAutoUpdateRefState(React.useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _o[0], disabled = _o[1], setDisabled = _o[2];
|
|
3106
|
+
var _p = reactHook.useAutoUpdateRefState(initHidden), hiddenRef = _p[0], hidden = _p[1], setHidden = _p[2];
|
|
3107
|
+
var _q = reactHook.useAutoUpdateRefState(initLoading), loadingRef = _q[0], loading = _q[1], setLoading = _q[2];
|
|
3108
|
+
var _r = reactHook.useAutoUpdateRefState(initItems), itemsRef = _r[0], items = _r[1], setItems = _r[2];
|
|
3063
3109
|
/********************************************************************************************************************
|
|
3064
3110
|
* Memo
|
|
3065
3111
|
* ******************************************************************************************************************/
|
|
@@ -3174,7 +3220,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3174
3220
|
finalValue = onValue ? onValue(finalValue) : finalValue;
|
|
3175
3221
|
return util.equal(value, finalValue) ? value : finalValue;
|
|
3176
3222
|
}, [multiple, formValueSeparator, itemsValues, onValue]);
|
|
3177
|
-
var
|
|
3223
|
+
var _s = reactHook.useAutoUpdateRefState(initValue, getFinalValue), valueRef = _s[0], value = _s[1], setValue = _s[2];
|
|
3178
3224
|
reactHook.useFirstSkipEffect(function () {
|
|
3179
3225
|
if (error)
|
|
3180
3226
|
validate(value);
|
|
@@ -3399,7 +3445,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3399
3445
|
theme.palette.error.main,
|
|
3400
3446
|
type,
|
|
3401
3447
|
]);
|
|
3402
|
-
|
|
3448
|
+
var controlHeight = height || 0;
|
|
3449
|
+
var isMultiline = controlHeight <= util.ifUndefined(realHeight, 0);
|
|
3450
|
+
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)), 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: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
|
|
3403
3451
|
React.createElement(material.CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
|
|
3404
3452
|
!fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
|
|
3405
3453
|
display: 'grid',
|
|
@@ -3408,7 +3456,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
|
|
|
3408
3456
|
visibility: 'hidden',
|
|
3409
3457
|
} },
|
|
3410
3458
|
React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
|
|
3411
|
-
React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
|
|
3459
|
+
React.createElement(material.ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
|
|
3412
3460
|
width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
|
|
3413
3461
|
? formColWidth
|
|
3414
3462
|
: undefined,
|