Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3610 stevensc 1 
import React from 'react';
2 
import { useSelector } from 'react-redux';
3 
import styled, { css } from 'styled-components';
4 
 
5 
import EmptySection from '../../../components/UI/EmptySection';
6 
 
7 
const ContactsContainer = styled.div`
8 
  background-color: var(--bg-color);
9 
  border-radius: var(--border-radius);
10 
  border: 1px solid var(--border-primary);
11 
  display: flex;
12 
  flex-direction: column;
13 
  height: 100%;
14 
  gap: 0.5rem;
15 
  padding: 1rem 1rem !important;
16 
  max-height: 80vh;
17 
  flex-grow: 1;
18 
`;
19 
 
20 
const ContactHeader = styled.div`
21 
  position: relative;
22 
 
23 
  h1 {
24 
    font-weight: 600;
25 
    font-size: 1.3rem;
26 
  }
27 
`;
28 
 
29 
const ContactList = styled.ul`
30 
  display: flex;
31 
  flex-direction: column;
32 
  overflow: auto;
33 
`;
34 
 
35 
const ContactItem = styled.div`
36 
  align-items: center;
37 
  display: flex;
38 
  height: auto;
39 
  padding: 0.5rem 1rem;
40 
  gap: 0.5rem;
41 
  cursor: pointer;
42 
  border-radius: var(--border-radius);
43 
 
44 
  ${(props) =>
45 
    props.current &&
46 
    css`
47 
      background-color: #42b72a21;
48 
    `}
49 
`;
50 
 
51 
const ContactInfo = styled.div`
52 
  display: flex;
53 
  flex-direction: column;
54 
 
55 
  span {
56 
    font-size: 0.9rem;
57 
    font-weight: bold;
58 
    white-space: nowrap;
59 
    overflow: hidden;
60 
    text-overflow: ellipsis;
61 
    max-width: 20ch;
62 
  }
63 
`;
64 
 
65 
const Contacts = ({ children }) => {
66 
  return <ContactsContainer>{children}</ContactsContainer>;
67 
};
68 
 
69 
const Header = ({ children }) => {
70 
  return <ContactHeader>{children}</ContactHeader>;
71 
};
72 
 
73 
const List = ({ contacts = [], onChange = () => null, currentConversation }) => {
74 
  const labels = useSelector(({ intl }) => intl.labels);
75 
 
76 
  return (
77 
    <ContactList>
78 
      {!contacts.length ? (
79 
        <EmptySection message={labels.datatable_szerorecords} />
80 
      ) : (
81 
        contacts.map((contact) => {
82 
          return (
83 
            <li key={contact.id || contact.uuid}>
84 
              <List.Item contact={contact} onClick={onChange} />
85 
            </li>
86 
          );
87 
        })
88 
      )}
89 
    </ContactList>
90 
  );
91 
};
92 
 
93 
const Item = ({ contact, onClick, isCurrent }) => {
94 
  return (
95 
    <ContactItem onClick={() => onClick(contact)} current={isCurrent}>
96 
      <ContactInfo>
97 
        <span>{contact.jid}</span>
98 
        <span>{contact.name}</span>
99 
      </ContactInfo>
100 
    </ContactItem>
101 
  );
102 
};
103 
 
104 
List.Item = Item;
105 
Contacts.List = List;
106 
Contacts.Header = Header;
107 
 
108 
export default Contacts;