@pdg/react-form 1.0.26 → 1.0.28
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.
|
@@ -20,6 +20,7 @@ export interface FormToggleButtonGroupProps extends CommonSxProps, Omit<FormValu
|
|
|
20
20
|
formValueSort?: boolean;
|
|
21
21
|
loading?: boolean;
|
|
22
22
|
hidden?: boolean;
|
|
23
|
+
itemWidth?: number | string;
|
|
23
24
|
onLoadItems?: () => Promise<FormToggleButtonGroupItem[]>;
|
|
24
25
|
onValue?: (value: FormToggleButtonGroupValue) => FormToggleButtonGroupValue;
|
|
25
26
|
}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import*as React from'react';import React__default,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Icon as Icon$1,Button,styled,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,useTheme,RadioGroup,Radio,ToggleButtonGroup,
|
|
1
|
+
import*as React from'react';import React__default,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Icon as Icon$1,Button,styled,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,useTheme,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Paper}from'@mui/material';import dayjs from'dayjs';import {findDOMNode}from'react-dom';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import CircularProgress$1 from'@mui/material/CircularProgress';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker}from'@mui/x-date-pickers';import dayjsLocale from'dayjs/locale/ko';import dayjsIsSameOrAfter from'dayjs/plugin/isSameOrAfter';import dayjsIsSameOrBefore from'dayjs/plugin/isSameOrBefore';import dayjsIsBetween from'dayjs/plugin/isBetween';/******************************************************************************
|
|
2
2
|
Copyright (c) Microsoft Corporation.
|
|
3
3
|
|
|
4
4
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -4993,12 +4993,12 @@ 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 .ToggleButtonContainer, .FormToggleButtonGroup.type-radio .ToggleButtonContainer {\n border: 0 !important;\n margin-left: 0 !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButtonContainer:not(:last-child) {\n margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton {\n padding-left: 3px;\n padding-right: 5px;\n display: flex;\n background-color: transparent !important;\n border: 0 !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton .__checkbox-unchecked__ {\n margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton .__checkbox-checked__ {\n display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton.Mui-selected .__checkbox-checked__ {\n display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .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.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,
|
|
5000
5000
|
//----------------------------------------------------------------------------------------------------------------
|
|
5001
|
-
name = _a.name, labelIcon = _a.labelIcon, label = _a.label, type = _a.type, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, hidden = _a.hidden, onLoadItems = _a.onLoadItems,
|
|
5001
|
+
name = _a.name, labelIcon = _a.labelIcon, label = _a.label, type = _a.type, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, hidden = _a.hidden, itemWidth = _a.itemWidth, onLoadItems = _a.onLoadItems,
|
|
5002
5002
|
//----------------------------------------------------------------------------------------------------------------
|
|
5003
5003
|
onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate,
|
|
5004
5004
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -5011,7 +5011,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
|
|
|
5011
5011
|
var variant = useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
|
|
5012
5012
|
var size = useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
|
|
5013
5013
|
var color = useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
|
|
5014
|
-
var fullWidth = useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
|
|
5014
|
+
var fullWidth = useMemo(function () { return (type === 'checkbox' || type === 'radio' ? true : initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth, type]);
|
|
5015
5015
|
// State - FormState -----------------------------------------------------------------------------------------------
|
|
5016
5016
|
var _c = useAutoUpdateState$1(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
|
|
5017
5017
|
// Theme -----------------------------------------------------------------------------------------------------------
|
|
@@ -5335,6 +5335,57 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
|
|
|
5335
5335
|
if (focused) {
|
|
5336
5336
|
formControlBaseProps.focused = true;
|
|
5337
5337
|
}
|
|
5338
|
+
var buttons = useMemo(function () {
|
|
5339
|
+
var finalItemWidth = undefined;
|
|
5340
|
+
if (type === 'button' && !fullWidth) {
|
|
5341
|
+
finalItemWidth = 'auto';
|
|
5342
|
+
}
|
|
5343
|
+
else if (!fullWidth || type === 'radio' || type === 'checkbox') {
|
|
5344
|
+
finalItemWidth = 'auto';
|
|
5345
|
+
}
|
|
5346
|
+
var containerStyle = type === 'checkbox' || type === 'radio'
|
|
5347
|
+
? {
|
|
5348
|
+
width: itemWidth,
|
|
5349
|
+
}
|
|
5350
|
+
: undefined;
|
|
5351
|
+
var buttonStyle = {
|
|
5352
|
+
borderColor: error ? theme.palette.error.main : '',
|
|
5353
|
+
color: error ? theme.palette.error.main : '',
|
|
5354
|
+
width: finalItemWidth,
|
|
5355
|
+
};
|
|
5356
|
+
return (items &&
|
|
5357
|
+
items.map(function (_a, idx) {
|
|
5358
|
+
var value = _a.value, label = _a.label, itemDisabled = _a.disabled, itemColor = _a.color;
|
|
5359
|
+
var button = (React__default.createElement(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); } },
|
|
5360
|
+
type === 'checkbox' ? (React__default.createElement(React__default.Fragment, null,
|
|
5361
|
+
React__default.createElement(Icon$1, { className: '__checkbox-unchecked__' }, "check_box_outline_blank"),
|
|
5362
|
+
React__default.createElement(Icon$1, { className: '__checkbox-checked__' }, "check_box"))) : (type === 'radio' && (React__default.createElement(React__default.Fragment, null,
|
|
5363
|
+
React__default.createElement(React__default.Fragment, null,
|
|
5364
|
+
React__default.createElement(Icon$1, { className: '__checkbox-unchecked__' }, "radio_button_unchecked"),
|
|
5365
|
+
React__default.createElement(Icon$1, { className: '__checkbox-checked__' }, "radio_button_checked"))))),
|
|
5366
|
+
label));
|
|
5367
|
+
if (type === 'checkbox' || type === 'radio') {
|
|
5368
|
+
return (React__default.createElement("div", { className: 'ToggleButtonContainer', style: containerStyle }, button));
|
|
5369
|
+
}
|
|
5370
|
+
else {
|
|
5371
|
+
return button;
|
|
5372
|
+
}
|
|
5373
|
+
}));
|
|
5374
|
+
}, [
|
|
5375
|
+
color,
|
|
5376
|
+
disabled,
|
|
5377
|
+
error,
|
|
5378
|
+
fullWidth,
|
|
5379
|
+
initFocused,
|
|
5380
|
+
itemWidth,
|
|
5381
|
+
items,
|
|
5382
|
+
readOnly,
|
|
5383
|
+
resizeHeightDetectorRef,
|
|
5384
|
+
setFocused,
|
|
5385
|
+
size,
|
|
5386
|
+
theme.palette.error.main,
|
|
5387
|
+
type,
|
|
5388
|
+
]);
|
|
5338
5389
|
return (React__default.createElement(FormItemBase, __assign$6({}, formControlBaseProps, { className: classNames$1(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: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, controlHeight: height || 0, controlVerticalCenter: isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React__default.createElement("div", { style: { opacity: 0.54 }, ref: resizeHeightDetectorRef },
|
|
5339
5390
|
React__default.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React__default.createElement(React__default.Fragment, null,
|
|
5340
5391
|
!fullWidth && !isOnGetItemLoading && !loading && items && (React__default.createElement("div", { ref: resizeWidthDetectorRef, style: {
|
|
@@ -5343,34 +5394,13 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
|
|
|
5343
5394
|
whiteSpace: 'nowrap',
|
|
5344
5395
|
visibility: 'hidden',
|
|
5345
5396
|
} },
|
|
5346
|
-
React__default.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple },
|
|
5347
|
-
items.map(function (_a, idx) {
|
|
5348
|
-
var value = _a.value, label = _a.label, itemDisabled = _a.disabled, itemColor = _a.color;
|
|
5349
|
-
return (React__default.createElement(ToggleButton, { ref: idx === 0 ? resizeHeightDetectorRef : null, key: idx, size: size, className: 'ToggleButton', value: value, color: itemColor || color, disabled: disabled || readOnly || itemDisabled, style: {
|
|
5350
|
-
borderColor: error ? theme.palette.error.main : '',
|
|
5351
|
-
color: error ? theme.palette.error.main : '',
|
|
5352
|
-
}, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }, label));
|
|
5353
|
-
})))),
|
|
5397
|
+
React__default.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
|
|
5354
5398
|
React__default.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
|
|
5355
5399
|
width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
|
|
5356
5400
|
? formColWidth
|
|
5357
5401
|
: undefined,
|
|
5358
5402
|
flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
|
|
5359
|
-
}, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React__default.createElement(ToggleButton, { ref: resizeHeightDetectorRef, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (
|
|
5360
|
-
var value = _a.value, label = _a.label, itemDisabled = _a.disabled, itemColor = _a.color;
|
|
5361
|
-
return (React__default.createElement(ToggleButton, { ref: idx === 0 ? resizeHeightDetectorRef : undefined, key: idx, size: size, className: 'ToggleButton', value: value, color: itemColor || color, disabled: disabled || readOnly || itemDisabled, style: {
|
|
5362
|
-
borderColor: error ? theme.palette.error.main : '',
|
|
5363
|
-
color: error ? theme.palette.error.main : '',
|
|
5364
|
-
width: type === 'checkbox' || type === 'radio' ? 'auto' : undefined,
|
|
5365
|
-
}, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } },
|
|
5366
|
-
type === 'checkbox' ? (React__default.createElement(React__default.Fragment, null,
|
|
5367
|
-
React__default.createElement(Icon$1, { className: '__checkbox-unchecked__' }, "check_box_outline_blank"),
|
|
5368
|
-
React__default.createElement(Icon$1, { className: '__checkbox-checked__' }, "check_box"))) : (type === 'radio' && (React__default.createElement(React__default.Fragment, null,
|
|
5369
|
-
React__default.createElement(React__default.Fragment, null,
|
|
5370
|
-
React__default.createElement(Icon$1, { className: '__checkbox-unchecked__' }, "radio_button_unchecked"),
|
|
5371
|
-
React__default.createElement(Icon$1, { className: '__checkbox-checked__' }, "radio_button_checked"))))),
|
|
5372
|
-
label));
|
|
5373
|
-
}))))) })));
|
|
5403
|
+
}, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React__default.createElement(ToggleButton, { ref: resizeHeightDetectorRef, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons)))) })));
|
|
5374
5404
|
});
|
|
5375
5405
|
FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';
|
|
5376
5406
|
FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormRatingDefaultProps = {
|