@pdg/react-form 1.0.116 → 1.0.118
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.
|
@@ -24,6 +24,7 @@ export interface FormAutocompleteProps<T extends FormAutocompleteSingleValue, Mu
|
|
|
24
24
|
disablePortal?: boolean;
|
|
25
25
|
noOptionsText?: string;
|
|
26
26
|
limitTags?: number;
|
|
27
|
+
getLimitTagsText?: (more: number) => ReactNode;
|
|
27
28
|
openOnFocus?: boolean;
|
|
28
29
|
disableClearable?: boolean;
|
|
29
30
|
async?: boolean;
|
|
@@ -5,5 +5,7 @@ import { FormTextFieldProps } from '../FormTextField';
|
|
|
5
5
|
declare const FormTag: React.ForwardRefExoticComponent<Omit<FormTextFieldProps<FormTagValue, false, FormTagValue>, "type"> & {
|
|
6
6
|
formValueSeparator?: string | undefined;
|
|
7
7
|
formValueSort?: boolean | undefined;
|
|
8
|
+
limitTags?: number | undefined;
|
|
9
|
+
getLimitTagsText?: ((more: number) => React.ReactNode) | undefined;
|
|
8
10
|
} & React.RefAttributes<FormTagCommands>>;
|
|
9
11
|
export default FormTag;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { FormArrayValueItemCommands } from '../../@types';
|
|
2
3
|
import { FormTextFieldCommands, FormTextFieldProps } from '../FormTextField';
|
|
3
4
|
export type FormTagValue = string[];
|
|
@@ -6,5 +7,7 @@ export type FormTagCommands = FormTextFieldCommands<FormTagValue, false> & FormT
|
|
|
6
7
|
export type FormTagProps = Omit<FormTextFieldProps<FormTagValue, false>, 'type'> & {
|
|
7
8
|
formValueSeparator?: string;
|
|
8
9
|
formValueSort?: boolean;
|
|
10
|
+
limitTags?: number;
|
|
11
|
+
getLimitTagsText?: (more: number) => ReactNode;
|
|
9
12
|
};
|
|
10
13
|
export declare const FormTagDefaultProps: Pick<FormTagProps, 'value' | 'clear' | 'formValueSeparator'>;
|
package/dist/index.esm.js
CHANGED
|
@@ -1345,7 +1345,7 @@ styleInject(css_248z$j);var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1345
1345
|
/********************************************************************************************************************
|
|
1346
1346
|
* FormState
|
|
1347
1347
|
* ******************************************************************************************************************/
|
|
1348
|
-
var className = _a.className, name = _a.name, initValue = _a.value, exceptValue = _a.exceptValue, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, onValidate = _a.onValidate, onKeyDown = _a.onKeyDown, onChange = _a.onChange, onValue = _a.onValue, onBlur = _a.onBlur, props = __rest(_a, ["className", "name", "value", "exceptValue", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "onValidate", "onKeyDown", "onChange", "onValue", "onBlur"]);
|
|
1348
|
+
var className = _a.className, name = _a.name, initValue = _a.value, exceptValue = _a.exceptValue, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, onValidate = _a.onValidate, onKeyDown = _a.onKeyDown, onChange = _a.onChange, onValue = _a.onValue, onBlur = _a.onBlur, props = __rest(_a, ["className", "name", "value", "exceptValue", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "onValidate", "onKeyDown", "onChange", "onValue", "onBlur"]);
|
|
1349
1349
|
var _b = useFormState(), formFullWidth = _b.fullWidth, formDisabled = _b.disabled, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit, otherFormState = __rest(_b, ["fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
|
|
1350
1350
|
/********************************************************************************************************************
|
|
1351
1351
|
* State - FormState
|
|
@@ -1511,7 +1511,7 @@ styleInject(css_248z$j);var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1511
1511
|
onValueChangeByUser: function () { },
|
|
1512
1512
|
// eslint-disable-next-line
|
|
1513
1513
|
onRequestSearchSubmit: function () { } }, otherFormState) },
|
|
1514
|
-
React.createElement(Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, disabled: disabled, renderTags: handleRenderTags, inputValue: inputValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: function (params) {
|
|
1514
|
+
React.createElement(Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, limitTags: limitTags, getLimitTagsText: getLimitTagsText, disabled: disabled, renderTags: handleRenderTags, inputValue: inputValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: function (params) {
|
|
1515
1515
|
var _a;
|
|
1516
1516
|
var renderProps = __assign({}, props);
|
|
1517
1517
|
renderProps.InputLabelProps = __assign(__assign({}, renderProps.InputLabelProps), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id });
|
|
@@ -3917,7 +3917,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
|
|
|
3917
3917
|
* ******************************************************************************************************************/
|
|
3918
3918
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
|
|
3919
3919
|
//----------------------------------------------------------------------------------------------------------------
|
|
3920
|
-
name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, initHidden = _a.hidden, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, getOptionDisabled = _a.getOptionDisabled,
|
|
3920
|
+
name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, initHidden = _a.hidden, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, getOptionDisabled = _a.getOptionDisabled,
|
|
3921
3921
|
//----------------------------------------------------------------------------------------------------------------
|
|
3922
3922
|
onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate,
|
|
3923
3923
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -4369,7 +4369,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
|
|
|
4369
4369
|
/********************************************************************************************************************
|
|
4370
4370
|
* Render
|
|
4371
4371
|
* ******************************************************************************************************************/
|
|
4372
|
-
return (React.createElement(Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
|
|
4372
|
+
return (React.createElement(Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, getLimitTagsText: getLimitTagsText, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
|
|
4373
4373
|
if (reason === 'input') {
|
|
4374
4374
|
setInputValue(newInputValue);
|
|
4375
4375
|
}
|
|
@@ -8307,7 +8307,7 @@ FormDateRangePicker.defaultProps = FormDateRangePickerDefaultProps;var FormFileD
|
|
|
8307
8307
|
};
|
|
8308
8308
|
LinkDialog.displayName = 'LinkDialog';
|
|
8309
8309
|
LinkDialog.defaultProps = LinkDialogDefaultProps;var css_248z$1 = ".FormFile .control-wrap {\n display: inline-flex;\n}\n.FormFile .control-wrap .file-name-wrap .file-name {\n min-width: 350px;\n}\n.FormFile .control-wrap .file-name-wrap .file-name .MuiInputBase-root {\n padding-right: 7px;\n}\n.FormFile .control-wrap .input-file {\n display: none;\n}\n.FormFile .control-wrap .input-file-wrap {\n display: flex;\n}\n.FormFile .control-wrap .input-file-wrap .input-file-btn:not(.hidden-label) .PdgIcon {\n margin-left: -3px;\n}\n.FormFile.full-width .control-wrap {\n display: flex;\n}\n.FormFile.full-width .control-wrap .file-name-wrap {\n flex: 1;\n}\n.FormFile.variant-standard .file-name-wrap .file-name .MuiInputBase-root {\n padding-right: 0;\n}\n.FormFile:not(.hide-file-name).variant-outlined .form-file-btn label, .FormFile:not(.hide-file-name).variant-filled .form-file-btn label {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.FormFile:not(.hide-file-name).variant-standard .form-file-btn label {\n padding-top: 5px;\n padding-bottom: 5px;\n}\n.FormFile:not(.hide-file-name).size-small .form-file-btn label {\n padding-top: 5px;\n padding-bottom: 5px;\n}\n\n.FormFile.hide-file-name:not(.with-label).variant-outlined .form-file-btn {\n height: 52px;\n}\n.FormFile.hide-file-name:not(.with-label).variant-filled .form-file-btn {\n height: 52px;\n}\n.FormFile.hide-file-name:not(.with-label).variant-standard .form-file-btn {\n height: 28px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-outlined .form-file-btn {\n height: 37px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-filled .form-file-btn {\n height: 44px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-standard .form-file-btn {\n height: 26px;\n}\n.FormFile.hide-file-name.with-label.variant-outlined .form-file-btn {\n height: 37px;\n}\n.FormFile.hide-file-name.with-label.variant-filled .form-file-btn {\n height: 37px;\n}\n.FormFile.hide-file-name.with-label.variant-standard .form-file-btn {\n height: 28px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-outlined .form-file-btn {\n height: 24px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-filled .form-file-btn {\n height: 31px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-standard .form-file-btn {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-outlined .form-file-btn {\n height: 37px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-filled .form-file-btn {\n height: 37px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-standard .form-file-btn {\n height: 28px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-outlined .form-file-btn {\n height: 24px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-filled .form-file-btn {\n height: 31px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-standard .form-file-btn {\n height: 26px;\n}";
|
|
8310
|
-
styleInject(css_248z$1);var StyledPdgButton = styled(PdgButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n min-width: 0;\n\n label {\n
|
|
8310
|
+
styleInject(css_248z$1);var StyledPdgButton = styled(PdgButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n min-width: 0;\n\n &.input-file-btn {\n padding: 0 !important;\n position: relative;\n\n .PdgFlexRowBox {\n height: 100%;\n .PdgText {\n height: 100%;\n\n label {\n cursor: pointer;\n display: flex;\n flex: 1;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n\n .PdgIcon {\n margin-right: 0.2em;\n }\n }\n }\n }\n }\n\n &.hidden-label.input-file-btn .PdgFlexRowBox .PdgText label .PdgIcon {\n margin-left: 0;\n margin-right: 0;\n }\n\n &.MuiButton-outlined {\n &:first-of-type:not(:last-of-type) {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n &:last-of-type:not(:first-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &:not(:first-of-type):not(:last-of-type) {\n border-right: 0;\n border-radius: 0;\n }\n }\n"], ["\n min-width: 0;\n\n &.input-file-btn {\n padding: 0 !important;\n position: relative;\n\n .PdgFlexRowBox {\n height: 100%;\n .PdgText {\n height: 100%;\n\n label {\n cursor: pointer;\n display: flex;\n flex: 1;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n\n .PdgIcon {\n margin-right: 0.2em;\n }\n }\n }\n }\n }\n\n &.hidden-label.input-file-btn .PdgFlexRowBox .PdgText label .PdgIcon {\n margin-left: 0;\n margin-right: 0;\n }\n\n &.MuiButton-outlined {\n &:first-of-type:not(:last-of-type) {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n &:last-of-type:not(:first-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &:not(:first-of-type):not(:last-of-type) {\n border-right: 0;\n border-radius: 0;\n }\n }\n"])));
|
|
8311
8311
|
var templateObject_1$1;var FILE_VALUE = '';
|
|
8312
8312
|
var FormFile = React.forwardRef(function (_a, ref) {
|
|
8313
8313
|
/********************************************************************************************************************
|
|
@@ -8591,14 +8591,20 @@ var FormFile = React.forwardRef(function (_a, ref) {
|
|
|
8591
8591
|
endAdornment: (React.createElement(InputAdornment, { position: 'end' },
|
|
8592
8592
|
React.createElement("div", { className: 'input-file-wrap' },
|
|
8593
8593
|
!hideUpload && (React.createElement(React.Fragment, null,
|
|
8594
|
-
React.createElement(StyledPdgButton, { variant: 'text', tabIndex: uploadTabIndex == null ? -1 : uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color,
|
|
8594
|
+
React.createElement(StyledPdgButton, { variant: 'text', tabIndex: uploadTabIndex == null ? -1 : uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, size: size, disabled: readOnly || disabled, ref: fileUploadBtnRef },
|
|
8595
|
+
React.createElement("label", { htmlFor: id },
|
|
8596
|
+
React.createElement(PdgIcon, { size: size, color: error ? 'error' : color }, "upload"),
|
|
8597
|
+
!hideUploadLabel && (uploadLabel || '파일 업로드'))),
|
|
8595
8598
|
React.createElement("input", { type: 'file', accept: accept, id: id, value: FILE_VALUE, className: 'input-file', onChange: handleFileChange }))),
|
|
8596
8599
|
!hideLink && (React.createElement(StyledPdgButton, { variant: 'text', tabIndex: linkTabIndex == null ? -1 : linkTabIndex, className: classNames('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'link', size: size, disabled: readOnly || disabled, ref: linkBtnRef, onClick: handleLinkClick }, !hideLinkLabel && (linkLabel || '링크'))),
|
|
8597
8600
|
!hideRemove && notEmpty(value) && (React.createElement(StyledPdgButton, { variant: 'text', tabIndex: removeTabIndex == null ? -1 : removeTabIndex, className: classNames('remove-btn form-file-btn', !!hideRemoveLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'close', size: size, disabled: readOnly || disabled, onClick: handleRemoveClick }, !hideRemoveLabel && (removeLabel || '삭제')))))),
|
|
8598
8601
|
}, placeholder: '\uD30C\uC77C\uC744 \uC120\uD0DD\uD558\uC138\uC694' }))),
|
|
8599
8602
|
!!hideUrl && (React.createElement("div", { className: 'input-file-wrap' },
|
|
8600
8603
|
!hideUpload && (React.createElement(React.Fragment, null,
|
|
8601
|
-
React.createElement(StyledPdgButton, { variant: 'outlined', tabIndex: uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color,
|
|
8604
|
+
React.createElement(StyledPdgButton, { variant: 'outlined', tabIndex: uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, size: size, ref: fileUploadBtnRef, disabled: disabled },
|
|
8605
|
+
React.createElement("label", { htmlFor: id },
|
|
8606
|
+
React.createElement(PdgIcon, { size: size, color: error ? 'error' : color }, "upload"),
|
|
8607
|
+
!hideUploadLabel && (uploadLabel || '파일 업로드'))),
|
|
8602
8608
|
React.createElement("input", { type: 'file', accept: accept, id: id, value: FILE_VALUE, className: 'input-file', onChange: handleFileChange }))),
|
|
8603
8609
|
!hideLink && (React.createElement(StyledPdgButton, { variant: 'outlined', tabIndex: linkTabIndex, className: classNames('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'link', size: size, onClick: handleLinkClick, disabled: disabled, ref: linkBtnRef }, !hideLinkLabel && (linkLabel || '링크'))),
|
|
8604
8610
|
!hideRemove && notEmpty(value) && (React.createElement(StyledPdgButton, { variant: 'outlined', tabIndex: removeTabIndex, className: classNames('remove-btn form-file-btn', !!hideRemoveLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'close', size: size, disabled: disabled, onClick: handleRemoveClick }, !hideRemoveLabel && (removeLabel || '삭제'))))),
|
package/dist/index.js
CHANGED
|
@@ -1345,7 +1345,7 @@ styleInject(css_248z$j);var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1345
1345
|
/********************************************************************************************************************
|
|
1346
1346
|
* FormState
|
|
1347
1347
|
* ******************************************************************************************************************/
|
|
1348
|
-
var className = _a.className, name = _a.name, initValue = _a.value, exceptValue = _a.exceptValue, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, onValidate = _a.onValidate, onKeyDown = _a.onKeyDown, onChange = _a.onChange, onValue = _a.onValue, onBlur = _a.onBlur, props = __rest(_a, ["className", "name", "value", "exceptValue", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "onValidate", "onKeyDown", "onChange", "onValue", "onBlur"]);
|
|
1348
|
+
var className = _a.className, name = _a.name, initValue = _a.value, exceptValue = _a.exceptValue, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, onValidate = _a.onValidate, onKeyDown = _a.onKeyDown, onChange = _a.onChange, onValue = _a.onValue, onBlur = _a.onBlur, props = __rest(_a, ["className", "name", "value", "exceptValue", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "onValidate", "onKeyDown", "onChange", "onValue", "onBlur"]);
|
|
1349
1349
|
var _b = useFormState(), formFullWidth = _b.fullWidth, formDisabled = _b.disabled, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit, otherFormState = __rest(_b, ["fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
|
|
1350
1350
|
/********************************************************************************************************************
|
|
1351
1351
|
* State - FormState
|
|
@@ -1511,7 +1511,7 @@ styleInject(css_248z$j);var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1511
1511
|
onValueChangeByUser: function () { },
|
|
1512
1512
|
// eslint-disable-next-line
|
|
1513
1513
|
onRequestSearchSubmit: function () { } }, otherFormState) },
|
|
1514
|
-
React.createElement(material.Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, disabled: disabled, renderTags: handleRenderTags, inputValue: inputValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: function (params) {
|
|
1514
|
+
React.createElement(material.Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, limitTags: limitTags, getLimitTagsText: getLimitTagsText, disabled: disabled, renderTags: handleRenderTags, inputValue: inputValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: function (params) {
|
|
1515
1515
|
var _a;
|
|
1516
1516
|
var renderProps = __assign({}, props);
|
|
1517
1517
|
renderProps.InputLabelProps = __assign(__assign({}, renderProps.InputLabelProps), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id });
|
|
@@ -3917,7 +3917,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
|
|
|
3917
3917
|
* ******************************************************************************************************************/
|
|
3918
3918
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
|
|
3919
3919
|
//----------------------------------------------------------------------------------------------------------------
|
|
3920
|
-
name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, initHidden = _a.hidden, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, getOptionDisabled = _a.getOptionDisabled,
|
|
3920
|
+
name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, initHidden = _a.hidden, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, getOptionDisabled = _a.getOptionDisabled,
|
|
3921
3921
|
//----------------------------------------------------------------------------------------------------------------
|
|
3922
3922
|
onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate,
|
|
3923
3923
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -4369,7 +4369,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
|
|
|
4369
4369
|
/********************************************************************************************************************
|
|
4370
4370
|
* Render
|
|
4371
4371
|
* ******************************************************************************************************************/
|
|
4372
|
-
return (React.createElement(material.Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
|
|
4372
|
+
return (React.createElement(material.Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, getLimitTagsText: getLimitTagsText, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
|
|
4373
4373
|
if (reason === 'input') {
|
|
4374
4374
|
setInputValue(newInputValue);
|
|
4375
4375
|
}
|
|
@@ -8307,7 +8307,7 @@ FormDateRangePicker.defaultProps = FormDateRangePickerDefaultProps;var FormFileD
|
|
|
8307
8307
|
};
|
|
8308
8308
|
LinkDialog.displayName = 'LinkDialog';
|
|
8309
8309
|
LinkDialog.defaultProps = LinkDialogDefaultProps;var css_248z$1 = ".FormFile .control-wrap {\n display: inline-flex;\n}\n.FormFile .control-wrap .file-name-wrap .file-name {\n min-width: 350px;\n}\n.FormFile .control-wrap .file-name-wrap .file-name .MuiInputBase-root {\n padding-right: 7px;\n}\n.FormFile .control-wrap .input-file {\n display: none;\n}\n.FormFile .control-wrap .input-file-wrap {\n display: flex;\n}\n.FormFile .control-wrap .input-file-wrap .input-file-btn:not(.hidden-label) .PdgIcon {\n margin-left: -3px;\n}\n.FormFile.full-width .control-wrap {\n display: flex;\n}\n.FormFile.full-width .control-wrap .file-name-wrap {\n flex: 1;\n}\n.FormFile.variant-standard .file-name-wrap .file-name .MuiInputBase-root {\n padding-right: 0;\n}\n.FormFile:not(.hide-file-name).variant-outlined .form-file-btn label, .FormFile:not(.hide-file-name).variant-filled .form-file-btn label {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.FormFile:not(.hide-file-name).variant-standard .form-file-btn label {\n padding-top: 5px;\n padding-bottom: 5px;\n}\n.FormFile:not(.hide-file-name).size-small .form-file-btn label {\n padding-top: 5px;\n padding-bottom: 5px;\n}\n\n.FormFile.hide-file-name:not(.with-label).variant-outlined .form-file-btn {\n height: 52px;\n}\n.FormFile.hide-file-name:not(.with-label).variant-filled .form-file-btn {\n height: 52px;\n}\n.FormFile.hide-file-name:not(.with-label).variant-standard .form-file-btn {\n height: 28px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-outlined .form-file-btn {\n height: 37px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-filled .form-file-btn {\n height: 44px;\n}\n.FormFile.hide-file-name:not(.with-label).size-small.variant-standard .form-file-btn {\n height: 26px;\n}\n.FormFile.hide-file-name.with-label.variant-outlined .form-file-btn {\n height: 37px;\n}\n.FormFile.hide-file-name.with-label.variant-filled .form-file-btn {\n height: 37px;\n}\n.FormFile.hide-file-name.with-label.variant-standard .form-file-btn {\n height: 28px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-outlined .form-file-btn {\n height: 24px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-filled .form-file-btn {\n height: 31px;\n}\n.FormFile.hide-file-name.with-label.size-small.variant-standard .form-file-btn {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-outlined .form-file-btn {\n height: 37px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-filled .form-file-btn {\n height: 37px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.variant-standard .form-file-btn {\n height: 28px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-outlined .form-file-btn {\n height: 24px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-filled .form-file-btn {\n height: 31px;\n}\n.Form .FormCol.with-label .FormFile.hide-file-name.size-small.variant-standard .form-file-btn {\n height: 26px;\n}";
|
|
8310
|
-
styleInject(css_248z$1);var StyledPdgButton = material.styled(reactComponent.PdgButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n min-width: 0;\n\n label {\n
|
|
8310
|
+
styleInject(css_248z$1);var StyledPdgButton = material.styled(reactComponent.PdgButton)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n min-width: 0;\n\n &.input-file-btn {\n padding: 0 !important;\n position: relative;\n\n .PdgFlexRowBox {\n height: 100%;\n .PdgText {\n height: 100%;\n\n label {\n cursor: pointer;\n display: flex;\n flex: 1;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n\n .PdgIcon {\n margin-right: 0.2em;\n }\n }\n }\n }\n }\n\n &.hidden-label.input-file-btn .PdgFlexRowBox .PdgText label .PdgIcon {\n margin-left: 0;\n margin-right: 0;\n }\n\n &.MuiButton-outlined {\n &:first-of-type:not(:last-of-type) {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n &:last-of-type:not(:first-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &:not(:first-of-type):not(:last-of-type) {\n border-right: 0;\n border-radius: 0;\n }\n }\n"], ["\n min-width: 0;\n\n &.input-file-btn {\n padding: 0 !important;\n position: relative;\n\n .PdgFlexRowBox {\n height: 100%;\n .PdgText {\n height: 100%;\n\n label {\n cursor: pointer;\n display: flex;\n flex: 1;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n padding: 0 10px;\n\n .PdgIcon {\n margin-right: 0.2em;\n }\n }\n }\n }\n }\n\n &.hidden-label.input-file-btn .PdgFlexRowBox .PdgText label .PdgIcon {\n margin-left: 0;\n margin-right: 0;\n }\n\n &.MuiButton-outlined {\n &:first-of-type:not(:last-of-type) {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n &:last-of-type:not(:first-of-type) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &:not(:first-of-type):not(:last-of-type) {\n border-right: 0;\n border-radius: 0;\n }\n }\n"])));
|
|
8311
8311
|
var templateObject_1$1;var FILE_VALUE = '';
|
|
8312
8312
|
var FormFile = React.forwardRef(function (_a, ref) {
|
|
8313
8313
|
/********************************************************************************************************************
|
|
@@ -8591,14 +8591,20 @@ var FormFile = React.forwardRef(function (_a, ref) {
|
|
|
8591
8591
|
endAdornment: (React.createElement(material.InputAdornment, { position: 'end' },
|
|
8592
8592
|
React.createElement("div", { className: 'input-file-wrap' },
|
|
8593
8593
|
!hideUpload && (React.createElement(React.Fragment, null,
|
|
8594
|
-
React.createElement(StyledPdgButton, { variant: 'text', tabIndex: uploadTabIndex == null ? -1 : uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color,
|
|
8594
|
+
React.createElement(StyledPdgButton, { variant: 'text', tabIndex: uploadTabIndex == null ? -1 : uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, size: size, disabled: readOnly || disabled, ref: fileUploadBtnRef },
|
|
8595
|
+
React.createElement("label", { htmlFor: id },
|
|
8596
|
+
React.createElement(reactComponent.PdgIcon, { size: size, color: error ? 'error' : color }, "upload"),
|
|
8597
|
+
!hideUploadLabel && (uploadLabel || '파일 업로드'))),
|
|
8595
8598
|
React.createElement("input", { type: 'file', accept: accept, id: id, value: FILE_VALUE, className: 'input-file', onChange: handleFileChange }))),
|
|
8596
8599
|
!hideLink && (React.createElement(StyledPdgButton, { variant: 'text', tabIndex: linkTabIndex == null ? -1 : linkTabIndex, className: classNames('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'link', size: size, disabled: readOnly || disabled, ref: linkBtnRef, onClick: handleLinkClick }, !hideLinkLabel && (linkLabel || '링크'))),
|
|
8597
8600
|
!hideRemove && util.notEmpty(value) && (React.createElement(StyledPdgButton, { variant: 'text', tabIndex: removeTabIndex == null ? -1 : removeTabIndex, className: classNames('remove-btn form-file-btn', !!hideRemoveLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'close', size: size, disabled: readOnly || disabled, onClick: handleRemoveClick }, !hideRemoveLabel && (removeLabel || '삭제')))))),
|
|
8598
8601
|
}, placeholder: '\uD30C\uC77C\uC744 \uC120\uD0DD\uD558\uC138\uC694' }))),
|
|
8599
8602
|
!!hideUrl && (React.createElement("div", { className: 'input-file-wrap' },
|
|
8600
8603
|
!hideUpload && (React.createElement(React.Fragment, null,
|
|
8601
|
-
React.createElement(StyledPdgButton, { variant: 'outlined', tabIndex: uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color,
|
|
8604
|
+
React.createElement(StyledPdgButton, { variant: 'outlined', tabIndex: uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, size: size, ref: fileUploadBtnRef, disabled: disabled },
|
|
8605
|
+
React.createElement("label", { htmlFor: id },
|
|
8606
|
+
React.createElement(reactComponent.PdgIcon, { size: size, color: error ? 'error' : color }, "upload"),
|
|
8607
|
+
!hideUploadLabel && (uploadLabel || '파일 업로드'))),
|
|
8602
8608
|
React.createElement("input", { type: 'file', accept: accept, id: id, value: FILE_VALUE, className: 'input-file', onChange: handleFileChange }))),
|
|
8603
8609
|
!hideLink && (React.createElement(StyledPdgButton, { variant: 'outlined', tabIndex: linkTabIndex, className: classNames('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'link', size: size, onClick: handleLinkClick, disabled: disabled, ref: linkBtnRef }, !hideLinkLabel && (linkLabel || '링크'))),
|
|
8604
8610
|
!hideRemove && util.notEmpty(value) && (React.createElement(StyledPdgButton, { variant: 'outlined', tabIndex: removeTabIndex, className: classNames('remove-btn form-file-btn', !!hideRemoveLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'close', size: size, disabled: disabled, onClick: handleRemoveClick }, !hideRemoveLabel && (removeLabel || '삭제'))))),
|