· 6 years ago · Mar 06, 2020, 10:36 PM
1Arquivo 1 (ContatosList.tsx):
2
3import React from 'react';
4import { IonModal } from '@ionic/react';
5import Chat from './Chat/Chat';
6import api from '../../../services/api';
7import "bootstrap/dist/css/bootstrap.css";
8import "../../../lara.css";
9
10const contatos = require('../../../mockups/contatos-listar.json');
11
12let contatos_array : any = [];
13
14
15class ContatosList extends React.Component<any, { showModal: boolean, chatNumber: string}> {
16
17 constructor(props: any){
18 super(props);
19
20 this.state = {
21 showModal: false,
22 chatNumber: '0',
23 };
24
25 this.loadModal = this.loadModal.bind(this);
26
27 const contatosLista = contatos.dados.map((contato: any, key: any ) => {
28
29 let options ={
30 li_id: `chat-list-box-${contato.telefone}`,
31 img_class: `img-chat-${contato.telefone} rounded-circle ml-auto mr-auto`,
32 };
33
34 contatos_array.push(
35 <li id={options.li_id} className="list-group-item list-group-item-chat list-group-item-action chatboxes" style={{ cursor: "pointer" }} onClick={() => this.loadModal(contato.telefone)}>
36 <div className="row">
37 <div id="teste" className="col-3 col-md-2 text-center">
38 <div id="chat-list-box-alert-fd3f7f35-bfcb-41e3-b764-d770c495b78d" className="bg-danger rounded-circle" style={{ display: "none", color: "white", fontSize: "x-small", marginTop: "1px", maxHeight: "18px", minHeight: "18px", maxWidth: "18px", minWidth: "18px", top: "20%", left: "35%", transform: "translate(-50%,-50%)" }}>
39 0
40 </div>
41 <img id="img" className={options.img_class} alt="" style={{ width: "40px", height: "40px", objectFit: "cover" }} src={contato.imagem} />
42 </div>
43 <div className="col-9 col-md-10 l-col-9 l-col-md-10">
44 <div className="row align-items-center">
45 <i className="fab fa-whatsapp" style={{ color: "#25D366", height: "14px", top: "50%" }} aria-hidden="true" />
46 <span className="font-weight-bold text-truncate" style={{ fontSize: "4vw" }}>
47 {contato.nome}
48 </span>
49 </div>
50 <div className="row text-truncate">
51 <div className="font-weight-bold">
52 <div className="small">
53 <i className="fas fa-user" aria-hidden="true" />
54 <span id="c-atual-fd3f7f35-bfcb-41e3-b764-d770c495b78d" className="ml-2 text-truncate">
55 </span>
56 </div>
57 </div>
58 </div>
59 </div>
60 </div>
61 </li>
62 );
63
64 });
65 }
66
67 loadModal = (telefone: string) => {
68 this.setState({ showModal: true, chatNumber: telefone });
69 }
70
71 render(){
72 return (
73 <>
74 <IonModal isOpen={this.state.showModal}>
75 <Chat func={this.loadModal}/>
76 </IonModal>
77
78 <div id="chat-list" style={{ overflow: 'auto', height: 'calc( 100vh - 140px )' }}>{contatos_array}</div>
79 </>
80 )
81 }
82
83}
84
85export default ContatosList;
86
87Arquivo 2 (Chat.tsx):
88
89import React from 'react';
90
91class Chat extends React.Component<any, any>{
92 constructor(props: any){
93 super(props);
94 }
95
96 render(){
97 return (
98 <div id="lara-chat-all" className="lara-chats-conteudo-dialogo" style={{height: '100vh !important', overflowY: 'hidden'}}>
99 <div id="c-header" className="lara-chats-conteudo-dialogo-header" style={{cursor: 'pointer'}}>
100 <div id="chat-line" className="h-100">
101 <div className="d-flex" style={{top: '50%', transform: 'translate(0,-50%)', position: 'relative'}}>
102 <div className="col-3 col-lg-1">
103 <div id="c-img" className="row" style={{top: '50%', transform: 'translate(0,-50%)', position: 'inherit'}}>
104 <div className="col-12 text-center">
105 <div className="d-flex">
106 <div className="mr-2 ml-auto" style={{}}>
107 <div className="btn" style={{}} onClick={this.props.func}>
108 <i id="c-left" className="fas fa-arrow-left" />
109 </div>
110 </div>
111 <img className="rounded-circle ml-auto mr-auto" style={{width: '40px !important', height: '40px'}} />
112 </div>
113 </div>
114 </div>
115 </div>
116 <div id="c-apoio" className="col-7">
117 <div className="row" style={{marginLeft: '15px !important'}}>
118 <div id="c-nome" className="col-12 text-truncate font-weight-bold" />
119 <div id="c-origem" className="col-12 text-truncate">
120 <small />
121 </div>
122 </div>
123 </div>
124 <div className="ml-md-auto col-3">
125 <div id="header-btns" className="row" style={{top: '50%', transform: 'translate(0,-50%)', position: 'inherit'}}>
126 <div id="dropdownClip" className="dropdown ml-auto">
127 <div className="btn dropdown-toggle" id="dropdownMenuButton" data-name="dropdown-clip" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={{border: '0px solid transparent'}}>
128 <i id="c-anexo" className="fas fa-paperclip" />
129 </div>
130 <ul id="dropdown-clip" className="dropdown-menu" aria-labelledby="dropdownMenuButton">
131 <li id="anexo_li" className="dropdown-item dropdown-item-small" style={{marginBottom: '-0.6em'}}>
132 <label className="btn-file" id="btn-anexo" style={{cursor: 'pointer', color: '#212529'}}>
133 Enviar Arquivos
134 <input type="file" name="file" id="anexo_envio" multiple />
135 </label>
136 </li>
137 <button type="button" id="c-preview" className="dropdown-item dropdown-item-small">Enviar Preview</button>
138 <button type="button" id="c-link" className="dropdown-item dropdown-item-small">Enviar Link</button>
139 <button type="button" id="c-link-pagamento" className="dropdown-item dropdown-item-small">Enviar Link pagamento</button>
140 <button type="button" id="c-resposta" className="dropdown-item dropdown-item-small">Enviar Resposta automática</button>
141 <button type="button" id="c-contato" className="dropdown-item dropdown-item-small">Enviar Contato</button>
142 <button type="button" id="c-location" className="dropdown-item dropdown-item-small">Enviar Localização</button>
143 </ul>
144 </div>
145 <div id="dropdownEllipsis" className="dropdown mr-md-3" style={{}}>
146 <div className="btn dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" data-name="dropdown-ellipsis" aria-haspopup="true" aria-expanded="false" style={{border: '0px solid transparent'}}>
147 <i id="c-more" className="fas fa-ellipsis-v" />
148 </div>
149 <div id="dropdown-ellipsis" className="dropdown-menu" aria-labelledby="dropdownMenuLink">
150 <button type="button" id="c-dados-contato" className="dropdown-item dropdown-item-small">Dados do contato</button>
151 <button type="button" id="c-transferir" className="dropdown-item dropdown-item-small">Transferir</button>
152 <button type="button" id="c-lembrete" className="dropdown-item dropdown-item-small">Lembrete</button>
153 <div role="separator" className="dropdown-divider" />
154 <button type="button" id="c-recover" className="dropdown-item dropdown-item-small">Recuperar Histórico</button>
155 <div role="separator" className="dropdown-divider" />
156 <button type="button" id="c-log" className="dropdown-item dropdown-item-small">Log</button>
157 <button type="button" id="c-end" className="dropdown-item dropdown-item-small">Encerrar</button>
158 </div>
159 </div>
160 </div>
161 </div>
162 </div>
163 </div>
164 </div>
165 <div id="send-header" style={{ cursor: 'pointer', backgroundColor: '#EEEEEE', display: 'none'}} className="lara-chats-conteudo-dialogo-header">
166 <div className="col-12 d-flex" style={{top: '50%', position: 'inherit', transform: 'translate(0,-50%)'}}>
167 <div className="btn" data-toggle="tooltip" data-placement="bottom" title="Cancelar envio"><i className="fas fa-times" style={{color: '#424242'}} /></div>
168 <div className="btn mr-auto" style={{color: 'white', display: 'none'}} />
169 <div className="btn ml-auto" data-toggle="tooltip" data-placement="bottom" title="Encaminhar mensagens"><i className="fas fa-share" style={{color: '#424242'}} /></div>
170 </div>
171 </div>
172 <div id="lara-chats-msgs" className="lara-chats-conteudo-dialogo-conteudo" style={{overflowY: 'auto', overflowX: 'hidden'}}>
173 </div>
174 <div className="lara-chats-conteudo-dialogo-rodape">
175 <div className="col-12 h-100" style={{bottom: '0px !important', backgroundColor: 'whitesmoke !important'}}>
176 <div id="chat-line-body" className="d-flex" style={{height: '100%'}}>
177 <div className="d-none d-sm-none d-md-block col-2 col-md-1">
178 <div id="mic-div" className="btn btn-sm btn-transparent rounded-circle" style={{justifyContent: 'center', top: '50%', left: '50%', transform: 'translate(-42%,-50%)', position: 'absolute'}}>
179 <i aria-hidden="true" className="fas fa-microphone ml-auto mr-auto btn-microfone" style={{fontSize: '1.5rem', color: '#adadad'}} id="mic-user" />
180 </div>
181 </div>
182 <div id="chat-text-body" className="col-10 col-md-10 py-2">
183 <textarea id="sendusermsg" className="form-control mt-2" aria-label="Com textarea" style={{height: '6vh', marginTop: '2vh !important', marginBottom: '2vh !important', backgroundColor: 'transparent', outline: 0, resize: 'none'}} />
184 </div>
185 <div className="d-none d-sm-none d-md-block col-2 col-md-1">
186 <div id="send-div" className="btn btn-transparent" style={{justifyContent: 'center', top: '50%', left: '50%', position: 'inherit', transform: 'translate(-50%,-50%)'}}>
187 <i id="send-btn-msg" aria-hidden="true" className="fas fa-arrow-circle-right ml-auto mr-auto" style={{fontSize: '1.5rem', color: '#adadad'}} />
188 </div>
189 </div>
190 <div className="col-2 d-block d-sm-block d-md-none">
191 <div id="mbl_chat" className="row">
192 <div id="mic_col" className="col-2 col-md-1">
193 <div id="mic-div-mb" className="btn btn-sm btn-saffron-mango rounded-circle" style={{justifyContent: 'center', top: '50%', left: '50%', transform: 'translate(-49%,44%)', position: 'inherit'}}>
194 <i aria-hidden="true" id="mic-user" className="fas fa-microphone ml-auto mr-auto btn-microfone" style={{fontSize: '1.5rem'}} />
195 </div>
196 </div>
197 <div id="send_col" className="col-2 col-md-2" style={{display: 'none'}}>
198 <div id="send-div" className="btn btn-transparent" style={{justifyContent: 'center', top: '50%', left: '50%', transform: 'translate(-46%,26%)', position: 'inherit'}}>
199 <i id="send-btn-msg" aria-hidden="true" className="fas fa-arrow-circle-right ml-auto mr-auto" style={{fontSize: '1.5rem', color: '#adadad'}} />
200 </div>
201 </div>
202 </div>
203 </div>
204 <input type="hidden" id="historico_cont" />
205 <input type="hidden" id="historico_idorigem" />
206 <input type="hidden" id="historico_sessao" />
207 <div className="row" style={{backgroundColor: 'blue', height: '100px', display: 'none'}}>
208 <input id="encodingTypeSelect" type="hidden" />
209 <h3>Log</h3>
210 <pre id="log" />
211 <h3>Recordings</h3>
212 <ol id="recordingsList" />
213 <div id="controls" />
214 <div id="formats" />
215 </div>
216 </div>
217 </div>
218 </div>
219 </div>
220 )
221 }
222
223
224
225
226
227}
228
229export default Chat;