pds-dev-kit-web 2.2.256 → 2.2.257

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

@@ -1,126 +0,0 @@
-"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

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

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

@@ -1,8 +0,0 @@
-"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; } });