· 6 years ago · Mar 10, 2020, 07:00 PM
1*Parent Component*
2
3
4import React from 'react';
5import { IonModal } from '@ionic/react';
6import Chat from './Chat/Chat';
7import api from '../../../services/api';
8import "bootstrap/dist/css/bootstrap.css";
9import "../../../lara.css";
10
11const contatos = require('../../../mockups/contatos-listar.json');
12
13let contatos_array : any = [];
14
15
16class ContatosList extends React.Component<any, { showModal: boolean, chatNumber: string}> {
17
18 constructor(props: any){
19 super(props);
20
21 this.state = {
22 showModal: false,
23 chatNumber: '0',
24 };
25
26 this.loadModal = this.loadModal.bind(this);
27 this.closeModal = this.closeModal.bind(this);
28
29 const contatosLista = contatos.dados.map((contato: any, key: any ) => {
30
31 let options ={
32 li_id: `chat-list-box-${contato.telefone}`,
33 img_class: `img-chat-${contato.telefone} rounded-circle ml-auto mr-auto`,
34 };
35
36 contatos_array.push(
37 <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)}>
38 <div className="row">
39 <div id="teste" className="col-3 col-md-2 text-center">
40 <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%)" }}>
41 0
42 </div>
43 <img id="img" className={options.img_class} alt="" style={{ width: "40px", height: "40px", objectFit: "cover" }} src={contato.imagem} />
44 </div>
45 <div className="col-9 col-md-10 l-col-9 l-col-md-10">
46 <div className="row align-items-center">
47 <i className="fab fa-whatsapp" style={{ color: "#25D366", height: "14px", top: "50%" }} aria-hidden="true" />
48 <span className="font-weight-bold text-truncate" style={{ fontSize: "4vw" }}>
49 {contato.nome}
50 </span>
51 </div>
52 <div className="row text-truncate">
53 <div className="font-weight-bold">
54 <div className="small">
55 <i className="fas fa-user" aria-hidden="true" />
56 <span id="c-atual-fd3f7f35-bfcb-41e3-b764-d770c495b78d" className="ml-2 text-truncate">
57 </span>
58 </div>
59 </div>
60 </div>
61 </div>
62 </div>
63 </li>
64 );
65
66 });
67 }
68
69 loadModal = (telefone: any) => this.setState({ showModal: true, chatNumber: telefone });
70
71 closeModal = () => this.setState({ showModal: false, chatNumber: '0' });
72
73 render(){
74 return (
75 <>
76 <IonModal isOpen={this.state.showModal}>
77 <Chat actionsModal={this.closeModal}/>
78 </IonModal>
79
80 <div id="chat-list" style={{ overflow: 'auto', height: 'calc( 100vh - 140px )' }}>{contatos_array}</div>
81 </>
82 )
83 }
84
85}
86
87export default ContatosList;
88
89
90*Child Component*
91
92import React from 'react';
93import ChatMessage from '../Chat/ChatMessage';
94import ChatHeader from '../Chat/ChatHeader';
95import ChatFooter from '../Chat/ChatFooter';
96
97class Chat extends React.Component<any, any>{
98 constructor(props: any){
99 super(props);
100 }
101
102
103
104 render(){
105 return (
106 <div id="lara-chat-all" className="lara-chats-conteudo-dialogo" style={{height: '100vh', overflowY: 'hidden'}}>
107 {/* <ChatHeader /> */}
108 <div id="c-header" className="lara-chats-conteudo-dialogo-header" style={{cursor: 'pointer'}}>
109 <div id="chat-line" className="h-100">
110 <div className="d-flex" style={{top: '50%', transform: 'translate(0,-50%)', position: 'relative'}}>
111 <div className="col-3 col-lg-1">
112 <div id="c-img" className="row" style={{top: '50%', transform: 'translate(0,-50%)', position: 'inherit'}}>
113 <div className="col-12 text-center">
114 <div className="d-flex">
115 <div className="mr-2 ml-auto" style={{}}>
116 <div className="btn">
117 <i id="c-left" className="fas fa-arrow-left" onClick={this.props.actionsModal}/>
118 </div>
119 </div>
120 <img className="rounded-circle ml-auto mr-auto" style={{width: '40px !important', height: '40px'}} />
121 </div>
122 </div>
123 </div>
124 </div>
125 <div id="c-apoio" className="col-7">
126 <div className="row" style={{marginLeft: '15px !important'}}>
127 <div id="c-nome" className="col-12 text-truncate font-weight-bold" />
128 <div id="c-origem" className="col-12 text-truncate">
129 <small />
130 </div>
131 </div>
132 </div>
133 <div className="ml-md-auto col-3">
134 <div id="header-btns" className="row" style={{top: '50%', transform: 'translate(0,-50%)', position: 'inherit'}}>
135 <div id="dropdownClip" className="dropdown ml-auto">
136 <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'}}>
137 <i id="c-anexo" className="fas fa-paperclip" />
138 </div>
139 <ul id="dropdown-clip" className="dropdown-menu" aria-labelledby="dropdownMenuButton">
140 <li id="anexo_li" className="dropdown-item dropdown-item-small" style={{marginBottom: '-0.6em'}}>
141 <label className="btn-file" id="btn-anexo" style={{cursor: 'pointer', color: '#212529'}}>
142 Enviar Arquivos
143 <input type="file" name="file" id="anexo_envio" multiple />
144 </label>
145 </li>
146 <button type="button" id="c-preview" className="dropdown-item dropdown-item-small">Enviar Preview</button>
147 <button type="button" id="c-link" className="dropdown-item dropdown-item-small">Enviar Link</button>
148 <button type="button" id="c-link-pagamento" className="dropdown-item dropdown-item-small">Enviar Link pagamento</button>
149 <button type="button" id="c-resposta" className="dropdown-item dropdown-item-small">Enviar Resposta automática</button>
150 <button type="button" id="c-contato" className="dropdown-item dropdown-item-small">Enviar Contato</button>
151 <button type="button" id="c-location" className="dropdown-item dropdown-item-small">Enviar Localização</button>
152 </ul>
153 </div>
154 <div id="dropdownEllipsis" className="dropdown mr-md-3" style={{}}>
155 <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'}}>
156 <i id="c-more" className="fas fa-ellipsis-v" />
157 </div>
158 <div id="dropdown-ellipsis" className="dropdown-menu" aria-labelledby="dropdownMenuLink">
159 <button type="button" id="c-dados-contato" className="dropdown-item dropdown-item-small">Dados do contato</button>
160 <button type="button" id="c-transferir" className="dropdown-item dropdown-item-small">Transferir</button>
161 <button type="button" id="c-lembrete" className="dropdown-item dropdown-item-small">Lembrete</button>
162 <div role="separator" className="dropdown-divider" />
163 <button type="button" id="c-recover" className="dropdown-item dropdown-item-small">Recuperar Histórico</button>
164 <div role="separator" className="dropdown-divider" />
165 <button type="button" id="c-log" className="dropdown-item dropdown-item-small">Log</button>
166 <button type="button" id="c-end" className="dropdown-item dropdown-item-small">Encerrar</button>
167 </div>
168 </div>
169 </div>
170 </div>
171 </div>
172 </div>
173 </div>
174 <div id="lara-chats-msgs" className="lara-chats-conteudo-dialogo-conteudo" style={{overflowY: 'auto', overflowX: 'hidden'}}>
175 <ChatMessage />
176 </div>
177 <ChatFooter />
178 </div>
179 )
180 }
181}
182
183export default Chat;