Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1306 | Rev 1332 | 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 
 
1331 stevensc 58 
  const handleCopy = () => {
59 
    navigator.clipboard.writeText(`${message.m}`)
60 
  }
61 
 
1 www 62 
  switch (message.mtype) {
63 
    case "text":
64 
      return (
65 
        <li
66 
          key={message.id}
1305 stevensc 67 
          className={`clearfix ${message.u === 1 ? "odd" : ""} m-t-10 conversers${message.u}`}
1 www 68 
        >
1305 stevensc 69 
          <div className="conversation-text">
70 
            <div className="conversation_container">
1198 stevensc 71 
              {
1305 stevensc 72 
                responseMessage
1198 stevensc 73 
                &&
1306 stevensc 74 
                <ResponseMessageContainer isRight={message.u === 1}>
1305 stevensc 75 
                  <span>{`Respondiendo a ${responseMessage.user_name}`}</span>
76 
                  <div className="ctext-wrap">
77 
                    {senderName(responseMessage)}
78 
                    <p className="">
79 
                      {parse(emojione.shortnameToImage(responseMessage.m))}
80 
                      <br />
81 
                    </p>
82 
                  </div>
83 
                </ResponseMessageContainer>
84 
              }
85 
              <div className="conversation-text">
86 
                <div className="ctext-wrap">
87 
                  {senderName(message)}
88 
                  <p className="">
89 
                    {parse(emojione.shortnameToImage(message.m))}
90 
                    <br />
91 
                    <i className="text-right">{message.time}</i>
92 
                  </p>
93 
                  {
94 
                    isLiked
95 
                    &&
96 
                    <i
97 
                      className="fas fa-heart"
98 
                      style={{
99 
                        color: '#0961bf',
100 
                        position: 'absolute',
101 
                        top: '87%',
102 
                        left: '85%'
103 
                      }}
104 
                    />
105 
                  }
106 
                </div>
1198 stevensc 107 
                <i
1305 stevensc 108 
                  className="la la-ellipsis-v icon"
109 
                  style={{ position: 'relative' }}
110 
                  onClick={() => setIsShow(!isShow)}
1298 stevensc 111 
                >
1305 stevensc 112 
                </i>
113 
                {
114 
                  isShow
115 
                  &&
116 
                  <div
117 
                    className="display-reactions"
118 
                  >
119 
                    <LikeButton
120 
                      onClick={handleLike}
121 
                    />
122 
                    <button
123 
                      type="button"
124 
                      onClick={() => setResponseMessage(message)}
125 
                    >
126 
                      <i className="fa fa-reply"></i>
127 
                    </button>
1331 stevensc 128 
                    <button
129 
                      type="button"
130 
                      onClick={() => handleCopy(message)}
131 
                    >
132 
                      <i className="fa fa-copy"></i>
133 
                    </button>
1305 stevensc 134 
                  </div>
135 
                }
1197 stevensc 136 
              </div>
1305 stevensc 137 
            </div>
1 www 138 
          </div>
139 
        </li>
140 
      );
141 
    case "image":
142 
      return (
143 
        <li
144 
          key={message.id}
1189 stevensc 145 
          className={`clearfix ${message.u === 1 ? "odd" : ""
146 
            } m-t-10 conversers${message.u}`}
1 www 147 
        >
148 
          <div
149 
            className="conversation-text"
150 
            data-toggle="tooltip"
151 
            data-placement="left"
152 
            data-html="true"
153 
          >
154 
            <div className="ctext-wrap">
155 
              {senderName(message)}
156 
              <StyledChatImgMessage>
157 
                <div className="chat_image_container">
158 
                  <img src={message.m} alt="chat_image" />
159 
                </div>
160 
                {message.u === 1 ? (
161 
                  ""
162 
                ) : (
163 
                  <a
164 
                    href={message.m}
165 
                    target="_blank"
166 
                    className="chat_image__download_button"
167 
                  >
168 
                    <i className="fa ti-arrow-circle-down"></i>
169 
                  </a>
170 
                )}
171 
              </StyledChatImgMessage>
172 
              <br />
173 
              <i className="text-right">{message.time}</i>
174 
            </div>
175 
          </div>
176 
        </li>
177 
      );
178 
    case "video":
179 
      return (
180 
        <li
181 
          key={message.id}
1189 stevensc 182 
          className={`clearfix ${message.u === 1 ? "odd" : ""
183 
            } m-t-10 conversers${message.u}`}
1 www 184 
        >
185 
          <div
186 
            className="conversation-text"
187 
            data-toggle="tooltip"
188 
            data-placement="left"
189 
            data-html="true"
190 
          >
191 
            <div className="ctext-wrap">
192 
              {senderName(message)}
193 
              <StyledChatImgMessage>
194 
                <div className="chat_image_container">
195 
                  <video src={message.m} preload="none" controls></video>
196 
                </div>
197 
                {message.u === 1 ? (
198 
                  ""
199 
                ) : (
200 
                  <a
201 
                    href={message.m}
202 
                    target="_blank"
203 
                    className="chat_image__download_button"
204 
                  >
205 
                    <i className="fa ti-arrow-circle-down"></i>
206 
                  </a>
207 
                )}
208 
              </StyledChatImgMessage>
209 
              <br />
210 
              <i className="text-right">{message.time}</i>
211 
            </div>
212 
          </div>
213 
        </li>
214 
      );
215 
    case "document":
216 
      return (
217 
        <li
218 
          key={message.id}
1189 stevensc 219 
          className={`clearfix ${message.u === 1 ? "odd" : ""
220 
            } m-t-10 conversers${message.u}`}
1 www 221 
        >
222 
          <div
223 
            className="conversation-text"
224 
            data-toggle="tooltip"
225 
            data-placement="left"
226 
            data-html="true"
227 
          >
228 
            <div className="ctext-wrap">
229 
              {senderName(message)}
230 
              <StyledChatImgMessage>
231 
                <div className="chat_image_container">
232 
                  <img
233 
                    className="pdf"
234 
                    src="/storage/type/default/filename/pdf.png"
235 
                    alt="pdf"
236 
                  />
237 
                </div>
238 
                {message.u === 1 ? (
239 
                  ""
240 
                ) : (
241 
                  <a
242 
                    href={message.m}
243 
                    target="_blank"
244 
                    className="chat_image__download_button"
245 
                  >
246 
                    <i className="fa ti-arrow-circle-down"></i>
247 
                  </a>
248 
                )}
249 
              </StyledChatImgMessage>
250 
              <br />
251 
              <i className="text-right">{message.time}</i>
252 
            </div>
253 
          </div>
254 
        </li>
255 
      );
256 
    default:
257 
      return (
258 
        <li
259 
          key={message.id}
1189 stevensc 260 
          className={`clearfix ${message.u === 1 ? "odd" : ""
261 
            } m-t-10 conversers${message.u}`}
1 www 262 
        >
263 
          <div
264 
            className="conversation-text"
265 
            data-toggle="tooltip"
266 
            data-placement="left"
267 
            data-html="true"
268 
          >
269 
            <div className="ctext-wrap">
270 
              {senderName(message)}
271 
              <p className="">
272 
                {message.mtype}
273 
                <br />
274 
                <i className="text-right">{message.time}</i>
275 
              </p>
276 
            </div>
277 
          </div>
278 
        </li>
279 
      );
280 
  }
281 
};
282 
 
283 
export default MessageTemplate;