pds-dev-kit-web-test 2.5.506 → 2.5.507
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.
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import type { PDSTextType, MultilingualConfig } from '../../../common/types';
|
|
3
3
|
type BasicFormGroupProps = {
|
|
4
4
|
titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
|
|
5
|
+
headerSize?: 'small' | 'medium' | 'large' | 'rlarge';
|
|
5
6
|
titleText?: PDSTextType;
|
|
6
7
|
descText?: PDSTextType;
|
|
7
8
|
captionText?: PDSTextType;
|
|
@@ -10,7 +11,6 @@ type BasicFormGroupProps = {
|
|
|
10
11
|
multilingualBtnMode?: 'use' | 'none';
|
|
11
12
|
multilingualBtnState?: 'normal' | 'disabled';
|
|
12
13
|
multilingualConfig?: MultilingualConfig;
|
|
13
|
-
ref?: React.RefObject<HTMLInputElement>;
|
|
14
14
|
};
|
|
15
|
-
declare const _default: import("react").ForwardRefExoticComponent<
|
|
15
|
+
declare const _default: import("react").ForwardRefExoticComponent<BasicFormGroupProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
16
16
|
export default _default;
|
|
@@ -24,13 +24,13 @@ var components_1 = require("../../components");
|
|
|
24
24
|
var MultilingualModal_1 = __importDefault(require("../../panels/MultilingualModal"));
|
|
25
25
|
var components_2 = require("../../../hybrid/components");
|
|
26
26
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
27
|
-
function BasicFormGroup(_a) {
|
|
28
|
-
var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm,
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
27
|
+
function BasicFormGroup(_a, ref) {
|
|
28
|
+
var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _d = _a.titleRequirementMode, titleRequirementMode = _d === void 0 ? 'none' : _d, _e = _a.multilingualBtnMode, multilingualBtnMode = _e === void 0 ? 'none' : _e, _f = _a.multilingualBtnState, multilingualBtnState = _f === void 0 ? 'normal' : _f, multilingualConfig = _a.multilingualConfig;
|
|
29
|
+
var _g = (0, react_1.useState)(false), isMultiLanguageModalOpen = _g[0], setIsMultiLanguageModalOpen = _g[1];
|
|
30
|
+
var _h = (0, react_1.useState)(false), hasMultilingualValues = _h[0], setHasMultilingualValues = _h[1];
|
|
31
|
+
var _j = (0, react_1.useState)(function () {
|
|
32
32
|
return JSON.stringify((multilingualConfig === null || multilingualConfig === void 0 ? void 0 : multilingualConfig.initialValues) || {});
|
|
33
|
-
}), hiddenInputValue =
|
|
33
|
+
}), hiddenInputValue = _j[0], setHiddenInputValue = _j[1];
|
|
34
34
|
// hiddenInput의 값이 있는지 확인하는 함수
|
|
35
35
|
var checkMultilingualValues = function () {
|
|
36
36
|
try {
|
|
@@ -67,18 +67,29 @@ function BasicFormGroup(_a) {
|
|
|
67
67
|
var handleHiddenInputUpdate = function (newValue) {
|
|
68
68
|
setHiddenInputValue(newValue);
|
|
69
69
|
};
|
|
70
|
-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, { children: [(0, jsx_runtime_1.jsxs)(
|
|
70
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleText, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues
|
|
71
71
|
? 'ui_cpnt_button_icon_primary'
|
|
72
|
-
: 'ui_cpnt_button_icon_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(MultilingualModal_1.default, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
|
|
72
|
+
: 'ui_cpnt_button_icon_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(MultilingualModal_1.default, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
|
|
73
73
|
}
|
|
74
|
-
var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n"])))
|
|
75
|
-
var
|
|
74
|
+
var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"])), function (_a) {
|
|
75
|
+
var $headerSize = _a.$headerSize;
|
|
76
|
+
if ($headerSize === 'small')
|
|
77
|
+
return '188px';
|
|
78
|
+
if ($headerSize === 'medium')
|
|
79
|
+
return '188px';
|
|
80
|
+
if ($headerSize === 'large')
|
|
81
|
+
return '432px';
|
|
82
|
+
if ($headerSize === 'rlarge')
|
|
83
|
+
return '100%';
|
|
84
|
+
});
|
|
85
|
+
var S_TitleText = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
|
86
|
+
var S_IconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n height: 16px;\n justify-content: center;\n padding: 0 ", ";\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n height: 16px;\n justify-content: center;\n padding: 0 ", ";\n width: 16px;\n"])), function (_a) {
|
|
76
87
|
var theme = _a.theme;
|
|
77
88
|
return theme.spacing.spacingA;
|
|
78
89
|
});
|
|
79
|
-
var S_MultilingualButtonWrapper = styled_components_1.default.div(
|
|
90
|
+
var S_MultilingualButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n margin-left: ", ";\n"], ["\n align-items: center;\n display: flex;\n margin-left: ", ";\n"])), function (_a) {
|
|
80
91
|
var theme = _a.theme;
|
|
81
92
|
return theme.spacing.spacingB;
|
|
82
93
|
});
|
|
83
94
|
exports.default = (0, react_1.forwardRef)(BasicFormGroup);
|
|
84
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
95
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|