Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1889 | Rev 2981 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1889 Rev 2655
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
- 
 
 2 
import styles from '../../mobile-chat/mobile-chat/chat/messages/messages.module.scss'
- 
 
 3 
 
- 
 
 4 
const MessageTemplate = ({ message }) => {
Línea 2... Línea -...
2 
 
 - 
 
3 
const MessageTemplate = ({message}) => {
 5 
 
- 
 
 6 
    const isRightPosition = message.side === "right";
- 
 
 7 
 
- 
 
 8 
    const messageRenderer = (message) => {
- 
 
 9 
        const { type } = message;
- 
 
 10 
 
- 
 
 11 
        switch (type) {
4 
    const isRightPosition = message.side === "right";
 12 
            case "text":
5 
    return (
 13 
                return (
6 
        <div
 14 
                    <div
7 
            className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
 15 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
8 
            key={message.message}
 16 
                        key={message.message}
9 
        >
 17 
                    >
10 
            <div className="messg-usr-img">
 18 
                        <div className="messg-usr-img">
- 
 
 19 
                            <a href={message.sender_profile}>
- 
 
 20 
                                <img
- 
 
 21 
                                    src={message.sender_image}
- 
 
 22 
                                    className="cursor-pointer"
- 
 
 23 
                                    alt={message.sender_name}
- 
 
 24 
                                />
- 
 
 25 
                            </a>
- 
 
 26 
                        </div>
- 
 
 27 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
- 
 
 28 
                            <div className="message-inner-dt">
- 
 
 29 
                                <p className={`w-100 border-none bg-transparent ${'text-' + message.side}`}>{message.message}</p>
- 
 
 30 
                            </div>
- 
 
 31 
                            <span className="p-1">{message.date}</span>
- 
 
 32 
                        </div>
- 
 
 33 
                    </div>
- 
 
 34 
                );
- 
 
 35 
            case "image":
11 
                <a href={message.sender_profile}>
 36 
                return (
- 
 
 37 
                    <div
- 
 
 38 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
- 
 
 39 
                        key={message.message}
- 
 
 40 
                    >
- 
 
 41 
                        <div className="messg-usr-img">
- 
 
 42 
                            <a href={message.sender_profile}>
12 
                    <img
 43 
                                <img
13 
                        src={message.sender_image}
 44 
                                    src={message.sender_image}
14 
                        className="cursor-pointer"
 45 
                                    className="cursor-pointer"
- 
 
 46 
                                    alt={message.sender_name}
- 
 
 47 
                                />
- 
 
 48 
                            </a>
- 
 
 49 
                        </div>
- 
 
 50 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
- 
 
 51 
                            <div className="message-inner-dt">
- 
 
 52 
                                <img
- 
 
 53 
                                    src={message.filename}
- 
 
 54 
                                    alt={`${message.sender_name} message image`}
- 
 
 55 
                                />
- 
 
 56 
                            </div>
- 
 
 57 
                            <span className="p-1">{message.date}</span>
15 
                        alt={message.sender_name}
 58 
                        </div>
16 
                    />
 59 
                    </div>
- 
 
 60 
                );
- 
 
 61 
            case "video":
- 
 
 62 
                return (
- 
 
 63 
                    <div
- 
 
 64 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
17 
                </a>
 65 
                        key={message.message}
- 
 
 66 
                    >
- 
 
 67 
                        <div className="messg-usr-img">
- 
 
 68 
                            <a href={message.sender_profile}>
- 
 
 69 
                                <img
- 
 
 70 
                                    src={message.sender_image}
- 
 
 71 
                                    className="cursor-pointer"
- 
 
 72 
                                    alt={message.sender_name}
- 
 
 73 
                                />
- 
 
 74 
                            </a>
18 
            </div>
 75 
                        </div>
19 
            <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
 76 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
- 
 
 77 
                            <div className="message-inner-dt">
- 
 
 78 
                                <video src={message.filename} />
20 
                <div className="message-inner-dt">
 79 
                            </div>
- 
 
 80 
                            <span className="p-1">{message.date}</span>
21 
                    <p className={`w-100 border-none bg-transparent ${'text-'+message.side}`}>{message.message}</p>
 81 
                        </div>
- 
 
 82 
                    </div>
- 
 
 83 
                );
- 
 
 84 
            case "document":
- 
 
 85 
                return (
- 
 
 86 
                    <div
- 
 
 87 
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
- 
 
 88 
                        key={message.message}
- 
 
 89 
                    >
- 
 
 90 
                        <div className="messg-usr-img">
- 
 
 91 
                            <a href={message.sender_profile}>
- 
 
 92 
                                <img
- 
 
 93 
                                    src={message.sender_image}
- 
 
 94 
                                    className="cursor-pointer"
- 
 
 95 
                                    alt={message.sender_name}
- 
 
 96 
                                />
- 
 
 97 
                            </a>
- 
 
 98 
                        </div>
- 
 
 99 
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
- 
 
 100 
                            <div className="message-inner-dt">
- 
 
 101 
                                <img
- 
 
 102 
                                    className={styles.pdfImage}
- 
 
 103 
                                    src="/storage/type/default/filename/pdf.png"
- 
 
 104 
                                    alt="pdf"
- 
 
 105 
                                />
- 
 
 106 
                                <a href={m} target="_blank" className={styles.downloadBtn}>
- 
 
 107 
                                    <i className="fa ti-arrow-circle-down"></i>
- 
 
 108 
                                </a>
22 
                </div>
 109 
                            </div>
- 
 
 110 
                            <span className="p-1">{message.date}</span>
- 
 
 111 
                        </div>
23 
                <span className="p-1">{message.date}</span>
 112 
                    </div>
- 
 
 113 
                );
- 
 
 114 
            default:
24 
            </div>
 115 
                break;
25 
        </div>
 116 
        }
- 
 
 117 
    };
- 
 
 118 
 
- 
 
 119 
    return messageRenderer(message)
26 
    )
 120 
 
27 
}
 121 
}
28 
export default MessageTemplate
 122 
export default MessageTemplate