Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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