pds-dev-kit-web 2.2.239 → 2.2.240
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/src/desktop/components/EditApplyTextField/EditApplyTextField.d.ts +3 -1
- package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +19 -10
- package/dist/src/desktop/components/TextField/TextField.d.ts +3 -1
- package/dist/src/desktop/components/TextField/TextField.js +21 -12
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Path } from 'react-hook-form';
|
|
3
|
+
import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
|
|
3
4
|
import type { PDSTextType, IFormValues } from '../../../common';
|
|
4
5
|
export type EditApplyTextFieldProps = {
|
|
5
6
|
name: Path<IFormValues>;
|
|
@@ -21,6 +22,7 @@ export type EditApplyTextFieldProps = {
|
|
|
21
22
|
maxLength?: number;
|
|
22
23
|
min?: number;
|
|
23
24
|
customWidth?: string;
|
|
25
|
+
scrollVisibleType?: ScrollVisibleType;
|
|
24
26
|
onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
|
|
25
27
|
onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
26
28
|
onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
|
|
@@ -30,5 +32,5 @@ export type EditApplyTextFieldProps = {
|
|
|
30
32
|
/** @deprecated v1.5 해당 prop 대신 Form의 onSubmit을 사용하세요. */
|
|
31
33
|
onClickSubmitBtn?: (...args: any) => any;
|
|
32
34
|
};
|
|
33
|
-
declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, customWidth, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
|
|
35
|
+
declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, customWidth, scrollVisibleType, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
|
|
34
36
|
export default EditApplyTextField;
|
|
@@ -42,6 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
42
42
|
/* eslint-disable react/jsx-no-bind */
|
|
43
43
|
var react_1 = require("react");
|
|
44
44
|
var react_hook_form_1 = require("react-hook-form");
|
|
45
|
+
var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
|
|
45
46
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
46
47
|
var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
|
|
47
48
|
var hybrid_1 = require("../../../hybrid");
|
|
@@ -49,11 +50,11 @@ var components_1 = require("../../common/components");
|
|
|
49
50
|
var IconButton_1 = require("../IconButton");
|
|
50
51
|
function EditApplyTextField(_a) {
|
|
51
52
|
var _b;
|
|
52
|
-
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
|
|
53
|
-
var
|
|
54
|
-
var
|
|
55
|
-
var
|
|
56
|
-
var
|
|
53
|
+
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'visible' : _l, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
|
|
54
|
+
var _m = (0, react_hook_form_1.useFormContext)(), register = _m.register, setValue = _m.setValue, trigger = _m.trigger, watch = _m.watch, reset = _m.reset, _o = _m.formState, errors = _o.errors, isSubmitSuccessful = _o.isSubmitSuccessful;
|
|
55
|
+
var _p = (0, react_1.useState)(false), isFocused = _p[0], setIsFocused = _p[1];
|
|
56
|
+
var _q = (0, react_1.useState)(false), isOpen = _q[0], setIsOpen = _q[1];
|
|
57
|
+
var _r = (0, react_1.useState)(defaultText !== null && defaultText !== void 0 ? defaultText : ''), prevValue = _r[0], setPrevValue = _r[1];
|
|
57
58
|
var ref = (0, react_1.useRef)();
|
|
58
59
|
var currentValue = watch(name);
|
|
59
60
|
var validateOnChange = register(name, validation).onChange;
|
|
@@ -160,7 +161,7 @@ function EditApplyTextField(_a) {
|
|
|
160
161
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: "use", textLineType: "single", inputType: inputType, state: state, min: min, max: max, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, onKeyDown: handleKeyDown, inputRef: ref }) }));
|
|
161
162
|
}
|
|
162
163
|
};
|
|
163
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth }, { children: S_TextFieldBase() })), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })] }))] }), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }))] })) }));
|
|
164
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: S_TextFieldBase() })), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })] }))] }), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }))] })) }));
|
|
164
165
|
}
|
|
165
166
|
var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n\n ", "\n"], ["\n width: ", ";\n\n ", "\n"])), function (_a) {
|
|
166
167
|
var size = _a.size, responsiveMode = _a.responsiveMode;
|
|
@@ -246,7 +247,7 @@ var normalActionColor = (0, styled_components_1.css)(templateObject_10 || (templ
|
|
|
246
247
|
var theme = _a.theme;
|
|
247
248
|
return theme.ui_cpnt_textfield_base_pressed;
|
|
248
249
|
});
|
|
249
|
-
var S_S_TextFieldBaseWrapper = styled_components_1.default.div(
|
|
250
|
+
var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
250
251
|
var state = _a.state;
|
|
251
252
|
return (state === 'disabled' ? 'not-allowed' : 'text');
|
|
252
253
|
}, function (_a) {
|
|
@@ -271,8 +272,16 @@ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_11
|
|
|
271
272
|
}, transitionStyle_1.InputTransition, function (_a) {
|
|
272
273
|
var state = _a.state;
|
|
273
274
|
return state === 'normal' && normalActionColor;
|
|
275
|
+
}, function (_a) {
|
|
276
|
+
var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
|
|
277
|
+
return (textLineType === 'multi' || textLineType === 'auto') &&
|
|
278
|
+
scrollVisibleType && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n textarea {\n ", "\n }\n "], ["\n textarea {\n ", "\n }\n "])), scrollVisibleType === 'visible' ? scrollbarStyle_1.scrollbarStyle : scrollbarStyle_1.scrollInvisible);
|
|
279
|
+
}, function (_a) {
|
|
280
|
+
var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
|
|
281
|
+
return (textLineType === 'multi' || textLineType === 'auto') &&
|
|
282
|
+
scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n padding-right: 1px;\n "], ["\n padding-right: 1px;\n "])));
|
|
274
283
|
});
|
|
275
|
-
var S_Error = styled_components_1.default.div(
|
|
284
|
+
var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-right: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-right: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
|
|
276
285
|
var theme = _a.theme;
|
|
277
286
|
return theme.ui_cpnt_textfield_text_error;
|
|
278
287
|
}, function (_a) {
|
|
@@ -291,6 +300,6 @@ var S_Error = styled_components_1.default.div(templateObject_12 || (templateObje
|
|
|
291
300
|
var theme = _a.theme;
|
|
292
301
|
return theme.spacing.spacingA;
|
|
293
302
|
});
|
|
294
|
-
var S_ButtonBox = styled_components_1.default.div(
|
|
303
|
+
var S_ButtonBox = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"], ["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"])));
|
|
295
304
|
exports.default = EditApplyTextField;
|
|
296
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
305
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Path } from 'react-hook-form';
|
|
3
|
+
import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
|
|
3
4
|
import type { IFormValues, PDSTextType, UiColors, PDSIconType } from '../../../common';
|
|
4
5
|
import type { TextFieldBaseProps } from '../../common/components/TextFieldBase/TextFieldBase';
|
|
5
6
|
export type TextFieldProps = {
|
|
@@ -20,8 +21,9 @@ export type TextFieldProps = {
|
|
|
20
21
|
fontWeight?: 'bold' | 'regular';
|
|
21
22
|
hintTextFontWeight?: 'normal' | 'bold';
|
|
22
23
|
deleteBtnMode?: 'none' | 'use';
|
|
24
|
+
scrollVisibleType?: ScrollVisibleType;
|
|
23
25
|
onClickIBtn1?: () => void;
|
|
24
26
|
onClickIBtn2?: () => void;
|
|
25
27
|
} & Partial<TextFieldBaseProps>;
|
|
26
|
-
declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, hintTextFontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
|
|
28
|
+
declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, hintTextFontWeight, deleteBtnMode, scrollVisibleType, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
|
|
27
29
|
export default TextField;
|
|
@@ -42,6 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
42
42
|
/* eslint-disable react/jsx-no-bind */
|
|
43
43
|
var react_1 = require("react");
|
|
44
44
|
var react_hook_form_1 = require("react-hook-form");
|
|
45
|
+
var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
|
|
45
46
|
var types_1 = require("../../../common/types");
|
|
46
47
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
47
48
|
var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
|
|
@@ -51,7 +52,7 @@ var IconButton_1 = require("../IconButton");
|
|
|
51
52
|
var TextLabel_1 = require("../TextLabel");
|
|
52
53
|
function TextField(_a) {
|
|
53
54
|
var _b;
|
|
54
|
-
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, inputMode = _a.inputMode, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.hintTextFontWeight, hintTextFontWeight = _v === void 0 ? 'normal' : _v, _w = _a.deleteBtnMode, deleteBtnMode = _w === void 0 ? 'use' : _w, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
|
|
55
|
+
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, inputMode = _a.inputMode, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.hintTextFontWeight, hintTextFontWeight = _v === void 0 ? 'normal' : _v, _w = _a.deleteBtnMode, deleteBtnMode = _w === void 0 ? 'use' : _w, _x = _a.scrollVisibleType, scrollVisibleType = _x === void 0 ? 'visible' : _x, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
|
|
55
56
|
var basicThemeIconColors = {
|
|
56
57
|
normal: 'ui_cpnt_button_icon_default',
|
|
57
58
|
read_only: 'ui_cpnt_button_icon_default',
|
|
@@ -67,9 +68,9 @@ function TextField(_a) {
|
|
|
67
68
|
read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
|
|
68
69
|
disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
|
|
69
70
|
};
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var
|
|
71
|
+
var _y = (0, react_1.useState)(false), isFocused = _y[0], setIsFocused = _y[1];
|
|
72
|
+
var _z = (0, react_hook_form_1.useFormContext)(), register = _z.register, trigger = _z.trigger, errors = _z.formState.errors;
|
|
73
|
+
var _0 = register(name, validation), validateOnChange = _0.onChange, validateOnBlur = _0.onBlur;
|
|
73
74
|
var isError = (0, types_1.getErrorByName)(errors, name);
|
|
74
75
|
var handleClickIBtn1 = function () {
|
|
75
76
|
if (onClickIBtn1) {
|
|
@@ -180,7 +181,7 @@ function TextField(_a) {
|
|
|
180
181
|
}[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
|
|
181
182
|
}
|
|
182
183
|
};
|
|
183
|
-
return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
|
|
184
|
+
return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
|
|
184
185
|
}
|
|
185
186
|
var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
186
187
|
var size = _a.size;
|
|
@@ -342,7 +343,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_17 || (t
|
|
|
342
343
|
}
|
|
343
344
|
});
|
|
344
345
|
var normalActionColor = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), backgroundHoverColor, backgroundActiveColor);
|
|
345
|
-
var S_TextFieldWrapper = styled_components_1.default.div(
|
|
346
|
+
var S_TextFieldWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n\n ", "\n\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
346
347
|
var state = _a.state;
|
|
347
348
|
return (state === 'disabled' ? 'not-allowed' : 'text');
|
|
348
349
|
}, function (_a) {
|
|
@@ -382,11 +383,19 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (t
|
|
|
382
383
|
}, function (_a) {
|
|
383
384
|
var customWidth = _a.customWidth;
|
|
384
385
|
return customWidth && "width: ".concat(customWidth, ";");
|
|
386
|
+
}, function (_a) {
|
|
387
|
+
var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
|
|
388
|
+
return (textLineType === 'multi' || textLineType === 'auto') &&
|
|
389
|
+
scrollVisibleType && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n textarea {\n ", "\n }\n "], ["\n textarea {\n ", "\n }\n "])), scrollVisibleType === 'visible' ? scrollbarStyle_1.scrollbarStyle : scrollbarStyle_1.scrollInvisible);
|
|
390
|
+
}, function (_a) {
|
|
391
|
+
var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
|
|
392
|
+
return (textLineType === 'multi' || textLineType === 'auto') &&
|
|
393
|
+
scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n padding-right: 0px;\n "], ["\n padding-right: 0px;\n "])));
|
|
385
394
|
});
|
|
386
|
-
var S_RightBox = styled_components_1.default.div(
|
|
387
|
-
var S_RightBox_Auto = styled_components_1.default.div(
|
|
388
|
-
var S_RightBox_Multi = styled_components_1.default.div(
|
|
389
|
-
var S_Error = styled_components_1.default.div(
|
|
395
|
+
var S_RightBox = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
|
396
|
+
var S_RightBox_Auto = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n align-self: end;\n display: flex;\n"], ["\n align-items: center;\n align-self: end;\n display: flex;\n"])));
|
|
397
|
+
var S_RightBox_Multi = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n align-items: center;\n align-self: end;\n display: flex;\n"], ["\n align-items: center;\n align-self: end;\n display: flex;\n"])));
|
|
398
|
+
var S_Error = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
|
|
390
399
|
var theme = _a.theme, colorTheme = _a.colorTheme;
|
|
391
400
|
switch (colorTheme) {
|
|
392
401
|
case 'none': {
|
|
@@ -410,6 +419,6 @@ var S_Error = styled_components_1.default.div(templateObject_23 || (templateObje
|
|
|
410
419
|
var theme = _a.theme;
|
|
411
420
|
return theme.spacing.spacingA;
|
|
412
421
|
});
|
|
413
|
-
var S_PrefixText = styled_components_1.default.div(
|
|
422
|
+
var S_PrefixText = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n display: flex;\n min-width: fit-content;\n"], ["\n display: flex;\n min-width: fit-content;\n"])));
|
|
414
423
|
exports.default = TextField;
|
|
415
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;
|
|
424
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
|
package/package.json
CHANGED
package/release-note.md
CHANGED