@pdg/react-form 1.0.129 → 1.0.130
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 ? 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}";
|
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 ? 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}";
|