@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/messenger/messagesList/messageBox.tsx

@@ -1,66 +0,0 @@
-import React, { createElement, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import 'antd/dist/antd.css';
-// import './index.css';
-import { Tooltip, Avatar } from 'antd';
-import { Comment } from '@ant-design/compatible';
-import Moment from 'moment';
-import { AiFillLike } from '@react-icons/all-files/ai/AiFillLike';
-import { AiOutlineLike } from '@react-icons/all-files/ai/AiOutlineLike';
-import { AiOutlineDislike } from '@react-icons/all-files/ai/AiOutlineDislike';
-import { AiFillDislike } from '@react-icons/all-files/ai/AiFillDislike';
-
-export const MessageBox = () => {
-    const [likes, setLikes] = useState(0);
-    const [dislikes, setDislikes] = useState(0);
-    const [action, setAction] = useState(null);
-    const { t } = useTranslation();
-
-    const like = () => {
-        setLikes(1);
-        setDislikes(0);
-        setAction('liked');
-    };
-
-    const dislike = () => {
-        setLikes(0);
-        setDislikes(1);
-        setAction('disliked');
-    };
-
-    const actions = [
-        <Tooltip key="comment-basic-like" title="Like">
-            <span onClick={like}>
-                {createElement(action === 'liked' ? AiFillLike : AiOutlineLike)}
-                <span className="comment-action">{likes}</span>
-            </span>
-        </Tooltip>,
-        <Tooltip key="comment-basic-dislike" title="Dislike">
-            <span onClick={dislike}>
-                {React.createElement(action === 'disliked' ? AiFillDislike : AiOutlineDislike)}
-                <span className="comment-action">{dislikes}</span>
-            </span>
-        </Tooltip>,
-        <span key="comment-basic-reply-to">{t('messenger_box_browser.reply_to')}</span>,
-    ];
-
-    return (
-        <Comment
-            // actions={actions}
-            author={<a>Han Solo</a>}
-            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo" />}
-            content={<p>{t('messenger_box_browser.we_supply_a_series_of_design_principles')}</p>}
-            datetime={
-                // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-                <div>
-                    {/*<span>{Moment().fromNow()}</span>*/}
-                    <span>{Moment().format('HH:mm:ss')}</span>
-                </div>
-                /*</Tooltip>*/
-            }
-        />
-    );
-};
-
-// ReactDOM.render(<Demo />, document.getElementById('container'));

package/src/components/messenger/messagesList/style.ts

@@ -1,448 +0,0 @@
-export const styleSheet3 = {
-    customStyle: {
-        '& .ant-comment-content-author-name > * ': {
-            color: '#3d3c40',
-            fontWeight: '600',
-            fontSize: '14px',
-        },
-        '& span.ant-comment-content-author-time': {
-            color: 'gray',
-            fontSize: '14px',
-        },
-        '& .btn-hover': {
-            display: 'none',
-        },
-        '& .hover_btns': {
-            borderRadius: '4px',
-            border: '1px solid lightgray',
-            display: 'flex',
-            justifyContent: 'flex-end',
-            padding: '4px',
-            position: 'absolute',
-            right: '0',
-            top: '0px',
-            whiteSpace: 'normal',
-            zIndex: '1',
-        },
-        '& .hover_btns button': {
-            border: 'none',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '0 6px',
-            width: '28px',
-            height: '28px',
-            background: 'white',
-        },
-        '& .text-divider': {
-            display: 'flex',
-            alignItems: 'center',
-            color: '#3d3c40',
-            fontSize: '13px',
-            fontWeight: '700',
-            lineHeight: '2em',
-            ':before': {
-                content: '" "',
-                height: '1px',
-                backgroundColor: '#d8d8d9',
-                flexGrow: '1',
-                marginRight: '10px',
-            },
-            ':after': {
-                content: '" "',
-                height: '1px',
-                backgroundColor: '#d8d8d9',
-                flexGrow: '1',
-                marginLeft: '10px',
-            },
-        },
-        // '& .modal_class': {
-        //
-        // },
-    },
-    modalCustomStyle:{
-        // backgroundColor: 'black',
-        ':hover': {
-            '& .modal-header': {
-                top: '0',
-            },
-            '& .modal-footer': {
-                bottom: '0',
-            },
-        },
-        '& .modal-dialog': {
-            width: '95%',
-            height: '100%',
-            marginBottom: '0',
-            marginTop: '0',
-            padding: '25px 0px',
-            '& .modal_main': {
-                padding: '0px 40px',
-            },
-        },
-        '& .modal-body': {
-            zIndex: '3',
-            padding: '0px',
-        },
-        '& .modal-content': {
-            height: '100%',
-            overflow: 'hidden',
-            position: 'relative',
-            backgroundColor: '#02020269',
-            border: '1px solid rgba(0, 0, 0, 0.2)',
-            boxShadow: '0 5px 15px rgb(0 0 0 / 50%)',
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'column',
-            justifyContent: 'space-between',
-            overflowY: 'auto',
-            '::after': {
-                content: '""',
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                top: '0',
-                right: '0',
-                left: '0',
-            },
-        },
-        '& .mod_head_style': {
-            display: 'block',
-            zIndex: '4',
-            width: '100%',
-            position: 'relative',
-            minHeight: '71px',
-            overflow: 'hidden',
-        },
-        '& .modal-header': {
-            zIndex: '3',
-            border: 'unset',
-            width: '100%',
-            transition: 'all 0.5s',
-            background: '#0000000f',
-            position: 'absolute',
-            top: '-100px',
-            '> svg': {
-                marginLeft: 'auto',
-                height: '22px',
-                width: '22px',
-                cursor: 'pointer',
-                '> path': {
-                    stroke: 'white',
-                },
-            },
-        },
-        '& .modal-footer': {
-            zIndex: '3',
-            border: 'unset',
-            width: '100%',
-            position: 'absolute',
-            background: '#0000000f',
-            bottom: '-100px',
-            transition: 'all 0.5s',
-            '> p': {
-                margin: '0',
-            },
-        },
-        '& .clk_img': {
-            // width: '100%',
-            width: '80vw',
-            height: '73vh',
-        },
-        '& .header_main': {
-            display: 'flex',
-        },
-        '& .header_img': {
-            width: '35px',
-            height: '35px',
-            background: 'white',
-            borderRadius: '5px',
-            marginRight: '7px',
-            color: 'black',
-            fontSize: '20px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontWeight: 'bold',
-        },
-        '& .header_text': {
-            '> h4': {
-                fontWeight: 'bold',
-                margin: '0',
-                marginBottom: '4px',
-                fontSize: '16px',
-            },
-            '> p': {
-                fontSize: '12px',
-                margin: '0',
-            },
-        },
-    },
-    customStyleDemo: {
-        ':hover .btn-hover': {
-            display: 'block',
-        },
-        '.btn-hover': {
-            display: 'none',
-        },
-        padding: '0px 36px',
-        paddingRight: '15px',
-        '& .text-divider': {
-            display: 'flex',
-            alignItems: 'center',
-            color: '#3d3c40',
-            fontSize: '13px',
-            fontWeight: '700',
-            lineHeight: '2em',
-            ':before': {
-                content: '" "',
-                height: '1px',
-                backgroundColor: '#d8d8d9',
-                flexGrow: '1',
-                marginRight: '10px',
-            },
-            ':after': {
-                content: '" "',
-                height: '1px',
-                backgroundColor: '#d8d8d9',
-                flexGrow: '1',
-                marginLeft: '10px',
-            },
-        },
-        '& .reactionClass': {
-            display: 'inline-block',
-            border: '1px solid #4390ff',
-            padding: '2px',
-            borderRadius: '5px',
-            marginRight: '4px',
-            '> span': {
-                fontSize: '13px',
-                padding: '0px 3px',
-                color: '#4390ff',
-            },
-        },
-        '& .preview_img_style': {
-            height: '180px',
-        },
-        '& .msg_img_preview': {
-            position: 'relative',
-            display: 'inline-block',
-            transition: 'all 0.5s',
-            ':hover': {
-                cursor: 'zoom-in',
-                '& .options_style': {
-                    opacity: '1',
-                },
-            },
-        },
-        '& .options_style': {
-            backgroundColor: '#1a1d21',
-            padding: '7px',
-            display: 'flex',
-            alignItems: 'center',
-            position: 'absolute',
-            top: '10px',
-            right: '10px',
-            borderRadius: '5px',
-            opacity: '0',
-            '> svg': {
-                width: '30px',
-                height: '20px',
-                color: '#aaabac',
-                cursor: 'pointer',
-            },
-        },
-    },
-    customInputStyle: {
-        '& .msg_list': {
-            position: 'relative',
-            bottom: '80px',
-            width: '100%',
-            right: '0px',
-            left: '0px',
-            height: '58vh',
-            paddingTop: '0px',
-            top: '0px',
-            overflowY: 'auto',
-        },
-        '& .msg_row': {
-            marginLeft: '23px',
-            marginRight: '23px',
-            position: 'absolute',
-            bottom: '0px',
-            maxHeight: '100%',
-        },
-        '& .input_row': {
-            // position: 'absolute',
-            marginLeft: '0',
-            padding: '0px 15px',
-            bottom: '0',
-            width: '100%',
-        },
-        '& .input_msg': {
-            backgroundColor: '#fff',
-            backgroundImage: 'none',
-            border: '1px solid #d9d9d9',
-            borderRadius: '2px',
-        },
-        '& .preview_imgs': {
-            display: 'flex',
-            '& .child_div': {
-                width: '80px',
-                height: '80px',
-                boxShadow: '0 3px 10px rgb(0 0 0 / 20%)',
-                position: 'relative',
-                padding: '0px 5px',
-                ':hover': {
-                    '& .overlay': {
-                        backgroundColor: '#0000006b',
-                        width: '100%',
-                        height: '100%',
-                        position: 'absolute',
-                        right: '0',
-                        left: '0',
-                        zIndex: '2',
-                        // display: 'none',
-                    },
-                    '> i': {
-                        '::after': {
-                            content: '""',
-                            position: 'absolute',
-                            width: '20px',
-                            height: '20px',
-                            borderRadius: '50%',
-                            right: '-5px',
-                            top: '-3px',
-                            left: 'auto',
-                            backgroundColor: 'black',
-                            zIndex: '-1',
-                        },
-                        position: 'absolute',
-                        color: 'white',
-                        zIndex: '3',
-                        right: '0px',
-                        top: '0',
-                        cursor: 'pointer',
-                        display: 'block',
-                    },
-                },
-                '> img': {
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    position: 'relative',
-                },
-                '> i': {
-                    display: 'none',
-                },
-            },
-        },
-        '& .thread_input_row': {
-            position: 'static',
-            marginLeft: '0',
-            padding: '0px 15px',
-            bottom: '0',
-            width: '100%',
-        },
-        '& .msg_input': {
-            minHeight: '45px',
-            border: 'none',
-        },
-        '& .input_class': {
-            position: 'relative',
-            padding: '0  30px',
-        },
-        '& .icon_box': {
-            position: 'absolute',
-            top: '58%',
-            display: 'flex',
-            transform: 'translateY(-50%)',
-            right: '10px',
-        },
-        '& .icon_style': {
-            fontSize: '20px',
-            // marginLeft: '20px',
-            color: 'rgba(61, 60, 64, 0.56)',
-        },
-        '& .emoji-mart': {
-            position: 'absolute',
-            top: 'unset',
-            bottom: '100%',
-            width: '315px !important',
-            right: '30px',
-            zIndex: '1',
-        },
-        '& .emoji-mart-category': {
-            '& .emoji-mart-emoji span': {
-                width: '20px !important',
-                height: '20px !important',
-                fontSize: '20px !important',
-            },
-        },
-        '& .chat_container': {
-            overflow: 'hidden',
-            display: 'flex',
-            height: 'calc(100vh - 264px)',
-        },
-        '& .right_chat_box': {
-            right: '0',
-            top: '0',
-            border: '1px',
-            width: '100%',
-            height: 'calc(100% - 56px)',
-            maxWidth: '400px',
-            position: 'relative',
-            display: 'flex',
-            flex: '1 1 auto',
-            flexDirection: 'column',
-            borderLeft: '1px',
-            '& .msg_list': {
-                top: '0',
-                bottom: '0',
-                overflow: 'auto',
-                '& .msg_row': {
-                    position: 'unset',
-                    maxHeight: 'unset',
-                    padding: '0',
-                },
-            },
-            '& .thread_head': {
-                flex: '0 0 56px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                overflow: 'hidden',
-                whiteSpace: 'nowrap',
-                padding: '15px',
-                borderBottom: '1px solid #3d3c408f',
-                '> div': {
-                    '> span': {
-                        fontSize: '1.6rem',
-                        fontWeight: '600',
-                    },
-                    '> button': {
-                        margin: '0 0 0 8px',
-                        fontSize: '12px',
-                        fontWeight: 'normal',
-                        height: '2.4rem',
-                        lineHeight: '2.4rem',
-                        padding: '0 8px',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        background: 'transparent',
-                        border: 'none',
-                        borderLeft: '1px solid #3d3c408f',
-                    },
-                },
-            },
-        },
-        '& .left_chat_box': {
-            width: '100%',
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-        },
-    },
-    customPopoverStyles: {},
-} as any;

package/src/components/messenger/mock.ts

@@ -1,77 +0,0 @@
-export const messagesData = [
-    {
-        id: 1,
-        loginUser: true,
-        message: 'Hello!',
-        time: '10: 45 PM',
-        timeIsToday: false,
-        isReply: true,
-        thread: [
-            {
-                threadId: 1,
-                message: 'testing message 1',
-                time: '2 : 10 pm',
-                timeIsToday: false,
-                loginUser: true
-            },
-            {
-                threadId: 2,
-                message: 'testing message 2',
-                time: '2: 10 pm',
-                timeIsToday: true,
-                loginUser: true
-            }
-        ]
-    },
-    {
-        id: 2,
-        loginUser: false,
-        message: 'Hey!',
-        time: '10: 50 PM',
-        timeIsToday: false,
-        isReply: true,
-        thread: [
-            {
-                threadId: 1,
-                message: 'message 1',
-                time: '2 : 10 pm',
-                timeIsToday: false,
-                loginUser: true
-            },
-        ]
-    },
-    {
-        id: 3,
-        loginUser: true,
-        message: 'How are you!',
-        time: '10: 50 PM',
-        timeIsToday: false,
-        isReply: false,
-    },
-];
-
-export const userProfile = [
-    {
-        displayName: 'nickname',
-        isBusy: false,
-        user: { username: 'Admin' },
-        isShared: true,
-        disablePopover: true,
-        url: 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80',
-        displayUsername: true,
-        hasMention: false,
-        message: [],
-        hideStatus: false,
-    },
-    {
-        displayName: 'ghazimubina',
-        isBusy: false,
-        user: { username: 'beena' },
-        isShared: true,
-        disablePopover: true,
-        url: 'https://images.pexels.com/photos/1987301/pexels-photo-1987301.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-        displayUsername: true,
-        hasMention: false,
-        hideStatus: false,
-    },
-];

package/src/components/messenger/more_action/index.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-import { styleSheet } from './style';
-import { css } from '@emotion/css';
-
-type IProps = {
-    handleShowSideBar?: any;
-    handleDeleteMessage?: any;
-    handleEditMessage?: any;
-    id?: string;
-    pinMessage: any;
-    handlePinBtn?: any;
-};
-
-const MoreAction = ({
-    handleShowSideBar,
-    handleDeleteMessage,
-    handleEditMessage,
-    id,
-    handlePinBtn,
-    pinMessage,
-}: IProps) => {
-    const { t } = useTranslation();
-    let cardData = [
-        {
-            tiltle: t('messenger_box_browser.reply'),
-            Link: handleShowSideBar,
-        },
-        {
-            tiltle: t('messenger_box_browser.mark_as_unread'),
-            Link: '#',
-        },
-        {
-            tiltle: t('messenger_box_browser.copy_link'),
-            Link: '#',
-        },
-        {
-            tiltle: pinMessage
-                ? t('messenger_box_browser.unpin_to_channel')
-                : t('messenger_box_browser.pin_to_channel'),
-            Link: handlePinBtn,
-        },
-    ];
-
-    const moreActionData = [
-        {
-            title: t('messenger_box_browser.edit'),
-            Link: handleEditMessage,
-            className: 'edit-btn',
-        },
-        {
-            title: t('messenger_box_browser.delete'),
-            Link: handleDeleteMessage,
-            className: 'delete-btn',
-        },
-    ];
-    return (
-        <div className={css(styleSheet.MoreActionStyle)}>
-            <ul>
-                {cardData.map((element: any, index: number) => {
-                    return (
-                        <li key={index} onClick={() => element.Link(id)}>
-                            <a>{element.tiltle}</a>
-                        </li>
-                    );
-                })}
-                {moreActionData.map((element: any, index: number) => {
-                    return (
-                        <li key={index} className={element.className} onClick={() => element.Link(id)}>
-                            <a>{element.title}</a>
-                        </li>
-                    );
-                })}
-            </ul>
-        </div>
-    );
-};
-
-export default MoreAction;