pds-dev-kit-web 2.2.254 → 2.2.255

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

@@ -1,86 +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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("styled-components"));
-/**
- * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
- */
-var ReactionBubble = function (_a) {
-    var _b = _a.pointingPosition, pointingPosition = _b === void 0 ? 'start_bottom' : _b, children = _a.children;
-    var theme = (0, styled_components_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(S_ContextBubbleArea, __assign({ "$position": pointingPosition }, { children: (0, jsx_runtime_1.jsxs)(S_ContextBubbleWrapper, __assign({ "$position": pointingPosition }, { children: [children, (0, jsx_runtime_1.jsxs)(Arrow, __assign({ "$position": pointingPosition, viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("polygon", { points: "9,10 3,0 15,0", fill: theme.ui_cpnt_sheet_base_01 }), (0, jsx_runtime_1.jsx)("path", { d: "M3,1 L9,10", stroke: theme.ui_cpnt_sheet_border_01, strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M15,1 L9,10", stroke: theme.ui_cpnt_sheet_border_01, strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M0,0 L15,0", strokeWidth: "1" })] }))] })) })));
-};
-exports.default = ReactionBubble;
-var S_ContextBubbleArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  ", "\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  ", "\n  position: relative;\n"])), function (_a) {
-    var $position = _a.$position, theme = _a.theme;
-    var isTop = $position.includes('top');
-    return !isTop
-        ? "margin-bottom: ".concat(theme.spacing.spacingB, ";")
-        : "margin-top: ".concat(theme.spacing.spacingB, ";");
-});
-var S_ContextBubbleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  display: flex;\n  padding: ", ";\n  position: relative;\n  width: 'fit-content';\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  display: flex;\n  padding: ", ";\n  position: relative;\n  width: 'fit-content';\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_sheet_base_01;
-}, function (_a) {
-    var theme = _a.theme;
-    return "1px solid ".concat(theme.ui_cpnt_sheet_border_01);
-}, function (_a) {
-    var theme = _a.theme;
-    return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingC);
-});
-var Arrow = styled_components_1.default.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"], ["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var $position = _a.$position;
-    var isTop = $position.includes('top');
-    if (isTop) {
-        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "], ["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "])));
-    }
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "], ["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "])));
-}, function (_a) {
-    var $position = _a.$position;
-    if ($position.includes('center')) {
-        return "left: 50%;";
-    }
-    if ($position.includes('end')) {
-        return "right: 12px;";
-    }
-    return "left: 19.5px;";
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-type ReactionType = 'heart' | 'like' | 'confetti';
-type ReactionValueOption = {
-    type: ReactionType;
-    count: number;
-};
-type ReactionArrayType = ReactionValueOption[];
-type Props = {
-    isMe: boolean;
-    downloadIBtnMode: 'use' | 'none';
-    reactionBtnMode: 'use' | 'none';
-    reactionBtnText: string;
-    reactionArray?: ReactionArrayType;
-    reactionBubblePosition: 'top' | 'bottom';
-    onClickReactionBtn?: (type: ReactionType) => void;
-};
-declare function ReactionRow({ isMe, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
-export default ReactionRow;

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; } });