Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
1191 stevensc 1 
import React, { useState } from "react";
1 www 2 
import parse from "html-react-parser";
3 
import styled from "styled-components";
1191 stevensc 4 
import LikeButton from "../like-button/LikeButton";
1 www 5 
 
6 
const StyledChatImgMessage = styled.div`
7 
  display: flex;
8 
  justify-content: center;
9 
  align-items: center;
10 
  position: initial !important;
11 
  transform: initial !important;
12 
  .chat_image_container {
13 
    video {
1305 stevensc 14 
      width: 100%;
1 www 15 
      outline: none;
16 
    }
17 
    img {
18 
      width: 150px;
19 
      max-height: 200px;
20 
    }
21 
    .pdf {
22 
      width: 40px;
23 
    }
24 
  }
25 
  .chat_image__download_button {
26 
    margin-left: 0.5rem;
27 
    .fa {
28 
      font-size: 1.5rem;
29 
      color: black;
30 
    }
31 
  }
32 
`;
33 
 
1305 stevensc 34 
const ResponseMessageContainer = styled.div`
35 
  display: flex;
36 
  flex-direction: column;
37 
  text-align: center;
38 
  gap: 10px;
1306 stevensc 39 
  align-items: ${props => props.isRight ? 'flex-end' : 'flex-start'};
1305 stevensc 40 
`
41 
 
1298 stevensc 42 
const MessageTemplate = ({ message, setResponseMessage, responseMessage }) => {
1191 stevensc 43 
 
44 
  const [isShow, setIsShow] = useState(false);
1198 stevensc 45 
  const [isLiked, setIsLiked] = useState(false);
46 
 
1 www 47 
  const senderName = (message) => {
48 
    if (message.type === "group") {
49 
      return message.u === 1 ? "" : message.user_name;
50 
    }
51 
  };
1191 stevensc 52 
 
1198 stevensc 53 
  const handleLike = () => {
54 
    setIsLiked(!isLiked)
1199 stevensc 55 
    setIsShow(!isShow)
1198 stevensc 56 
  }
57 
 
1 www 58 
  switch (message.mtype) {
59 
    case "text":
60 
      return (
61 
        <li
62 
          key={message.id}
1305 stevensc 63 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 64 
        >
1305 stevensc 65 
          <div className="conversation-text">
66 
            <div className="conversation_container">
1198 stevensc 67 
              {
1305 stevensc 68 
                responseMessage
1198 stevensc 69 
                &&
1306 stevensc 70 
                <ResponseMessageContainer isRight={message.u === 1}>
1305 stevensc 71 
                  <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
72 
                  <div className="ctext-wrap">
73 
                    {senderName(responseMessage)}
74 
                    <p className="">
75 
                      {parse(emojione.shortnameToImage(responseMessage.m))}
76 
                      <br />
77 
                    </p>
78 
                  </div>
79 
                </ResponseMessageContainer>
80 
              }
81 
              <div className="conversation-text">
82 
                <div className="ctext-wrap">
83 
                  {senderName(message)}
84 
                  <p className="">
85 
                    {parse(emojione.shortnameToImage(message.m))}
86 
                    <br />
87 
                    <i className="text-right">{message.time}</i>
88 
                  </p>
89 
                  {
90 
                    isLiked
91 
                    &&
92 
                    <i
93 
                      className="fas fa-heart"
94 
                      style={{
95 
                        color: '#0961bf',
96 
                        position: 'absolute',
97 
                        top: '87%',
98 
                        left: '85%'
99 
                      }}
100 
                    />
101 
                  }
102 
                </div>
1198 stevensc 103 
                <i
1305 stevensc 104 
                  className="la la-ellipsis-v icon"
105 
                  style={{ position: 'relative' }}
106 
                  onClick={() => setIsShow(!isShow)}
1298 stevensc 107 
                >
1305 stevensc 108 
                </i>
109 
                {
110 
                  isShow
111 
                  &&
112 
                  <div
113 
                    className="display-reactions"
114 
                  >
115 
                    <LikeButton
116 
                      onClick={handleLike}
117 
                    />
118 
                    <button
119 
                      type="button"
120 
                      onClick={() => setResponseMessage(message)}
121 
                    >
122 
                      <i className="fa fa-reply"></i>
123 
                    </button>
124 
                  </div>
125 
                }
1197 stevensc 126 
              </div>
1305 stevensc 127 
            </div>
1 www 128 
          </div>
129 
        </li>
130 
      );
131 
    case "image":
132 
      return (
133 
        <li
134 
          key={message.id}
1189 stevensc 135 
          className={`clearfix ${message.u === 1 ? "odd" : ""
136 
            } m-t-10 conversers${message.u}`}
1 www 137 
        >
138 
          <div
139 
            className="conversation-text"
140 
            data-toggle="tooltip"
141 
            data-placement="left"
142 
            data-html="true"
143 
          >
144 
            <div className="ctext-wrap">
145 
              {senderName(message)}
146 
              <StyledChatImgMessage>
147 
                <div className="chat_image_container">
148 
                  <img src={message.m} alt="chat_image" />
149 
                </div>
150 
                {message.u === 1 ? (
151 
                  ""
152 
                ) : (
153 
                  <a
154 
                    href={message.m}
155 
                    target="_blank"
156 
                    className="chat_image__download_button"
157 
                  >
158 
                    <i className="fa ti-arrow-circle-down"></i>
159 
                  </a>
160 
                )}
161 
              </StyledChatImgMessage>
162 
              <br />
163 
              <i className="text-right">{message.time}</i>
164 
            </div>
165 
          </div>
166 
        </li>
167 
      );
168 
    case "video":
169 
      return (
170 
        <li
171 
          key={message.id}
1189 stevensc 172 
          className={`clearfix ${message.u === 1 ? "odd" : ""
173 
            } m-t-10 conversers${message.u}`}
1 www 174 
        >
175 
          <div
176 
            className="conversation-text"
177 
            data-toggle="tooltip"
178 
            data-placement="left"
179 
            data-html="true"
180 
          >
181 
            <div className="ctext-wrap">
182 
              {senderName(message)}
183 
              <StyledChatImgMessage>
184 
                <div className="chat_image_container">
185 
                  <video src={message.m} preload="none" controls></video>
186 
                </div>
187 
                {message.u === 1 ? (
188 
                  ""
189 
                ) : (
190 
                  <a
191 
                    href={message.m}
192 
                    target="_blank"
193 
                    className="chat_image__download_button"
194 
                  >
195 
                    <i className="fa ti-arrow-circle-down"></i>
196 
                  </a>
197 
                )}
198 
              </StyledChatImgMessage>
199 
              <br />
200 
              <i className="text-right">{message.time}</i>
201 
            </div>
202 
          </div>
203 
        </li>
204 
      );
205 
    case "document":
206 
      return (
207 
        <li
208 
          key={message.id}
1189 stevensc 209 
          className={`clearfix ${message.u === 1 ? "odd" : ""
210 
            } m-t-10 conversers${message.u}`}
1 www 211 
        >
212 
          <div
213 
            className="conversation-text"
214 
            data-toggle="tooltip"
215 
            data-placement="left"
216 
            data-html="true"
217 
          >
218 
            <div className="ctext-wrap">
219 
              {senderName(message)}
220 
              <StyledChatImgMessage>
221 
                <div className="chat_image_container">
222 
                  <img
223 
                    className="pdf"
224 
                    src="/storage/type/default/filename/pdf.png"
225 
                    alt="pdf"
226 
                  />
227 
                </div>
228 
                {message.u === 1 ? (
229 
                  ""
230 
                ) : (
231 
                  <a
232 
                    href={message.m}
233 
                    target="_blank"
234 
                    className="chat_image__download_button"
235 
                  >
236 
                    <i className="fa ti-arrow-circle-down"></i>
237 
                  </a>
238 
                )}
239 
              </StyledChatImgMessage>
240 
              <br />
241 
              <i className="text-right">{message.time}</i>
242 
            </div>
243 
          </div>
244 
        </li>
245 
      );
246 
    default:
247 
      return (
248 
        <li
249 
          key={message.id}
1189 stevensc 250 
          className={`clearfix ${message.u === 1 ? "odd" : ""
251 
            } m-t-10 conversers${message.u}`}
1 www 252 
        >
253 
          <div
254 
            className="conversation-text"
255 
            data-toggle="tooltip"
256 
            data-placement="left"
257 
            data-html="true"
258 
          >
259 
            <div className="ctext-wrap">
260 
              {senderName(message)}
261 
              <p className="">
262 
                {message.mtype}
263 
                <br />
264 
                <i className="text-right">{message.time}</i>
265 
              </p>
266 
            </div>
267 
          </div>
268 
        </li>
269 
      );
270 
  }
271 
};
272 
 
273 
export default MessageTemplate;