CometUFIThreadedComponentDecorator

CometUFIThreadedComponentDecorator.tsx

/**
 * Copyright (c) Ladifire, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import * as React from 'react';

import stylex from '@ladifire-opensource/stylex';

const styles = stylex.create({
    item1: {
        width: 2,
        position: 'absolute',
        height: '100%',
        backgroundColor: 'var(--comment-background)',
        left: 30,
    },
    item2: {
        width: 2,
        position: 'absolute',
        height: '100%',
        backgroundColor: 'var(--comment-background)',
        left: 71,
    },
});

interface Props {
    type: string;
    children: any;
    depth: number;
    hasChildren?: boolean;
    isLast?: boolean;
    isParentLast?: boolean;
}

export const CometUFIThreadedComponentDecorator = (props: Props) => {
    const {
        children,
        depth,
        hasChildren,
        isLast,
        isParentLast,
        type,
    } = props;

    return (
        <div
            className={stylex.dedupe(
                {
                    overflow: "hidden",
                    position: "relative"
                },
                depth === 1 ? {
                    paddingLeft: 54
                } : null,
                depth === 2 ? {
                    paddingLeft: 92
                } : null,
                type === "hidden-placeholder" ? {
                    textAlign: "center"
                } : null,
                type === 'label' ? {
                    overflow: "visible",
                } : null,
            )}
        >
            {
                depth > 0 && type !== "label" && type !== "hidden-placeholder" && React.jsx("div", {
                    className: stylex.dedupe({
                        borderBottomLeftRadius: 10,
                        borderBottomStyle: "solid",
                        borderBottomWidth: 2,
                        borderTopColor: "var(--comment-background)",
                        borderRightColor: "var(--comment-background)",
                        borderBottomColor: "var(--comment-background)",
                        borderLeftColor: "var(--comment-background)",
                        borderLeftStyle: "solid",
                        borderLeftWidth: 2,
                        position: "absolute"
                    }, depth === 1 ? {
                        left: 30,
                        width: 24
                    } : null, depth === 2 ? {
                        left: 71,
                        width: 22
                    } : null, type === "comment" ? {
                        height: 17
                    } : null, type === "comment" && depth === 1 ? {
                        height: 20
                    } : null, type === "pager" ? {
                        height: "50%"
                    } : null)
                })
            }
            {
                depth > 0 && !(depth === 1 && isLast) && (depth !== 2 || isParentLast === !1) && React.jsx("div", {
                    className: stylex(styles.item1)
                })
            }
            {
                depth > 1 && !(depth === 2 && isLast) && React.jsx("div", {
                    className: stylex(styles.item2)
                })
            }
            {
                hasChildren === !0 && React.jsx("div", {
                    className: stylex.dedupe(depth > 0 ? {
                        left: 71,
                        top: 40
                    } : {}, depth === 0 ? {
                        left: 30,
                        top: 43
                    } : null, {
                        backgroundColor: "var(--comment-background)",
                        height: "100%",
                        position: "absolute",
                        width: 2
                    })
                })
            }
            {
                children
            }
        </div>
    );
};

how_to_use.tsx

<CometUFIThreadedComponentDecorator
    type='comment'
    depth={conversationRootCommentId && conversationRootCommentId === message.comment_id ? 0 : 1}
    hasChildren={conversationRootCommentId && conversationRootCommentId === message.comment_id && latestMessageId !== message.id}
    isLast={latestMessageId === message.id}
>
    {_content}
</CometUFIThreadedComponentDecorator>