pds-dev-kit-web 2.2.257 → 2.2.259

package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.js

@@ -0,0 +1,126 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var components_1 = require("../../../../hybrid/components");
+var TextLabel_1 = require("../../../components/TextLabel");
+var styled_components_1 = __importDefault(require("styled-components"));
+var ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
+function ReactionRow(_a) {
+    var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode, reactionBtnMode = _a.reactionBtnMode, reactionBtnText = _a.reactionBtnText, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
+    var _b = (0, react_1.useState)(false), isOpenReactionBubble = _b[0], setIsOpenReactionBubble = _b[1];
+    var bubbleRef = (0, react_1.useRef)(null);
+    var buttonRef = (0, react_1.useRef)(null);
+    /**
+     * @when : 컴포넌트 렌더링 시
+     * @expected : ReactionBubble의 외부를 클릭하면 ReactionBubble가 닫히도록 클릭 이벤트를 등록합니다.
+     * @clear document의 클릭 이벤트를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        function handleClickOutside(event) {
+            var _a, _b;
+            event.stopPropagation();
+            if (event.target instanceof Node &&
+                (((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) || ((_b = bubbleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))))
+                return;
+            if (isOpenReactionBubble) {
+                setIsOpenReactionBubble(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpenReactionBubble]);
+    var defaultReactions = [
+        { iconName: 'ic_lottie_heart', type: 'heart' },
+        { iconName: 'ic_lottie_thumb_up', type: 'like' },
+        { iconName: 'ic_lottie_confetti', type: 'confetti' }
+    ];
+    var handleClickReactionButton = function () {
+        isOpenReactionBubble ? setIsOpenReactionBubble(false) : setIsOpenReactionBubble(true);
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_Wrapper, { children: [(0, jsx_runtime_1.jsxs)(S_ReactionWrapper, __assign({ isMe: isMe, downloadIBtnMode: downloadIBtnMode === 'use' }, { children: [(0, jsx_runtime_1.jsx)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: !isMe && reactionBtnMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ onClick: handleClickReactionButton }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_plus_circle", size: 12 }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: reactionBtnText, singleLineMode: "use", styleTheme: "caption2Bold" })] }))) })), reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
+                            var iconName = function () {
+                                switch (reaction.type) {
+                                    case 'heart':
+                                        return 'ic_lottie_heart';
+                                    case 'like':
+                                        return 'ic_lottie_thumb_up';
+                                    case 'confetti':
+                                        return 'ic_lottie_confetti';
+                                }
+                            };
+                            return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 16, autoplayMode: "none", loopMode: "none" }) }), index));
+                        }) }))] })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
+                                onClickReactionBtn && onClickReactionBtn(reaction.type);
+                                setIsOpenReactionBubble(false);
+                            } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 16, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] }));
+}
+exports.default = ReactionRow;
+var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  position: relative;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_ReactionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  max-width: -webkit-fill-available;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  max-width: -webkit-fill-available;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100%;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode;
+    return !isMe && (downloadIBtnMode ? '40px' : '34px');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_ReactionButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  gap: ", ";\n  height: 24px;\n  justify-content: center;\n  padding: 0 ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  gap: ", ";\n  height: 24px;\n  justify-content: center;\n  padding: 0 ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_02;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n"], ["\n  display: flex;\n  gap: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  width: 24px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  width: 24px;\n"])), function (_a) {
+    var theme = _a.theme, type = _a.type;
+    switch (type) {
+        case 'heart':
+            return theme.ui_cpnt_message_reaction_base_01;
+        case 'like':
+            return theme.ui_cpnt_message_reaction_base_02;
+        case 'confetti':
+            return theme.ui_cpnt_message_reaction_base_03;
+    }
+}, function (_a) {
+    var isButton = _a.isButton;
+    return isButton && 'pointer';
+});
+var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"], ["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"])), function (_a) {
+    var reactionBubblePosition = _a.reactionBubblePosition;
+    return reactionBubblePosition === 'bottom' ? 'top: 28px;' : 'bottom: 24px;';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/mobile/components/ChatBubbleListItem/components/index.d.ts

@@ -0,0 +1 @@
+export { default as ReactionRow } from './ReactionRow';

package/dist/src/mobile/components/ChatBubbleListItem/components/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactionRow = void 0;
+var ReactionRow_1 = require("./ReactionRow");
+Object.defineProperty(exports, "ReactionRow", { enumerable: true, get: function () { return __importDefault(ReactionRow_1).default; } });

package/dist/src/mobile/components/TextButton/TextButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PDSIconType, PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
 export type TextButtonProps = {
     text?: PDSTextType;
     size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
@@ -11,7 +11,8 @@ export type TextButtonProps = {
     iconFillType?: 'fill' | 'line';
     iconName?: PDSIconType;
     colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
+    overrideColorKey?: UiColors;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
+declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, overrideColorKey, onClick, ...rest }: TextButtonProps): JSX.Element;
 export default TextButton;

package/dist/src/mobile/components/TextButton/TextButton.js

@@ -70,14 +70,16 @@ var textColor = {
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
-var iconColor = {
-    none: 'ui_cpnt_button_icon_primary',
-    red: 'ui_cpnt_button_icon_error',
-    grey_01: 'ui_cpnt_button_icon_enabled',
-    grey2: 'ui_cpnt_button_icon_default',
-    grey3: 'ui_141',
-    white: 'ui_cpnt_sidebar_icon_01',
-    white2: 'ui_cpnt_sidebar_icon_01'
+var getIconColor = function (overrideColorKey) {
+    return ({
+        none: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_primary',
+        red: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_error',
+        grey_01: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_enabled',
+        grey2: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_default',
+        grey3: overrideColorKey ? overrideColorKey : 'ui_141',
+        white: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01',
+        white2: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01'
+    });
 };
 var textDisabledColor = {
     none: 'sysTextTertiary',
@@ -88,14 +90,16 @@ var textDisabledColor = {
     white: 'sysTextTertiary',
     white2: 'sysTextTertiary'
 };
-var overrideTextColor = {
-    none: undefined,
-    red: undefined,
-    grey_01: undefined,
-    grey2: undefined,
-    grey3: 'ui_141',
-    white: undefined,
-    white2: undefined
+var getOverrideTextColor = function (overrideColorKey) {
+    return ({
+        none: overrideColorKey,
+        red: overrideColorKey,
+        grey_01: overrideColorKey,
+        grey2: overrideColorKey,
+        grey3: overrideColorKey ? overrideColorKey : 'ui_141',
+        white: overrideColorKey,
+        white2: overrideColorKey
+    });
 };
 var overrideTextDisabledColor = {
     none: undefined,
@@ -116,15 +120,19 @@ var backgroundPressedColor = {
     white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
 };
 function TextButton(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick"]);
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, overrideColorKey = _a.overrideColorKey, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "overrideColorKey", "onClick"]);
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
+    return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
+                            ? 'ui_cpnt_button_text_disabled'
+                            : getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
                     ? overrideTextDisabledColor[colorTheme]
-                    : overrideTextColor[colorTheme], singleLineMode: "use" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled' ? 'ui_cpnt_button_text_disabled' : iconColor[colorTheme], fillType: iconFillType })] }))] })));
+                    : getOverrideTextColor(overrideColorKey)[colorTheme], singleLineMode: "use" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
+                            ? 'ui_cpnt_button_text_disabled'
+                            : getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType })] }))] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var size = _a.size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.257",
+  "version": "2.2.259",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,8 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.257]
+## [v2.2.259]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1333] DesktopBasicModal에 xlarge와 rxlarge 사이즈 추가
+* [PDS-1379] TextButton에 overrideColorKey prop 추가
+