Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Arquivo 1 (ContatosList.tsx):
- import React from 'react';
- import { IonModal } from '@ionic/react';
- import Chat from './Chat/Chat';
- import api from '../../../services/api';
- import "bootstrap/dist/css/bootstrap.css";
- import "../../../lara.css";
- const contatos = require('../../../mockups/contatos-listar.json');
- let contatos_array : any = [];
- class ContatosList extends React.Component<any, { showModal: boolean, chatNumber: string}> {
- constructor(props: any){
- super(props);
- this.state = {
- showModal: false,
- chatNumber: '0',
- };
- this.loadModal = this.loadModal.bind(this);
- const contatosLista = contatos.dados.map((contato: any, key: any ) => {
- let options ={
- li_id: `chat-list-box-${contato.telefone}`,
- img_class: `img-chat-${contato.telefone} rounded-circle ml-auto mr-auto`,
- };
- contatos_array.push(
- <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)}>
- <div className="row">
- <div id="teste" className="col-3 col-md-2 text-center">
- <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%)" }}>
- 0
- </div>
- <img id="img" className={options.img_class} alt="" style={{ width: "40px", height: "40px", objectFit: "cover" }} src={contato.imagem} />
- </div>
- <div className="col-9 col-md-10 l-col-9 l-col-md-10">
- <div className="row align-items-center">
- <i className="fab fa-whatsapp" style={{ color: "#25D366", height: "14px", top: "50%" }} aria-hidden="true" />
- <span className="font-weight-bold text-truncate" style={{ fontSize: "4vw" }}>
- {contato.nome}
- </span>
- </div>
- <div className="row text-truncate">
- <div className="font-weight-bold">
- <div className="small">
- <i className="fas fa-user" aria-hidden="true" />
- <span id="c-atual-fd3f7f35-bfcb-41e3-b764-d770c495b78d" className="ml-2 text-truncate">
- </span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </li>
- );
- });
- }
- loadModal = (telefone: string) => {
- this.setState({ showModal: true, chatNumber: telefone });
- }
- render(){
- return (
- <>
- <IonModal isOpen={this.state.showModal}>
- <Chat func={this.loadModal}/>
- </IonModal>
- <div id="chat-list" style={{ overflow: 'auto', height: 'calc( 100vh - 140px )' }}>{contatos_array}</div>
- </>
- )
- }
- }
- export default ContatosList;
- Arquivo 2 (Chat.tsx):
- import React from 'react';
- class Chat extends React.Component<any, any>{
- constructor(props: any){
- super(props);
- }
- render(){
- return (
- <div id="lara-chat-all" className="lara-chats-conteudo-dialogo" style={{height: '100vh !important', overflowY: 'hidden'}}>
- <div id="c-header" className="lara-chats-conteudo-dialogo-header" style={{cursor: 'pointer'}}>
- <div id="chat-line" className="h-100">
- <div className="d-flex" style={{top: '50%', transform: 'translate(0,-50%)', position: 'relative'}}>
- <div className="col-3 col-lg-1">
- <div id="c-img" className="row" style={{top: '50%', transform: 'translate(0,-50%)', position: 'inherit'}}>
- <div className="col-12 text-center">
- <div className="d-flex">
- <div className="mr-2 ml-auto" style={{}}>
- <div className="btn" style={{}} onClick={this.props.func}>
- <i id="c-left" className="fas fa-arrow-left" />
- </div>
- </div>
- <img className="rounded-circle ml-auto mr-auto" style={{width: '40px !important', height: '40px'}} />
- </div>
- </div>
- </div>
- </div>
- <div id="c-apoio" className="col-7">
- <div className="row" style={{marginLeft: '15px !important'}}>
- <div id="c-nome" className="col-12 text-truncate font-weight-bold" />
- <div id="c-origem" className="col-12 text-truncate">
- <small />
- </div>
- </div>
- </div>
- <div className="ml-md-auto col-3">
- <div id="header-btns" className="row" style={{top: '50%', transform: 'translate(0,-50%)', position: 'inherit'}}>
- <div id="dropdownClip" className="dropdown ml-auto">
- <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'}}>
- <i id="c-anexo" className="fas fa-paperclip" />
- </div>
- <ul id="dropdown-clip" className="dropdown-menu" aria-labelledby="dropdownMenuButton">
- <li id="anexo_li" className="dropdown-item dropdown-item-small" style={{marginBottom: '-0.6em'}}>
- <label className="btn-file" id="btn-anexo" style={{cursor: 'pointer', color: '#212529'}}>
- Enviar Arquivos
- <input type="file" name="file" id="anexo_envio" multiple />
- </label>
- </li>
- <button type="button" id="c-preview" className="dropdown-item dropdown-item-small">Enviar Preview</button>
- <button type="button" id="c-link" className="dropdown-item dropdown-item-small">Enviar Link</button>
- <button type="button" id="c-link-pagamento" className="dropdown-item dropdown-item-small">Enviar Link pagamento</button>
- <button type="button" id="c-resposta" className="dropdown-item dropdown-item-small">Enviar Resposta automática</button>
- <button type="button" id="c-contato" className="dropdown-item dropdown-item-small">Enviar Contato</button>
- <button type="button" id="c-location" className="dropdown-item dropdown-item-small">Enviar Localização</button>
- </ul>
- </div>
- <div id="dropdownEllipsis" className="dropdown mr-md-3" style={{}}>
- <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'}}>
- <i id="c-more" className="fas fa-ellipsis-v" />
- </div>
- <div id="dropdown-ellipsis" className="dropdown-menu" aria-labelledby="dropdownMenuLink">
- <button type="button" id="c-dados-contato" className="dropdown-item dropdown-item-small">Dados do contato</button>
- <button type="button" id="c-transferir" className="dropdown-item dropdown-item-small">Transferir</button>
- <button type="button" id="c-lembrete" className="dropdown-item dropdown-item-small">Lembrete</button>
- <div role="separator" className="dropdown-divider" />
- <button type="button" id="c-recover" className="dropdown-item dropdown-item-small">Recuperar Histórico</button>
- <div role="separator" className="dropdown-divider" />
- <button type="button" id="c-log" className="dropdown-item dropdown-item-small">Log</button>
- <button type="button" id="c-end" className="dropdown-item dropdown-item-small">Encerrar</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="send-header" style={{ cursor: 'pointer', backgroundColor: '#EEEEEE', display: 'none'}} className="lara-chats-conteudo-dialogo-header">
- <div className="col-12 d-flex" style={{top: '50%', position: 'inherit', transform: 'translate(0,-50%)'}}>
- <div className="btn" data-toggle="tooltip" data-placement="bottom" title="Cancelar envio"><i className="fas fa-times" style={{color: '#424242'}} /></div>
- <div className="btn mr-auto" style={{color: 'white', display: 'none'}} />
- <div className="btn ml-auto" data-toggle="tooltip" data-placement="bottom" title="Encaminhar mensagens"><i className="fas fa-share" style={{color: '#424242'}} /></div>
- </div>
- </div>
- <div id="lara-chats-msgs" className="lara-chats-conteudo-dialogo-conteudo" style={{overflowY: 'auto', overflowX: 'hidden'}}>
- </div>
- <div className="lara-chats-conteudo-dialogo-rodape">
- <div className="col-12 h-100" style={{bottom: '0px !important', backgroundColor: 'whitesmoke !important'}}>
- <div id="chat-line-body" className="d-flex" style={{height: '100%'}}>
- <div className="d-none d-sm-none d-md-block col-2 col-md-1">
- <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'}}>
- <i aria-hidden="true" className="fas fa-microphone ml-auto mr-auto btn-microfone" style={{fontSize: '1.5rem', color: '#adadad'}} id="mic-user" />
- </div>
- </div>
- <div id="chat-text-body" className="col-10 col-md-10 py-2">
- <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'}} />
- </div>
- <div className="d-none d-sm-none d-md-block col-2 col-md-1">
- <div id="send-div" className="btn btn-transparent" style={{justifyContent: 'center', top: '50%', left: '50%', position: 'inherit', transform: 'translate(-50%,-50%)'}}>
- <i id="send-btn-msg" aria-hidden="true" className="fas fa-arrow-circle-right ml-auto mr-auto" style={{fontSize: '1.5rem', color: '#adadad'}} />
- </div>
- </div>
- <div className="col-2 d-block d-sm-block d-md-none">
- <div id="mbl_chat" className="row">
- <div id="mic_col" className="col-2 col-md-1">
- <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'}}>
- <i aria-hidden="true" id="mic-user" className="fas fa-microphone ml-auto mr-auto btn-microfone" style={{fontSize: '1.5rem'}} />
- </div>
- </div>
- <div id="send_col" className="col-2 col-md-2" style={{display: 'none'}}>
- <div id="send-div" className="btn btn-transparent" style={{justifyContent: 'center', top: '50%', left: '50%', transform: 'translate(-46%,26%)', position: 'inherit'}}>
- <i id="send-btn-msg" aria-hidden="true" className="fas fa-arrow-circle-right ml-auto mr-auto" style={{fontSize: '1.5rem', color: '#adadad'}} />
- </div>
- </div>
- </div>
- </div>
- <input type="hidden" id="historico_cont" />
- <input type="hidden" id="historico_idorigem" />
- <input type="hidden" id="historico_sessao" />
- <div className="row" style={{backgroundColor: 'blue', height: '100px', display: 'none'}}>
- <input id="encodingTypeSelect" type="hidden" />
- <h3>Log</h3>
- <pre id="log" />
- <h3>Recordings</h3>
- <ol id="recordingsList" />
- <div id="controls" />
- <div id="formats" />
- </div>
- </div>
- </div>
- </div>
- </div>
- )
- }
- }
- export default Chat;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement