@pdg/react-form 1.0.48 → 1.0.50
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/FormItemCustom/FormFile/FormFile.types.d.ts +3 -0
- package/dist/FormItemTextFieldBase/FormPassword/FormPassword.types.d.ts +1 -1
- package/dist/FormItemTextFieldBase/FormText/FormText.types.d.ts +1 -1
- package/dist/FormItemTextFieldBase/FormTextField/FormTextField.d.ts +1 -0
- package/dist/FormItemTextFieldBase/FormTextField/FormTextField.types.d.ts +1 -0
- package/dist/FormItemTextFieldBase/FormTextarea/FormTextarea.types.d.ts +1 -1
- package/dist/index.esm.js +26 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +26 -17
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,12 +5,15 @@ export interface FormFileProps extends CommonSxProps, FormValueItemProps {
|
|
|
5
5
|
accept?: string;
|
|
6
6
|
hideUrl?: boolean;
|
|
7
7
|
uploadLabel?: string;
|
|
8
|
+
uploadTabIndex?: number;
|
|
8
9
|
hideUpload?: boolean;
|
|
9
10
|
hideUploadLabel?: boolean;
|
|
10
11
|
linkLabel?: string;
|
|
12
|
+
linkTabIndex?: number;
|
|
11
13
|
hideLink?: boolean;
|
|
12
14
|
hideLinkLabel?: boolean;
|
|
13
15
|
removeLabel?: string;
|
|
16
|
+
removeTabIndex?: number;
|
|
14
17
|
hideRemove?: boolean;
|
|
15
18
|
hideRemoveLabel?: boolean;
|
|
16
19
|
labelShrink?: boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FormTextFieldProps } from '../FormTextField';
|
|
2
|
-
export interface FormPasswordProps extends Omit<FormTextFieldProps, 'type'> {
|
|
2
|
+
export interface FormPasswordProps extends Omit<FormTextFieldProps, 'disableReturnKey' | 'type'> {
|
|
3
3
|
eye?: boolean;
|
|
4
4
|
}
|
|
5
5
|
export declare const FormPasswordDefaultProps: Pick<FormPasswordProps, 'clear' | 'eye'>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { FormTextFieldProps } from '../FormTextField';
|
|
2
|
-
export declare type FormTextProps = Omit<FormTextFieldProps, '
|
|
2
|
+
export declare type FormTextProps = Omit<FormTextFieldProps, 'disableReturnKey' | 'minRows' | 'maxRows'>;
|
|
3
3
|
export declare const FormTextDefaultProps: Pick<FormTextProps, 'clear' | 'value'>;
|
|
@@ -12,6 +12,7 @@ declare const FormTextField: React.ForwardRefExoticComponent<Omit<import("@mui/m
|
|
|
12
12
|
endAdornment?: React.ReactNode;
|
|
13
13
|
noFormValueItem?: boolean | undefined;
|
|
14
14
|
hidden?: boolean | undefined;
|
|
15
|
+
disableReturnKey?: boolean | undefined;
|
|
15
16
|
onValue?(value: any): any;
|
|
16
17
|
} & React.RefAttributes<FormTextFieldCommands>>;
|
|
17
18
|
export default FormTextField;
|
|
@@ -14,6 +14,7 @@ export declare type FormTextFieldProps = Omit<TextFieldProps, 'ref' | 'name' | '
|
|
|
14
14
|
endAdornment?: ReactNode;
|
|
15
15
|
noFormValueItem?: boolean;
|
|
16
16
|
hidden?: boolean;
|
|
17
|
+
disableReturnKey?: boolean;
|
|
17
18
|
onValue?(value: FormItemValue): FormItemValue;
|
|
18
19
|
};
|
|
19
20
|
export declare const FormTextFieldDefaultProps: {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { FormTextFieldProps } from '../FormTextField';
|
|
2
|
-
export declare type FormTextareaProps = Omit<FormTextFieldProps, 'type' | 'multiline' | 'minRows' | 'maxRows'>;
|
|
2
|
+
export declare type FormTextareaProps = Omit<FormTextFieldProps, 'disableReturnKey' | 'type' | 'multiline' | 'minRows' | 'maxRows'>;
|
|
3
3
|
export declare const FormTextareaDefaultProps: Pick<FormTextareaProps, 'clear' | 'rows' | 'value'>;
|
package/dist/index.esm.js
CHANGED
|
@@ -2125,13 +2125,13 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
|
|
|
2125
2125
|
var _b;
|
|
2126
2126
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
|
|
2127
2127
|
//----------------------------------------------------------------------------------------------------------------
|
|
2128
|
-
name = _a.name, required = _a.required, initValue = _a.value, initData = _a.data, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, initHelperText = _a.helperText, exceptValue = _a.exceptValue, readOnly = _a.readOnly, tabIndex = _a.tabIndex, initDisabled = _a.disabled, placeholder = _a.placeholder, maxLength = _a.maxLength, clear = _a.clear, width = _a.width, initMuiInputProps = _a.InputProps, initMuiInputLabelProps = _a.InputLabelProps, initInputProps = _a.inputProps, initInputRef = _a.inputRef, select = _a.select, SelectProps = _a.SelectProps, multiline = _a.multiline, validPattern = _a.validPattern, invalidPattern = _a.invalidPattern, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, noFormValueItem = _a.noFormValueItem, hidden = _a.hidden,
|
|
2128
|
+
name = _a.name, required = _a.required, initValue = _a.value, initData = _a.data, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, initHelperText = _a.helperText, exceptValue = _a.exceptValue, readOnly = _a.readOnly, tabIndex = _a.tabIndex, initDisabled = _a.disabled, placeholder = _a.placeholder, maxLength = _a.maxLength, clear = _a.clear, width = _a.width, initMuiInputProps = _a.InputProps, initMuiInputLabelProps = _a.InputLabelProps, initInputProps = _a.inputProps, initInputRef = _a.inputRef, select = _a.select, SelectProps = _a.SelectProps, multiline = _a.multiline, validPattern = _a.validPattern, invalidPattern = _a.invalidPattern, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, noFormValueItem = _a.noFormValueItem, hidden = _a.hidden, disableReturnKey = _a.disableReturnKey,
|
|
2129
2129
|
//----------------------------------------------------------------------------------------------------------------
|
|
2130
2130
|
onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown,
|
|
2131
2131
|
//----------------------------------------------------------------------------------------------------------------
|
|
2132
2132
|
className = _a.className, initStyle = _a.style,
|
|
2133
2133
|
//----------------------------------------------------------------------------------------------------------------
|
|
2134
|
-
props = __rest$3(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "required", "value", "data", "icon", "labelIcon", "label", "error", "helperText", "exceptValue", "readOnly", "tabIndex", "disabled", "placeholder", "maxLength", "clear", "width", "InputProps", "InputLabelProps", "inputProps", "inputRef", "select", "SelectProps", "multiline", "validPattern", "invalidPattern", "startAdornment", "endAdornment", "noFormValueItem", "hidden", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
|
|
2134
|
+
props = __rest$3(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "required", "value", "data", "icon", "labelIcon", "label", "error", "helperText", "exceptValue", "readOnly", "tabIndex", "disabled", "placeholder", "maxLength", "clear", "width", "InputProps", "InputLabelProps", "inputProps", "inputRef", "select", "SelectProps", "multiline", "validPattern", "invalidPattern", "startAdornment", "endAdornment", "noFormValueItem", "hidden", "disableReturnKey", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
|
|
2135
2135
|
var id = useId();
|
|
2136
2136
|
// Ref -------------------------------------------------------------------------------------------------------------
|
|
2137
2137
|
var inputRef = useRef(null);
|
|
@@ -2411,14 +2411,17 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
|
|
|
2411
2411
|
onBlur(e);
|
|
2412
2412
|
}, [error, value, validate, onBlur]);
|
|
2413
2413
|
var handleKeyDown = useCallback(function (e) {
|
|
2414
|
-
if (
|
|
2414
|
+
if (['Enter'].includes(e.key) &&
|
|
2415
|
+
!select &&
|
|
2416
|
+
(!multiline || (multiline && disableReturnKey)) &&
|
|
2417
|
+
!noFormValueItem) {
|
|
2415
2418
|
e.preventDefault();
|
|
2416
2419
|
e.stopPropagation();
|
|
2417
2420
|
onRequestSearchSubmit(name, value);
|
|
2418
2421
|
}
|
|
2419
2422
|
if (onKeyDown)
|
|
2420
2423
|
onKeyDown(e);
|
|
2421
|
-
}, [select, multiline, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, value]);
|
|
2424
|
+
}, [select, multiline, disableReturnKey, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, value]);
|
|
2422
2425
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
2423
2426
|
return (React__default.createElement(TextField, __assign$6({}, props, { variant: variant, size: size, color: color, focused: focused || undefined, name: name, label: label, placeholder: placeholder, className: classNames$1(className, 'FormValueItem', 'FormTextField', "variant-".concat(variant)), inputRef: initInputRef ? initInputRef : inputRef, value: value, required: required, fullWidth: !width && fullWidth, error: error, helperText: formColWithHelperText ? undefined : helperText, FormHelperTextProps: { component: 'div' }, disabled: disabled, InputProps: muiInputProps, InputLabelProps: muiInputLabelProps, inputProps: ((_b = initInputProps === null || initInputProps === void 0 ? void 0 : initInputProps.className) === null || _b === void 0 ? void 0 : _b.includes('FormTag-Input')) ? initInputProps : inputProps, style: style, select: select, SelectProps: SelectProps, multiline: multiline, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown })));
|
|
2424
2427
|
});
|
|
@@ -2434,7 +2437,7 @@ FormTextField.defaultProps = FormTextFieldDefaultProps;var FormTextDefaultProps
|
|
|
2434
2437
|
return finalValue;
|
|
2435
2438
|
}, [onValue]);
|
|
2436
2439
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
2437
|
-
return React__default.createElement(FormTextField, __assign$6({ ref: ref, className: classNames$1(className, 'FormText'), onValue: handleValue }, props));
|
|
2440
|
+
return (React__default.createElement(FormTextField, __assign$6({ ref: ref, className: classNames$1(className, 'FormText'), disableReturnKey: true, onValue: handleValue }, props)));
|
|
2438
2441
|
});
|
|
2439
2442
|
FormText.displayName = 'FormText';
|
|
2440
2443
|
FormText.defaultProps = FormTextDefaultProps;var FormHiddenDefaultProps = {};var css_248z$i = ".FormHidden {\n display: none !important;\n}";
|
|
@@ -11808,7 +11811,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
|
|
|
11808
11811
|
// ID --------------------------------------------------------------------------------------------------------------
|
|
11809
11812
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
|
|
11810
11813
|
//----------------------------------------------------------------------------------------------------------------
|
|
11811
|
-
accept = _a.accept, hideUrl = _a.hideUrl, uploadLabel = _a.uploadLabel, hideUpload = _a.hideUpload, hideUploadLabel = _a.hideUploadLabel, linkLabel = _a.linkLabel, hideLink = _a.hideLink, hideLinkLabel = _a.hideLinkLabel, removeLabel = _a.removeLabel, hideRemove = _a.hideRemove, hideRemoveLabel = _a.hideRemoveLabel, maxFileSize = _a.maxFileSize, preview = _a.preview, hidden = _a.hidden, onFile = _a.onFile, onLink = _a.onLink,
|
|
11814
|
+
accept = _a.accept, hideUrl = _a.hideUrl, uploadLabel = _a.uploadLabel, uploadTabIndex = _a.uploadTabIndex, hideUpload = _a.hideUpload, hideUploadLabel = _a.hideUploadLabel, linkLabel = _a.linkLabel, linkTabIndex = _a.linkTabIndex, hideLink = _a.hideLink, hideLinkLabel = _a.hideLinkLabel, removeLabel = _a.removeLabel, removeTabIndex = _a.removeTabIndex, hideRemove = _a.hideRemove, hideRemoveLabel = _a.hideRemoveLabel, maxFileSize = _a.maxFileSize, preview = _a.preview, hidden = _a.hidden, onFile = _a.onFile, onLink = _a.onLink,
|
|
11812
11815
|
//----------------------------------------------------------------------------------------------------------------
|
|
11813
11816
|
name = _a.name, labelIcon = _a.labelIcon, initLabel = _a.label, required = _a.required, readOnly = _a.readOnly, initDisabled = _a.disabled, initError = _a.error, initHelperText = _a.helperText, initValue = _a.value, initData = _a.data, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate,
|
|
11814
11817
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -11826,6 +11829,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
|
|
|
11826
11829
|
// Ref -------------------------------------------------------------------------------------------------------------
|
|
11827
11830
|
var textFieldRef = useRef(null);
|
|
11828
11831
|
var fileUploadBtnRef = useRef(null);
|
|
11832
|
+
var linkBtnRef = useRef(null);
|
|
11829
11833
|
// State - value ---------------------------------------------------------------------------------------------------
|
|
11830
11834
|
var _c = useAutoUpdateState$1(initValue), value = _c[0], setValue = _c[1];
|
|
11831
11835
|
var fileValue = useState('')[0];
|
|
@@ -11851,14 +11855,19 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
|
|
|
11851
11855
|
}, [initLabel, labelIcon]);
|
|
11852
11856
|
// Function - focus ------------------------------------------------------------------------------------------------
|
|
11853
11857
|
var focus = useCallback(function () {
|
|
11854
|
-
var _a, _b;
|
|
11858
|
+
var _a, _b, _c;
|
|
11855
11859
|
if (hideUrl) {
|
|
11856
|
-
(
|
|
11860
|
+
if (hideUpload) {
|
|
11861
|
+
(_a = linkBtnRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
11862
|
+
}
|
|
11863
|
+
else {
|
|
11864
|
+
(_b = fileUploadBtnRef.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
11865
|
+
}
|
|
11857
11866
|
}
|
|
11858
11867
|
else {
|
|
11859
|
-
(
|
|
11868
|
+
(_c = textFieldRef.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
11860
11869
|
}
|
|
11861
|
-
}, [hideUrl]);
|
|
11870
|
+
}, [hideUpload, hideUrl]);
|
|
11862
11871
|
// Function - setErrorHelperText -----------------------------------------------------------------------------------
|
|
11863
11872
|
var setErrorHelperText = useCallback(function (error, helperText) {
|
|
11864
11873
|
setError(error);
|
|
@@ -12051,36 +12060,36 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
|
|
|
12051
12060
|
},
|
|
12052
12061
|
}, style: { width: fullWidth ? '100%' : undefined }, control: React__default.createElement("div", { className: 'control-wrap' },
|
|
12053
12062
|
!hideUrl && (React__default.createElement("div", { className: 'file-name-wrap' },
|
|
12054
|
-
React__default.createElement(TextField, { inputRef: textFieldRef, className: 'file-name', variant: variant, label: label, size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, InputLabelProps: labelShrink ? { shrink: labelShrink } : undefined, inputProps: { readOnly: true
|
|
12063
|
+
React__default.createElement(TextField, { inputRef: textFieldRef, className: 'file-name', variant: variant, label: label, size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, InputLabelProps: labelShrink ? { shrink: labelShrink } : undefined, inputProps: { readOnly: true }, InputProps: {
|
|
12055
12064
|
endAdornment: (React__default.createElement(InputAdornment, { position: 'end' },
|
|
12056
12065
|
React__default.createElement("div", { className: 'input-file-wrap' },
|
|
12057
12066
|
!hideUpload && (React__default.createElement(React__default.Fragment, null,
|
|
12058
|
-
React__default.createElement(Button, { variant: 'text', className: classNames$1('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, disabled: readOnly || disabled, ref: fileUploadBtnRef },
|
|
12067
|
+
React__default.createElement(Button, { variant: 'text', tabIndex: uploadTabIndex == null ? -1 : uploadTabIndex, className: classNames$1('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, disabled: readOnly || disabled, ref: fileUploadBtnRef },
|
|
12059
12068
|
React__default.createElement("label", { htmlFor: id },
|
|
12060
12069
|
React__default.createElement(FormIcon, null, "upload"),
|
|
12061
12070
|
!hideUploadLabel && (uploadLabel || '파일 업로드'))),
|
|
12062
12071
|
React__default.createElement("input", { type: 'file', accept: accept, id: id, value: fileValue, className: 'input-file', onChange: handleFileChange }))),
|
|
12063
|
-
!hideLink && (React__default.createElement(Button, { variant: 'text', className: classNames$1('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, disabled: readOnly || disabled, onClick: handleLinkClick },
|
|
12072
|
+
!hideLink && (React__default.createElement(Button, { variant: 'text', tabIndex: linkTabIndex == null ? -1 : linkTabIndex, className: classNames$1('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, disabled: readOnly || disabled, ref: linkBtnRef, onClick: handleLinkClick },
|
|
12064
12073
|
React__default.createElement("label", null,
|
|
12065
12074
|
React__default.createElement(FormIcon, null, "link"),
|
|
12066
12075
|
!hideLinkLabel && (linkLabel || '링크')))),
|
|
12067
|
-
!hideRemove && notEmpty(value) && (React__default.createElement(Button, { variant: 'text', className: classNames$1('remove-btn form-file-btn', !!hideRemoveLabel && 'hidden-label'), color: error ? 'error' : color, disabled: readOnly || disabled, onClick: handleRemoveClick },
|
|
12076
|
+
!hideRemove && notEmpty(value) && (React__default.createElement(Button, { variant: 'text', tabIndex: removeTabIndex == null ? -1 : removeTabIndex, className: classNames$1('remove-btn form-file-btn', !!hideRemoveLabel && 'hidden-label'), color: error ? 'error' : color, disabled: readOnly || disabled, onClick: handleRemoveClick },
|
|
12068
12077
|
React__default.createElement("label", null,
|
|
12069
12078
|
React__default.createElement(FormIcon, null, "Close"),
|
|
12070
12079
|
!hideRemoveLabel && (removeLabel || '삭제'))))))),
|
|
12071
12080
|
}, placeholder: '\uD30C\uC77C\uC744 \uC120\uD0DD\uD558\uC138\uC694' }))),
|
|
12072
12081
|
!!hideUrl && (React__default.createElement("div", { className: 'input-file-wrap' },
|
|
12073
12082
|
!hideUpload && (React__default.createElement(React__default.Fragment, null,
|
|
12074
|
-
React__default.createElement(Button, { variant: 'outlined', className: classNames$1('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, ref: fileUploadBtnRef, disabled: disabled },
|
|
12083
|
+
React__default.createElement(Button, { variant: 'outlined', tabIndex: uploadTabIndex, className: classNames$1('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, ref: fileUploadBtnRef, disabled: disabled },
|
|
12075
12084
|
React__default.createElement("label", { htmlFor: id },
|
|
12076
12085
|
React__default.createElement(FormIcon, null, "upload"),
|
|
12077
12086
|
!hideUploadLabel && (uploadLabel || '파일 업로드'))),
|
|
12078
12087
|
React__default.createElement("input", { type: 'file', accept: accept, id: id, value: fileValue, className: 'input-file', onChange: handleFileChange }))),
|
|
12079
|
-
!hideLink && (React__default.createElement(Button, { variant: 'outlined', className: classNames$1('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, onClick: handleLinkClick, disabled: disabled },
|
|
12088
|
+
!hideLink && (React__default.createElement(Button, { variant: 'outlined', tabIndex: linkTabIndex, className: classNames$1('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, onClick: handleLinkClick, disabled: disabled, ref: linkBtnRef },
|
|
12080
12089
|
React__default.createElement("label", null,
|
|
12081
12090
|
React__default.createElement(FormIcon, null, "link"),
|
|
12082
12091
|
!hideLinkLabel && (linkLabel || '링크')))),
|
|
12083
|
-
!hideRemove && notEmpty(value) && (React__default.createElement(Button, { variant: 'outlined', className: classNames$1('remove-btn form-file-btn', !!hideRemoveLabel && 'hidden-label'), color: error ? 'error' : color, disabled: disabled, onClick: handleRemoveClick },
|
|
12092
|
+
!hideRemove && notEmpty(value) && (React__default.createElement(Button, { variant: 'outlined', tabIndex: removeTabIndex, className: classNames$1('remove-btn form-file-btn', !!hideRemoveLabel && 'hidden-label'), color: error ? 'error' : color, disabled: disabled, onClick: handleRemoveClick },
|
|
12084
12093
|
React__default.createElement("label", null,
|
|
12085
12094
|
React__default.createElement(FormIcon, null, "Close"),
|
|
12086
12095
|
!hideRemoveLabel && (removeLabel || '삭제')))))),
|