Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6911 | Rev 6922 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 6911 Rev 6921
Línea 14... Línea 14...
14 
import Options from '../UI/Option'
 14 
import Options from '../UI/Option'
15 
import Emojione from './emojione/Emojione'
 15 
import Emojione from './emojione/Emojione'
16 
import FileModal from '../modals/FileModal'
 16 
import FileModal from '../modals/FileModal'
Línea 17... Línea 17...
17 
 
 17 
 
18 
const StyledChatContainer = styled.div`
 18 
const StyledChatContainer = styled.div`
19 
  background-color: $bg-color;
 19 
  background-color: var(--bg-color);
20 
  border-radius: $border-radius;
 20 
  border-radius: var(--border-radius);
21 
  border: 1px solid $border-primary;
 21 
  border: 1px solid var(--border-primary);
22 
  height: 80vh;
 22 
  height: 80vh;
23 
  display: flex;
 23 
  display: flex;
24 
  flex-direction: column;
 24 
  flex-direction: column;
Línea -... Línea 25...
- 
 
 25 
`
- 
 
 26 
 
- 
 
 27 
const StyledChatHeader = styled.div`
- 
 
 28 
  border-bottom: 1px solid var(--border-primary);
- 
 
 29 
  padding: 1rem 0.5rem;
- 
 
 30 
  position: relative;
- 
 
 31 
  text-align: center;
- 
 
 32 
 
- 
 
 33 
  & > button {
- 
 
 34 
    position: absolute;
- 
 
 35 
    left: 1rem;
- 
 
 36 
    top: 50%;
- 
 
 37 
    transform: translateY(-50%);
- 
 
 38 
    display: none;
- 
 
 39 
  }
- 
 
 40 
`
- 
 
 41 
 
- 
 
 42 
const StyledTitle = styled.h2`
- 
 
 43 
  font-size: 1.5rem;
- 
 
 44 
  font-weight: 500;
- 
 
 45 
  width: fit-content;
- 
 
 46 
  max-width: 30ch;
- 
 
 47 
  text-align: center;
- 
 
 48 
`
- 
 
 49 
 
- 
 
 50 
const StyledMessageContainer = styled.div`
- 
 
 51 
  display: flex;
- 
 
 52 
  flex-flow: column-reverse;
- 
 
 53 
  height: -webkit-fill-available;
- 
 
 54 
  padding: 0.5rem 0;
- 
 
 55 
  overflow: auto;
- 
 
 56 
`
- 
 
 57 
 
- 
 
 58 
const StyledMessageList = styled.div`
- 
 
 59 
  display: flex;
- 
 
 60 
  flex-direction: column;
- 
 
 61 
  gap: 0.5rem;
25 
`
 62 
`
26 
 
 63 
 
27 
const Chat = ({ children }) => {
 64 
const Chat = ({ children }) => {
Línea 28... Línea 65...
28 
  return <StyledChatContainer>{children}</StyledChatContainer>
 65 
  return <StyledChatContainer>{children}</StyledChatContainer>
29 
}
 66 
}
30 
 
 67 
 
31 
const Header = ({ children, options, onClose }) => {
 68 
const Header = ({ children, options, onClose }) => {
32 
  return (
 69 
  return (
33 
    <div className="chat_header">
 70 
    <StyledChatHeader>
34 
      <IconButton onClick={onClose}>
 71 
      <IconButton onClick={onClose}>
35 
        <ArrowBackIcon />
 72 
        <ArrowBackIcon />
36 
      </IconButton>
 73 
      </IconButton>
37 
      {children}
 74 
      {children}
38 
      {options && <Options options={options} />}
 75 
      {options && <Options options={options} />}
Línea 39... Línea 76...
39 
    </div>
 76 
    </StyledChatHeader>
40 
  )
 77 
  )
41 
}
 78 
}
42 
 
 79 
 
Línea 43... Línea 80...
43 
const Title = ({ title, url }) => {
 80 
const Title = ({ children, url }) => {
44 
  if (!url) {
 81 
  if (!url) {
45 
    return <h2>{title}</h2>
 82 
    return <StyledTitle>{children}</StyledTitle>
46 
  }
 83 
  }
47 
 
 84 
 
48 
  return (
 85 
  return (
Línea 49... Línea 86...
49 
    <a href={url}>
 86 
    <a href={url} style={{ width: 'fit-content' }}>
Línea 58... Línea 95...
58 
  currentPage,
 95 
  currentPage,
59 
  onPagination,
 96 
  onPagination,
60 
  scrollRef,
 97 
  scrollRef,
61 
  loading,
 98 
  loading,
62 
}) => {
 99 
}) => {
63 
  const loadMoreEl = useRef()
 100 
  const loadMoreEl = useRef(null)
Línea 64... Línea 101...
64 
 
 101 
 
65 
  useEffect(() => {
 102 
  useEffect(() => {
Línea 66... Línea 103...
66 
    const observer = new IntersectionObserver(onPagination)
 103 
    const observer = new IntersectionObserver(onPagination)
Línea 73... Línea 110...
73 
      observer.disconnect()
 110 
      observer.disconnect()
74 
    }
 111 
    }
75 
  }, [messages])
 112 
  }, [messages])
Línea 76... Línea 113...
76 
 
 113 
 
77 
  return (
 114 
  return (
78 
    <div className="messages_container" ref={scrollRef}>
 115 
    <StyledMessageContainer ref={scrollRef}>
79 
      <div className="message_wrapper">
 116 
      <StyledMessageList>
80 
        {pages < currentPage && !loading && <p ref={loadMoreEl}>Cargando...</p>}
 117 
        {pages > currentPage && !loading && <p ref={loadMoreEl}>Cargando...</p>}
81 
        {messages.map((message) => (
 118 
        {messages.map((message) => (
82 
          <List.Message message={message} key={message.id} />
 119 
          <List.Message message={message} key={message.id} />
83 
        ))}
 120 
        ))}
84 
      </div>
 121 
      </StyledMessageList>
85 
    </div>
 122 
    </StyledMessageContainer>
86 
  )
 123 
  )
Línea 87... Línea 124...
87 
}
 124 
}
88 
 
 125