pds-dev-kit-web 2.2.151 → 2.2.152
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,9 @@
|
|
|
2
2
|
import type { PDSTextType, UiColors } from '../../../common';
|
|
3
3
|
export type TextLabelProps = {
|
|
4
4
|
text: PDSTextType;
|
|
5
|
+
tooltipText?: PDSTextType;
|
|
6
|
+
tooltipPosition?: 'top' | 'bottom';
|
|
7
|
+
tooltipIconColorKey?: UiColors;
|
|
5
8
|
textAlign?: 'left' | 'center' | 'right';
|
|
6
9
|
styleTheme?: 'displayBold' | 'wizardPageTitleBold' | 'headingBold' | 'leadParaBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form1Bold' | 'form2Regular' | 'form2Bold' | 'blog1Regular';
|
|
7
10
|
colorOverride?: UiColors;
|
|
@@ -20,6 +23,8 @@ export type TextLabelProps = {
|
|
|
20
23
|
};
|
|
21
24
|
export type TextStyleProps = {
|
|
22
25
|
textAlign?: TextLabelProps['textAlign'];
|
|
26
|
+
tooltipPosition?: TextLabelProps['tooltipPosition'];
|
|
27
|
+
tooltipText?: TextLabelProps['tooltipText'];
|
|
23
28
|
styleTheme?: TextLabelProps['styleTheme'];
|
|
24
29
|
colorOverride?: UiColors;
|
|
25
30
|
colorTheme?: TextLabelProps['colorTheme'];
|
|
@@ -34,5 +39,5 @@ export type TextStyleProps = {
|
|
|
34
39
|
wordBreak?: TextLabelProps['wordBreak'];
|
|
35
40
|
$letterSpacing?: TextLabelProps['letterSpacing'];
|
|
36
41
|
};
|
|
37
|
-
declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType, requirementMode, bulletPointMode, wordBreak, letterSpacing }: TextLabelProps): JSX.Element;
|
|
42
|
+
declare function TextLabel({ text, tooltipText, tooltipPosition, tooltipIconColorKey, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType, requirementMode, bulletPointMode, wordBreak, letterSpacing }: TextLabelProps): JSX.Element;
|
|
38
43
|
export default TextLabel;
|
|
@@ -39,11 +39,87 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
39
39
|
};
|
|
40
40
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
41
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
42
|
+
var react_1 = require("react");
|
|
43
|
+
var react_dom_1 = require("react-dom");
|
|
44
|
+
var systemUI_1 = require("../../../common/styles/systemUI");
|
|
45
|
+
var SystemUIPositionGenerator_1 = require("../../../common/utils/SystemUIPositionGenerator");
|
|
42
46
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
43
47
|
var hybrid_1 = require("../../../hybrid");
|
|
44
48
|
function TextLabel(_a) {
|
|
45
|
-
var text = _a.text, _b = _a.
|
|
46
|
-
|
|
49
|
+
var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, wordBreak = _a.wordBreak, letterSpacing = _a.letterSpacing;
|
|
50
|
+
var _o = (0, react_1.useState)(false), isTooltipOpen = _o[0], setIsTooltipOpen = _o[1];
|
|
51
|
+
var tooltipPositionTargetRef = (0, react_1.useRef)(null);
|
|
52
|
+
var tooltipRef = (0, react_1.useRef)(null);
|
|
53
|
+
var _p = (0, react_1.useState)(null), tooltipSizeOffset = _p[0], setTooltipSizeOffset = _p[1];
|
|
54
|
+
var _q = (0, react_1.useState)(null), tooltipPositionOffset = _q[0], setTooltipPositionOffset = _q[1];
|
|
55
|
+
/**
|
|
56
|
+
* @when : 화면진입 시, dependency 변경되었을 때
|
|
57
|
+
* @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
|
|
58
|
+
* @clear :
|
|
59
|
+
*/
|
|
60
|
+
(0, react_1.useEffect)(function () {
|
|
61
|
+
if (!tooltipPositionTargetRef.current || !tooltipText) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
if (!isTooltipOpen && tooltipRef.current) {
|
|
65
|
+
setTooltipSizeOffset(null);
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
var updateTooltipPosition = function () {
|
|
69
|
+
if (!tooltipPositionTargetRef.current)
|
|
70
|
+
return;
|
|
71
|
+
var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
|
|
72
|
+
setTooltipPositionOffset({
|
|
73
|
+
top: top + window.scrollY,
|
|
74
|
+
right: right + window.scrollX,
|
|
75
|
+
bottom: bottom + window.scrollY,
|
|
76
|
+
left: left + window.scrollX
|
|
77
|
+
});
|
|
78
|
+
if (tooltipRef.current) {
|
|
79
|
+
setTooltipSizeOffset({
|
|
80
|
+
height: tooltipRef.current.offsetHeight,
|
|
81
|
+
width: tooltipRef.current.offsetWidth
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
updateTooltipPosition();
|
|
86
|
+
}, [isTooltipOpen]);
|
|
87
|
+
/**
|
|
88
|
+
* @when : 툴팁 오픈시
|
|
89
|
+
* @expected : 툴팁 외부 클릭시 툴팁이 닫히는 터치 이벤트를 추가합니다.
|
|
90
|
+
* @clear : 이벤트를 제거합니다.
|
|
91
|
+
*/
|
|
92
|
+
(0, react_1.useEffect)(function () {
|
|
93
|
+
if (!isTooltipOpen)
|
|
94
|
+
return;
|
|
95
|
+
var handleOutsideClick = function (event) {
|
|
96
|
+
if (tooltipRef.current &&
|
|
97
|
+
!tooltipRef.current.contains(event.target) &&
|
|
98
|
+
tooltipPositionTargetRef.current &&
|
|
99
|
+
!tooltipPositionTargetRef.current.contains(event.target)) {
|
|
100
|
+
setIsTooltipOpen(false);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
document.addEventListener('touchstart', handleOutsideClick);
|
|
104
|
+
document.addEventListener('mousedown', handleOutsideClick);
|
|
105
|
+
return function () {
|
|
106
|
+
document.removeEventListener('touchstart', handleOutsideClick);
|
|
107
|
+
document.removeEventListener('mousedown', handleOutsideClick);
|
|
108
|
+
};
|
|
109
|
+
}, [isTooltipOpen]);
|
|
110
|
+
var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
|
|
111
|
+
baseSize: 16,
|
|
112
|
+
sizeOffset: tooltipSizeOffset,
|
|
113
|
+
positionOffset: tooltipPositionOffset,
|
|
114
|
+
systemUIPosition: tooltipPosition.includes('_')
|
|
115
|
+
? tooltipPosition
|
|
116
|
+
: "right_".concat(tooltipPosition),
|
|
117
|
+
distance: 4
|
|
118
|
+
});
|
|
119
|
+
var handleTooltipToggle = function () {
|
|
120
|
+
setIsTooltipOpen(function (prev) { return !prev; });
|
|
121
|
+
};
|
|
122
|
+
return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "mobile", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsxs)(S_IconWrapper, __assign({ ref: tooltipPositionTargetRef, onClick: handleTooltipToggle, "aria-expanded": isTooltipOpen, role: "button", tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }), isTooltipOpen && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.body) }))] })) })))] })));
|
|
47
123
|
}
|
|
48
124
|
var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
49
125
|
var theme = _a.theme;
|
|
@@ -417,5 +493,9 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_39 || (templ
|
|
|
417
493
|
}
|
|
418
494
|
});
|
|
419
495
|
var S_IconWrapper = styled_components_1.default.div(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
|
|
496
|
+
var S_TooltipWrapper = styled_components_1.default.div(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n ", "\n\n ", ";\n"], ["\n ", "\n\n ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
|
|
497
|
+
var tooltipPositionCss = _a.tooltipPositionCss;
|
|
498
|
+
return tooltipPositionCss;
|
|
499
|
+
});
|
|
420
500
|
exports.default = TextLabel;
|
|
421
|
-
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, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40;
|
|
501
|
+
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, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41;
|
package/package.json
CHANGED
package/release-note.md
CHANGED