Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

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