Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 811 | Rev 835 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from 'react'
2 
 
747 stevensc 3 
export default ({ messages, selectedConversation, onSend, backendVars, getMoreMessages }) => {
1 www 4 
    const [text, setText] = React.useState('')
765 stevensc 5 
 
1 www 6 
    const handleScroll = (event) => {
7 
        const node = event.target;
763 stevensc 8 
        if (node.clientHeight >= (node.scrollHeight * .62)) {
1 www 9 
            getMoreMessages()
763 stevensc 10 
        }
1 www 11 
    }
12 
    const paneDidMount = (node) => {
747 stevensc 13 
        if (node) {
14 
            node.addEventListener("scroll", handleScroll.bind(this));
1 www 15 
        }
16 
    }
747 stevensc 17 
    return (
1 www 18 
        <React.Fragment>
19 
            <div className="main-conversation-box">
20 
                {
21 
                    !selectedConversation
747 stevensc 22 
                        ?
811 stevensc 23 
                        <div className="message-bar-head">
24 
                            <div className="usr-mg-info">
25 
                                <h3>No hay mensajes</h3>
26 
                            </div>
27 
                        </div>
747 stevensc 28 
                        :
1 www 29 
                        <React.Fragment>
30 
                            <div
31 
                                className="message-bar-head"
32 
                            >
33 
                                <div className="usr-msg-details">
34 
                                    <div className="usr-ms-img">
778 stevensc 35 
                                        <img src={selectedConversation.image} alt={`${selectedConversation.name} avatars`} />
1 www 36 
                                    </div>
37 
                                    <div className="usr-mg-info">
38 
                                        <h3>{selectedConversation.name}</h3>
39 
                                        <p>Online</p>
40 
                                    </div>
41 
                                </div>
42 
                                <div className="ed-opts">
828 stevensc 43 
                                    <i className="la la-ellipsis-v icon"></i>
1 www 44 
                                    <ul className="ed-options">
45 
                                        <li><a href="#" className="btn-clean-messages" title="">Limpiar </a></li>
46 
                                        <li><a href="#" className="btn-delete-conversation" title="">Borrar</a></li>
47 
                                        <li><a href="#" className="btn-block-user" title="">Bloquear</a></li>
48 
                                    </ul>
49 
                                </div>
50 
                            </div>
51 
                            <div
52 
                                className="messages-line overflow-auto"
53 
                                style={{
54 
                                    display: 'flex',
777 stevensc 55 
                                    flexDirection: 'column-reverse',
1 www 56 
                                    backgroundColor: 'white'
57 
                                }}
58 
                                ref={paneDidMount}
59 
                            >
60 
                                {
750 stevensc 61 
                                    (messages)
62 
                                    &&
63 
                                    (
781 stevensc 64 
                                        messages.map((element, i) => {
1 www 65 
                                            const isLeft = element.side === 'left'
747 stevensc 66 
                                            return (
1 www 67 
                                                <div
783 stevensc 68 
                                                    className={`main-message-box ${isLeft ? 'st3' : 'ta-right'}`}
1 www 69 
                                                    key={element.message}
70 
                                                >
783 stevensc 71 
                                                    <div className="messg-usr-img">
780 stevensc 72 
                                                        <img
73 
                                                            src={element.sender_image}
74 
                                                            onClick={() => window.location.href = element.sender_profile}
75 
                                                            className="cursor-pointer"
76 
                                                            alt={element.sender_name}
77 
                                                        />
78 
                                                    </div>
755 stevensc 79 
                                                    <div
80 
                                                        className="message-dt"
1 www 81 
                                                    >
82 
                                                        <div
83 
                                                            className="message-inner-dt"
747 stevensc 84 
 
1 www 85 
                                                        >
86 
                                                            <p className='w-100'>{element.message}</p>
87 
                                                        </div>
88 
                                                        <span>{element.date}</span>
89 
                                                    </div>
90 
                                                </div>
91 
                                            )
92 
                                        })
93 
                                    )
94 
                                }
95 
                            </div>
96 
                            <div className="message-send-area">
97 
                                <form id="form-send-message" name="form-send-message"
98 
                                    onSubmit={e => {
99 
                                        e.preventDefault()
100 
                                        onSend(text)
101 
                                        setText('')
102 
                                    }}
103 
                                >
104 
                                    <div className="mf-field">
105 
                                        <input
106 
                                            type="text"
107 
                                            name="message"
108 
                                            id="message"
109 
                                            value={text}
110 
                                            placeholder={backendVars.labelWriteMessage}
111 
                                            onChange={e => {
112 
                                                setText(e.target.value || '')
113 
                                            }}
114 
                                        />
808 stevensc 115 
                                        <button type="submit">
809 stevensc 116 
                                            <i class="fas fa-paper-plane"></i>
808 stevensc 117 
                                            {backendVars.labelSend}
118 
                                        </button>
1 www 119 
                                    </div>
120 
                                </form>
121 
                            </div>
122 
                        </React.Fragment>
123 
                }
124 
            </div>
125 
        </React.Fragment>
126 
    )
127 
}