@sendbird/uikit-react 3.13.3 → 3.13.5-rc.0

package/cjs/chunks/{bundle-CEiDcA9X.js → bundle-K7QJ3VXV.js}

@@ -10,6 +10,10 @@ var ComponentType;
     ComponentType["TextButton"] = "textButton";
     ComponentType["ImageButton"] = "imageButton";
 })(ComponentType || (ComponentType = {}));
+var CompositeComponentType;
+(function (CompositeComponentType) {
+    CompositeComponentType["Carousel"] = "carouselView";
+})(CompositeComponentType || (CompositeComponentType = {}));
 
 // -------- Set property mapper
 const MAPPER = () => undefined;
@@ -22,6 +26,7 @@ const createParser = (params) => {
         mapImageProps: (params === null || params === void 0 ? void 0 : params.mapImageProps) || defaultMapper,
         mapTextButtonProps: (params === null || params === void 0 ? void 0 : params.mapTextButtonProps) || defaultMapper,
         mapImageButtonProps: (params === null || params === void 0 ? void 0 : params.mapImageButtonProps) || defaultMapper,
+        mapCarouselProps: (params === null || params === void 0 ? void 0 : params.mapCarouselProps) || defaultMapper,
     };
     return {
         parse(item, options) {
@@ -41,6 +46,9 @@ const createParser = (params) => {
                 case ComponentType.ImageButton: {
                     return { properties: mapper.mapImageButtonProps(item, options) };
                 }
+                case CompositeComponentType.Carousel: {
+                    return { properties: mapper.mapCarouselProps(item, options) };
+                }
                 default:
                     return { properties: undefined };
             }
@@ -50,13 +58,14 @@ const createParser = (params) => {
 
 const FRAGMENT = ({ children }) => React.createElement(React.Fragment, null, children);
 function createRenderer(params) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     return {
         box: ((_a = params === null || params === void 0 ? void 0 : params.views) === null || _a === void 0 ? void 0 : _a.box) || FRAGMENT,
         text: ((_b = params === null || params === void 0 ? void 0 : params.views) === null || _b === void 0 ? void 0 : _b.text) || FRAGMENT,
         image: ((_c = params === null || params === void 0 ? void 0 : params.views) === null || _c === void 0 ? void 0 : _c.image) || FRAGMENT,
         imageButton: ((_d = params === null || params === void 0 ? void 0 : params.views) === null || _d === void 0 ? void 0 : _d.imageButton) || FRAGMENT,
         textButton: ((_e = params === null || params === void 0 ? void 0 : params.views) === null || _e === void 0 ? void 0 : _e.textButton) || FRAGMENT,
+        carouselView: ((_f = params === null || params === void 0 ? void 0 : params.views) === null || _f === void 0 ? void 0 : _f.carouselView) || FRAGMENT,
     };
 }
 
@@ -170,10 +179,8 @@ const createMessageTemplate = (opts) => {
     const UnknownMessage = opts.UnknownMessage || (() => null);
     const parser = opts.parser || createParser();
     const renderer = opts.renderer || createRenderer();
-    const MessageTemplateBase = (props) => {
-        var _a;
-        const renderItems = props.templateItems;
-        const parentLayout = (_a = props.parentLayout) !== null && _a !== void 0 ? _a : defaultProperties.box.layout;
+    const MessageTemplateBase = ({ templateItems, parentLayout = defaultProperties.box.layout, isRoot = false, }) => {
+        const renderItems = templateItems;
         return (React.createElement(React.Fragment, null, renderItems.map((item, index, siblings) => {
             const { properties } = parser.parse(item, { parentLayout, elemIdx: index, siblings });
             const props = {
@@ -183,6 +190,16 @@ const createMessageTemplate = (opts) => {
                 siblings,
             };
             switch (item.type) {
+                // CompositeComponent should be top level component
+                case CompositeComponentType.Carousel: {
+                    if (!isRoot) {
+                        throw new Error('Cannot parse template item as Carousel if the template item is not the root.');
+                    }
+                    if (!item.items || !Array.isArray(item.items) || item.items.length === 0) {
+                        throw new Error('Cannot parse template item as Carousel if carousel has no items.');
+                    }
+                    return (React.createElement(renderer.carouselView, Object.assign({}, item, props), item.items.map((items, index) => (React.createElement(MessageTemplateBase, { key: index, templateItems: items || [], parentLayout: parentLayout })))));
+                }
                 case ComponentType.Box: {
                     return (React.createElement(renderer.box, Object.assign({}, item, props),
                         React.createElement(MessageTemplateBase, { templateItems: item.items || [], parentLayout: item.layout })));
@@ -211,7 +228,7 @@ const createMessageTemplate = (opts) => {
             const items = setTemplateItemId(templateItems);
             return (React.createElement(SizeContextProvider, null,
                 React.createElement(Container, null,
-                    React.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: items }))));
+                    React.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: items, isRoot: true }))));
         },
         MessageTemplateBase,
     };
@@ -1013,6 +1030,312 @@ const alignInFlex = (align) => {
         ],
     },
 });
+({
+    'version': 1,
+    'body': {
+        'items': [
+            {
+                'elementId': 'root',
+                'type': 'box',
+                'layout': 'column',
+                'width': {
+                    'type': 'flex',
+                    'value': FlexSizeSpecValue.FillParent,
+                },
+                'height': {
+                    'type': 'flex',
+                    'value': FlexSizeSpecValue.WrapContent,
+                },
+                'items': [
+                    {
+                        'type': 'text',
+                        'viewStyle': {
+                            'backgroundColor': '#a0c0ffff',
+                            'margin': {
+                                'top': 16,
+                                'bottom': 16,
+                                'left': 16,
+                                'right': 16,
+                            },
+                            'padding': {
+                                'top': 16,
+                                'bottom': 16,
+                                'left': 16,
+                                'right': 16,
+                            },
+                        },
+                        'text': 'Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap ',
+                        'textStyle': {
+                            'size': 14,
+                            'color': '#222121e0',
+                            'weight': 'normal',
+                        },
+                        'maxTextLines': 5,
+                        'width': {
+                            'type': 'flex',
+                            'value': FlexSizeSpecValue.FillParent,
+                        },
+                        'height': {
+                            'type': 'flex',
+                            'value': 1,
+                        },
+                        'align': {
+                            'horizontal': 'left',
+                            'vertical': 'top',
+                        },
+                        'elementId': 'c0e15878-4984-408d-abaa-4b495c2e3872',
+                    },
+                    {
+                        'type': 'imageButton',
+                        'viewStyle': {
+                            margin: {
+                                left: 24,
+                                right: 12,
+                            },
+                        },
+                        'width': { 'type': 'flex', 'value': FlexSizeSpecValue.FillParent },
+                        'height': { 'type': 'fixed', 'value': 250 },
+                        'imageUrl': 'https://cdn.pixabay.com/photo/2022/10/12/10/45/bird-7516219_1280.jpg',
+                        'imageStyle': { 'contentMode': 'aspectFill' },
+                        'metaData': { 'pixelWidth': '1080', 'pixelHeight': '2640' },
+                        'action': { 'data': 'www.naver.com' },
+                    },
+                ],
+            },
+        ],
+    },
+});
+
+const PADDING_WIDTH = 24;
+const CONTENT_LEFT_WIDTH = 40;
+const SWIPE_THRESHOLD = 15;
+const LAST_ITEM_RIGHT_SNAP_THRESHOLD = 100;
+const GAP_DEFAULT = 8;
+/**
+ * fixed sized template items should use its child width.
+ * Whereas flex sized template items should use its parent's width.
+ * @param item
+ */
+function shouldRenderAsFixed(item) {
+    var _a;
+    return ((_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.type) === 'fixed';
+}
+function CarouselItem({ item, defaultWidth }) {
+    return (React.createElement("div", { style: shouldRenderAsFixed(item) ? { width: 'fit-content' } : { minWidth: defaultWidth, width: '100%' } }, item));
+}
+const Carousel = React.memo(({ children, gap = GAP_DEFAULT }) => {
+    var _a, _b;
+    const carouselRef = React.useRef(null);
+    const screenWidth = window.innerWidth;
+    const defaultItemWidth = (_b = (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+    const itemWidths = children.map((item) => {
+        var _a;
+        if (shouldRenderAsFixed(item)) {
+            return (_a = item.props.templateItems[0].width) === null || _a === void 0 ? void 0 : _a.value;
+        }
+        return defaultItemWidth;
+    });
+    const allItemsWidth = itemWidths.reduce((prev, curr) => prev + gap + curr);
+    const lastItemWidth = itemWidths[itemWidths.length - 1];
+    const isLastItemNarrow = lastItemWidth <= LAST_ITEM_RIGHT_SNAP_THRESHOLD;
+    const isLastTwoItemsFitScreen = getIsLastTwoItemsFitScreen();
+    const itemPositions = getEachItemPositions();
+    const [draggingInfo, setDraggingInfo] = React.useState({
+        scrolling: false,
+        dragging: false,
+        startPos: null,
+        offset: 0,
+        translateX: 0,
+        currentIndex: 0,
+    });
+    const handleMouseDown = (event) => {
+        setDraggingInfo(Object.assign(Object.assign({}, draggingInfo), { scrolling: false, dragging: true, startPos: {
+                x: event.clientX,
+                y: event.clientY,
+            }, offset: 0 }));
+    };
+    const handleMouseMove = (event) => {
+        if (!draggingInfo.dragging || !draggingInfo.startPos)
+            return;
+        const currentX = event.clientX;
+        const newOffset = currentX - draggingInfo.startPos.x;
+        setDraggingInfo(Object.assign(Object.assign({}, draggingInfo), { offset: newOffset }));
+    };
+    const handleMouseUp = () => {
+        if (!draggingInfo.dragging)
+            return;
+        handleDragEnd();
+    };
+    const blockScroll = () => {
+        if (carouselRef.current) {
+            carouselRef.current.style.touchAction = 'pan-x';
+        }
+    };
+    const unblockScroll = () => {
+        if (carouselRef.current) {
+            carouselRef.current.style.touchAction = 'pan-y';
+        }
+    };
+    const handleTouchStart = (event) => {
+        setDraggingInfo(Object.assign(Object.assign({}, draggingInfo), { scrolling: false, dragging: false, startPos: {
+                x: event.touches[0].clientX,
+                y: event.touches[0].clientY,
+            }, offset: 0 }));
+    };
+    const handleTouchMove = (event) => {
+        if (!draggingInfo.startPos || draggingInfo.scrolling)
+            return;
+        const startPos = draggingInfo.startPos;
+        const [touchMoveX, touchMoveY] = [event.touches[0].clientX, event.touches[0].clientY];
+        const [deltaX, deltaY] = [Math.abs(touchMoveX - startPos.x), Math.abs(touchMoveY - startPos.y)];
+        const newOffset = touchMoveX - startPos.x;
+        if (newOffset === draggingInfo.offset)
+            return;
+        if (draggingInfo.dragging) {
+            setDraggingInfo(Object.assign(Object.assign({}, draggingInfo), { offset: newOffset }));
+            return;
+        }
+        if (deltaY > deltaX) {
+            setDraggingInfo(Object.assign(Object.assign({}, draggingInfo), { scrolling: true }));
+        }
+        else {
+            blockScroll();
+            setDraggingInfo(Object.assign(Object.assign({}, draggingInfo), { dragging: true, offset: newOffset }));
+        }
+    };
+    const getNewDraggingInfo = (props = {}) => {
+        const { newTranslateX, nextIndex } = props;
+        const { translateX, currentIndex } = draggingInfo;
+        return {
+            scrolling: false,
+            dragging: false,
+            startPos: null,
+            offset: 0,
+            translateX: newTranslateX !== null && newTranslateX !== void 0 ? newTranslateX : translateX,
+            currentIndex: nextIndex !== null && nextIndex !== void 0 ? nextIndex : currentIndex,
+        };
+    };
+    const handleDragEnd = () => {
+        const offset = draggingInfo.offset;
+        const absOffset = Math.abs(offset);
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo(getNewDraggingInfo());
+            return;
+        }
+        // If dragged to left, next index should be to the right
+        const currentIndex = draggingInfo.currentIndex;
+        if (offset < 0 && currentIndex < children.length - 1) {
+            const nextIndex = currentIndex + 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex,
+            }));
+            // If dragged to right, next index should be to the left
+        }
+        else if (offset > 0 && currentIndex > 0) {
+            const nextIndex = currentIndex - 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex,
+            }));
+        }
+        else {
+            setDraggingInfo(getNewDraggingInfo());
+        }
+    };
+    const handleTouchEnd = () => {
+        const { offset, currentIndex } = draggingInfo;
+        const absOffset = Math.abs(offset);
+        if (absOffset < SWIPE_THRESHOLD) {
+            setDraggingInfo(getNewDraggingInfo());
+            return;
+        }
+        // If dragged to left, next index should be to the right
+        if (offset < 0 && currentIndex < children.length - 1) {
+            const nextIndex = currentIndex + 1;
+            /**
+             * This is special logic for "더 보기" button for Socar use-case.
+             * The button will have a small width (less than 50px).
+             * We want to include this button in the view and snap to right padding wall IFF !isLastTwoItemsFitScreen.
+             */
+            if (isLastItemNarrow) {
+                if (isLastTwoItemsFitScreen) {
+                    if (nextIndex !== children.length - 1) {
+                        setDraggingInfo(getNewDraggingInfo({
+                            newTranslateX: itemPositions[nextIndex].start,
+                            nextIndex,
+                        }));
+                    }
+                    else {
+                        setDraggingInfo(getNewDraggingInfo());
+                    }
+                }
+                else if (nextIndex !== children.length - 1) {
+                    setDraggingInfo(getNewDraggingInfo({
+                        newTranslateX: itemPositions[nextIndex].start,
+                        nextIndex,
+                    }));
+                }
+                else {
+                    const translateWidth = itemPositions[nextIndex].start - lastItemWidth;
+                    const rightEmptyWidth = screenWidth - (allItemsWidth + translateWidth + PADDING_WIDTH + CONTENT_LEFT_WIDTH);
+                    setDraggingInfo(getNewDraggingInfo({
+                        newTranslateX: translateWidth + rightEmptyWidth,
+                        nextIndex,
+                    }));
+                }
+            }
+            else {
+                setDraggingInfo(getNewDraggingInfo({
+                    newTranslateX: itemPositions[nextIndex].start,
+                    nextIndex,
+                }));
+            }
+            // If dragged to right, next index should be to the left
+        }
+        else if (offset > 0 && currentIndex > 0) {
+            const nextIndex = currentIndex - 1;
+            setDraggingInfo(getNewDraggingInfo({
+                newTranslateX: itemPositions[nextIndex].start,
+                nextIndex,
+            }));
+        }
+        else {
+            setDraggingInfo(getNewDraggingInfo());
+        }
+        if (draggingInfo.dragging) {
+            unblockScroll();
+        }
+    };
+    function getCurrentTranslateX() {
+        return draggingInfo.translateX + draggingInfo.offset;
+    }
+    function getIsLastTwoItemsFitScreen() {
+        const restItemsWidth = itemWidths.slice(-2).reduce((prev, curr) => prev + gap + curr);
+        const restTotalWidth = PADDING_WIDTH + CONTENT_LEFT_WIDTH + restItemsWidth;
+        return restTotalWidth <= screenWidth;
+    }
+    function getEachItemPositions() {
+        let accumulator = 0;
+        return itemWidths.map((itemWidth, i) => {
+            if (i > 0) {
+                accumulator -= gap;
+            }
+            const itemPosition = {
+                start: accumulator,
+                end: accumulator - itemWidth,
+            };
+            accumulator -= itemWidth;
+            return itemPosition;
+        });
+    }
+    return (React.createElement("div", { ref: carouselRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: "sb-message-template__carousel", style: {
+            cursor: draggingInfo.dragging ? 'grabbing' : 'grab',
+            transition: draggingInfo.dragging ? 'none' : 'transform 0.5s ease',
+            transform: `translateX(${getCurrentTranslateX()}px)`,
+            gap: gap,
+        } }, children.map((item, index) => (React.createElement(CarouselItem, { key: index + '', item: item, defaultWidth: defaultItemWidth + 'px' })))));
+});
 
 var __rest$3 = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1378,7 +1701,7 @@ function setBorderStyle(styles, borderWidth, borderColor, radius) {
     }
 }
 function setViewStyle(styles, props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const { viewStyle } = props;
     if ((_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _a === void 0 ? void 0 : _a.top)
         styles['marginTop'] = Number(viewStyle.margin.top);
@@ -1388,6 +1711,9 @@ function setViewStyle(styles, props) {
         styles['marginLeft'] = Number(viewStyle.margin.left);
     if ((_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _d === void 0 ? void 0 : _d.right)
         styles['marginRight'] = Number(viewStyle.margin.right);
+    const marginHorizontal = Number((_e = styles.marginLeft) !== null && _e !== void 0 ? _e : '0') + Number((_f = styles.marginRight) !== null && _f !== void 0 ? _f : '0');
+    if (marginHorizontal > 0 && styles.width === '100%')
+        styles.width = `calc(100% - ${marginHorizontal}px)`;
     if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColor)
         styles['backgroundColor'] = viewStyle.backgroundColor;
     // use JSON.stringify to escape special characters in image URL
@@ -1616,6 +1942,9 @@ const renderer = createRenderer({
             return (React.createElement(ActionHandler, { className: "sb-message-template__image-container sb-message-template__image-button", elementId: props.elementId, style: props.parsedProperties, props: props },
                 React.createElement(ReactMessageTemplateImage, { className: "sb-message-template__image", alt: "image-button", src: props.imageUrl, style: { width: '100%', height: '100%', aspectRatio: 'inherit', objectFit: 'inherit' }, tintColor: (_a = props.imageStyle) === null || _a === void 0 ? void 0 : _a.tintColor, metaData: props.metaData })));
         },
+        carouselView(props) {
+            return React.createElement(Carousel, { gap: props.spacing }, props.children);
+        },
     },
 });
 const parser = createParser({
@@ -1655,6 +1984,11 @@ const parser = createParser({
         setImageAspectRatio(styles, props);
         return styles;
     },
+    mapCarouselProps(props, options) {
+        const styles = getDefaultStyles();
+        setViewProps(styles, props, options);
+        return styles;
+    },
 });
 createMessageTemplate({
     renderer,
@@ -1664,9 +1998,7 @@ createMessageTemplate({
                 display: 'flex',
                 flexDirection: 'column',
                 maxWidth: 400,
-                backgroundColor: '#cecece',
                 marginBottom: 24,
-                borderRadius: '8px',
             } }, children));
     },
 });
@@ -1689,4 +2021,4 @@ function MessageTemplate(_a) {
 
 exports.MessageProvider = MessageProvider;
 exports.MessageTemplate = MessageTemplate;
-//# sourceMappingURL=bundle-CEiDcA9X.js.map
+//# sourceMappingURL=bundle-K7QJ3VXV.js.map