@pdg/react-form 1.0.28 → 1.0.30
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 +4 -14
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -14
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4993,7 +4993,7 @@ FormRadioGroup.displayName = 'FormRadioGroup';
|
|
|
4993
4993
|
FormRadioGroup.defaultProps = FormRadioGroupDefaultProps;var FormToggleButtonGroupDefaultProps = {
|
|
4994
4994
|
type: 'button',
|
|
4995
4995
|
formValueSeparator: ',',
|
|
4996
|
-
};var css_248z$b = ".FormToggleButtonGroup .ToggleButton {\n display: inline-block;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.FormToggleButtonGroup.type-checkbox .
|
|
4996
|
+
};var css_248z$b = ".FormToggleButtonGroup .ToggleButton {\n display: inline-block;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\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 .ToggleButton {\n height: 52px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .ToggleButton {\n height: 52px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .ToggleButton {\n height: 44px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .ToggleButton {\n height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .ToggleButton {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .ToggleButton {\n height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .ToggleButton {\n height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .ToggleButton {\n height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .ToggleButton {\n height: 26px;\n}";
|
|
4997
4997
|
styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].forwardRef(function (_a, ref) {
|
|
4998
4998
|
// ID --------------------------------------------------------------------------------------------------------------
|
|
4999
4999
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth,
|
|
@@ -5341,13 +5341,8 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
|
|
|
5341
5341
|
finalItemWidth = 'auto';
|
|
5342
5342
|
}
|
|
5343
5343
|
else if (!fullWidth || type === 'radio' || type === 'checkbox') {
|
|
5344
|
-
finalItemWidth = 'auto';
|
|
5344
|
+
finalItemWidth = itemWidth || 'auto';
|
|
5345
5345
|
}
|
|
5346
|
-
var containerStyle = type === 'checkbox' || type === 'radio'
|
|
5347
|
-
? {
|
|
5348
|
-
width: itemWidth,
|
|
5349
|
-
}
|
|
5350
|
-
: undefined;
|
|
5351
5346
|
var buttonStyle = {
|
|
5352
5347
|
borderColor: error ? theme.palette.error.main : '',
|
|
5353
5348
|
color: error ? theme.palette.error.main : '',
|
|
@@ -5356,7 +5351,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
|
|
|
5356
5351
|
return (items &&
|
|
5357
5352
|
items.map(function (_a, idx) {
|
|
5358
5353
|
var value = _a.value, label = _a.label, itemDisabled = _a.disabled, itemColor = _a.color;
|
|
5359
|
-
var button = (React__default["default"].createElement(material.ToggleButton, { ref: idx === 0 ? resizeHeightDetectorRef : undefined, size: size, className: 'ToggleButton', value: value, color: itemColor || color, disabled: disabled || readOnly || itemDisabled, style: buttonStyle, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } },
|
|
5354
|
+
var button = (React__default["default"].createElement(material.ToggleButton, { ref: idx === 0 ? resizeHeightDetectorRef : undefined, key: idx, size: size, className: 'ToggleButton', value: value, color: itemColor || color, disabled: disabled || readOnly || itemDisabled, style: buttonStyle, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } },
|
|
5360
5355
|
type === 'checkbox' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
5361
5356
|
React__default["default"].createElement(material.Icon, { className: '__checkbox-unchecked__' }, "check_box_outline_blank"),
|
|
5362
5357
|
React__default["default"].createElement(material.Icon, { className: '__checkbox-checked__' }, "check_box"))) : (type === 'radio' && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -5364,12 +5359,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
|
|
|
5364
5359
|
React__default["default"].createElement(material.Icon, { className: '__checkbox-unchecked__' }, "radio_button_unchecked"),
|
|
5365
5360
|
React__default["default"].createElement(material.Icon, { className: '__checkbox-checked__' }, "radio_button_checked"))))),
|
|
5366
5361
|
label));
|
|
5367
|
-
|
|
5368
|
-
return (React__default["default"].createElement("div", { className: 'ToggleButtonContainer', style: containerStyle }, button));
|
|
5369
|
-
}
|
|
5370
|
-
else {
|
|
5371
|
-
return button;
|
|
5372
|
-
}
|
|
5362
|
+
return button;
|
|
5373
5363
|
}));
|
|
5374
5364
|
}, [
|
|
5375
5365
|
color,
|